11/* resetting image rules that crept in from bootstrap */
2- svg , img {
2+ svg ,
3+ img {
34 vertical-align : inherit !important ;
45 height : auto;
56}
67
78/* resetting code rules that came from bootstrap */
89code {
9- color : inherit !important ;
10- word-break : inherit !important ;
10+ color : inherit !important ;
11+ word-break : inherit !important ;
1112}
1213
1314@media only percy {
@@ -18,74 +19,81 @@ code {
1819
1920.list-cards {
2021 flex-flow : row wrap;
21- max-width : 100% ;
2222 padding : 1em 0 ;
2323 display : flex;
2424 justify-content : space-evenly;
2525 list-style : none;
2626 margin : 2em auto;
2727 max-width : 100% ;
2828}
29+
2930.list-cards .list-item-card {
3031 background : # e04e39 ;
3132 position : relative;
3233 margin : 1em ;
3334 border-radius : 3px ;
34- box-shadow : 0 2px 2px 1px rgba ( 0 , 0 , 0 , 0.2 );
35+ box-shadow : 0 2px 2px 1px rgb ( 0 0 0 / 20 % );
3536 transition : 0.6s ease-in-out;
36- transition-property : box-shadow, -webkit-transform;
37+ transition-property :
38+ box-shadow,
39+ -webkit-transform;
3740 transition-property : transform, box-shadow;
38- transition-property : transform, box-shadow, -webkit-transform;
39- -webkit-transform : scale (1 );
40- transform : scale (1 );
41+ transition-property :
42+ transform,
43+ box-shadow,
44+ -webkit-transform;
45+ transform : scale (1 );
4146 overflow : hidden;
4247 padding : 0 ;
4348 min-width : 250px ;
4449 max-width : 100% ;
4550}
46- @media screen and (min-width : 768px ) {
51+
52+ @media screen and (width > = 768px) {
4753 .list-cards .list-item-card {
4854 min-width : 250px ;
4955 max-width : 25% ;
5056 }
5157}
58+
5259.list-cards .list-item-card : hover {
53- -webkit-transform : scale (1.1 );
54- transform : scale (1.1 );
55- box-shadow : 0 10px 30px 5px rgba (0 , 0 , 0 , 0.3 );
60+ transform : scale (1.1 );
61+ box-shadow : 0 10px 30px 5px rgb (0 0 0 / 30% );
5662}
63+
5764.list-cards .list-item-card .shape {
5865 position : absolute;
5966 z-index : 0 ;
60- border : 2px solid # ffffff ;
67+ border : 2px solid # fff ;
6168}
69+
6270.list-cards .list-item-card .shape--dark {
6371 right : -5% ;
6472 top : -68% ;
6573 width : 50% ;
6674 padding-bottom : 100% ;
67- -webkit-transform : rotate (-49deg );
68- transform : rotate (-49deg );
75+ transform : rotate (-49deg );
6976 background-color : # 1f1f1f ;
7077}
78+
7179.list-cards .list-item-card .shape--accent {
7280 top : -44% ;
7381 left : -30% ;
7482 width : 100% ;
7583 padding-bottom : 50% ;
76- -webkit-transform : rotate (-30deg );
77- transform : rotate (-30deg );
78- background-color : # 999999 ;
84+ transform : rotate (-30deg );
85+ background-color : # 999 ;
7986}
87+
8088.list-cards .list-item-card .shape--light {
8189 bottom : -16% ;
8290 left : -23% ;
8391 width : 100% ;
8492 padding-top : 25% ;
85- -webkit-transform : rotate (15deg );
86- transform : rotate (15deg );
93+ transform : rotate (15deg );
8794 background-color : # 454545 ;
8895}
96+
8997.list-cards .list-item-card a {
9098 -webkit-font-smoothing : antialiased;
9199 font-size : 24px ;
@@ -108,31 +116,36 @@ code {
108116/* Fix diff formatting */
109117
110118code [data-diff ] .diff-deletion {
111- background-color : rgba (144 , 84 , 84 , .7 );
119+ background-color : rgb (144 84 84 / 70 % );
112120}
121+
113122code [data-diff ] .diff-insertion {
114- background-color : rgba (93 , 125 , 93 , .5 );
123+ background-color : rgb (93 125 93 / 50 % );
115124}
125+
116126code [data-diff ] .diff-deletion .diff-deletion ,
117127code [data-diff ] .diff-deletion .diff-insertion ,
118128code [data-diff ] .diff-insertion .diff-deletion ,
119129code [data-diff ] .diff-insertion .diff-insertion {
120130 background-color : transparent;
121131}
132+
122133code [data-diff ] .diff-deletion > .diff-operator ,
123134code [data-diff ] .diff-insertion > .diff-operator {
124135 display : none;
125136}
137+
126138code [data-diff ] .diff-deletion ::before {
127139 content : "-" ;
128140 margin-left : -1ch ;
129- background-color : rgba (144 , 84 , 84 , .7 );
141+ background-color : rgb (144 84 84 / 70 % );
130142 color : # f8f8f2 ;
131143}
144+
132145code [data-diff ] .diff-insertion ::before {
133146 content : "+" ;
134147 margin-left : -1ch ;
135- background-color : rgba (93 , 125 , 93 , .5 );
148+ background-color : rgb (93 125 93 / 50 % );
136149 color : # f8f8f2 ;
137150}
138151
@@ -147,31 +160,41 @@ code[data-diff] .diff-insertion::before {
147160.chapter .cta {
148161 max-width : 95% ;
149162}
163+
150164.chapter .cta .cta-note {
151165 width : 100% ;
152166}
167+
153168.chapter .cta .cta-note .cta-note-body .cta-note-message p {
154169 font-size : 95% ;
155170 line-height : 1.75em ;
156171 margin : 0.5em 0 ;
157172}
173+
158174.chapter .cta-note-body code {
159175 padding : 0 ;
160176 background-color : transparent;
161177}
162- @media screen and (min-width : 768px ) {
178+
179+ @media screen and (width > = 768px) {
163180 .chapter .cta .cta-note img {
164181 padding-bottom : 10px ;
165182 }
166183}
167184
168185/* Make code blocks denser */
169186
170- .chapter pre , .chapter pre [class *= language- ],
171- .chapter code , .chapter code [class *= language- ] {
187+ .chapter pre ,
188+ .chapter pre [class *= "language-" ],
189+ .chapter code ,
190+ .chapter code [class *= "language-" ] {
172191 line-height : 1.6 ;
173192}
174- .chapter .filename , .chapter pre , .chapter pre [class *= language- ], .filename ::after {
193+
194+ .chapter .filename ,
195+ .chapter pre ,
196+ .chapter pre [class *= "language-" ],
197+ .filename ::after {
175198 font-size : 85% ;
176199}
177200
@@ -184,6 +207,7 @@ code[data-diff] .diff-insertion::before {
184207 padding-top : var (--spacing-1 );
185208 padding-bottom : var (--spacing-1 );
186209}
210+
187211.chapter .filename + pre code {
188212 padding : var (--spacing-1 ) 0 ;
189213}
@@ -197,7 +221,7 @@ code[data-diff] .diff-insertion::before {
197221li .toc-heading .toc-level-0 {
198222 font-size : 0.8em ;
199223 text-transform : uppercase;
200- color : rgb (155 , 41 , 24 , 0.76 );
224+ color : rgb (155 41 24 / 76 % );
201225 font-weight : bold;
202226 margin : 2em 0 1em ;
203227}
0 commit comments