better-minima 0.1.1 → 0.1.2

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,291 +1,291 @@
1
- html {
2
- font-size: $base-font-size;
3
- }
4
-
5
- /**
6
- * Reset some basic elements
7
- */
8
- body, h1, h2, h3, h4, h5, h6,
9
- p, blockquote, pre, hr,
10
- dl, dd, ol, ul, figure {
11
- margin: 0;
12
- padding: 0;
13
-
14
- }
15
-
16
-
17
-
18
- /**
19
- * Basic styling
20
- */
21
- body {
22
- font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
23
- color: $text-color;
24
- background-color: $background-color;
25
- -webkit-text-size-adjust: 100%;
26
- -webkit-font-feature-settings: "kern" 1;
27
- -moz-font-feature-settings: "kern" 1;
28
- -o-font-feature-settings: "kern" 1;
29
- font-feature-settings: "kern" 1;
30
- font-kerning: normal;
31
- display: flex;
32
- min-height: 100vh;
33
- flex-direction: column;
34
- overflow-wrap: break-word;
35
- }
36
-
37
-
38
-
39
- /**
40
- * Set `margin-bottom` to maintain vertical rhythm
41
- */
42
- h1, h2, h3, h4, h5, h6,
43
- p, blockquote, pre,
44
- ul, ol, dl, figure,
45
- %vertical-rhythm {
46
- margin-bottom: $spacing-unit / 2;
47
- }
48
-
49
- hr {
50
- margin-top: $spacing-unit;
51
- margin-bottom: $spacing-unit;
52
- }
53
-
54
- /**
55
- * `main` element
56
- */
57
- main {
58
- display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
59
- }
60
-
61
-
62
-
63
- /**
64
- * Images
65
- */
66
- img {
67
- max-width: 100%;
68
- vertical-align: middle;
69
- }
70
-
71
-
72
-
73
- /**
74
- * Figures
75
- */
76
- figure > img {
77
- display: block;
78
- }
79
-
80
- figcaption {
81
- font-size: $small-font-size;
82
- }
83
-
84
-
85
-
86
- /**
87
- * Lists
88
- */
89
- ul, ol {
90
- margin-left: $spacing-unit;
91
- }
92
-
93
- li {
94
- > ul,
95
- > ol {
96
- margin-bottom: 0;
97
- }
98
- }
99
-
100
-
101
-
102
- /**
103
- * Headings
104
- */
105
- h1, h2, h3, h4, h5, h6 {
106
- font-weight: $base-font-weight;
107
- }
108
-
109
-
110
-
111
- /**
112
- * Links
113
- */
114
- a {
115
- color: $link-base-color;
116
- text-decoration: none;
117
-
118
- &:visited {
119
- color: $link-visited-color;
120
- }
121
-
122
- &:hover {
123
- color: $link-hover-color;
124
- text-decoration: underline;
125
- }
126
-
127
- .social-media-list &:hover {
128
- text-decoration: none;
129
-
130
- .username {
131
- text-decoration: underline;
132
- }
133
- }
134
- }
135
-
136
-
137
- /**
138
- * Blockquotes
139
- */
140
- blockquote {
141
- color: $brand-color;
142
- border-left: 4px solid $border-color-01;
143
- padding-left: $spacing-unit / 2;
144
- @include relative-font-size(1.125);
145
- font-style: italic;
146
-
147
- > :last-child {
148
- margin-bottom: 0;
149
- }
150
-
151
- i, em {
152
- font-style: normal;
153
- }
154
- }
155
-
156
-
157
-
158
- /**
159
- * Code formatting
160
- */
161
- pre,
162
- code {
163
- font-family: $code-font-family;
164
- font-size: 0.9375em;
165
- border: 1px solid $border-color-01;
166
- border-radius: 3px;
167
- background-color: $code-background-color;
168
- }
169
-
170
- code {
171
- padding: 1px 5px;
172
- }
173
-
174
- pre {
175
- padding: 8px 12px;
176
- overflow-x: auto;
177
-
178
- > code {
179
- border: 0;
180
- padding-right: 0;
181
- padding-left: 0;
182
- }
183
- }
184
-
185
- .highlight {
186
- border-radius: 3px;
187
- background: $code-background-color;
188
- @extend %vertical-rhythm;
189
-
190
- .highlighter-rouge & {
191
- background: $code-background-color;
192
- }
193
- }
194
-
195
-
196
-
197
- /**
198
- * Wrapper
199
- */
200
- .wrapper {
201
- max-width: calc(#{$content-width} - (#{$spacing-unit}));
202
- margin-right: auto;
203
- margin-left: auto;
204
- padding-right: $spacing-unit / 2;
205
- padding-left: $spacing-unit / 2;
206
- @extend %clearfix;
207
-
208
- @media screen and (min-width: $on-large) {
209
- max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
210
- padding-right: $spacing-unit;
211
- padding-left: $spacing-unit;
212
- }
213
- }
214
-
215
- .landing-wrapper, footer {
216
- background-color: rgba(0,0,0,0.8);
217
- color: #f5f5f7;
218
- }
219
-
220
- .hero-wrapper {
221
- padding: 41vh 0;
222
- border-bottom: 3px solid #d2d2d7;
223
- }
224
-
225
-
226
- /**
227
- * Clearfix
228
- */
229
- %clearfix:after {
230
- content: "";
231
- display: table;
232
- clear: both;
233
- }
234
-
235
-
236
-
237
- /**
238
- * Icons
239
- */
240
-
241
- .orange {
242
- color: #f66a0a;
243
- }
244
-
245
- .grey {
246
- color: #828282;
247
- }
248
-
249
- .svg-icon {
250
- width: 16px;
251
- height: 16px;
252
- display: inline-block;
253
- fill: currentColor;
254
- padding: 5px 3px 2px 5px;
255
- vertical-align: text-bottom;
256
- }
257
-
258
-
259
- /**
260
- * Tables
261
- */
262
- table {
263
- margin-bottom: $spacing-unit;
264
- width: 100%;
265
- text-align: $table-text-align;
266
- color: $table-text-color;
267
- border-collapse: collapse;
268
- border: 1px solid $table-border-color;
269
- tr {
270
- &:nth-child(even) {
271
- background-color: $table-zebra-color;
272
- }
273
- }
274
- th, td {
275
- padding: ($spacing-unit / 3) ($spacing-unit / 2);
276
- }
277
- th {
278
- background-color: $table-header-bg-color;
279
- border: 1px solid $table-header-border;
280
- }
281
- td {
282
- border: 1px solid $table-border-color;
283
- }
284
-
285
- @include media-query($on-laptop) {
286
- display: block;
287
- overflow-x: auto;
288
- -webkit-overflow-scrolling: touch;
289
- -ms-overflow-style: -ms-autohiding-scrollbar;
290
- }
291
- }
1
+ html {
2
+ font-size: $base-font-size;
3
+ }
4
+
5
+ /**
6
+ * Reset some basic elements
7
+ */
8
+ body, h1, h2, h3, h4, h5, h6,
9
+ p, blockquote, pre, hr,
10
+ dl, dd, ol, ul, figure {
11
+ margin: 0;
12
+ padding: 0;
13
+
14
+ }
15
+
16
+
17
+
18
+ /**
19
+ * Basic styling
20
+ */
21
+ body {
22
+ font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
23
+ color: $text-color;
24
+ background-color: $background-color;
25
+ -webkit-text-size-adjust: 100%;
26
+ -webkit-font-feature-settings: "kern" 1;
27
+ -moz-font-feature-settings: "kern" 1;
28
+ -o-font-feature-settings: "kern" 1;
29
+ font-feature-settings: "kern" 1;
30
+ font-kerning: normal;
31
+ display: flex;
32
+ min-height: 100vh;
33
+ flex-direction: column;
34
+ overflow-wrap: break-word;
35
+ }
36
+
37
+
38
+
39
+ /**
40
+ * Set `margin-bottom` to maintain vertical rhythm
41
+ */
42
+ h1, h2, h3, h4, h5, h6,
43
+ p, blockquote, pre,
44
+ ul, ol, dl, figure,
45
+ %vertical-rhythm {
46
+ margin-bottom: $spacing-unit / 2;
47
+ }
48
+
49
+ hr {
50
+ margin-top: $spacing-unit;
51
+ margin-bottom: $spacing-unit;
52
+ }
53
+
54
+ /**
55
+ * `main` element
56
+ */
57
+ main {
58
+ display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
59
+ }
60
+
61
+
62
+
63
+ /**
64
+ * Images
65
+ */
66
+ img {
67
+ max-width: 100%;
68
+ vertical-align: middle;
69
+ }
70
+
71
+
72
+
73
+ /**
74
+ * Figures
75
+ */
76
+ figure > img {
77
+ display: block;
78
+ }
79
+
80
+ figcaption {
81
+ font-size: $small-font-size;
82
+ }
83
+
84
+
85
+
86
+ /**
87
+ * Lists
88
+ */
89
+ ul, ol {
90
+ margin-left: $spacing-unit;
91
+ }
92
+
93
+ li {
94
+ > ul,
95
+ > ol {
96
+ margin-bottom: 0;
97
+ }
98
+ }
99
+
100
+
101
+
102
+ /**
103
+ * Headings
104
+ */
105
+ h1, h2, h3, h4, h5, h6 {
106
+ font-weight: $base-font-weight;
107
+ }
108
+
109
+
110
+
111
+ /**
112
+ * Links
113
+ */
114
+ a {
115
+ color: $link-base-color;
116
+ text-decoration: none;
117
+
118
+ &:visited {
119
+ color: $link-visited-color;
120
+ }
121
+
122
+ &:hover {
123
+ color: $link-hover-color;
124
+ text-decoration: underline;
125
+ }
126
+
127
+ .social-media-list &:hover {
128
+ text-decoration: none;
129
+
130
+ .username {
131
+ text-decoration: underline;
132
+ }
133
+ }
134
+ }
135
+
136
+
137
+ /**
138
+ * Blockquotes
139
+ */
140
+ blockquote {
141
+ color: $brand-color;
142
+ border-left: 4px solid $border-color-01;
143
+ padding-left: $spacing-unit / 2;
144
+ @include relative-font-size(1.125);
145
+ font-style: italic;
146
+
147
+ > :last-child {
148
+ margin-bottom: 0;
149
+ }
150
+
151
+ i, em {
152
+ font-style: normal;
153
+ }
154
+ }
155
+
156
+
157
+
158
+ /**
159
+ * Code formatting
160
+ */
161
+ pre,
162
+ code {
163
+ font-family: $code-font-family;
164
+ font-size: 0.9375em;
165
+ border: 1px solid $border-color-01;
166
+ border-radius: 3px;
167
+ background-color: $code-background-color;
168
+ }
169
+
170
+ code {
171
+ padding: 1px 5px;
172
+ }
173
+
174
+ pre {
175
+ padding: 8px 12px;
176
+ overflow-x: auto;
177
+
178
+ > code {
179
+ border: 0;
180
+ padding-right: 0;
181
+ padding-left: 0;
182
+ }
183
+ }
184
+
185
+ .highlight {
186
+ border-radius: 3px;
187
+ background: $code-background-color;
188
+ @extend %vertical-rhythm;
189
+
190
+ .highlighter-rouge & {
191
+ background: $code-background-color;
192
+ }
193
+ }
194
+
195
+
196
+
197
+ /**
198
+ * Wrapper
199
+ */
200
+ .wrapper {
201
+ max-width: calc(#{$content-width} - (#{$spacing-unit}));
202
+ margin-right: auto;
203
+ margin-left: auto;
204
+ padding-right: $spacing-unit / 2;
205
+ padding-left: $spacing-unit / 2;
206
+ @extend %clearfix;
207
+
208
+ @media screen and (min-width: $on-large) {
209
+ max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
210
+ padding-right: $spacing-unit;
211
+ padding-left: $spacing-unit;
212
+ }
213
+ }
214
+
215
+ .landing-wrapper, footer {
216
+ background-color: rgba(0,0,0,0.8);
217
+ color: #f5f5f7;
218
+ }
219
+
220
+ .hero-wrapper {
221
+ padding: 41vh 0;
222
+ border-bottom: 3px solid #d2d2d7;
223
+ }
224
+
225
+
226
+ /**
227
+ * Clearfix
228
+ */
229
+ %clearfix:after {
230
+ content: "";
231
+ display: table;
232
+ clear: both;
233
+ }
234
+
235
+
236
+
237
+ /**
238
+ * Icons
239
+ */
240
+
241
+ .orange {
242
+ color: #f66a0a;
243
+ }
244
+
245
+ .grey {
246
+ color: #828282;
247
+ }
248
+
249
+ .svg-icon {
250
+ width: 16px;
251
+ height: 16px;
252
+ display: inline-block;
253
+ fill: currentColor;
254
+ padding: 5px 3px 2px 5px;
255
+ vertical-align: text-bottom;
256
+ }
257
+
258
+
259
+ /**
260
+ * Tables
261
+ */
262
+ table {
263
+ margin-bottom: $spacing-unit;
264
+ width: 100%;
265
+ text-align: $table-text-align;
266
+ color: $table-text-color;
267
+ border-collapse: collapse;
268
+ border: 1px solid $table-border-color;
269
+ tr {
270
+ &:nth-child(even) {
271
+ background-color: $table-zebra-color;
272
+ }
273
+ }
274
+ th, td {
275
+ padding: ($spacing-unit / 3) ($spacing-unit / 2);
276
+ }
277
+ th {
278
+ background-color: $table-header-bg-color;
279
+ border: 1px solid $table-header-border;
280
+ }
281
+ td {
282
+ border: 1px solid $table-border-color;
283
+ }
284
+
285
+ @include media-query($on-laptop) {
286
+ display: block;
287
+ overflow-x: auto;
288
+ -webkit-overflow-scrolling: touch;
289
+ -ms-overflow-style: -ms-autohiding-scrollbar;
290
+ }
291
+ }