better-minima 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,381 +1,382 @@
1
- /**
2
- * Site header
3
- */
4
- .site-header {
5
- border-top: 5px solid $border-color-03;
6
- border-bottom: 1px solid $border-color-01;
7
- min-height: $spacing-unit * 1.865;
8
- line-height: $base-line-height * $base-font-size * 2.25;
9
-
10
- // Positioning context for the mobile navigation icon
11
- position: relative;
12
- }
13
-
14
- .site-title {
15
- @include relative-font-size(1.625);
16
- font-weight: 300;
17
- letter-spacing: -1px;
18
- margin-bottom: 0;
19
- float: left;
20
-
21
- @include media-query($on-palm) {
22
- padding-right: 45px;
23
- }
24
-
25
- &,
26
- &:visited {
27
- color: $site-title-color;
28
- }
29
- }
30
-
31
- .home-wrapper {
32
- margin-top: $spacing-unit;
33
- }
34
-
35
- .landing-page {
36
- background-color: #F5F5F7;
37
- padding-bottom: $spacing-unit / 2;
38
- }
39
-
40
- .featuredposts-container, .recentposts-container {
41
- background-color: #FFFFFF;
42
- padding: ($spacing-unit / 2) ($spacing-unit / 2);
43
- border-bottom: 1px solid #d2d2d7;
44
- margin-top: $spacing-unit / 3;
45
- }
46
-
47
- .featuredposts-container {
48
- }
49
-
50
- .recentposts-container {
51
- }
52
-
53
- .site-nav {
54
- position: absolute;
55
- top: 9px;
56
- right: $spacing-unit / 2;
57
- background-color: $background-color;
58
- border: 1px solid $border-color-01;
59
- border-radius: 5px;
60
- text-align: right;
61
-
62
- .nav-trigger {
63
- display: none;
64
- }
65
-
66
- .menu-icon {
67
- float: right;
68
- width: 36px;
69
- height: 26px;
70
- line-height: 0;
71
- padding-top: 10px;
72
- text-align: center;
73
-
74
- > svg path {
75
- fill: $border-color-03;
76
- }
77
- }
78
-
79
- label[for="nav-trigger"] {
80
- display: block;
81
- float: right;
82
- width: 36px;
83
- height: 36px;
84
- z-index: 2;
85
- cursor: pointer;
86
- }
87
-
88
- input ~ .trigger {
89
- clear: both;
90
- display: none;
91
- }
92
-
93
- input:checked ~ .trigger {
94
- display: block;
95
- padding-bottom: 5px;
96
- }
97
-
98
- .page-link {
99
- color: $text-color;
100
- line-height: $base-line-height;
101
- display: block;
102
- padding: 5px 10px;
103
-
104
- // Gaps between nav items, but not on the last one
105
- &:not(:last-child) {
106
- margin-right: 0;
107
- }
108
- margin-left: 20px;
109
- }
110
-
111
- @media screen and (min-width: $on-medium) {
112
- position: static;
113
- float: right;
114
- border: none;
115
- background-color: inherit;
116
-
117
- label[for="nav-trigger"] {
118
- display: none;
119
- }
120
-
121
- .menu-icon {
122
- display: none;
123
- }
124
-
125
- input ~ .trigger {
126
- display: block;
127
- }
128
-
129
- .page-link {
130
- display: inline;
131
- padding: 0;
132
-
133
- &:not(:last-child) {
134
- margin-right: 20px;
135
- }
136
- margin-left: auto;
137
- }
138
- }
139
- }
140
-
141
-
142
-
143
- /**
144
- * Site footer
145
- */
146
- .site-footer {
147
- padding: ($spacing-unit / 3) 0;
148
- }
149
-
150
- .footer-content {
151
- @include relative-font-size(0.9);
152
- margin: 0 auto;
153
- width: fit-content;
154
- }
155
-
156
- .footer-content .svg-icon {
157
- width: 1em;
158
- height: 1em;
159
- }
160
-
161
- // .feed-subscribe .svg-icon {
162
- // padding: 5px 5px 2px 0
163
- // }
164
-
165
- .contact-list,
166
- .social-media-list {
167
- list-style: none;
168
- margin-left: 0;
169
- }
170
-
171
- .footer-col-wrapper,
172
- .social-links {
173
- @include relative-font-size(0.9375);
174
- color: $brand-color;
175
- }
176
-
177
- .footer-col {
178
- margin-bottom: $spacing-unit / 2;
179
- }
180
-
181
- .footer-col-1,
182
- .footer-col-2 {
183
- width: calc(50% - (#{$spacing-unit} / 2));
184
- }
185
-
186
- .footer-col-3 {
187
- width: calc(100% - (#{$spacing-unit} / 2));
188
- }
189
-
190
- @media screen and (min-width: $on-large) {
191
- .footer-col-1 {
192
- width: calc(35% - (#{$spacing-unit} / 2));
193
- }
194
-
195
- .footer-col-2 {
196
- width: calc(20% - (#{$spacing-unit} / 2));
197
- }
198
-
199
- .footer-col-3 {
200
- width: calc(45% - (#{$spacing-unit} / 2));
201
- }
202
- }
203
-
204
- @media screen and (min-width: $on-medium) {
205
- .footer-col-wrapper {
206
- display: flex
207
- }
208
-
209
- .footer-col {
210
- width: calc(100% - (#{$spacing-unit} / 2));
211
- padding: 0 ($spacing-unit / 2);
212
-
213
- &:first-child {
214
- padding-right: $spacing-unit / 2;
215
- padding-left: 0;
216
- }
217
-
218
- &:last-child {
219
- padding-right: 0;
220
- padding-left: $spacing-unit / 2;
221
- }
222
- }
223
- }
224
-
225
- .hero-wrapper {
226
- h1 {
227
- @include relative-font-size(3);
228
- text-align: center;
229
- }
230
- }
231
-
232
- /**
233
- * Page content
234
- */
235
- .page-content {
236
- padding: $spacing-unit 0;
237
- flex: 1 0 auto;
238
- }
239
-
240
- .page-heading {
241
- @include relative-font-size(2);
242
- }
243
-
244
- .post-list-heading {
245
- @include relative-font-size(1.75);
246
- }
247
-
248
- .post-list {
249
- margin-left: 0;
250
- list-style: none;
251
-
252
- > li {
253
- margin-bottom: $spacing-unit;
254
- }
255
- }
256
-
257
- .post-meta {
258
- font-size: $small-font-size;
259
- color: $brand-color;
260
- }
261
-
262
- .post-link {
263
- display: block;
264
- @include relative-font-size(1.5);
265
- }
266
-
267
-
268
-
269
- /**
270
- * Posts
271
- */
272
- .post-header {
273
- margin-bottom: $spacing-unit;
274
- }
275
-
276
- .post-title,
277
- .post-content h1 {
278
- @include relative-font-size(2.625);
279
- letter-spacing: -1px;
280
- line-height: 1.15;
281
-
282
- @media screen and (min-width: $on-large) {
283
- @include relative-font-size(2.625);
284
- }
285
- }
286
-
287
- .post-content {
288
- margin-bottom: $spacing-unit;
289
-
290
- h1, h2, h3 { margin-top: $spacing-unit * 2 }
291
- h4, h5, h6 { margin-top: $spacing-unit }
292
-
293
- h2 {
294
- @include relative-font-size(1.75);
295
-
296
- @media screen and (min-width: $on-large) {
297
- @include relative-font-size(2);
298
- }
299
- }
300
-
301
- h3 {
302
- @include relative-font-size(1.375);
303
-
304
- @media screen and (min-width: $on-large) {
305
- @include relative-font-size(1.625);
306
- }
307
- }
308
-
309
- h4 {
310
- @include relative-font-size(1.25);
311
- }
312
-
313
- h5 {
314
- @include relative-font-size(1.125);
315
- }
316
- h6 {
317
- @include relative-font-size(1.0625);
318
- }
319
-
320
- code {
321
- @include relative-font-size(0.8);
322
- }
323
- }
324
-
325
-
326
- .social-media-list {
327
- display: table;
328
- margin: 0 auto;
329
- li {
330
- float: left;
331
- margin: 5px 10px 5px 0;
332
- &:last-of-type { margin-right: 0 }
333
- a {
334
- display: block;
335
- padding: $spacing-unit / 4;
336
- &:hover {
337
- background-color: $border-color-02;
338
- color: #d2d2d7;
339
- }
340
- }
341
-
342
- }
343
- }
344
-
345
-
346
-
347
- /**
348
- * Pagination navbar
349
- */
350
- .pagination {
351
- margin-bottom: $spacing-unit;
352
- @extend .social-media-list;
353
- li {
354
- a, div {
355
- min-width: 41px;
356
- text-align: center;
357
- box-sizing: border-box;
358
- }
359
- div {
360
- display: block;
361
- padding: $spacing-unit / 4;
362
- border: 1px solid transparent;
363
-
364
- &.pager-edge {
365
- color: $border-color-01;
366
- border: 1px dashed;
367
- }
368
- }
369
- }
370
- }
371
-
372
-
373
-
374
- /**
375
- * Grid helpers
376
- */
377
- @media screen and (min-width: $on-large) {
378
- .one-half {
379
- width: calc(50% - (#{$spacing-unit} / 2));
380
- }
381
- }
1
+ /**
2
+ * Site header
3
+ */
4
+ .site-header {
5
+ border-top: 5px solid $border-color-03;
6
+ border-bottom: 1px solid $border-color-01;
7
+ min-height: $spacing-unit * 1.865;
8
+ line-height: $base-line-height * $base-font-size * 2.25;
9
+
10
+ // Positioning context for the mobile navigation icon
11
+ position: relative;
12
+ }
13
+
14
+ .site-title {
15
+ @include relative-font-size(1.625);
16
+ font-weight: 300;
17
+ letter-spacing: -1px;
18
+ margin-bottom: 0;
19
+ float: left;
20
+
21
+ @include media-query($on-palm) {
22
+ padding-right: 45px;
23
+ }
24
+
25
+ &,
26
+ &:visited {
27
+ color: $site-title-color;
28
+ }
29
+ }
30
+
31
+ .home-wrapper {
32
+ margin-top: $spacing-unit;
33
+ }
34
+
35
+ .landing-page {
36
+ background-color: #F5F5F7;
37
+ padding-bottom: $spacing-unit / 2;
38
+ }
39
+
40
+ .featuredposts-container, .recentposts-container {
41
+ background-color: #FFFFFF;
42
+ padding: ($spacing-unit / 2) ($spacing-unit / 2);
43
+ border-bottom: 1px solid #d2d2d7;
44
+ margin-top: $spacing-unit / 3;
45
+ }
46
+
47
+ .featuredposts-container {
48
+ }
49
+
50
+ .recentposts-container {
51
+ }
52
+
53
+ .site-nav {
54
+ position: absolute;
55
+ top: 9px;
56
+ right: $spacing-unit / 2;
57
+ background-color: $background-color;
58
+ border: 1px solid $border-color-01;
59
+ border-radius: 5px;
60
+ text-align: right;
61
+
62
+ .nav-trigger {
63
+ display: none;
64
+ }
65
+
66
+ .menu-icon {
67
+ float: right;
68
+ width: 36px;
69
+ height: 26px;
70
+ line-height: 0;
71
+ padding-top: 10px;
72
+ text-align: center;
73
+
74
+ > svg path {
75
+ fill: $border-color-03;
76
+ }
77
+ }
78
+
79
+ label[for="nav-trigger"] {
80
+ display: block;
81
+ float: right;
82
+ width: 36px;
83
+ height: 36px;
84
+ z-index: 2;
85
+ cursor: pointer;
86
+ }
87
+
88
+ input ~ .trigger {
89
+ clear: both;
90
+ display: none;
91
+ }
92
+
93
+ input:checked ~ .trigger {
94
+ display: block;
95
+ padding-bottom: 5px;
96
+ }
97
+
98
+ .page-link {
99
+ color: $text-color;
100
+ line-height: $base-line-height;
101
+ display: block;
102
+ padding: 5px 10px;
103
+
104
+ // Gaps between nav items, but not on the last one
105
+ &:not(:last-child) {
106
+ margin-right: 0;
107
+ }
108
+ margin-left: 20px;
109
+ }
110
+
111
+ @media screen and (min-width: $on-medium) {
112
+ position: static;
113
+ float: right;
114
+ border: none;
115
+ background-color: inherit;
116
+
117
+ label[for="nav-trigger"] {
118
+ display: none;
119
+ }
120
+
121
+ .menu-icon {
122
+ display: none;
123
+ }
124
+
125
+ input ~ .trigger {
126
+ display: block;
127
+ }
128
+
129
+ .page-link {
130
+ display: inline;
131
+ padding: 0;
132
+
133
+ &:not(:last-child) {
134
+ margin-right: 20px;
135
+ }
136
+ margin-left: auto;
137
+ }
138
+ }
139
+ }
140
+
141
+
142
+
143
+ /**
144
+ * Site footer
145
+ */
146
+ .site-footer {
147
+ padding: ($spacing-unit / 3) 0;
148
+ }
149
+
150
+ .footer-content {
151
+ @include relative-font-size(0.9);
152
+ margin: 0 auto;
153
+ width: fit-content;
154
+ text-align: center;
155
+ }
156
+
157
+ .footer-content .svg-icon {
158
+ width: 1em;
159
+ height: 1em;
160
+ }
161
+
162
+ // .feed-subscribe .svg-icon {
163
+ // padding: 5px 5px 2px 0
164
+ // }
165
+
166
+ .contact-list,
167
+ .social-media-list {
168
+ list-style: none;
169
+ margin-left: 0;
170
+ }
171
+
172
+ .footer-col-wrapper,
173
+ .social-links {
174
+ @include relative-font-size(0.9375);
175
+ color: $brand-color;
176
+ }
177
+
178
+ .footer-col {
179
+ margin-bottom: $spacing-unit / 2;
180
+ }
181
+
182
+ .footer-col-1,
183
+ .footer-col-2 {
184
+ width: calc(50% - (#{$spacing-unit} / 2));
185
+ }
186
+
187
+ .footer-col-3 {
188
+ width: calc(100% - (#{$spacing-unit} / 2));
189
+ }
190
+
191
+ @media screen and (min-width: $on-large) {
192
+ .footer-col-1 {
193
+ width: calc(35% - (#{$spacing-unit} / 2));
194
+ }
195
+
196
+ .footer-col-2 {
197
+ width: calc(20% - (#{$spacing-unit} / 2));
198
+ }
199
+
200
+ .footer-col-3 {
201
+ width: calc(45% - (#{$spacing-unit} / 2));
202
+ }
203
+ }
204
+
205
+ @media screen and (min-width: $on-medium) {
206
+ .footer-col-wrapper {
207
+ display: flex
208
+ }
209
+
210
+ .footer-col {
211
+ width: calc(100% - (#{$spacing-unit} / 2));
212
+ padding: 0 ($spacing-unit / 2);
213
+
214
+ &:first-child {
215
+ padding-right: $spacing-unit / 2;
216
+ padding-left: 0;
217
+ }
218
+
219
+ &:last-child {
220
+ padding-right: 0;
221
+ padding-left: $spacing-unit / 2;
222
+ }
223
+ }
224
+ }
225
+
226
+ .hero-wrapper {
227
+ h1 {
228
+ @include relative-font-size(3);
229
+ text-align: center;
230
+ }
231
+ }
232
+
233
+ /**
234
+ * Page content
235
+ */
236
+ .page-content {
237
+ padding: $spacing-unit 0;
238
+ flex: 1 0 auto;
239
+ }
240
+
241
+ .page-heading {
242
+ @include relative-font-size(2);
243
+ }
244
+
245
+ .post-list-heading {
246
+ @include relative-font-size(1.75);
247
+ }
248
+
249
+ .post-list {
250
+ margin-left: 0;
251
+ list-style: none;
252
+
253
+ > li {
254
+ margin-bottom: $spacing-unit;
255
+ }
256
+ }
257
+
258
+ .post-meta {
259
+ font-size: $small-font-size;
260
+ color: $brand-color;
261
+ }
262
+
263
+ .post-link {
264
+ display: block;
265
+ @include relative-font-size(1.5);
266
+ }
267
+
268
+
269
+
270
+ /**
271
+ * Posts
272
+ */
273
+ .post-header {
274
+ margin-bottom: $spacing-unit;
275
+ }
276
+
277
+ .post-title,
278
+ .post-content h1 {
279
+ @include relative-font-size(2.625);
280
+ letter-spacing: -1px;
281
+ line-height: 1.15;
282
+
283
+ @media screen and (min-width: $on-large) {
284
+ @include relative-font-size(2.625);
285
+ }
286
+ }
287
+
288
+ .post-content {
289
+ margin-bottom: $spacing-unit;
290
+
291
+ h1, h2, h3 { margin-top: $spacing-unit * 2 }
292
+ h4, h5, h6 { margin-top: $spacing-unit }
293
+
294
+ h2 {
295
+ @include relative-font-size(1.75);
296
+
297
+ @media screen and (min-width: $on-large) {
298
+ @include relative-font-size(2);
299
+ }
300
+ }
301
+
302
+ h3 {
303
+ @include relative-font-size(1.375);
304
+
305
+ @media screen and (min-width: $on-large) {
306
+ @include relative-font-size(1.625);
307
+ }
308
+ }
309
+
310
+ h4 {
311
+ @include relative-font-size(1.25);
312
+ }
313
+
314
+ h5 {
315
+ @include relative-font-size(1.125);
316
+ }
317
+ h6 {
318
+ @include relative-font-size(1.0625);
319
+ }
320
+
321
+ code {
322
+ @include relative-font-size(0.8);
323
+ }
324
+ }
325
+
326
+
327
+ .social-media-list {
328
+ display: table;
329
+ margin: 0 auto;
330
+ li {
331
+ float: left;
332
+ margin: 5px 10px 5px 0;
333
+ &:last-of-type { margin-right: 0 }
334
+ a {
335
+ display: block;
336
+ padding: $spacing-unit / 4;
337
+ &:hover {
338
+ background-color: $border-color-02;
339
+ color: #d2d2d7;
340
+ }
341
+ }
342
+
343
+ }
344
+ }
345
+
346
+
347
+
348
+ /**
349
+ * Pagination navbar
350
+ */
351
+ .pagination {
352
+ margin-bottom: $spacing-unit;
353
+ @extend .social-media-list;
354
+ li {
355
+ a, div {
356
+ min-width: 41px;
357
+ text-align: center;
358
+ box-sizing: border-box;
359
+ }
360
+ div {
361
+ display: block;
362
+ padding: $spacing-unit / 4;
363
+ border: 1px solid transparent;
364
+
365
+ &.pager-edge {
366
+ color: $border-color-01;
367
+ border: 1px dashed;
368
+ }
369
+ }
370
+ }
371
+ }
372
+
373
+
374
+
375
+ /**
376
+ * Grid helpers
377
+ */
378
+ @media screen and (min-width: $on-large) {
379
+ .one-half {
380
+ width: calc(50% - (#{$spacing-unit} / 2));
381
+ }
382
+ }