1
1
/* *
2
2
* Reset some basic elements
3
3
*/
4
- body , h1 , h2 , h3 , h4 , h5 , h6 ,
5
- p , blockquote , pre , hr ,
6
- dl , dd , ol , ul , figure {
7
- margin : 0 ;
8
- padding : 0 ;
4
+ body ,
5
+ h1 ,
6
+ h2 ,
7
+ h3 ,
8
+ h4 ,
9
+ h5 ,
10
+ h6 ,
11
+ p ,
12
+ blockquote ,
13
+ pre ,
14
+ hr ,
15
+ dl ,
16
+ dd ,
17
+ ol ,
18
+ ul ,
19
+ figure {
20
+ margin : 0 ;
21
+ padding : 0 ;
9
22
}
10
23
11
- html , body {
12
- width : 100% ;
13
- overflow-x : hidden ;
24
+ html ,
25
+ body {
26
+ width : 100% ;
27
+ overflow-x : hidden ;
14
28
}
15
29
16
-
17
30
/* *
18
31
* Basic styling
19
32
*/
20
33
body {
21
- font-family : $base-font-family ;
22
- font-size : $base-font-size ;
23
- line-height : $base-line-height ;
24
- font-weight : 300 ;
25
- color : $text-color ;
26
- background-color : $background-color ;
27
- -webkit-font-smoothing : antialiased ;
28
- -webkit-text-size-adjust : 100% ;
29
-
30
- @include media-query (768px ) {
31
- font-size : $base-font-size * 0.8 ;
32
- }
34
+ font-family : $base-font-family ;
35
+ font-size : $base-font-size ;
36
+ line-height : $base-line-height ;
37
+ font-weight : 300 ;
38
+ color : $text-color ;
39
+ background-color : $background-color ;
40
+ -webkit-font-smoothing : antialiased ;
41
+ -webkit-text-size-adjust : 100% ;
42
+
43
+ @include media-query (768px ) {
44
+ font-size : $base-font-size * 0.8 ;
45
+ }
33
46
}
34
47
35
-
36
-
37
48
/* *
38
49
* Set `margin-bottom` to maintain vertical rhythm
39
50
*/
40
- h1 , h2 , h3 , h4 , h5 , h6 ,
41
- p , blockquote , pre ,
42
- ul , ol , dl , figure ,
51
+ h1 ,
52
+ h2 ,
53
+ h3 ,
54
+ h4 ,
55
+ h5 ,
56
+ h6 ,
57
+ p ,
58
+ blockquote ,
59
+ pre ,
60
+ ul ,
61
+ ol ,
62
+ dl ,
63
+ figure ,
43
64
%vertical-rhythm {
44
- margin-bottom : $spacing-unit / 2 ;
65
+ margin-bottom : $spacing-unit / 2 ;
45
66
}
46
67
47
68
.t-serif {
48
- font-family : $headline-font-family ;
69
+ font-family : $headline-font-family ;
49
70
}
50
71
.t-serif-italic {
51
- font-family : $headline-font-family ;
52
- font-style : italic ;
72
+ font-family : $headline-font-family ;
73
+ font-style : italic ;
53
74
}
54
75
.t-sans {
55
- font-family : $base-font-family ;
56
- font-weight : 400 ;
76
+ font-family : $base-font-family ;
77
+ font-weight : 400 ;
57
78
}
58
79
.t-sans-bold {
59
- font-family : $base-font-family ;
60
- font-weight : 700 ;
80
+ font-family : $base-font-family ;
81
+ font-weight : 700 ;
61
82
}
62
83
63
84
.t-h5 ,
64
85
h5 {
65
- font-size : $base-font-size ;
86
+ font-size : $base-font-size ;
66
87
}
67
88
68
89
.t-h4 ,
69
90
h4 {
70
- font-size : $base-font-size ;
91
+ font-size : $base-font-size ;
71
92
}
72
93
73
94
.t-h3 ,
74
95
h3 {
75
- font-size : $base-font-size * $font-ratio ;
96
+ font-size : $base-font-size * $font-ratio ;
76
97
}
77
98
78
99
.t-h2 ,
79
100
h2 {
80
- font-size : $base-font-size * $font-ratio * $font-ratio ;
81
- position : relative ;
101
+ font-size : $base-font-size * $font-ratio * $font-ratio ;
102
+ position : relative ;
82
103
}
83
104
84
105
.t-h1 ,
85
106
h1 {
86
- font-size : $base-font-size * $font-ratio * $font-ratio * $font-ratio * $font-ratio ;
107
+ font-size : $base-font-size * $font-ratio * $font-ratio * $font-ratio *
108
+ $font-ratio ;
87
109
}
88
110
89
111
@include media-query (768px ) {
90
- .t-h5 ,
91
- h5 {
92
- font-size : $base-font-size ;
93
- }
94
-
95
- .t-h4 ,
96
- h4 {
97
- font-size : $base-font-size ;
98
- }
99
-
100
- .t-h3 ,
101
- h3 {
102
- font-size : $base-font-size * $small-font-ratio ;
103
- }
104
-
105
- .t-h2 ,
106
- h2 {
107
- font-size : $base-font-size * $small-font-ratio * $small-font-ratio ;
108
- }
109
-
110
- .t-h1 ,
111
- h1 {
112
- font-size : $base-font-size * $small-font-ratio * $small-font-ratio * $small-font-ratio * $small-font-ratio ;
113
- }
112
+ .t-h5 ,
113
+ h5 {
114
+ font-size : $base-font-size ;
115
+ }
114
116
117
+ .t-h4 ,
118
+ h4 {
119
+ font-size : $base-font-size ;
120
+ }
121
+
122
+ .t-h3 ,
123
+ h3 {
124
+ font-size : $base-font-size * $small-font-ratio ;
125
+ }
126
+
127
+ .t-h2 ,
128
+ h2 {
129
+ font-size : $base-font-size * $small-font-ratio * $small-font-ratio ;
130
+ }
131
+
132
+ .t-h1 ,
133
+ h1 {
134
+ font-size : $base-font-size * $small-font-ratio * $small-font-ratio *
135
+ $small-font-ratio * $small-font-ratio ;
136
+ }
115
137
}
116
138
117
-
118
139
.t-lead {
119
- @extend .t-h3 ;
140
+ @extend .t-h3 ;
120
141
}
121
142
122
143
/* *
123
144
* Images
124
145
*/
125
146
img {
126
- max-width : 100% ;
127
- vertical-align : middle ;
147
+ max-width : 100% ;
148
+ vertical-align : middle ;
128
149
}
129
150
130
151
hr {
131
- border-top : 1px solid darken ($white-color , 10% );
132
- border-bottom : none ;
152
+ border-top : 1px solid darken ($white-color , 10% );
153
+ border-bottom : none ;
133
154
}
134
155
135
156
address {
@@ -140,120 +161,109 @@ address {
140
161
* Figures
141
162
*/
142
163
figure > img {
143
- display : block ;
164
+ display : block ;
144
165
}
145
166
146
167
figcaption {
147
- font-size : $small-font-size ;
168
+ font-size : $small-font-size ;
148
169
}
149
170
150
-
151
-
152
171
/* *
153
172
* Lists
154
173
*/
155
- ul , ol {
156
- margin-left : $spacing-unit ;
174
+ ul ,
175
+ ol {
176
+ margin-left : $spacing-unit ;
157
177
}
158
178
159
179
li {
160
- margin-bottom : 0.5em ;
180
+ margin-bottom : 0.5em ;
161
181
162
- > ul ,
163
- > ol {
164
- margin-bottom : 0 ;
165
- }
182
+ > ul ,
183
+ > ol {
184
+ margin-bottom : 0 ;
185
+ }
166
186
}
167
187
168
-
169
-
170
188
/* *
171
189
* Headings
172
190
*/
173
- h1 , h2 , h3 , h4 , h5 , h6 {
174
- font-family : $headline-font-family ;
175
- line-height : 1.2 ;
191
+ h1 ,
192
+ h2 ,
193
+ h3 ,
194
+ h4 ,
195
+ h5 ,
196
+ h6 {
197
+ font-family : $headline-font-family ;
198
+ line-height : 1.2 ;
176
199
}
177
200
178
201
/* *
179
202
* Links
180
203
*/
181
204
182
-
183
-
184
-
185
-
186
205
/* *
187
206
* Blockquotes
188
207
*/
189
208
blockquote {
190
- color : $grey-color ;
191
- padding-left : $spacing-unit / 2 ;
192
- font-size : 1.3em ;
193
- font-style : italic ;
194
- padding : 2em 0 ;
195
- font-family : $headline-font-family ;
196
-
197
- & :before {
198
- content : " \" " ;
199
- font-size : 5em ;
200
- vertical-align : bottom ;
201
- line-height : 0 ;
202
- padding-right : 0.25em ;
203
- opacity : 0.2 ;
204
- }
209
+ color : $grey-color ;
210
+ padding-left : $spacing-unit / 2 ;
211
+ font-size : 1.3em ;
212
+ font-style : italic ;
213
+ padding : 2em 0 ;
214
+ font-family : $headline-font-family ;
215
+
216
+ & :before {
217
+ content : ' " ' ;
218
+ font-size : 5em ;
219
+ vertical-align : bottom ;
220
+ line-height : 0 ;
221
+ padding-right : 0.25em ;
222
+ opacity : 0.2 ;
223
+ }
205
224
}
206
225
207
-
208
-
209
226
/* *
210
227
* Code formatting
211
228
*/
212
229
pre ,
213
230
code {
214
- font-size : 15px ;
215
- border : 1px solid $grey-color-light ;
216
- border-radius : 3px ;
217
- background-color : #eef ;
231
+ font-size : 15px ;
232
+ border : 1px solid $grey-color-light ;
233
+ border-radius : 3px ;
234
+ background-color : #eef ;
218
235
}
219
236
220
237
code {
221
- padding : 1px 5px ;
238
+ padding : 1px 5px ;
222
239
}
223
240
224
241
pre {
225
- padding : 8px 12px ;
226
- overflow-x : scroll ;
227
-
228
- > code {
229
- border : 0 ;
230
- padding-right : 0 ;
231
- padding-left : 0 ;
232
- }
242
+ padding : 8px 12px ;
243
+ overflow-x : scroll ;
244
+
245
+ > code {
246
+ border : 0 ;
247
+ padding-right : 0 ;
248
+ padding-left : 0 ;
249
+ }
233
250
}
234
251
235
-
236
-
237
-
238
-
239
252
/* *
240
253
* Clearfix
241
254
*/
242
255
%clearfix {
243
-
244
- & :after {
245
- content : " " ;
246
- display : table ;
247
- clear : both ;
248
- }
256
+ & :after {
257
+ content : " " ;
258
+ display : table ;
259
+ clear : both ;
260
+ }
249
261
}
250
262
251
-
252
-
253
263
.svg-icon {
254
264
height : 5rem ;
255
265
}
256
266
257
267
.event {
258
- margin : 0 0 1rem 0 ;
268
+ margin : 0 0 1rem 0 ;
259
269
}
0 commit comments