1
1
/* resetting image rules that crept in from bootstrap */
2
- svg , img {
2
+ svg ,
3
+ img {
3
4
vertical-align : inherit !important ;
4
5
height : auto;
5
6
}
6
7
7
8
/* resetting code rules that came from bootstrap */
8
9
code {
9
- color : inherit !important ;
10
- word-break : inherit !important ;
10
+ color : inherit !important ;
11
+ word-break : inherit !important ;
11
12
}
12
13
13
14
@media only percy {
@@ -18,74 +19,81 @@ code {
18
19
19
20
.list-cards {
20
21
flex-flow : row wrap;
21
- max-width : 100% ;
22
22
padding : 1em 0 ;
23
23
display : flex;
24
24
justify-content : space-evenly;
25
25
list-style : none;
26
26
margin : 2em auto;
27
27
max-width : 100% ;
28
28
}
29
+
29
30
.list-cards .list-item-card {
30
31
background : # e04e39 ;
31
32
position : relative;
32
33
margin : 1em ;
33
34
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 % );
35
36
transition : 0.6s ease-in-out;
36
- transition-property : box-shadow, -webkit-transform;
37
+ transition-property :
38
+ box-shadow,
39
+ -webkit-transform;
37
40
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 );
41
46
overflow : hidden;
42
47
padding : 0 ;
43
48
min-width : 250px ;
44
49
max-width : 100% ;
45
50
}
46
- @media screen and (min-width : 768px ) {
51
+
52
+ @media screen and (width > = 768px) {
47
53
.list-cards .list-item-card {
48
54
min-width : 250px ;
49
55
max-width : 25% ;
50
56
}
51
57
}
58
+
52
59
.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% );
56
62
}
63
+
57
64
.list-cards .list-item-card .shape {
58
65
position : absolute;
59
66
z-index : 0 ;
60
- border : 2px solid # ffffff ;
67
+ border : 2px solid # fff ;
61
68
}
69
+
62
70
.list-cards .list-item-card .shape--dark {
63
71
right : -5% ;
64
72
top : -68% ;
65
73
width : 50% ;
66
74
padding-bottom : 100% ;
67
- -webkit-transform : rotate (-49deg );
68
- transform : rotate (-49deg );
75
+ transform : rotate (-49deg );
69
76
background-color : # 1f1f1f ;
70
77
}
78
+
71
79
.list-cards .list-item-card .shape--accent {
72
80
top : -44% ;
73
81
left : -30% ;
74
82
width : 100% ;
75
83
padding-bottom : 50% ;
76
- -webkit-transform : rotate (-30deg );
77
- transform : rotate (-30deg );
78
- background-color : # 999999 ;
84
+ transform : rotate (-30deg );
85
+ background-color : # 999 ;
79
86
}
87
+
80
88
.list-cards .list-item-card .shape--light {
81
89
bottom : -16% ;
82
90
left : -23% ;
83
91
width : 100% ;
84
92
padding-top : 25% ;
85
- -webkit-transform : rotate (15deg );
86
- transform : rotate (15deg );
93
+ transform : rotate (15deg );
87
94
background-color : # 454545 ;
88
95
}
96
+
89
97
.list-cards .list-item-card a {
90
98
-webkit-font-smoothing : antialiased;
91
99
font-size : 24px ;
@@ -108,31 +116,36 @@ code {
108
116
/* Fix diff formatting */
109
117
110
118
code [data-diff ] .diff-deletion {
111
- background-color : rgba (144 , 84 , 84 , .7 );
119
+ background-color : rgb (144 84 84 / 70 % );
112
120
}
121
+
113
122
code [data-diff ] .diff-insertion {
114
- background-color : rgba (93 , 125 , 93 , .5 );
123
+ background-color : rgb (93 125 93 / 50 % );
115
124
}
125
+
116
126
code [data-diff ] .diff-deletion .diff-deletion ,
117
127
code [data-diff ] .diff-deletion .diff-insertion ,
118
128
code [data-diff ] .diff-insertion .diff-deletion ,
119
129
code [data-diff ] .diff-insertion .diff-insertion {
120
130
background-color : transparent;
121
131
}
132
+
122
133
code [data-diff ] .diff-deletion > .diff-operator ,
123
134
code [data-diff ] .diff-insertion > .diff-operator {
124
135
display : none;
125
136
}
137
+
126
138
code [data-diff ] .diff-deletion ::before {
127
139
content : "-" ;
128
140
margin-left : -1ch ;
129
- background-color : rgba (144 , 84 , 84 , .7 );
141
+ background-color : rgb (144 84 84 / 70 % );
130
142
color : # f8f8f2 ;
131
143
}
144
+
132
145
code [data-diff ] .diff-insertion ::before {
133
146
content : "+" ;
134
147
margin-left : -1ch ;
135
- background-color : rgba (93 , 125 , 93 , .5 );
148
+ background-color : rgb (93 125 93 / 50 % );
136
149
color : # f8f8f2 ;
137
150
}
138
151
@@ -147,31 +160,41 @@ code[data-diff] .diff-insertion::before {
147
160
.chapter .cta {
148
161
max-width : 95% ;
149
162
}
163
+
150
164
.chapter .cta .cta-note {
151
165
width : 100% ;
152
166
}
167
+
153
168
.chapter .cta .cta-note .cta-note-body .cta-note-message p {
154
169
font-size : 95% ;
155
170
line-height : 1.75em ;
156
171
margin : 0.5em 0 ;
157
172
}
173
+
158
174
.chapter .cta-note-body code {
159
175
padding : 0 ;
160
176
background-color : transparent;
161
177
}
162
- @media screen and (min-width : 768px ) {
178
+
179
+ @media screen and (width > = 768px) {
163
180
.chapter .cta .cta-note img {
164
181
padding-bottom : 10px ;
165
182
}
166
183
}
167
184
168
185
/* Make code blocks denser */
169
186
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-" ] {
172
191
line-height : 1.6 ;
173
192
}
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 {
175
198
font-size : 85% ;
176
199
}
177
200
@@ -184,6 +207,7 @@ code[data-diff] .diff-insertion::before {
184
207
padding-top : var (--spacing-1 );
185
208
padding-bottom : var (--spacing-1 );
186
209
}
210
+
187
211
.chapter .filename + pre code {
188
212
padding : var (--spacing-1 ) 0 ;
189
213
}
@@ -197,7 +221,7 @@ code[data-diff] .diff-insertion::before {
197
221
li .toc-heading .toc-level-0 {
198
222
font-size : 0.8em ;
199
223
text-transform : uppercase;
200
- color : rgb (155 , 41 , 24 , 0.76 );
224
+ color : rgb (155 41 24 / 76 % );
201
225
font-weight : bold;
202
226
margin : 2em 0 1em ;
203
227
}
0 commit comments