1
- /*! HTML5 Boilerplate v7.1 .0 | MIT License | https://html5boilerplate.com/ */
1
+ /*! HTML5 Boilerplate v7.2 .0 | MIT License | https://html5boilerplate.com/ */
2
2
3
- /* main.css 2 .0.0 | MIT License | https://github.com/h5bp/main.css#readme */
3
+ /* main.css 1 .0.0 | MIT License | https://github.com/h5bp/main.css#readme */
4
4
/*
5
5
* What follows is the result of much research on cross-browser styling.
6
6
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
7
7
* Kroc Camen, and the H5BP dev community and team.
8
8
*/
9
9
10
+
10
11
/* ==========================================================================
11
12
Base styles: opinionated defaults
12
13
========================================================================== */
13
14
14
- html {
15
- color : # 222 ;
16
- font-size : 1em ;
17
- line-height : 1.4 ;
15
+ html {
16
+ color : # 222 ;
17
+ font-size : 1em ;
18
+ line-height : 1.4 ;
18
19
}
19
20
20
21
/*
@@ -28,26 +29,26 @@ html {
28
29
*/
29
30
30
31
::-moz-selection {
31
- background : # b3d4fc ;
32
- text-shadow : none;
32
+ background : # b3d4fc ;
33
+ text-shadow : none;
33
34
}
34
35
35
36
::selection {
36
- background : # b3d4fc ;
37
- text-shadow : none;
37
+ background : # b3d4fc ;
38
+ text-shadow : none;
38
39
}
39
40
40
41
/*
41
42
* A better looking default horizontal rule
42
43
*/
43
44
44
45
hr {
45
- display : block;
46
- height : 1px ;
47
- border : 0 ;
48
- border-top : 1px solid # ccc ;
49
- margin : 1em 0 ;
50
- padding : 0 ;
46
+ display : block;
47
+ height : 1px ;
48
+ border : 0 ;
49
+ border-top : 1px solid # ccc ;
50
+ margin : 1em 0 ;
51
+ padding : 0 ;
51
52
}
52
53
53
54
/*
@@ -62,51 +63,69 @@ iframe,
62
63
img ,
63
64
svg ,
64
65
video {
65
- vertical-align : middle;
66
+ vertical-align : middle;
66
67
}
67
68
68
69
/*
69
70
* Remove default fieldset styles.
70
71
*/
71
72
72
73
fieldset {
73
- border : 0 ;
74
- margin : 0 ;
75
- padding : 0 ;
74
+ border : 0 ;
75
+ margin : 0 ;
76
+ padding : 0 ;
76
77
}
77
78
78
79
/*
79
80
* Allow only vertical resizing of textareas.
80
81
*/
81
82
82
83
textarea {
83
- resize : vertical;
84
+ resize : vertical;
84
85
}
85
86
86
87
/* ==========================================================================
87
88
Browser Upgrade Prompt
88
89
========================================================================== */
89
90
90
91
.browserupgrade {
91
- margin : 0.2em 0 ;
92
- background : # ccc ;
93
- color : # 000 ;
94
- padding : 0.2em 0 ;
92
+ margin : 0.2em 0 ;
93
+ background : # ccc ;
94
+ color : # 000 ;
95
+ padding : 0.2em 0 ;
95
96
}
96
97
97
- /* ==========================================================================
98
+
99
+
100
+
101
+ /* ==========================================================================
98
102
Author's custom styles
99
103
========================================================================== */
100
104
101
- /* ==========================================================================
105
+
106
+
107
+
108
+
109
+
110
+
111
+
112
+
113
+
114
+
115
+
116
+
117
+
118
+
119
+
120
+ /* ==========================================================================
102
121
Helper classes
103
122
========================================================================== */
104
123
105
124
/*
106
125
* Hide visually and from screen readers
107
126
*/
108
127
109
- .hidden {
128
+ .hidden {
110
129
display : none !important ;
111
130
}
112
131
@@ -119,34 +138,33 @@ textarea {
119
138
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
120
139
*/
121
140
122
- .sr-only {
141
+ .visuallyhidden {
123
142
border : 0 ;
124
- clip : rect (0 , 0 , 0 , 0 );
143
+ clip : rect (0 0 0 0 );
125
144
height : 1px ;
126
145
margin : -1px ;
127
146
overflow : hidden;
128
147
padding : 0 ;
129
148
position : absolute;
130
- white-space : nowrap;
131
149
width : 1px ;
132
- /* 1 */
150
+ white-space : nowrap; /* 1 */
133
151
}
134
152
135
153
/*
136
- * Extends the .sr-only class to allow the element
154
+ * Extends the .visuallyhidden class to allow the element
137
155
* to be focusable when navigated to via the keyboard:
138
156
* https://www.drupal.org/node/897638
139
157
*/
140
158
141
- .sr-only .focusable : active ,
142
- .sr-only .focusable : focus {
159
+ .visuallyhidden .focusable : active ,
160
+ .visuallyhidden .focusable : focus {
143
161
clip : auto;
144
162
height : auto;
145
163
margin : 0 ;
146
164
overflow : visible;
147
165
position : static;
148
- white-space : inherit;
149
166
width : auto;
167
+ white-space : inherit;
150
168
}
151
169
152
170
/*
@@ -171,96 +189,107 @@ textarea {
171
189
172
190
.clearfix : before ,
173
191
.clearfix : after {
174
- content : " " ;
175
- /* 1 */
176
- display : table;
177
- /* 2 */
192
+ content : " " ; /* 1 */
193
+ display : table; /* 2 */
178
194
}
179
195
180
196
.clearfix : after {
181
197
clear : both;
182
198
}
183
199
200
+
184
201
/* ==========================================================================
185
202
EXAMPLE Media Queries for Responsive Design.
186
203
These examples override the primary ('mobile first') styles.
187
204
Modify as content requires.
188
205
========================================================================== */
189
206
190
- @media only screen and (min-width : 35em ) {
191
- /* Style adjustments for viewports that meet the condition */
207
+ @media only screen and (min-width : 35em ) {
208
+ /* Style adjustments for viewports that meet the condition */
192
209
}
193
210
194
211
@media print,
195
- (-webkit-min-device-pixel-ratio : 1.25 ),
196
- (min-resolution : 1.25dppx ),
197
- (min-resolution : 120dpi ) {
198
- /* Style adjustments for high resolution devices */
212
+ (-webkit-min-device-pixel-ratio : 1.25 ),
213
+ (min-resolution : 1.25dppx ),
214
+ (min-resolution : 120dpi ) {
215
+ /* Style adjustments for high resolution devices */
199
216
}
200
217
218
+
201
219
/* ==========================================================================
202
220
Print styles.
203
221
Inlined to avoid the additional HTTP request:
204
222
https://www.phpied.com/delay-loading-your-print-css/
205
223
========================================================================== */
206
224
207
- @media print {
208
- * ,
209
- * : before ,
210
- * : after {
211
- background : transparent !important ;
212
- color : # 000 !important ;
213
- /* Black prints faster */
214
- -webkit-box-shadow : none !important ;
215
- box-shadow : none !important ;
216
- text-shadow : none !important ;
217
- }
218
- a ,
219
- a : visited {
220
- text-decoration : underline;
221
- }
222
- a [href ]: after {
223
- content : " (" attr (href) ")" ;
224
- }
225
- abbr [title ]: after {
226
- content : " (" attr (title) ")" ;
227
- }
228
- /*
225
+ @media print {
226
+ * ,
227
+ * : before ,
228
+ * : after {
229
+ background : transparent !important ;
230
+ color : # 000 !important ; /* Black prints faster */
231
+ -webkit-box-shadow : none !important ;
232
+ box-shadow : none !important ;
233
+ text-shadow : none !important ;
234
+ }
235
+
236
+ a ,
237
+ a : visited {
238
+ text-decoration : underline;
239
+ }
240
+
241
+ a [href ]: after {
242
+ content : " (" attr (href) ")" ;
243
+ }
244
+
245
+ abbr [title ]: after {
246
+ content : " (" attr (title) ")" ;
247
+ }
248
+
249
+ /*
229
250
* Don't show links that are fragment identifiers,
230
251
* or use the `javascript:` pseudo protocol
231
252
*/
232
- a [href ^= "#" ]: after ,
233
- a [href ^= "javascript:" ]: after {
234
- content : "" ;
235
- }
236
- pre {
237
- white-space : pre-wrap !important ;
238
- }
239
- pre ,
240
- blockquote {
241
- border : 1px solid # 999 ;
242
- page-break-inside : avoid;
243
- }
244
- /*
253
+
254
+ a [href ^= "#" ]: after ,
255
+ a [href ^= "javascript:" ]: after {
256
+ content : "" ;
257
+ }
258
+
259
+ pre {
260
+ white-space : pre-wrap !important ;
261
+ }
262
+ pre ,
263
+ blockquote {
264
+ border : 1px solid # 999 ;
265
+ page-break-inside : avoid;
266
+ }
267
+
268
+ /*
245
269
* Printing Tables:
246
- * https://web.archive.org/web/20180815150934/ http://css-discuss.incutio.com/wiki/Printing_Tables
270
+ * http://css-discuss.incutio.com/wiki/Printing_Tables
247
271
*/
248
- thead {
249
- display : table-header-group;
250
- }
251
- tr ,
252
- img {
253
- page-break-inside : avoid;
254
- }
255
- p ,
256
- h2 ,
257
- h3 {
258
- orphans : 3 ;
259
- widows : 3 ;
260
- }
261
- h2 ,
262
- h3 {
263
- page-break-after : avoid;
264
- }
272
+
273
+ thead {
274
+ display : table-header-group;
275
+ }
276
+
277
+ tr ,
278
+ img {
279
+ page-break-inside : avoid;
280
+ }
281
+
282
+ p ,
283
+ h2 ,
284
+ h3 {
285
+ orphans : 3 ;
286
+ widows : 3 ;
287
+ }
288
+
289
+ h2 ,
290
+ h3 {
291
+ page-break-after : avoid;
292
+ }
265
293
}
266
294
295
+
0 commit comments