jekyll-theme-miniplex 0.8.0 → 0.9.1
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.
- checksums.yaml +4 -4
- data/README.md +1 -2
- data/_sass/jekyll-theme-miniplex.sass +59 -44
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 5440c167d1f2a79a571d45e808ebf0693f77a05b1b6ca424829e0f3109618e45
|
|
4
|
+
data.tar.gz: a0279927c9e2595f3fae3a64d60067b954facf47f87f0f76df266adfdb140da6
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b672857e8c8d5d0d3665e143cf3595c0c29c0ba05a7fe3f4abbbd893a81e2d9509545d914c987839d15eeda0ea12a9a7b758e3708f49e008908121712949e8a4
|
|
7
|
+
data.tar.gz: 5dba39b7be52f0d28e7d733e5caa00b2acee8d210419552618da336dec515c4599eb5a74a8a14c4d5c11e55be146ea1d5aab0d5befc454dde44db4cf9f8cc53a
|
data/README.md
CHANGED
|
@@ -63,8 +63,6 @@ miniplex:
|
|
|
63
63
|
|
|
64
64
|
## ToDos & Missing Features
|
|
65
65
|
|
|
66
|
-
- [ ] Dark mode
|
|
67
|
-
- https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#aa-using-a-body-class
|
|
68
66
|
- [ ] In-page navigation
|
|
69
67
|
- [ ] Footer
|
|
70
68
|
- [ ] Maximizable tables
|
|
@@ -76,6 +74,7 @@ miniplex:
|
|
|
76
74
|
|
|
77
75
|
Most recent at the top.
|
|
78
76
|
|
|
77
|
+
- [X] Dark mode
|
|
79
78
|
- [X] Print CSS
|
|
80
79
|
- [X] Mobile nav bugfixing
|
|
81
80
|
- [X] Post author & date flexibility
|
|
@@ -128,17 +128,6 @@ $large_breakpoint: $medium_breakpoint + $large_minimum_left_navigation_width + 2
|
|
|
128
128
|
@mixin linear_responsive_property($property, $viewport_min, $property_min, $viewport_max, $property_max)
|
|
129
129
|
#{$property}: clamp(#{$property_min}, #{$property_min} + #{"calc(("} 100vw - #{$viewport_min} #{")"} * #{math.div($property_max - $property_min, $viewport_max - $viewport_min)} #{")"}, #{$property_max})
|
|
130
130
|
|
|
131
|
-
// Colors
|
|
132
|
-
$primary_foreground_color: #444444
|
|
133
|
-
$heading_foreground_color: #333333
|
|
134
|
-
$interactive_color: #777777
|
|
135
|
-
$interactive_background_color: #eeeeee
|
|
136
|
-
$accent_color_1: #777777
|
|
137
|
-
$outer_background_color: #ffffff
|
|
138
|
-
$content_background_color: #ffffff
|
|
139
|
-
$group_color_level_1: #eeeeee
|
|
140
|
-
$group_color_level_2: #dddddd
|
|
141
|
-
|
|
142
131
|
// Fonts
|
|
143
132
|
@font-face
|
|
144
133
|
font-family: IBMPlexSans
|
|
@@ -202,7 +191,7 @@ $group_color_level_2: #dddddd
|
|
|
202
191
|
|
|
203
192
|
@mixin default_font
|
|
204
193
|
font-family: IBMPlexSans
|
|
205
|
-
color:
|
|
194
|
+
color: var(--primary_foreground_color)
|
|
206
195
|
font-weight: normal
|
|
207
196
|
|
|
208
197
|
@include responsive_property(font-size, $xs: 0.875 * $unit, $s: 1 * $unit, $m: 1.125 * $unit, $otherwise: 1.125 * $unit)
|
|
@@ -215,19 +204,19 @@ $group_color_level_2: #dddddd
|
|
|
215
204
|
|
|
216
205
|
@mixin title_font
|
|
217
206
|
font-family: IBMPlexMono
|
|
218
|
-
color:
|
|
207
|
+
color: var(--heading_foreground_color)
|
|
219
208
|
text-decoration: underline
|
|
220
209
|
font-weight: bold
|
|
221
210
|
|
|
222
211
|
@mixin heading_font
|
|
223
212
|
font-family: IBMPlexSans
|
|
224
|
-
color:
|
|
213
|
+
color: var(--heading_foreground_color)
|
|
225
214
|
font-weight: bold
|
|
226
215
|
|
|
227
216
|
@mixin quote_font
|
|
228
217
|
font-family: IBMPlexSerif
|
|
229
218
|
font-style: italic
|
|
230
|
-
color:
|
|
219
|
+
color: var(--accent_color_1)
|
|
231
220
|
|
|
232
221
|
// Accessibility
|
|
233
222
|
.visually-hidden
|
|
@@ -239,16 +228,41 @@ $group_color_level_2: #dddddd
|
|
|
239
228
|
overflow: hidden
|
|
240
229
|
|
|
241
230
|
&:focus
|
|
242
|
-
color:
|
|
231
|
+
color: var(--primary_foreground_color)
|
|
243
232
|
display: inline-block
|
|
244
233
|
height: auto
|
|
245
234
|
width: auto
|
|
246
235
|
position: static
|
|
247
236
|
margin: auto
|
|
248
237
|
|
|
238
|
+
:root
|
|
239
|
+
// Colors for light mode
|
|
240
|
+
--primary_foreground_color: #444444
|
|
241
|
+
--heading_foreground_color: #333333
|
|
242
|
+
--interactive_color: #777777
|
|
243
|
+
--interactive_background_color: #eeeeee
|
|
244
|
+
--accent_color_1: #777777
|
|
245
|
+
--outer_background_color: #ffffff
|
|
246
|
+
--content_background_color: #ffffff
|
|
247
|
+
--group_color_level_1: #eeeeee
|
|
248
|
+
--group_color_level_2: #dddddd
|
|
249
|
+
|
|
250
|
+
|
|
251
|
+
:root
|
|
252
|
+
@media (prefers-color-scheme: dark)
|
|
253
|
+
--primary_foreground_color: #ffffff
|
|
254
|
+
--heading_foreground_color: #eeeeee
|
|
255
|
+
--interactive_color: #eeeeee
|
|
256
|
+
--interactive_background_color: #777777
|
|
257
|
+
--accent_color_1: #dddddd
|
|
258
|
+
--outer_background_color: #333333
|
|
259
|
+
--content_background_color: #333333
|
|
260
|
+
--group_color_level_1: #555555
|
|
261
|
+
--group_color_level_2: #777777
|
|
262
|
+
|
|
249
263
|
body
|
|
250
264
|
@include default_font
|
|
251
|
-
background:
|
|
265
|
+
background: var(--outer_background_color)
|
|
252
266
|
width: 100%
|
|
253
267
|
height: 100%
|
|
254
268
|
min-height: 100%
|
|
@@ -268,7 +282,7 @@ body
|
|
|
268
282
|
height: 100vh
|
|
269
283
|
|
|
270
284
|
main#content
|
|
271
|
-
background:
|
|
285
|
+
background: var(--content_background_color)
|
|
272
286
|
|
|
273
287
|
@include extrasmall_mode
|
|
274
288
|
padding: $extrasmall_padding
|
|
@@ -311,7 +325,7 @@ body
|
|
|
311
325
|
|
|
312
326
|
strong, b
|
|
313
327
|
font-weight: bold
|
|
314
|
-
color:
|
|
328
|
+
color: var(--heading_foreground_color)
|
|
315
329
|
|
|
316
330
|
em, i
|
|
317
331
|
font-style: italic
|
|
@@ -320,11 +334,11 @@ body
|
|
|
320
334
|
@include responsive_property(font-size, $xs: 0.625 * $unit, $s: 0.75 * $unit, $m: 0.875 * $unit, $otherwise: 0.875 * $unit)
|
|
321
335
|
@include print_mode
|
|
322
336
|
font-size: 0.625 * $unit
|
|
323
|
-
color:
|
|
337
|
+
color: var(--accent_color_1)
|
|
324
338
|
|
|
325
339
|
a
|
|
326
|
-
color:
|
|
327
|
-
background-color:
|
|
340
|
+
color: var(--interactive_color)
|
|
341
|
+
background-color: var(--interactive_background_color)
|
|
328
342
|
text-decoration: none
|
|
329
343
|
padding-left: math.div($unit, 4)
|
|
330
344
|
padding-right: math.div($unit, 4)
|
|
@@ -346,7 +360,7 @@ body
|
|
|
346
360
|
|
|
347
361
|
h2
|
|
348
362
|
@include heading_font
|
|
349
|
-
color:
|
|
363
|
+
color: var(--heading_foreground_color)
|
|
350
364
|
@include responsive_property(font-size, $xs: 1.25 * $unit, $s: 1.5 * $unit, $m: 1.75 * $unit, $otherwise: 1.75 * $unit)
|
|
351
365
|
@include responsive_property(margin-top, $xs: 1.5 * $unit, $s: 1.75 * $unit, $m: 2 * $unit, $otherwise: 2 * $unit)
|
|
352
366
|
@include responsive_property(margin-bottom, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
|
|
@@ -358,7 +372,7 @@ body
|
|
|
358
372
|
|
|
359
373
|
h3
|
|
360
374
|
@include heading_font
|
|
361
|
-
color:
|
|
375
|
+
color: var(--heading_foreground_color)
|
|
362
376
|
|
|
363
377
|
@include responsive_property(font-size, $xs: 1.125 * $unit, $s: 1.25 * $unit, $m: 1.5 * $unit, $otherwise: 1.5 * $unit)
|
|
364
378
|
@include responsive_property(margin-top, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
|
|
@@ -371,7 +385,7 @@ body
|
|
|
371
385
|
|
|
372
386
|
h4
|
|
373
387
|
@include heading_font
|
|
374
|
-
color:
|
|
388
|
+
color: var(--heading_foreground_color)
|
|
375
389
|
@include responsive_property(font-size, $xs: 1 * $unit, $s: 1.125 * $unit, $m: 1.25 * $unit, $otherwise: 1.25 * $unit)
|
|
376
390
|
@include responsive_property(margin-top, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
|
|
377
391
|
@include responsive_property(margin-bottom, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
|
|
@@ -383,7 +397,7 @@ body
|
|
|
383
397
|
|
|
384
398
|
h5
|
|
385
399
|
@include heading_font
|
|
386
|
-
color:
|
|
400
|
+
color: var(--heading_foreground_color)
|
|
387
401
|
@include responsive_property(font-size, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
|
|
388
402
|
@include responsive_property(margin-top, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
|
|
389
403
|
@include responsive_property(margin-bottom, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
|
|
@@ -395,7 +409,7 @@ body
|
|
|
395
409
|
|
|
396
410
|
h6
|
|
397
411
|
@include heading_font
|
|
398
|
-
color:
|
|
412
|
+
color: var(--primary_foreground_color)
|
|
399
413
|
@include responsive_property(font-size, $xs: 0.625 * $unit, $s: 0.75 * $unit, $m: 0.875 * $unit, $otherwise: 0.875 * $unit)
|
|
400
414
|
@include responsive_property(margin-top, $xs: 0.625 * $unit, $s: 0.75 * $unit, $m: 0.875 * $unit, $otherwise: 0.875 * $unit)
|
|
401
415
|
@include responsive_property(margin-bottom, $xs: 0.625 * $unit, $s: 0.75 * $unit, $m: 0.875 * $unit, $otherwise: 0.875 * $unit)
|
|
@@ -407,8 +421,8 @@ body
|
|
|
407
421
|
|
|
408
422
|
hr
|
|
409
423
|
border: 0
|
|
410
|
-
border-top: 1px solid
|
|
411
|
-
border-bottom: 1px solid
|
|
424
|
+
border-top: 1px solid var(--accent_color_1)
|
|
425
|
+
border-bottom: 1px solid var(--accent_color_1)
|
|
412
426
|
|
|
413
427
|
// Ordered lists
|
|
414
428
|
ol
|
|
@@ -423,7 +437,7 @@ body
|
|
|
423
437
|
ol li::before
|
|
424
438
|
display: inline-block
|
|
425
439
|
width: 1 * $unit
|
|
426
|
-
color:
|
|
440
|
+
color: var(--accent_color_1)
|
|
427
441
|
content: counter(ol-counter) "."
|
|
428
442
|
@include responsive_property(margin-right, $xs: 0.25 * $unit, $s: 0.25 * $unit, $otherwise: 0)
|
|
429
443
|
|
|
@@ -443,7 +457,7 @@ body
|
|
|
443
457
|
ul li::before
|
|
444
458
|
display: inline-block
|
|
445
459
|
width: 1 * $unit
|
|
446
|
-
color:
|
|
460
|
+
color: var(--accent_color_1)
|
|
447
461
|
content: '–'
|
|
448
462
|
@include responsive_property(margin-right, $xs: 0.25 * $unit, $s: 0.25 * $unit, $otherwise: 0)
|
|
449
463
|
|
|
@@ -465,7 +479,7 @@ body
|
|
|
465
479
|
@include quote_font
|
|
466
480
|
@include responsive_property(margin-top, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
|
|
467
481
|
@include responsive_property(margin-bottom, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
|
|
468
|
-
background-color:
|
|
482
|
+
background-color: var(--group_color_level_1)
|
|
469
483
|
padding: $unit
|
|
470
484
|
|
|
471
485
|
p
|
|
@@ -474,7 +488,7 @@ body
|
|
|
474
488
|
table
|
|
475
489
|
@include responsive_property(margin-bottom, $xs: 1.5 * $unit, $s: 1.75 * $unit, $m: 2 * $unit, $otherwise: 2 * $unit)
|
|
476
490
|
@include responsive_property(font-size, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
|
|
477
|
-
background-color:
|
|
491
|
+
background-color: var(--group_color_level_1)
|
|
478
492
|
|
|
479
493
|
@include extrasmall_table_mode
|
|
480
494
|
width: 100%
|
|
@@ -544,7 +558,7 @@ body
|
|
|
544
558
|
|
|
545
559
|
tbody
|
|
546
560
|
tr:nth-child(odd)
|
|
547
|
-
background-color:
|
|
561
|
+
background-color: var(--group_color_level_2)
|
|
548
562
|
|
|
549
563
|
@include medium_table_mode
|
|
550
564
|
margin-left: auto
|
|
@@ -554,7 +568,7 @@ body
|
|
|
554
568
|
th
|
|
555
569
|
font-weight: bold
|
|
556
570
|
text-align: left
|
|
557
|
-
background-color:
|
|
571
|
+
background-color: var(--group_color_level_2)
|
|
558
572
|
@include responsive_property(padding, $xs: math.div($unit, 8), $s: math.div($unit, 4), $m: math.div($unit, 2), $otherwise: math.div($unit, 2))
|
|
559
573
|
|
|
560
574
|
tbody
|
|
@@ -571,7 +585,7 @@ body
|
|
|
571
585
|
th
|
|
572
586
|
font-weight: bold
|
|
573
587
|
text-align: left
|
|
574
|
-
background-color:
|
|
588
|
+
background-color: var(--group_color_level_2)
|
|
575
589
|
padding: math.div($unit, 2)
|
|
576
590
|
|
|
577
591
|
tbody
|
|
@@ -580,7 +594,7 @@ body
|
|
|
580
594
|
|
|
581
595
|
// Desktop Navigation
|
|
582
596
|
nav#navigation-desktop
|
|
583
|
-
background-color:
|
|
597
|
+
background-color: var(--content-background-color)
|
|
584
598
|
|
|
585
599
|
// Display only in large mode
|
|
586
600
|
@include large_mode
|
|
@@ -608,7 +622,7 @@ body
|
|
|
608
622
|
font-size: 1.25 * $unit
|
|
609
623
|
|
|
610
624
|
a
|
|
611
|
-
color:
|
|
625
|
+
color: var(--heading_foreground_color)
|
|
612
626
|
text-decoration: none
|
|
613
627
|
|
|
614
628
|
a.active
|
|
@@ -638,7 +652,7 @@ body
|
|
|
638
652
|
|
|
639
653
|
#navigation-items
|
|
640
654
|
grid-row: navigation-items / span 1
|
|
641
|
-
background-color:
|
|
655
|
+
background-color: var(--content_background_color)
|
|
642
656
|
overflow-y: scroll
|
|
643
657
|
@include responsive_property(padding-top, $m: math.div($unit, 2), $otherwise: math.div($unit, 4))
|
|
644
658
|
@include responsive_property(padding-left, $m: $unit, $otherwise: math.div($unit, 2))
|
|
@@ -652,7 +666,7 @@ body
|
|
|
652
666
|
font-size: 1.25 * $unit
|
|
653
667
|
|
|
654
668
|
a
|
|
655
|
-
color:
|
|
669
|
+
color: var(--heading_foreground_color)
|
|
656
670
|
text-decoration: none
|
|
657
671
|
|
|
658
672
|
a.active
|
|
@@ -667,7 +681,7 @@ body
|
|
|
667
681
|
|
|
668
682
|
#navigation-controls
|
|
669
683
|
grid-row: navigation-controls / span 1
|
|
670
|
-
background-color:
|
|
684
|
+
background-color: var(--content_background_color)
|
|
671
685
|
display: flex
|
|
672
686
|
flex-direction: row
|
|
673
687
|
align-items: center
|
|
@@ -681,7 +695,7 @@ body
|
|
|
681
695
|
@include responsive_property(padding-bottom, $m: math.div($unit, 2), $otherwise: math.div($unit, 4))
|
|
682
696
|
|
|
683
697
|
a
|
|
684
|
-
color:
|
|
698
|
+
color: var(--heading_foreground_color)
|
|
685
699
|
@include responsive_property(padding-top, $m: math.div($unit, 2), $otherwise: math.div($unit, 4))
|
|
686
700
|
@include responsive_property(padding-bottom, $m: math.div($unit, 2), $otherwise: math.div($unit, 4))
|
|
687
701
|
|
|
@@ -693,6 +707,7 @@ body
|
|
|
693
707
|
button#mobile-navigation-toggle
|
|
694
708
|
@include responsive_property(font-size, $xs: 1.125 * $unit, $s: 1.25 * $unit, $m: 1.5 * $unit, $otherwise: 1.5 * $unit)
|
|
695
709
|
font-weight: bold
|
|
710
|
+
color: var(--heading_foreground_color)
|
|
696
711
|
cursor: pointer
|
|
697
712
|
display: flex
|
|
698
713
|
align-items: center
|
|
@@ -726,7 +741,7 @@ body
|
|
|
726
741
|
display: none
|
|
727
742
|
|
|
728
743
|
#navigation-controls
|
|
729
|
-
box-shadow: 0 math.div($unit, 2) math.div($unit, 1) rgba(
|
|
744
|
+
box-shadow: 0 math.div($unit, 2) math.div($unit, 1) rgba(var(--heading_foreground_color), 0.4)
|
|
730
745
|
|
|
731
746
|
button#mobile-navigation-toggle
|
|
732
747
|
--icon-url: url("/assets/images/menu-outline@2x.png")
|
|
@@ -738,7 +753,7 @@ body
|
|
|
738
753
|
|
|
739
754
|
#navigation-items
|
|
740
755
|
display: block
|
|
741
|
-
box-shadow: 0 math.div($unit, 2) math.div($unit, 1) rgba(
|
|
756
|
+
box-shadow: 0 math.div($unit, 2) math.div($unit, 1) rgba(var(--heading_foreground_color), 0.4)
|
|
742
757
|
|
|
743
758
|
#navigation-controls
|
|
744
759
|
button#mobile-navigation-toggle
|