jekyll-theme-miniplex 0.1.0

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 ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA256:
3
+ metadata.gz: b98ef2cdca8d1e2ee4393feb6f226d0ce591da0ae47407561719792ccd4b7127
4
+ data.tar.gz: 4e999c53cc2632b652614fb93e0f1e825e4ad6956061ce965550a8615d52ca0b
5
+ SHA512:
6
+ metadata.gz: cc32d617ab531aa6bb880ef4107737e631a3498dd2d3b6e20d3928d6a6f6d50536cae69e1ab033369ad0fa41235de918677b93c75561b0458e8b595ce5844c74
7
+ data.tar.gz: '086b7f27bb28766f0dea9324dadd99dd907e58077a934923032eb1b2f8f142d4769d62a2046af18cc775b54b7e1790572bcae808e05ada7513675e7c3c3e5380'
data/LICENSE.txt ADDED
@@ -0,0 +1,21 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2022 Timo Würsch
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+ THE SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,35 @@
1
+ # jekyll-theme-miniplex
2
+
3
+ A Jekyll theme.
4
+
5
+ ## Installation
6
+
7
+ Add this line to your Jekyll site's `Gemfile`:
8
+
9
+ ```ruby
10
+ gem "jekyll-theme-miniplex"
11
+ ```
12
+
13
+ And add this line to your Jekyll site's `_config.yml`:
14
+
15
+ ```yaml
16
+ theme: jekyll-theme-miniplex
17
+ ```
18
+
19
+ And then execute:
20
+
21
+ $ bundle
22
+
23
+ Or install it yourself as:
24
+
25
+ $ gem install jekyll-theme-miniplex
26
+
27
+ ## Usage
28
+
29
+ TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets.
30
+
31
+
32
+ ## License
33
+
34
+ The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
35
+
data/_config.yml ADDED
@@ -0,0 +1,6 @@
1
+ # _config.yml for jekyll-theme-miniplex.
2
+ # Jekyll merges this with the user's _config.yml, see
3
+ # https://jekyllrb.com/docs/themes/#pre-configuring-theme-gems40
4
+
5
+ plugins:
6
+ - jekyll-coffeescript
@@ -0,0 +1,18 @@
1
+ <ul>
2
+ <li id="site-title"><a href="/">{{ site.title }}</a></li>
3
+ <li>
4
+ {% if page.url == "/" %}
5
+ <a href="/" class="active">Start</a>
6
+ {% else %}
7
+ <a href="/">Start</a>
8
+ {% endif %}
9
+ </li>
10
+ <li>
11
+ {% assign inside_blog = page.url | matches: "^/blog/" %}
12
+ {% if inside_blog %}
13
+ <a href="/blog/" class="active">Blog</a>
14
+ {% else %}
15
+ <a href="/blog/">Blog</a>
16
+ {% endif %}
17
+ </li>
18
+ </ul>
@@ -0,0 +1,25 @@
1
+ <div id="transparent-nav-close-area">
2
+ </div>
3
+ <ul id="navigation-items">
4
+ <li>
5
+ {% if page.url == "/" %}
6
+ <a href="/" class="active">Start</a>
7
+ {% else %}
8
+ <a href="/">Start</a>
9
+ {% endif %}
10
+ </li>
11
+ <li>
12
+ {% assign inside_blog = page.url | matches: "^/blog/" %}
13
+ {% if inside_blog %}
14
+ <a href="/blog/" class="active">Blog</a>
15
+ {% else %}
16
+ <a href="/blog/">Blog</a>
17
+ {% endif %}
18
+ </li>
19
+ </ul>
20
+ <ul id="navigation-controls">
21
+ <li id="site-title"><a href="/">{{ site.title }}</a></li>
22
+ <li>
23
+ <button id="mobile-navigation-toggle">Menü</button>
24
+ </li>
25
+ </ul>
@@ -0,0 +1,25 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="initial-scale=1, maximum-scale=1">
6
+ <title>{{ page.title }}</title>
7
+ <link rel="stylesheet" href="/assets/css/main.css">
8
+ <script type="text/javascript" src="/assets/js/main.js"></script>
9
+ </head>
10
+ <body>
11
+ <div id="layout">
12
+ <main id="content">
13
+ <section>
14
+ {{ content }}
15
+ </section>
16
+ </main>
17
+ <nav id="navigation-desktop">
18
+ {% include navigation_desktop.html %}
19
+ </nav>
20
+ <nav id="navigation-mobile" data-state="closed">
21
+ {% include navigation_mobile.html %}
22
+ </nav>
23
+ </div>
24
+ </body>
25
+ </html>
@@ -0,0 +1,11 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+ {{ content }}
5
+ <ul>
6
+ {% for p in site.posts %}
7
+ <li>
8
+ <a href="{{ p.url }}">{{ p.title }}</a>
9
+ </li>
10
+ {% endfor %}
11
+ </ul>
@@ -0,0 +1,5 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ {{ content }}
@@ -0,0 +1,5 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ {{ content }}
@@ -0,0 +1,613 @@
1
+ @use "sass:meta"
2
+ @use "sass:map"
3
+ @use "sass:math"
4
+ @use "sass:list"
5
+
6
+ @import "reset"
7
+
8
+ // Basics
9
+ $unit: 16px
10
+
11
+ // Layouts: Breakpoints and layout parameters
12
+ // XS - extra small
13
+ $extrasmall_padding: math.div($unit, 4)
14
+ $extrasmall_border: math.div($unit, 8)
15
+ $extrasmall_margin: math.div($unit, 4)
16
+ $extrasmall_line_height: 1.25
17
+
18
+ // S - small
19
+ $small_breakpoint: 320px
20
+ $small_padding: math.div($unit, 4)
21
+ $small_border: math.div($unit, 8)
22
+ $small_margin: math.div($unit, 2)
23
+ $small_table_breakpoint: $small_breakpoint
24
+ $small_line_height: 1.5
25
+
26
+ // M - medium
27
+ $medium_content_width: 42 * $unit
28
+ $medium_padding: 3 * $unit
29
+ $medium_border: math.div($unit, 8)
30
+ $medium_minimum_vertical_margin: $small_margin
31
+ $medium_maximum_horizontal_margin: 4 * $unit
32
+ $medium_maximum_vertical_margin: $medium_maximum_horizontal_margin
33
+ $medium_breakpoint: $medium_content_width + 2 * $medium_padding + 2 * $medium_border + 2 * $medium_minimum_vertical_margin
34
+ $medium_table_breakpoint: 36 * $unit // This table breakpoint is independent of the layout breakpoint
35
+ $medium_line_height: 1.5
36
+
37
+ // L - large: With left navigation pane
38
+ $large_minimum_left_navigation_width: 16 * $unit
39
+ $large_maximum_left_navigation_width: 24 * $unit
40
+ $large_breakpoint: $medium_breakpoint + $large_minimum_left_navigation_width + 2 * $medium_maximum_horizontal_margin
41
+
42
+ // Page layout modes, based on above breakpoints
43
+ @mixin extrasmall_mode
44
+ @media screen and (max-width: $small_breakpoint - 1)
45
+ @content
46
+
47
+ @mixin small_mode
48
+ @media screen and (min-width: $small_breakpoint) and (max-width: $medium_breakpoint - 1)
49
+ @content
50
+
51
+ @mixin medium_mode
52
+ @media screen and (min-width: $medium_breakpoint) and (max-width: $large_breakpoint - 1)
53
+ @content
54
+
55
+ @mixin below_large_mode
56
+ @media screen and (max-width: $large_breakpoint - 1)
57
+ @content
58
+
59
+ @mixin large_mode
60
+ @media screen and (min-width: $large_breakpoint)
61
+ @content
62
+
63
+ // Table layout modes
64
+ @mixin extrasmall_table_mode
65
+ @media screen and (max-width: $small_table_breakpoint - 1)
66
+ @content
67
+
68
+ @mixin small_table_mode
69
+ @media screen and (min-width: $small_table_breakpoint) and (max-width: $medium_table_breakpoint - 1)
70
+ @content
71
+
72
+ @mixin medium_table_mode
73
+ @media screen and (min-width: $medium_table_breakpoint)
74
+ @content
75
+
76
+ // Creates a CSS property with separate values depending on the mode/breakpoint.
77
+ // Modes "xs", "s", "m" and "l" are available as keyword arguments. Examples:
78
+ //
79
+ // responsive_property(padding, $xs: 10px, $s: 20px)
80
+ // -> will set padding to 10px for XS mode and 20px for S mode
81
+ //
82
+ // responsive_property(padding, $xs: 10px, $otherwise: 100px)
83
+ // -> will set padding to 10px for XS mode and
84
+ // explicitly to 100px for all other modes
85
+ @mixin responsive_property($property, $arguments...)
86
+ $modes: (xs, s, m, l)
87
+ $arguments: meta.keywords($arguments)
88
+
89
+ @each $mode in $modes
90
+ @if map.has-key($arguments, $mode)
91
+ $value: map.get($arguments, $mode)
92
+ @if $mode == "xs"
93
+ @include extrasmall_mode
94
+ #{$property}: #{$value}
95
+ @else if $mode == "s"
96
+ @include small_mode
97
+ #{$property}: #{$value}
98
+ @else if $mode == "m"
99
+ @include medium_mode
100
+ #{$property}: #{$value}
101
+ @else if $mode == "l"
102
+ @include large_mode
103
+ #{$property}: #{$value}
104
+ @else
105
+ @if map.has-key($arguments, "otherwise")
106
+ $value: map.get($arguments, "otherwise")
107
+ @if $mode == "xs"
108
+ @include extrasmall_mode
109
+ #{$property}: #{$value}
110
+ @else if $mode == "s"
111
+ @include small_mode
112
+ #{$property}: #{$value}
113
+ @else if $mode == "m"
114
+ @include medium_mode
115
+ #{$property}: #{$value}
116
+ @else if $mode == "l"
117
+ @include large_mode
118
+ #{$property}: #{$value}
119
+
120
+ // Creates a property that behaves as follows:
121
+ // - If the viewport is narrower than $viewport_min, the property is set to $property_min
122
+ // - If the viewport is wider than $viewport_max, the property is set to $property_max
123
+ // - Between the minimum and maximum, the property is scaled linearly depending on the viewport width
124
+ @mixin linear_responsive_property($property, $viewport_min, $property_min, $viewport_max, $property_max)
125
+ #{$property}: clamp(#{$property_min}, #{$property_min} + #{"calc(("} 100vw - #{$viewport_min} #{")"} * #{math.div($property_max - $property_min, $viewport_max - $viewport_min)} #{")"}, #{$property_max})
126
+
127
+ // Colors
128
+ $primary_foreground_color: #555555
129
+ $heading_foreground_color: #333333
130
+ $interactive_color: #999999
131
+ $interactive_background_color: #eeeeee
132
+ $accent_color_1: #999999
133
+ $outer_background_color: #ffffff
134
+ $content_background_color: #ffffff
135
+ $group_color_level_1: #eeeeee
136
+ $group_color_level_2: #dddddd
137
+
138
+ // Fonts
139
+ @font-face
140
+ font-family: IBMPlexSans
141
+ font-weight: normal
142
+ font-style: normal
143
+ src: url("../fonts/IBMPlexSans-Regular.woff2")
144
+
145
+ @font-face
146
+ font-family: IBMPlexSans
147
+ font-weight: bold
148
+ font-style: normal
149
+ src: url("../fonts/IBMPlexSans-Bold.woff2")
150
+
151
+ @font-face
152
+ font-family: IBMPlexSans
153
+ font-weight: normal
154
+ font-style: italic
155
+ src: url("../fonts/IBMPlexSans-Italic.woff2")
156
+
157
+ @font-face
158
+ font-family: IBMPlexSans
159
+ font-weight: bold
160
+ font-style: italic
161
+ src: url("../fonts/IBMPlexSans-BoldItalic.woff2")
162
+
163
+ @font-face
164
+ font-family: IBMPlexMono
165
+ font-weight: normal
166
+ font-style: normal
167
+ src: url("../fonts/IBMPlexMono-Regular.woff2")
168
+
169
+ @font-face
170
+ font-family: IBMPlexMono
171
+ font-weight: bold
172
+ font-style: normal
173
+ src: url("../fonts/IBMPlexMono-Bold.woff2")
174
+
175
+ @font-face
176
+ font-family: IBMPlexMono
177
+ font-weight: normal
178
+ font-style: italic
179
+ src: url("../fonts/IBMPlexMono-Italic.woff2")
180
+
181
+ @font-face
182
+ font-family: IBMPlexMono
183
+ font-weight: bold
184
+ font-style: italic
185
+ src: url("../fonts/IBMPlexMono-BoldItalic.woff2")
186
+
187
+ @font-face
188
+ font-family: IBMPlexSerif
189
+ font-weight: normal
190
+ font-style: italic
191
+ src: url("../fonts/IBMPlexSerif-Italic.woff2")
192
+
193
+ @font-face
194
+ font-family: IBMPlexSerif
195
+ font-weight: bold
196
+ font-style: italic
197
+ src: url("../fonts/IBMPlexSerif-BoldItalic.woff2")
198
+
199
+
200
+ @mixin default_font
201
+ font-family: IBMPlexSans
202
+ @include responsive_property(font-size, $xs: 0.875 * $unit, $s: 1 * $unit, $m: 1.125 * $unit, $otherwise: 1.125 * $unit)
203
+ font-weight: normal
204
+ @include responsive_property(line-height, $xs: $extrasmall_line_height, $s: $small_line_height, $m: $medium_line_height, $otherwise: $medium_line_height)
205
+ color: $primary_foreground_color
206
+
207
+ @mixin title_font
208
+ font-family: IBMPlexMono
209
+ color: $heading_foreground_color
210
+ text-decoration: underline
211
+ font-weight: bold
212
+
213
+ @mixin heading_font
214
+ font-family: IBMPlexSans
215
+ color: $heading_foreground_color
216
+ font-weight: bold
217
+
218
+ @mixin quote_font
219
+ font-family: IBMPlexSerif
220
+ font-style: italic
221
+ color: $accent_color_1
222
+
223
+ body
224
+ @include default_font
225
+ background: $outer_background_color
226
+ width: 100%
227
+ height: 100%
228
+ min-height: 100%
229
+
230
+ div#layout
231
+ @include large_mode
232
+ display: grid
233
+ height: 100vh
234
+ grid-template-columns: [left-navigation] auto [content] 1fr
235
+ grid-template-rows: auto
236
+
237
+ @include below_large_mode
238
+ display: flex
239
+ flex-flow: column nowrap
240
+ align-items: stretch
241
+ justify-content: space-between
242
+ height: 100vh
243
+
244
+ main#content
245
+ background: $content_background_color
246
+
247
+ @include extrasmall_mode
248
+ padding: $extrasmall_padding
249
+ margin: $extrasmall_margin
250
+
251
+ @include small_mode
252
+ @include linear_responsive_property("padding", 26 * $unit, 4px, $medium_breakpoint, 48px)
253
+ margin: $small_margin
254
+
255
+ @include medium_mode
256
+ width: $medium_content_width
257
+ padding: $medium_padding
258
+ margin-left: calc((100vw - #{$medium_content_width} - #{2*$medium_padding} - #{2*$medium_border}) / 2)
259
+ margin-right: calc((100vw - #{$medium_content_width} - #{2*$medium_padding} - #{2*$medium_border}) / 2)
260
+ margin-top: #{"min("}$medium_maximum_vertical_margin, calc((100vw - #{$medium_content_width} - #{2*$medium_padding} - #{2*$medium_border}) / 2)#{")"}
261
+ margin-bottom: #{"min("}$medium_maximum_vertical_margin, calc((100vw - #{$medium_content_width} - #{2*$medium_padding} - #{2*$medium_border}) / 2)#{")"}
262
+
263
+ @include large_mode
264
+ grid-column: content / span 1
265
+ grid-row: 1 / span 1
266
+ width: $medium_content_width
267
+ padding: $medium_padding
268
+ margin-left: auto
269
+ margin-right: auto
270
+ margin-top: $medium_maximum_horizontal_margin
271
+ margin-bottom: $medium_maximum_horizontal_margin
272
+
273
+ p
274
+ @include default_font
275
+ @include responsive_property(margin-bottom, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise:1 * $unit)
276
+
277
+ strong
278
+ font-weight: bold
279
+ color: $heading_foreground_color
280
+
281
+
282
+ em
283
+ font-style: italic
284
+
285
+ a
286
+ color: $interactive-color
287
+ background-color: $interactive_background_color
288
+ text-decoration: none
289
+
290
+ h1
291
+ @include title_font
292
+ @include responsive_property(font-size, $xs: 1.75 * $unit, $s: 2 * $unit, $m: 2.25 * $unit, $otherwise:2.25 * $unit)
293
+ @include responsive_property(margin-bottom, $xs: 1.5 * $unit, $s: 1.75 * $unit, $m: 2 * $unit, $otherwise: 2 * $unit)
294
+
295
+ h2
296
+ @include heading_font
297
+ color: $heading_foreground_color
298
+ @include responsive_property(font-size, $xs: 1.25 * $unit, $s: 1.5 * $unit, $m: 1.75 * $unit, $otherwise: 1.75 * $unit)
299
+ @include responsive_property(margin-top, $xs: 1.5 * $unit, $s: 1.75 * $unit, $m: 2 * $unit, $otherwise: 2 * $unit)
300
+ @include responsive_property(margin-bottom, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
301
+
302
+ h3
303
+ @include heading_font
304
+ color: $heading_foreground_color
305
+
306
+ @include responsive_property(font-size, $xs: 1.125 * $unit, $s: 1.25 * $unit, $m: 1.5 * $unit, $otherwise: 1.5 * $unit)
307
+ @include responsive_property(margin-top, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
308
+ @include responsive_property(margin-bottom, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
309
+
310
+ h4
311
+ @include heading_font
312
+ color: $heading_foreground_color
313
+ @include responsive_property(font-size, $xs: 1 * $unit, $s: 1.125 * $unit, $m: 1.25 * $unit, $otherwise: 1.25 * $unit)
314
+ @include responsive_property(margin-top, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
315
+ @include responsive_property(margin-bottom, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
316
+
317
+ h5
318
+ @include heading_font
319
+ color: $heading_foreground_color
320
+
321
+
322
+ @include responsive_property(font-size, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
323
+ @include responsive_property(margin-top, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
324
+ @include responsive_property(margin-bottom, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
325
+
326
+
327
+ // Ordered lists
328
+ ol
329
+ counter-reset: ol-counter 0
330
+ @include responsive_property(margin-bottom, $xs: 1.5 * $unit, $s: 1.75 * $unit, $m: 2 * $unit, $otherwise: 2 * $unit)
331
+
332
+ ol li
333
+ counter-increment: ol-counter
334
+ text-indent: -1 * $unit
335
+ margin-left: 2 * $unit
336
+
337
+ ol li::before
338
+ display: inline-block
339
+ width: 1 * $unit
340
+ color: $accent_color_1
341
+ content: counter(ol-counter) "."
342
+ @include responsive_property(margin-right, $xs: 0.25 * $unit, $s: 0.25 * $unit, $otherwise: 0)
343
+
344
+ li ol
345
+ margin-top: 0.75 * $unit
346
+ @include responsive_property(margin-left, $xs: 0.25 * $unit, $s: 0.5 * $unit, $otherwise: 1 * $unit)
347
+ margin-bottom: 0.75 * $unit
348
+
349
+ // Unordered lists
350
+ ul
351
+ @include responsive_property(margin-bottom, $xs: 1.5 * $unit, $s: 1.75 * $unit, $m: 2 * $unit, $otherwise: 2 * $unit)
352
+
353
+ ul li
354
+ text-indent: -1 * $unit
355
+ margin-left: 2 * $unit
356
+
357
+ ul li::before
358
+ display: inline-block
359
+ width: 1 * $unit
360
+ color: $accent_color_1
361
+ content: '–'
362
+ @include responsive_property(margin-right, $xs: 0.25 * $unit, $s: 0.25 * $unit, $otherwise: 0)
363
+
364
+ li ul
365
+ margin-top: 0.75 * $unit
366
+ @include responsive_property(margin-left, $xs: 0.25 * $unit, $s: 0.5 * $unit, $otherwise: 1 * $unit)
367
+ margin-bottom: 0.75 * $unit
368
+
369
+ // List items
370
+ li
371
+ margin-bottom: math.div($unit, 2)
372
+
373
+ img
374
+ max-width: 100%
375
+
376
+ blockquote
377
+ @include quote_font
378
+ @include responsive_property(margin-top, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
379
+ @include responsive_property(margin-bottom, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
380
+ background-color: $group_color_level_1
381
+ padding: $unit
382
+
383
+ p
384
+ margin-bottom: 0
385
+
386
+ table
387
+ @include responsive_property(margin-bottom, $xs: 1.5 * $unit, $s: 1.75 * $unit, $m: 2 * $unit, $otherwise: 2 * $unit)
388
+ @include responsive_property(font-size, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
389
+ background-color: $group_color_level_1
390
+
391
+ @include extrasmall_table_mode
392
+ width: 100%
393
+ display: block
394
+
395
+ thead, tbody, th, td, tr
396
+ display: block
397
+
398
+ thead tr
399
+ position: absolute
400
+ top: -9999px
401
+ left: -9999px
402
+
403
+ td::before
404
+ position: absolute
405
+ content: attr(data-responsive-td-heading)
406
+ top: math.div($unit, 4)
407
+ font-weight: bold
408
+ display: -webkit-box
409
+ -webkit-box-orient: vertical
410
+ -webkit-line-clamp: 2
411
+ overflow: hidden
412
+
413
+ td
414
+ border: none
415
+ position: relative
416
+ padding-top: 2.5 * $unit
417
+ padding-right: math.div($unit, 4)
418
+ padding-bottom: 1.5 * $unit
419
+ text-align: left !important // !important needed to override styles in HTML
420
+
421
+ @include small_table_mode
422
+ width: 100%
423
+ display: block
424
+
425
+ thead, tbody, th, td, tr
426
+ display: block
427
+
428
+ thead tr
429
+ position: absolute
430
+ top: -9999px
431
+ left: -9999px
432
+
433
+ td::before
434
+ position: absolute
435
+ top: math.div($unit, 4)
436
+ left: math.div($unit, 4)
437
+ width: 45%
438
+ padding-right: $unit
439
+ content: attr(data-responsive-td-heading)
440
+ font-weight: bold
441
+ text-align: right !important // !important needed to override styles in HTML
442
+ display: -webkit-box
443
+ -webkit-box-orient: vertical
444
+ -webkit-line-clamp: 2
445
+ overflow: hidden
446
+
447
+ td
448
+ border: none
449
+ position: relative
450
+ padding-left: 50%
451
+ padding-top: math.div($unit, 4)
452
+ padding-right: math.div($unit, 4)
453
+ padding-bottom: math.div($unit, 4)
454
+ text-align: left !important // !important needed to override styles in HTML
455
+ min-height: 2 * $small_line_height * $unit
456
+
457
+ tbody
458
+ tr:nth-child(odd)
459
+ background-color: $group_color_level_2
460
+
461
+ @include medium_table_mode
462
+ margin-left: auto
463
+ margin-right: auto
464
+
465
+ thead
466
+ th
467
+ font-weight: bold
468
+ text-align: left
469
+ background-color: $group_color_level_2
470
+ @include responsive_property(padding, $xs: math.div($unit, 8), $s: math.div($unit, 4), $m: math.div($unit, 2), $otherwise: math.div($unit, 2))
471
+
472
+ tbody
473
+ td
474
+ @include responsive_property(padding, $xs: math.div($unit, 8), $s: math.div($unit, 4), $m: math.div($unit, 2), $otherwise: math.div($unit, 2))
475
+
476
+ nav
477
+
478
+ p, li
479
+ font-size: 1.25 * $unit
480
+
481
+ a
482
+ color: $heading_foreground_color
483
+ text-decoration: none
484
+
485
+ a.active
486
+ font-weight: bold
487
+
488
+ button
489
+ color: $primary_foreground_color
490
+ cursor: pointer
491
+
492
+ // Desktop Navigation
493
+ nav#navigation-desktop
494
+ background-color: $content-background-color
495
+
496
+ // Display only in large mode
497
+ @include large_mode
498
+ display: block
499
+ grid-column: left-navigation / span 1
500
+ @include linear_responsive_property("width", $large_breakpoint, $large_minimum_left_navigation_width, $large_breakpoint + 8 * $unit, $large_maximum_left_navigation_width)
501
+ padding-top: $medium_maximum_vertical_margin + $medium_border + $medium_padding
502
+
503
+ // Hide if below large mode
504
+ @include below_large_mode
505
+ display: none
506
+
507
+ // Left Navigation styles
508
+ @include linear_responsive_property("padding-left", $large_breakpoint, $unit, $large_breakpoint + 8 * $unit, 8 * $unit)
509
+ padding-right: $unit
510
+
511
+ li#site-title
512
+ @include title_font
513
+ font-size: 2.25 * $unit
514
+
515
+ // Mobile navigation, both states
516
+ nav#navigation-mobile
517
+ // Display only below large mode
518
+ @include large_mode
519
+ display: none
520
+
521
+ @include below_large_mode
522
+ bottom: 0px
523
+ left: 0px
524
+ display: grid
525
+ grid-template-columns: auto
526
+ grid-template-rows: [transparent-nav-close-area] 4 * $unit [navigation-items] 1fr [navigation-controls] min-content
527
+
528
+ #transparent-nav-close-area
529
+ grid-row: transparent-nav-close-area / span 1
530
+ cursor: pointer
531
+
532
+ #navigation-items
533
+ grid-row: navigation-items / span 1
534
+ background-color: $content_background_color
535
+ overflow-y: scroll
536
+ @include responsive_property(padding-top, $m: math.div($unit, 2), $otherwise: math.div($unit, 4))
537
+ @include responsive_property(padding-left, $m: $unit, $otherwise: math.div($unit, 2))
538
+ @include responsive_property(padding-bottom, $m: math.div($unit, 2), $otherwise: math.div($unit, 4))
539
+ @include responsive_property(padding-right, $m: $unit, $otherwise: math.div($unit, 2))
540
+
541
+ #navigation-controls
542
+ grid-row: navigation-controls / span 1
543
+ background-color: $content_background_color
544
+ display: flex
545
+ flex-direction: row
546
+ align-items: center
547
+ justify-content: space-between
548
+
549
+ li#site-title
550
+ @include title_font
551
+ font-size: 1.25 * $unit
552
+ @include responsive_property(padding-left, $m: $unit, $otherwise: math.div($unit, 2))
553
+ @include responsive_property(padding-top, $m: math.div($unit, 2), $otherwise: math.div($unit, 4))
554
+ @include responsive_property(padding-bottom, $m: math.div($unit, 2), $otherwise: math.div($unit, 4))
555
+
556
+ a
557
+ @include responsive_property(padding-top, $m: math.div($unit, 2), $otherwise: math.div($unit, 4))
558
+ @include responsive_property(padding-bottom, $m: math.div($unit, 2), $otherwise: math.div($unit, 4))
559
+
560
+
561
+ li
562
+ @include responsive_property(padding-right, $m: $unit, $otherwise: math.div($unit, 2))
563
+
564
+
565
+ button#mobile-navigation-toggle
566
+ font-size: 1.25 * $unit
567
+ font-weight: bold
568
+ cursor: pointer
569
+ display: flex
570
+ align-items: center
571
+ @include responsive_property(padding-top, $m: math.div($unit, 2), $otherwise: math.div($unit, 4))
572
+ @include responsive_property(padding-bottom, $m: math.div($unit, 2), $otherwise: math.div($unit, 4))
573
+
574
+ &::before
575
+ content: ""
576
+ display: block
577
+ width: 24px
578
+ height: 24px
579
+ margin-right: math.div($unit, 2)
580
+ background-position: center center
581
+ background-repeat: no-repeat
582
+ background-size: 24px
583
+ background-image: var(--icon-url)
584
+
585
+ // Mobile Navigation, closed state
586
+ nav#navigation-mobile[data-state="closed"]
587
+ position: sticky
588
+ grid-template-rows: [transparent-nav-close-area] 0 [navigation-items] 0 [navigation-controls] min-content
589
+
590
+ #transparent-nav-close-area
591
+ display: none
592
+
593
+ #navigation-items
594
+ display: none
595
+
596
+ #navigation-controls
597
+ box-shadow: 0 math.div($unit, 2) math.div($unit, 1) rgba($heading_foreground_color, 0.4)
598
+
599
+ button#mobile-navigation-toggle
600
+ --icon-url: url("/static/menu-outline@2x.png")
601
+
602
+ // Mobile Navigation, open state
603
+ nav#navigation-mobile[data-state="open"]
604
+ position: fixed
605
+ width: 100vw
606
+ height: 100vh
607
+
608
+ #navigation-items
609
+ box-shadow: 0 math.div($unit, 2) math.div($unit, 1) rgba($heading_foreground_color, 0.4)
610
+
611
+ #navigation-controls
612
+ button#mobile-navigation-toggle
613
+ --icon-url: url("/static/close-circle-outline@2x.png")
data/_sass/reset.sass ADDED
@@ -0,0 +1,35 @@
1
+ // http://meyerweb.com/eric/tools/css/reset/
2
+ // v2.0 | 20110126
3
+ // License: none (public domain)
4
+
5
+ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button
6
+ margin: 0
7
+ padding: 0
8
+ border: 0
9
+ font-size: 100%
10
+ font: inherit
11
+ vertical-align: baseline
12
+ background-color: transparent
13
+
14
+ // HTML5 display-role reset for older browsers
15
+ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
16
+ display: block
17
+
18
+ body
19
+ line-height: 1
20
+
21
+ ol, ul, menu
22
+ list-style: none
23
+ list-style-type: none
24
+
25
+ blockquote, q
26
+ quotes: none
27
+
28
+ blockquote:before, blockquote:after,
29
+ q:before, q:after
30
+ content: ''
31
+ content: none
32
+
33
+ table
34
+ border-collapse: collapse
35
+ border-spacing: 0
@@ -0,0 +1,4 @@
1
+ ---
2
+ ---
3
+
4
+ @import "jekyll-theme-miniplex"
Binary file
Binary file
Binary file
@@ -0,0 +1,31 @@
1
+ ---
2
+ ---
3
+ # Entry point here: DOMContentLoaded
4
+ document.addEventListener "DOMContentLoaded", (DOMLoadedEvent) ->
5
+
6
+ # Responsive Table Reformatting
7
+ # Similar to https://css-tricks.com/responsive-data-tables/
8
+ tables = document.querySelectorAll "table"
9
+ for table in tables
10
+ ths = (th for th in table.querySelectorAll "th")
11
+ thTexts = (th.textContent for th in ths)
12
+ tds = (td for td in table.querySelectorAll "td")
13
+ td.setAttribute 'data-responsive-td-heading', thTexts[index % thTexts.length] for td, index in tds
14
+
15
+ # Mobile navigation
16
+ mobileNavigation = document.querySelector "nav#navigation-mobile"
17
+ navigationToggleButton = document.querySelector "button#mobile-navigation-toggle"
18
+ transparentNavCloseArea = document.querySelector "div#transparent-nav-close-area"
19
+ body = document.querySelector "body"
20
+
21
+ toggleNavigation = (event) ->
22
+ switch mobileNavigation.dataset.state
23
+ when "closed"
24
+ mobileNavigation.dataset.state = "open"
25
+ body.style.overflow = "hidden"
26
+ when "open"
27
+ mobileNavigation.dataset.state = "closed"
28
+ body.style.overflow = "initial"
29
+
30
+ navigationToggleButton.addEventListener "click", toggleNavigation
31
+ transparentNavCloseArea.addEventListener "click", toggleNavigation
metadata ADDED
@@ -0,0 +1,96 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: jekyll-theme-miniplex
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.1.0
5
+ platform: ruby
6
+ authors:
7
+ - Timo Würsch
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2022-11-18 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: jekyll
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - "~>"
18
+ - !ruby/object:Gem::Version
19
+ version: '4.2'
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - "~>"
25
+ - !ruby/object:Gem::Version
26
+ version: '4.2'
27
+ - !ruby/object:Gem::Dependency
28
+ name: jekyll-coffeescript
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - "~>"
32
+ - !ruby/object:Gem::Version
33
+ version: 2.0.0
34
+ type: :runtime
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - "~>"
39
+ - !ruby/object:Gem::Version
40
+ version: 2.0.0
41
+ description:
42
+ email:
43
+ - twuersch@fastmail.com
44
+ executables: []
45
+ extensions: []
46
+ extra_rdoc_files: []
47
+ files:
48
+ - LICENSE.txt
49
+ - README.md
50
+ - _config.yml
51
+ - _includes/navigation_desktop.html
52
+ - _includes/navigation_mobile.html
53
+ - _layouts/default.html
54
+ - _layouts/overview.html
55
+ - _layouts/page.html
56
+ - _layouts/post.html
57
+ - _sass/jekyll-theme-miniplex.sass
58
+ - _sass/reset.sass
59
+ - assets/css/main.sass
60
+ - assets/fonts/IBMPlexMono-Bold.woff2
61
+ - assets/fonts/IBMPlexMono-BoldItalic.woff2
62
+ - assets/fonts/IBMPlexMono-Italic.woff2
63
+ - assets/fonts/IBMPlexMono-Regular.woff2
64
+ - assets/fonts/IBMPlexSans-Bold.woff2
65
+ - assets/fonts/IBMPlexSans-BoldItalic.woff2
66
+ - assets/fonts/IBMPlexSans-Italic.woff2
67
+ - assets/fonts/IBMPlexSans-Regular.woff2
68
+ - assets/fonts/IBMPlexSerif-BoldItalic.woff2
69
+ - assets/fonts/IBMPlexSerif-Italic.woff2
70
+ - assets/images/close-circle-outline@2x.png
71
+ - assets/images/menu-outline@2x.png
72
+ - assets/js/main.coffee
73
+ homepage: https://gitlab.com/twuersch/jekyll-theme-miniplex
74
+ licenses:
75
+ - MIT
76
+ metadata: {}
77
+ post_install_message:
78
+ rdoc_options: []
79
+ require_paths:
80
+ - lib
81
+ required_ruby_version: !ruby/object:Gem::Requirement
82
+ requirements:
83
+ - - ">="
84
+ - !ruby/object:Gem::Version
85
+ version: '0'
86
+ required_rubygems_version: !ruby/object:Gem::Requirement
87
+ requirements:
88
+ - - ">="
89
+ - !ruby/object:Gem::Version
90
+ version: '0'
91
+ requirements: []
92
+ rubygems_version: 3.3.7
93
+ signing_key:
94
+ specification_version: 4
95
+ summary: A Jekyll theme.
96
+ test_files: []