steve-for-jekyll 1.2.1 → 1.2.3

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.
Files changed (31) hide show
  1. checksums.yaml +4 -4
  2. data/404.html +9 -9
  3. data/LICENSE.txt +21 -21
  4. data/README.md +46 -46
  5. data/_config.yml +1 -2
  6. data/_includes/blog/custom-widgets.html +3 -3
  7. data/_includes/blog/post.html +57 -57
  8. data/_includes/blog/sidebar.html +42 -42
  9. data/_includes/footer/custom-text.html +5 -5
  10. data/_includes/footer/links.html +11 -11
  11. data/_includes/footer.html +11 -11
  12. data/_includes/head.html +9 -9
  13. data/_includes/header/menu.html +12 -12
  14. data/_includes/header.html +17 -17
  15. data/_includes/post/comment-form.html +69 -69
  16. data/_includes/post/comments.html +47 -47
  17. data/_includes/search-form.html +13 -13
  18. data/_layouts/archive.html +21 -21
  19. data/_layouts/blog.html +9 -9
  20. data/_layouts/default.html +18 -18
  21. data/_layouts/home.html +23 -23
  22. data/_layouts/page.html +15 -15
  23. data/_layouts/post.html +115 -115
  24. data/_sass/steve/_base.scss +269 -269
  25. data/_sass/steve/_layout.scss +477 -472
  26. data/_sass/steve/_syntax.scss +252 -252
  27. data/_sass/steve-for-jekyll.scss +51 -51
  28. data/assets/css/screen.scss +34 -34
  29. data/assets/js/responsive-videos.js +79 -79
  30. data/staticman.yml +30 -30
  31. metadata +7 -35
data/_sass/steve/_layout.scss CHANGED
@@ -1,472 +1,477 @@
1
- body {
2
- display: flex;
3
- flex-flow: column nowrap;
4
- min-height: 100vh;
5
- max-width: var(--container);
6
- margin: var(--gap) auto;
7
- padding-left: calc(var(--gap) / 2);
8
- padding-right: calc(var(--gap) / 2);
9
- }
10
-
11
- /*
12
- Site Header
13
- */
14
-
15
- .masthead {
16
- margin-bottom: calc(var(--gap) * 2);
17
-
18
- .site-title {
19
- font-size: 2rem;
20
- font-weight: bold;
21
- line-height: 1.2;
22
- margin-bottom: var(--gap);
23
- text-align: center;
24
- color: var(--color-link);
25
- overflow: visible;
26
-
27
- .logo {
28
- display: inline-block;
29
- max-width: 250px;
30
- margin: calc(var(--gap) / 4);
31
- box-shadow: none;
32
- filter: drop-shadow(0 0 var(--gap) var(--color-details-lighter));
33
- }
34
-
35
- &:hover,
36
- &:focus {
37
- text-decoration: none;
38
- }
39
- }
40
- }
41
-
42
- .site-menu {
43
- display: flex;
44
- flex-flow: row wrap;
45
- justify-content: center;
46
-
47
- @media screen and (max-width: 600px) {
48
- flex-flow: row nowrap;
49
- justify-content: flex-start;
50
- overflow-x: auto;
51
- margin-left: calc(var(--gap) / -2);
52
- margin-right: calc(var(--gap) / -2);
53
- -webkit-overflow-scrolling: touch;
54
- -ms-overflow-style: -ms-autohiding-scrollbar;
55
-
56
- &::-webkit-scrollbar {
57
- display: none;
58
- }
59
- }
60
-
61
- &::before,
62
- &::after {
63
- content: " ";
64
- display: block;
65
- }
66
-
67
- &::before {
68
- margin-left: auto;
69
- padding-left: calc(var(--gap) / 2);
70
- }
71
-
72
- &::after {
73
- margin-right: auto;
74
- padding-right: calc(var(--gap) / 2);
75
- }
76
- }
77
-
78
- .menu-item {
79
- flex: 0 0 auto;
80
- color: rgba(255, 255, 255, 0.7);
81
- background-color: var(--color-link);
82
- border-radius: 1.5rem;
83
- font-weight: bolder;
84
- padding: 0.5rem 1rem;
85
-
86
- &:not(:last-child) {
87
- margin-right: var(--gap);
88
-
89
- @media screen and (max-width: 600px) {
90
- margin-right: calc(var(--gap) / 2);
91
- }
92
- }
93
-
94
- &:hover,
95
- &:focus {
96
- color: rgba(255, 255, 255, 1);
97
- text-decoration: none;
98
- }
99
- }
100
-
101
- /*
102
- Content
103
- */
104
-
105
- .content {
106
- background-color: var(--color-bg);
107
- padding: calc(var(--gap) * 2);
108
- margin-bottom: var(--gap);
109
-
110
- @media screen and (max-width: 600px) {
111
- padding-left: var(--gap);
112
- padding-right: var(--gap);
113
- }
114
-
115
- & > *:last-child {
116
- margin-bottom: 0;
117
- }
118
- }
119
-
120
- .content-header {
121
- margin-bottom: var(--gap);
122
- text-align: center;
123
-
124
- .content-title {
125
- font-size: 2rem;
126
-
127
- a {
128
- color: var(--color-text);
129
- }
130
- }
131
-
132
- .content-meta {
133
- font-size: 0.75rem;
134
-
135
- a {
136
- color: var(--color-details);
137
- display: inline-block;
138
-
139
- &:not(:last-child) {
140
- margin-right: calc(var(--gap) / 2);
141
- }
142
- }
143
- }
144
- }
145
-
146
- .content-body > :last-child {
147
- margin-bottom: 0;
148
- }
149
-
150
- .content-footer {
151
- margin-top: var(--gap);
152
- font-size: 0.75rem;
153
- color: var(--color-details);
154
-
155
- .content-tags {
156
- display: block;
157
- list-style: none;
158
- margin-left: 0;
159
-
160
- li {
161
- display: inline-block;
162
- font-size: 0.875rem;
163
-
164
- &:not(:last-child) {
165
- &::after {
166
- padding-left: calc(var(--gap) / 4);
167
- padding-right: calc(var(--gap) / 4);
168
- content: "/";
169
- color: var(--color-details-lighter);
170
- }
171
- }
172
-
173
- a {
174
- color: var(--color-details-darker);
175
- }
176
- }
177
- }
178
- }
179
-
180
- .content-navigation {
181
- display: flex;
182
- align-items: center;
183
-
184
- @media screen and (max-width: 600) {
185
- flex-flow: column nowrap;
186
- }
187
-
188
- .nav-link {
189
- background: var(--color-bg);
190
- padding: calc(var(--gap) / 2) var(--gap);
191
-
192
- @media screen and (max-width: 600px) {
193
- width: 100%;
194
- margin-bottom: var(--gap);
195
- }
196
-
197
- &.prev-link {
198
- justify-self: flex-start;
199
- margin-right: auto;
200
- }
201
-
202
- &.next-link {
203
- justify-self: flex-end;
204
- margin-left: auto;
205
- text-align: right;
206
- }
207
- }
208
- }
209
-
210
- // The Blog Layout
211
- .layout-blog,
212
- .layout-post,
213
- .layout-archive,
214
- .layout-home {
215
- .container {
216
- display: grid;
217
- gap: var(--gap);
218
- grid-template-columns: 2fr 1fr;
219
- grid-template-areas:
220
- "content sidebar"
221
- "content sidebar"
222
- "content .";
223
-
224
- @media screen and (max-width: 600px) {
225
- grid-template-columns: 100%;
226
- grid-template-areas:
227
- "search"
228
- "content"
229
- "sidebar";
230
- }
231
- }
232
- }
233
-
234
- .blog-page {
235
- grid-area: content;
236
- min-width: 0;
237
- }
238
-
239
- // The Archive Layout
240
- .archive-header {
241
- padding: var(--gap);
242
- background: var(--color-bg);
243
- margin-bottom: var(--gap);
244
-
245
- h1 {
246
- font-size: 0.75rem;
247
- font-weight: normal;
248
- color: var(--color-details);
249
-
250
- strong {
251
- font-size: 1.75rem;
252
- color: var(--color-text);
253
- text-transform: uppercase;
254
- }
255
- }
256
- }
257
-
258
- // Sidebar
259
- .widget {
260
- background-color: var(--color-bg);
261
- padding: var(--gap);
262
- }
263
-
264
- .-search {
265
- grid-area: sidebar;
266
- grid-row: 1;
267
-
268
- @media screen and (max-width: 600px) {
269
- grid-area: search;
270
- }
271
- }
272
-
273
- .-sidebar {
274
- grid-area: sidebar;
275
- grid-row: 2;
276
-
277
- @media screen and (max-width: 600px) {
278
- grid-row: auto;
279
- }
280
-
281
- & > *:not(:last-child) {
282
- margin-bottom: calc(var(--gap) * 2);
283
- }
284
- }
285
-
286
- .social-links {
287
- margin-left: 0;
288
- list-style: none;
289
- display: flex;
290
- flex-flow: row wrap;
291
- justify-content: center;
292
- align-items: center;
293
-
294
- .link {
295
- display: inline-block;
296
- margin: calc(var(--gap) / 2);
297
- margin-top: 0;
298
-
299
- svg {
300
- width: 1.5rem;
301
- height: 1.5rem;
302
- }
303
- }
304
- }
305
-
306
- .blogroll {
307
- .blogroll-title {
308
- font-weight: normal;
309
- margin-bottom: calc(var(--gap) / 2);
310
- }
311
-
312
- .blogroll-list {
313
- list-style: none;
314
- margin-left: 0;
315
-
316
- .link {
317
- padding-top: calc(var(--gap) / 2);
318
- padding-bottom: calc(var(--gap) / 2);
319
- border-bottom: 1px solid var(--color-details-lighter);
320
-
321
- &:first-child {
322
- border-top: 1px solid var(--color-details-lighter);
323
- }
324
-
325
- a {
326
- color: var(--color-details);
327
-
328
- &:hover,
329
- &:focus {
330
- color: var(--color-details-darker);
331
- }
332
- }
333
- }
334
- }
335
- }
336
-
337
- // Search Form
338
-
339
- label[for="search_terms"] {
340
- display: inline-block;
341
- margin-bottom: calc(var(--gap) / 2);
342
- }
343
-
344
- .search-controls {
345
- display: flex;
346
- flex-flow: row nowrap;
347
- font-size: 0.75rem;
348
-
349
- input[name="q"] {
350
- max-width: 400px;
351
- width: 100%;
352
- }
353
- }
354
-
355
- // Comments
356
-
357
- .comments-title {
358
- margin-bottom: var(--gap);
359
- }
360
-
361
- .comments-notice {
362
- margin-top: calc(var(--gap) / 2);
363
- margin-bottom: calc(var(--gap) / 2);
364
- color: var(--color-details-darker);
365
- }
366
-
367
- .comments-list {
368
- list-style: none;
369
- margin-left: 0;
370
- margin-bottom: var(--gap);
371
-
372
- .comment-item {
373
- margin-bottom: var(--gap);
374
- padding-bottom: var(--gap);
375
- border-bottom: 3px dotted var(--color-details-lighter);
376
- }
377
- }
378
-
379
- .comment {
380
- font-size: 95%;
381
-
382
- .comment-meta {
383
- margin-bottom: 1rem;
384
- }
385
-
386
- .author-avatar {
387
- width: 2.5rem;
388
- border-radius: 5px;
389
- box-shadow: 0 0 2px var(--color-details);
390
- float: left;
391
- margin-right: 1rem;
392
- }
393
-
394
- .comment-body > *:not(:last-child) {
395
- margin-bottom: 0.5rem;
396
- }
397
- }
398
-
399
- .comment-message-area {
400
- margin-bottom: calc(var(--gap) / 2);
401
- }
402
-
403
- .message-area {
404
- width: 100%;
405
- resize: vertical;
406
- }
407
-
408
- .comment-fields {
409
- display: grid;
410
- grid-template-columns: 1fr 1fr 1fr;
411
- gap: calc(var(--gap) / 2);
412
- margin-bottom: calc(var(--gap) / 2);
413
-
414
- @media screen and (max-width: 800px) {
415
- grid-template-columns: 1fr;
416
- flex-flow: column nowrap;
417
- }
418
-
419
- input {
420
- min-width: 0;
421
- width: auto;
422
- }
423
- }
424
-
425
- .comment-actions {
426
- display: flex;
427
- justify-content: flex-end;
428
- }
429
-
430
- /*
431
- Site Footer
432
- */
433
-
434
- .colophon {
435
- margin-top: calc(var(--gap) * 2);
436
- font-size: 0.875rem;
437
-
438
- h5 {
439
- a {
440
- color: currentColor;
441
- }
442
- }
443
-
444
- .site-info {
445
- text-align: center;
446
- }
447
-
448
- .external-links {
449
- text-align: center;
450
- list-style: none;
451
- margin: calc(var(--gap) / 2) 0;
452
-
453
- .link {
454
- display: inline-block;
455
-
456
- a {
457
- color: var(--color-details-darker);
458
- display: inline-block;
459
- }
460
-
461
- &:not(:last-child) {
462
- &::after {
463
- content: "/";
464
- color: var(--color-details-lighter);
465
- display: inline-block;
466
- margin-left: calc(var(--gap) / 4);
467
- margin-right: calc(var(--gap) / 4);
468
- }
469
- }
470
- }
471
- }
472
- }
1
+ body {
2
+ display: flex;
3
+ flex-flow: column nowrap;
4
+ min-height: 100vh;
5
+ max-width: var(--container);
6
+ margin: var(--gap) auto;
7
+ padding-left: calc(var(--gap) / 2);
8
+ padding-right: calc(var(--gap) / 2);
9
+
10
+ @media screen and (max-width: 600px) {
11
+ padding-left: 0;
12
+ padding-right: 0;
13
+ }
14
+ }
15
+
16
+ /*
17
+ Site Header
18
+ */
19
+
20
+ .masthead {
21
+ margin-bottom: calc(var(--gap) * 2);
22
+
23
+ .site-title {
24
+ font-size: 2rem;
25
+ font-weight: bold;
26
+ line-height: 1.2;
27
+ margin-bottom: var(--gap);
28
+ text-align: center;
29
+ color: var(--color-link);
30
+ overflow: visible;
31
+
32
+ .logo {
33
+ display: inline-block;
34
+ max-width: 250px;
35
+ margin: calc(var(--gap) / 4);
36
+ box-shadow: none;
37
+ filter: drop-shadow(0 0 var(--gap) var(--color-details-lighter));
38
+ }
39
+
40
+ &:hover,
41
+ &:focus {
42
+ text-decoration: none;
43
+ }
44
+ }
45
+ }
46
+
47
+ .site-menu {
48
+ display: flex;
49
+ flex-flow: row wrap;
50
+ justify-content: center;
51
+
52
+ @media screen and (max-width: 600px) {
53
+ flex-flow: row nowrap;
54
+ justify-content: flex-start;
55
+ overflow-x: auto;
56
+ margin-left: calc(var(--gap) / -2);
57
+ margin-right: calc(var(--gap) / -2);
58
+ -webkit-overflow-scrolling: touch;
59
+ -ms-overflow-style: -ms-autohiding-scrollbar;
60
+
61
+ &::-webkit-scrollbar {
62
+ display: none;
63
+ }
64
+ }
65
+
66
+ &::before,
67
+ &::after {
68
+ content: " ";
69
+ display: block;
70
+ }
71
+
72
+ &::before {
73
+ margin-left: auto;
74
+ padding-left: calc(var(--gap) / 2);
75
+ }
76
+
77
+ &::after {
78
+ margin-right: auto;
79
+ padding-right: calc(var(--gap) / 2);
80
+ }
81
+ }
82
+
83
+ .menu-item {
84
+ flex: 0 0 auto;
85
+ color: rgba(255, 255, 255, 0.7);
86
+ background-color: var(--color-link);
87
+ border-radius: 1.5rem;
88
+ font-weight: bolder;
89
+ padding: 0.5rem 1rem;
90
+
91
+ &:not(:last-child) {
92
+ margin-right: var(--gap);
93
+
94
+ @media screen and (max-width: 600px) {
95
+ margin-right: calc(var(--gap) / 2);
96
+ }
97
+ }
98
+
99
+ &:hover,
100
+ &:focus {
101
+ color: rgba(255, 255, 255, 1);
102
+ text-decoration: none;
103
+ }
104
+ }
105
+
106
+ /*
107
+ Content
108
+ */
109
+
110
+ .content {
111
+ background-color: var(--color-bg);
112
+ padding: calc(var(--gap) * 2);
113
+ margin-bottom: var(--gap);
114
+
115
+ @media screen and (max-width: 600px) {
116
+ padding-left: var(--gap);
117
+ padding-right: var(--gap);
118
+ }
119
+
120
+ & > *:last-child {
121
+ margin-bottom: 0;
122
+ }
123
+ }
124
+
125
+ .content-header {
126
+ margin-bottom: var(--gap);
127
+ text-align: center;
128
+
129
+ .content-title {
130
+ font-size: 2rem;
131
+
132
+ a {
133
+ color: var(--color-text);
134
+ }
135
+ }
136
+
137
+ .content-meta {
138
+ font-size: 0.75rem;
139
+
140
+ a {
141
+ color: var(--color-details);
142
+ display: inline-block;
143
+
144
+ &:not(:last-child) {
145
+ margin-right: calc(var(--gap) / 2);
146
+ }
147
+ }
148
+ }
149
+ }
150
+
151
+ .content-body > :last-child {
152
+ margin-bottom: 0;
153
+ }
154
+
155
+ .content-footer {
156
+ margin-top: var(--gap);
157
+ font-size: 0.75rem;
158
+ color: var(--color-details);
159
+
160
+ .content-tags {
161
+ display: block;
162
+ list-style: none;
163
+ margin-left: 0;
164
+
165
+ li {
166
+ display: inline-block;
167
+ font-size: 0.875rem;
168
+
169
+ &:not(:last-child) {
170
+ &::after {
171
+ padding-left: calc(var(--gap) / 4);
172
+ padding-right: calc(var(--gap) / 4);
173
+ content: "/";
174
+ color: var(--color-details-lighter);
175
+ }
176
+ }
177
+
178
+ a {
179
+ color: var(--color-details-darker);
180
+ }
181
+ }
182
+ }
183
+ }
184
+
185
+ .content-navigation {
186
+ display: flex;
187
+ align-items: center;
188
+
189
+ @media screen and (max-width: 600) {
190
+ flex-flow: column nowrap;
191
+ }
192
+
193
+ .nav-link {
194
+ background: var(--color-bg);
195
+ padding: calc(var(--gap) / 2) var(--gap);
196
+
197
+ @media screen and (max-width: 600px) {
198
+ width: 100%;
199
+ margin-bottom: var(--gap);
200
+ }
201
+
202
+ &.prev-link {
203
+ justify-self: flex-start;
204
+ margin-right: auto;
205
+ }
206
+
207
+ &.next-link {
208
+ justify-self: flex-end;
209
+ margin-left: auto;
210
+ text-align: right;
211
+ }
212
+ }
213
+ }
214
+
215
+ // The Blog Layout
216
+ .layout-blog,
217
+ .layout-post,
218
+ .layout-archive,
219
+ .layout-home {
220
+ .container {
221
+ display: grid;
222
+ gap: var(--gap);
223
+ grid-template-columns: 2fr 1fr;
224
+ grid-template-areas:
225
+ "content sidebar"
226
+ "content sidebar"
227
+ "content .";
228
+
229
+ @media screen and (max-width: 600px) {
230
+ grid-template-columns: 100%;
231
+ grid-template-areas:
232
+ "search"
233
+ "content"
234
+ "sidebar";
235
+ }
236
+ }
237
+ }
238
+
239
+ .blog-page {
240
+ grid-area: content;
241
+ min-width: 0;
242
+ }
243
+
244
+ // The Archive Layout
245
+ .archive-header {
246
+ padding: var(--gap);
247
+ background: var(--color-bg);
248
+ margin-bottom: var(--gap);
249
+
250
+ h1 {
251
+ font-size: 0.75rem;
252
+ font-weight: normal;
253
+ color: var(--color-details);
254
+
255
+ strong {
256
+ font-size: 1.75rem;
257
+ color: var(--color-text);
258
+ text-transform: uppercase;
259
+ }
260
+ }
261
+ }
262
+
263
+ // Sidebar
264
+ .widget {
265
+ background-color: var(--color-bg);
266
+ padding: var(--gap);
267
+ }
268
+
269
+ .-search {
270
+ grid-area: sidebar;
271
+ grid-row: 1;
272
+
273
+ @media screen and (max-width: 600px) {
274
+ grid-area: search;
275
+ }
276
+ }
277
+
278
+ .-sidebar {
279
+ grid-area: sidebar;
280
+ grid-row: 2;
281
+
282
+ @media screen and (max-width: 600px) {
283
+ grid-row: auto;
284
+ }
285
+
286
+ & > *:not(:last-child) {
287
+ margin-bottom: calc(var(--gap) * 2);
288
+ }
289
+ }
290
+
291
+ .social-links {
292
+ margin-left: 0;
293
+ list-style: none;
294
+ display: flex;
295
+ flex-flow: row wrap;
296
+ justify-content: center;
297
+ align-items: center;
298
+
299
+ .link {
300
+ display: inline-block;
301
+ margin: calc(var(--gap) / 2);
302
+ margin-top: 0;
303
+
304
+ svg {
305
+ width: 1.5rem;
306
+ height: 1.5rem;
307
+ }
308
+ }
309
+ }
310
+
311
+ .blogroll {
312
+ .blogroll-title {
313
+ font-weight: normal;
314
+ margin-bottom: calc(var(--gap) / 2);
315
+ }
316
+
317
+ .blogroll-list {
318
+ list-style: none;
319
+ margin-left: 0;
320
+
321
+ .link {
322
+ padding-top: calc(var(--gap) / 2);
323
+ padding-bottom: calc(var(--gap) / 2);
324
+ border-bottom: 1px solid var(--color-details-lighter);
325
+
326
+ &:first-child {
327
+ border-top: 1px solid var(--color-details-lighter);
328
+ }
329
+
330
+ a {
331
+ color: var(--color-details);
332
+
333
+ &:hover,
334
+ &:focus {
335
+ color: var(--color-details-darker);
336
+ }
337
+ }
338
+ }
339
+ }
340
+ }
341
+
342
+ // Search Form
343
+
344
+ label[for="search_terms"] {
345
+ display: inline-block;
346
+ margin-bottom: calc(var(--gap) / 2);
347
+ }
348
+
349
+ .search-controls {
350
+ display: flex;
351
+ flex-flow: row nowrap;
352
+ font-size: 0.75rem;
353
+
354
+ input[name="q"] {
355
+ max-width: 400px;
356
+ width: 100%;
357
+ }
358
+ }
359
+
360
+ // Comments
361
+
362
+ .comments-title {
363
+ margin-bottom: var(--gap);
364
+ }
365
+
366
+ .comments-notice {
367
+ margin-top: calc(var(--gap) / 2);
368
+ margin-bottom: calc(var(--gap) / 2);
369
+ color: var(--color-details-darker);
370
+ }
371
+
372
+ .comments-list {
373
+ list-style: none;
374
+ margin-left: 0;
375
+ margin-bottom: var(--gap);
376
+
377
+ .comment-item {
378
+ margin-bottom: var(--gap);
379
+ padding-bottom: var(--gap);
380
+ border-bottom: 3px dotted var(--color-details-lighter);
381
+ }
382
+ }
383
+
384
+ .comment {
385
+ font-size: 95%;
386
+
387
+ .comment-meta {
388
+ margin-bottom: 1rem;
389
+ }
390
+
391
+ .author-avatar {
392
+ width: 2.5rem;
393
+ border-radius: 5px;
394
+ box-shadow: 0 0 2px var(--color-details);
395
+ float: left;
396
+ margin-right: 1rem;
397
+ }
398
+
399
+ .comment-body > *:not(:last-child) {
400
+ margin-bottom: 0.5rem;
401
+ }
402
+ }
403
+
404
+ .comment-message-area {
405
+ margin-bottom: calc(var(--gap) / 2);
406
+ }
407
+
408
+ .message-area {
409
+ width: 100%;
410
+ resize: vertical;
411
+ }
412
+
413
+ .comment-fields {
414
+ display: grid;
415
+ grid-template-columns: 1fr 1fr 1fr;
416
+ gap: calc(var(--gap) / 2);
417
+ margin-bottom: calc(var(--gap) / 2);
418
+
419
+ @media screen and (max-width: 800px) {
420
+ grid-template-columns: 1fr;
421
+ flex-flow: column nowrap;
422
+ }
423
+
424
+ input {
425
+ min-width: 0;
426
+ width: auto;
427
+ }
428
+ }
429
+
430
+ .comment-actions {
431
+ display: flex;
432
+ justify-content: flex-end;
433
+ }
434
+
435
+ /*
436
+ Site Footer
437
+ */
438
+
439
+ .colophon {
440
+ margin-top: calc(var(--gap) * 2);
441
+ font-size: 0.875rem;
442
+
443
+ h5 {
444
+ a {
445
+ color: currentColor;
446
+ }
447
+ }
448
+
449
+ .site-info {
450
+ text-align: center;
451
+ }
452
+
453
+ .external-links {
454
+ text-align: center;
455
+ list-style: none;
456
+ margin: calc(var(--gap) / 2) 0;
457
+
458
+ .link {
459
+ display: inline-block;
460
+
461
+ a {
462
+ color: var(--color-details-darker);
463
+ display: inline-block;
464
+ }
465
+
466
+ &:not(:last-child) {
467
+ &::after {
468
+ content: "/";
469
+ color: var(--color-details-lighter);
470
+ display: inline-block;
471
+ margin-left: calc(var(--gap) / 4);
472
+ margin-right: calc(var(--gap) / 4);
473
+ }
474
+ }
475
+ }
476
+ }
477
+ }