aemi 1.0.0 → 1.0.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,523 @@
1
+ *,
2
+ ::before,
3
+ ::after {
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ /**
8
+ * Generics
9
+ */
10
+ .no-top-margin {
11
+ margin-top: 0;
12
+ }
13
+
14
+ .no-right-margin {
15
+ margin-right: 0;
16
+ }
17
+
18
+ .no-left-margin {
19
+ margin-left: 0;
20
+ }
21
+
22
+ .no-bottom-margin {
23
+ margin-bottom: 0;
24
+ }
25
+
26
+ .half-top-margin {
27
+ margin-top: var(--half-spacing-unit);
28
+ }
29
+
30
+ .half-right-margin {
31
+ margin-right: var(--half-spacing-unit);
32
+ }
33
+
34
+ .half-left-margin {
35
+ margin-left: var(--half-spacing-unit);
36
+ }
37
+
38
+ .half-bottom-margin {
39
+ margin-bottom: var(--half-spacing-unit);
40
+ }
41
+
42
+ .quarter-top-margin {
43
+ margin-top: var(--quarter-spacing-unit);
44
+ }
45
+
46
+ .quarter-right-margin {
47
+ margin-right: var(--quarter-spacing-unit);
48
+ }
49
+
50
+ .quarter-left-margin {
51
+ margin-left: var(--quarter-spacing-unit);
52
+ }
53
+
54
+ .quarter-bottom-margin {
55
+ margin-bottom: var(--quarter-spacing-unit);
56
+ }
57
+
58
+ .align-items-center {
59
+ align-items: center;
60
+ }
61
+
62
+
63
+ /**
64
+ * Site header
65
+ */
66
+ .site-header {
67
+ -webkit-backdrop-filter: blur(10px);
68
+ backdrop-filter: blur(10px);
69
+ background-color: var(--background-color-opacity-90);
70
+ position: fixed;
71
+ display: flex;
72
+ flex-flow: row nowrap;
73
+ justify-content: center;
74
+ align-items: center;
75
+ padding: var(--quarter-spacing-unit) 0;
76
+ top: 0;
77
+ left: 0;
78
+ width: 100%;
79
+ min-height: var(--size-unit);
80
+ z-index: 9999;
81
+
82
+ }
83
+
84
+ .site-header-wrapper {
85
+ display: flex;
86
+ flex-flow: row nowrap;
87
+ justify-content: space-between;
88
+ align-items: center;
89
+ position: relative;
90
+ }
91
+
92
+ .site-title {
93
+ display: block;
94
+ font-weight: 300;
95
+ line-height: 1.25;
96
+ margin-bottom: 0;
97
+ float: left;
98
+ z-index: 1000;
99
+
100
+ >img {
101
+ height: 2rem;
102
+
103
+ @media (prefers-color-scheme: dark) {
104
+ & {
105
+ filter: invert(100%);
106
+ }
107
+ }
108
+
109
+ }
110
+
111
+ &,
112
+ &:visited {
113
+ color: $grey-color-dark;
114
+ }
115
+ }
116
+
117
+ .site-nav {
118
+
119
+ display: block;
120
+ height: 100%;
121
+
122
+ z-index: 0;
123
+
124
+ line-height: 1.5;
125
+
126
+ .nav-trigger {
127
+ display: none;
128
+ }
129
+
130
+ .menu-icon {
131
+ display: none;
132
+ font-family: $head-font-family;
133
+ font-weight: 700;
134
+ letter-spacing: .075em;
135
+ margin-right: -.075em;
136
+ text-transform: uppercase;
137
+ }
138
+
139
+ .page-link {
140
+ color: var(--text-color);
141
+ line-height: $base-line-height;
142
+
143
+ // Gaps between nav items, but not on the last one
144
+ &:not(:last-child) {
145
+ margin-right: 20px;
146
+ }
147
+ }
148
+
149
+ @include media-query($on-palm) {
150
+
151
+ position: absolute;
152
+ top: 50%;
153
+ right: var(--quarter-spacing-unit);
154
+ transform: translateY(-50%);
155
+ text-align: right;
156
+
157
+ label[for="nav-trigger"] {
158
+
159
+ -webkit-backdrop-filter: blur(1px);
160
+ backdrop-filter: blur(1px);
161
+
162
+ display: flex;
163
+ border: 2px solid var(--border-color);
164
+ border-radius: var(--border-radius);
165
+ align-items: center;
166
+ height: 100%;
167
+ float: right;
168
+ padding: 0 var(--quarter-spacing-unit);
169
+ z-index: 0;
170
+ cursor: pointer;
171
+
172
+ &:hover {
173
+ border-color: var(--text-color);
174
+ }
175
+
176
+ }
177
+
178
+ .menu-icon {
179
+ display: block;
180
+ float: right;
181
+ line-height: 1.5;
182
+ text-align: center;
183
+ position: relative;
184
+
185
+ &::before {
186
+ content: attr(data-open-text);
187
+ }
188
+ }
189
+
190
+ input~.trigger {
191
+ clear: both;
192
+ display: none;
193
+ }
194
+
195
+ input:checked~label[for="nav-trigger"] {
196
+ > .menu-icon {
197
+ &::before {
198
+ content: attr(data-close-text);
199
+ }
200
+ }
201
+ }
202
+
203
+ input:checked~.trigger {
204
+ -webkit-backdrop-filter: blur(10px);
205
+ backdrop-filter: blur(10px);
206
+ background-color: var(--background-color);
207
+ display: grid;
208
+ grid-auto-rows: min-content;
209
+ gap: calc(var(--quarter-spacing-unit) / 2);
210
+ font-size: x-large;
211
+ padding: calc(var(--size-unit) + var(--quarter-spacing-unit)) var(--quarter-spacing-unit) var(--quarter-spacing-unit) var(--quarter-spacing-unit);
212
+ position: absolute;
213
+ top: calc(-1 * var(--quarter-spacing-unit));
214
+ right: calc(-1 * var(--quarter-spacing-unit));
215
+ height: 100vh;
216
+ width: 100vw;
217
+ z-index: -3;
218
+ }
219
+
220
+ .page-link {
221
+ background-color: var(--background-color);
222
+ border: 2px solid var(--border-color);
223
+ border-radius: calc(var(--border-radius) * 1.5);
224
+ font-family: $head-font-family;
225
+ display: block;
226
+ font-weight: 600;
227
+ line-height: 1;
228
+ padding: var(--quarter-spacing-unit);
229
+
230
+ &:not(:last-child) {
231
+ margin-right: 0;
232
+ }
233
+
234
+ &:hover {
235
+ border-color: var(--text-color);
236
+ text-decoration: none;
237
+ }
238
+ }
239
+ }
240
+ }
241
+
242
+
243
+ .site-content {
244
+ padding-top: var(--spacing-unit);
245
+ }
246
+
247
+ .site-excerpt {
248
+ font-weight: 400;
249
+ font-family: $base-font-family;
250
+ line-height: 1.4;
251
+ }
252
+
253
+
254
+ /**
255
+ * Site footer
256
+ */
257
+ .site-footer {
258
+ border-top: 1px solid var(--border-color);
259
+ padding: var(--spacing-unit) 0;
260
+ position: relative;
261
+ }
262
+
263
+ .footer-header {
264
+
265
+ display: block;
266
+ margin-bottom: var(--half-spacing-unit);
267
+
268
+ .footer-heading {
269
+
270
+ > img {
271
+ height: 2rem;
272
+ @media (prefers-color-scheme: dark) {
273
+ & {
274
+ filter: invert(100%);
275
+ }
276
+ }
277
+ }
278
+ }
279
+ }
280
+
281
+ .footer-content {
282
+ display: grid;
283
+ grid-template-columns: repeat(auto-fill, minmax(200px, fit-content));
284
+ gap: var(--half-spacing-unit);
285
+
286
+ >.footer-cell {
287
+ > :last-child {
288
+ margin-bottom: 0;
289
+ }
290
+ }
291
+
292
+ @include media-query($on-palm) {
293
+ grid-template-columns: 1fr;
294
+ }
295
+
296
+ }
297
+
298
+ .contact-list,
299
+ .social-media-list {
300
+ list-style: none;
301
+ margin-left: 0;
302
+ }
303
+
304
+ .home {
305
+ > :last-child {
306
+ margin-bottom: var(--spacing-unit);
307
+ }
308
+ }
309
+
310
+
311
+ /**
312
+ * Page content
313
+ */
314
+
315
+
316
+ .page-content {
317
+ padding: var(--spacing-unit) 0;
318
+ flex: 1;
319
+ }
320
+
321
+ .entry-header {
322
+ display: flex;
323
+ flex-flow: column;
324
+ justify-content: space-between;
325
+ gap: var(--half-spacing-unit);
326
+ overflow: hidden;
327
+ position: relative;
328
+
329
+ >.entry-thumbnail {
330
+
331
+ >img {
332
+ border-radius: var(--background-radius);
333
+ }
334
+ }
335
+
336
+ >.entry-info {
337
+ clear: both;
338
+ display: flex;
339
+ flex-flow: column nowrap;
340
+ gap: var(--quarter-spacing-unit);
341
+ justify-content: center;
342
+ z-index: 2;
343
+ }
344
+ }
345
+
346
+ .entry-list {
347
+ clear: both;
348
+ display: grid;
349
+ float: none;
350
+ gap: var(--quarter-spacing-unit);
351
+ margin: 0 0 var(--half-spacing-unit) 0;
352
+ padding: 0;
353
+ position: relative;
354
+
355
+ >li {
356
+ list-style: none;
357
+ padding: 0;
358
+ margin: 0;
359
+
360
+ >article {
361
+
362
+ display: block;
363
+ height: fit-content;
364
+ position: relative;
365
+ width: auto;
366
+
367
+ border-radius: calc(var(--background-radius) * 2);
368
+
369
+ > header {
370
+
371
+ background-color: var(--item-background-color);
372
+ background-position: center center;
373
+ background-size: cover;
374
+
375
+ border-radius: calc(var(--background-radius) * 2);
376
+
377
+ position: relative;
378
+
379
+ /* Fixing Safari Bug */
380
+ -webkit-backface-visibility: hidden;
381
+ -moz-backface-visibility: hidden;
382
+ backface-visibility: hidden;
383
+
384
+ -webkit-transform: translate3d(0, 0, 0);
385
+ -moz-transform: translate3d(0, 0, 0);
386
+ transform: translate3d(0, 0, 0);
387
+
388
+ >.entry-thumbnail {
389
+ background-color: var(--item-background-color);
390
+ background-position: center center;
391
+ background-size: cover;
392
+ filter: blur(0);
393
+ position: absolute;
394
+ transform: translate(-50%, -50%) scale(1);
395
+ height: 100%;
396
+ width: 100%;
397
+ top: 50%;
398
+ left: 50%;
399
+ transition-property: filter, opacity, transform;
400
+ transition-duration: var(--transition-timing-std);
401
+ transition-timing-function: var(--transition-function-std);
402
+ }
403
+
404
+ &:not(:hover) {
405
+ >.entry-thumbnail {
406
+ filter: blur(10px);
407
+ transform: translate(-50%, -50%) scale(1.05);
408
+ transition-property: filter, opacity, transform;
409
+ transition-duration: var(--transition-timing-std);
410
+ transition-timing-function: var(--transition-function-std);
411
+ }
412
+ }
413
+
414
+ >.entry-info {
415
+
416
+ background-color: var(--background-color-opacity-60);
417
+
418
+ border-style: solid;
419
+ border-width: 2px;
420
+ border-color: transparent;
421
+
422
+ border-radius: calc(var(--background-radius) * 2);
423
+
424
+ color: var(--text-color);
425
+
426
+ display: flex;
427
+ flex-flow: column nowrap;
428
+ gap: calc(var(--quarter-spacing-unit) / 2);
429
+
430
+ padding: var(--half-spacing-unit);
431
+
432
+ &:hover {
433
+ text-decoration: unset;
434
+ }
435
+
436
+ &.with-thumbnail {
437
+
438
+ background-color: var(--d-background-color-opacity-45);
439
+
440
+ color: var(--d-text-color);
441
+
442
+ min-height: 200px;
443
+
444
+ transition-property: filter, opacity;
445
+ transition-duration: var(--transition-timing-std);
446
+ transition-timing-function: var(--transition-function-std);
447
+
448
+ &:hover {
449
+ filter: blur(10px);
450
+ opacity: 0;
451
+ transition-property: filter, opacity;
452
+ transition-duration: var(--transition-timing-std);
453
+ transition-timing-function: var(--transition-function-std);
454
+ }
455
+
456
+ >.entry-meta {
457
+ color: var(--d-lighten-text-color);
458
+ }
459
+
460
+ }
461
+
462
+ &:not(.with-thumbnail) {
463
+
464
+ border-color: var(--border-color);
465
+
466
+ transition-property: filter;
467
+ transition-duration: var(--transition-timing-std);
468
+ transition-timing-function: var(--transition-function-std);
469
+
470
+ @media (prefers-color-scheme: dark) {
471
+ &:hover {
472
+ filter: brightness(2);
473
+ transition-property: filter;
474
+ transition-duration: var(--transition-timing-std);
475
+ transition-timing-function: var(--transition-function-std);
476
+ }
477
+ }
478
+
479
+ @media (prefers-color-scheme: light) {
480
+ &:hover {
481
+ filter: brightness(0.75);
482
+ transition-property: filter;
483
+ transition-duration: var(--transition-timing-std);
484
+ transition-timing-function: var(--transition-function-std);
485
+ }
486
+ }
487
+
488
+ }
489
+
490
+ h1,
491
+ h2,
492
+ h3 {
493
+ font-size: 3em;
494
+ line-height: 1;
495
+ margin: 0;
496
+ }
497
+
498
+
499
+ }
500
+
501
+ &:only-child {
502
+ margin: 0;
503
+ }
504
+
505
+ }
506
+ }
507
+ }
508
+ }
509
+
510
+ .entry-meta {
511
+ font-size: 1em;
512
+ color: var(--lighten-text-color);
513
+ }
514
+
515
+ .entry-title {
516
+ line-height: 1;
517
+ margin-bottom: 0;
518
+ padding-bottom: var(--quarter-spacing-unit) ;
519
+ }
520
+
521
+ .entry-content {
522
+ margin-bottom: var(--spacing-unit);
523
+ }
@@ -0,0 +1,82 @@
1
+ /**
2
+ * Syntax highlighting styles
3
+ */
4
+ pre.highlight {
5
+ background: var(--background-color-lighten);
6
+ @extend %vertical-rhythm;
7
+
8
+ .highlighter-rouge & {
9
+ background: var(--background-color-lighten);
10
+ }
11
+
12
+ .c { color: #998; font-style: italic } // Comment
13
+ .err { color: #a61717; background-color: #e3d2d2 } // Error
14
+ .k { font-weight: bold } // Keyword
15
+ .o { font-weight: bold } // Operator
16
+ .cm { color: #998; font-style: italic } // Comment.Multiline
17
+ .cp { color: #999; font-weight: bold } // Comment.Preproc
18
+ .c1 { color: #998; font-style: italic } // Comment.Single
19
+ .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special
20
+ .gd { color: #000; background-color: #fdd } // Generic.Deleted
21
+ .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
22
+ .ge { font-style: italic } // Generic.Emph
23
+ .gr { color: #a00 } // Generic.Error
24
+ .gh { color: #999 } // Generic.Heading
25
+ .gi { color: #000; background-color: #dfd } // Generic.Inserted
26
+ .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
27
+ .go { color: #888 } // Generic.Output
28
+ .gp { color: #555 } // Generic.Prompt
29
+ .gs { font-weight: bold } // Generic.Strong
30
+ .gu { color: #aaa } // Generic.Subheading
31
+ .gt { color: #a00 } // Generic.Traceback
32
+ .kc { font-weight: bold } // Keyword.Constant
33
+ .kd { font-weight: bold } // Keyword.Declaration
34
+ .kp { font-weight: bold } // Keyword.Pseudo
35
+ .kr { font-weight: bold } // Keyword.Reserved
36
+ .kt { color: #458; font-weight: bold } // Keyword.Type
37
+ .m { color: #099 } // Literal.Number
38
+ .s { color: #d14 } // Literal.String
39
+ .na { color: #008080 } // Name.Attribute
40
+ .nb { color: #0086B3 } // Name.Builtin
41
+ .nc { color: #458; font-weight: bold } // Name.Class
42
+ .no { color: #008080 } // Name.Constant
43
+ .ni { color: #800080 } // Name.Entity
44
+ .ne { color: #900; font-weight: bold } // Name.Exception
45
+ .nf { color: #900; font-weight: bold } // Name.Function
46
+ .nn { color: #555 } // Name.Namespace
47
+ .nt { color: #000080 } // Name.Tag
48
+ .nv { color: #008080 } // Name.Variable
49
+ .ow { font-weight: bold } // Operator.Word
50
+ .w { color: #bbb } // Text.Whitespace
51
+ .mf { color: #099 } // Literal.Number.Float
52
+ .mh { color: #099 } // Literal.Number.Hex
53
+ .mi { color: #099 } // Literal.Number.Integer
54
+ .mo { color: #099 } // Literal.Number.Oct
55
+ .sb { color: #d14 } // Literal.String.Backtick
56
+ .sc { color: #d14 } // Literal.String.Char
57
+ .sd { color: #d14 } // Literal.String.Doc
58
+ .s2 { color: #d14 } // Literal.String.Double
59
+ .se { color: #d14 } // Literal.String.Escape
60
+ .sh { color: #d14 } // Literal.String.Heredoc
61
+ .si { color: #d14 } // Literal.String.Interpol
62
+ .sx { color: #d14 } // Literal.String.Other
63
+ .sr { color: #009926 } // Literal.String.Regex
64
+ .s1 { color: #d14 } // Literal.String.Single
65
+ .ss { color: #990073 } // Literal.String.Symbol
66
+ .bp { color: #999 } // Name.Builtin.Pseudo
67
+ .vc { color: #008080 } // Name.Variable.Class
68
+ .vg { color: #008080 } // Name.Variable.Global
69
+ .vi { color: #008080 } // Name.Variable.Instance
70
+ .il { color: #099 } // Literal.Number.Integer.Long
71
+ }
72
+
73
+ @media (prefers-color-scheme: dark) {
74
+ pre.highlight {
75
+
76
+ .o, .k, .p { color: var(--lighten-text-color-i); }
77
+
78
+ > code * {
79
+ filter: invert(1);
80
+ }
81
+ }
82
+ }