minduim 1.0.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.
@@ -0,0 +1,379 @@
1
+ /*
2
+ Default variable values
3
+ */
4
+ :root {
5
+ /* Typography */
6
+ --font-family-base:
7
+ Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial,
8
+ sans-serif;
9
+ --font-family-headings: var(--font-family-base);
10
+ --font-family-quote:
11
+ Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
12
+ --font-family-code:
13
+ ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
14
+ "DejaVu Sans Mono", monospace;
15
+ --font-size-base: 16px;
16
+ --font-size-small: 0.875em;
17
+ /* Colors */
18
+ --color-background: var(--white);
19
+ --color-foreground: var(--black);
20
+ --color-accent: var(--yellow);
21
+ --color-accent-alt: var(--red);
22
+ --color-details: var(--gray);
23
+ /* Details */
24
+ --radius: 0.5rem;
25
+ --border: 1px dotted var(--color-details);
26
+ --shadow: 0 0 7px var(--color-details);
27
+ --transition-duration: 0.36s;
28
+ /* Color palette */
29
+ --white: rgb(255, 255, 255);
30
+ --black: rgb(44, 44, 44);
31
+ --gray: rgb(133, 146, 158);
32
+ --red: rgb(231, 76, 60);
33
+ --yellow: rgb(241, 196, 15);
34
+ }
35
+
36
+ /*
37
+ Resets
38
+ */
39
+
40
+ html {
41
+ box-sizing: border-box;
42
+ font-size: var(--font-size-base);
43
+ }
44
+
45
+ *,
46
+ *::before,
47
+ *::after {
48
+ box-sizing: inherit;
49
+ }
50
+
51
+ body,
52
+ h1,
53
+ h2,
54
+ h3,
55
+ h4,
56
+ h5,
57
+ h6,
58
+ p,
59
+ blockquote,
60
+ pre,
61
+ hr,
62
+ dl,
63
+ dd,
64
+ ol,
65
+ ul,
66
+ table,
67
+ iframe,
68
+ audio,
69
+ video,
70
+ figure,
71
+ input,
72
+ button,
73
+ textarea {
74
+ appearance: none;
75
+ -webkit-appearance: none;
76
+ background: none;
77
+ border: none;
78
+ font: inherit;
79
+ margin: 0;
80
+ padding: 0;
81
+ position: relative;
82
+ }
83
+
84
+ /*
85
+ Basic styling
86
+ */
87
+
88
+ body {
89
+ font-family: var(--font-family-base);
90
+ font-size: var(--font-size-base);
91
+ background-color: var(--color-background);
92
+ color: var(--color-foreground);
93
+ }
94
+
95
+ ::selection {
96
+ background: var(--color-accent-alt);
97
+ color: var(--color-background);
98
+ }
99
+
100
+ /*
101
+ Text Elements
102
+ */
103
+
104
+ p,
105
+ blockquote,
106
+ pre,
107
+ ul,
108
+ ol,
109
+ dl,
110
+ figure {
111
+ line-height: 1.5;
112
+ margin-bottom: 1rem;
113
+ }
114
+
115
+ h1,
116
+ h2,
117
+ h3,
118
+ h4,
119
+ h5,
120
+ h6 {
121
+ font-weight: 700;
122
+ line-height: 1.3;
123
+ margin-bottom: 1.25rem;
124
+ }
125
+
126
+ strong,
127
+ b {
128
+ font-weight: 700;
129
+ }
130
+
131
+ em,
132
+ i {
133
+ font-style: italic;
134
+ }
135
+
136
+ mark,
137
+ ins {
138
+ background-color: var(--color-accent);
139
+ text-decoration: none;
140
+ }
141
+
142
+ del,
143
+ strike {
144
+ text-decoration: line-through;
145
+ text-decoration-style: wavy;
146
+ }
147
+
148
+ abbr,
149
+ acronym {
150
+ text-decoration-style: dotted;
151
+ cursor: help;
152
+ }
153
+
154
+ sub,
155
+ sup {
156
+ font-size: 0.65em;
157
+ line-height: 100%;
158
+ }
159
+
160
+ /* Headings */
161
+ h1 {
162
+ font-size: 2em;
163
+ }
164
+
165
+ h2 {
166
+ font-size: 1.75em;
167
+ }
168
+
169
+ h3 {
170
+ font-size: 1.5em;
171
+ }
172
+
173
+ h4 {
174
+ font-size: 1.25em;
175
+ }
176
+
177
+ h5 {
178
+ font-size: 1em;
179
+ }
180
+
181
+ h6 {
182
+ font-size: 0.75em;
183
+ }
184
+
185
+ /* Links */
186
+ a {
187
+ color: currentcolor;
188
+ text-decoration: underline;
189
+ text-decoration-style: wavy;
190
+ transition-property: color, text-decoration-color;
191
+ transition-duration: var(--transition-duration);
192
+ }
193
+
194
+ a:hover,
195
+ a:focus {
196
+ text-decoration-color: var(--color-accent);
197
+ }
198
+
199
+ a:active {
200
+ color: var(--color-accent-alt);
201
+ text-decoration-color: currentcolor;
202
+ }
203
+
204
+ /* Lists */
205
+
206
+ ul {
207
+ list-style: square;
208
+ }
209
+
210
+ ul ul {
211
+ list-style: circle;
212
+ }
213
+
214
+ ul ul ul {
215
+ list-style: disc;
216
+ }
217
+
218
+ ol ol {
219
+ list-style: lower-alpha;
220
+ }
221
+
222
+ ol ol ol {
223
+ list-style: lower-roman;
224
+ }
225
+
226
+ li ul,
227
+ li ol {
228
+ margin-bottom: 0;
229
+ }
230
+
231
+ li {
232
+ margin-block: 0.5rem;
233
+ margin-left: 1.5rem;
234
+ padding-left: 0.5rem;
235
+ }
236
+
237
+ dl dt {
238
+ font-weight: 700;
239
+ }
240
+
241
+ dl dd + dt,
242
+ dl dd + dd {
243
+ margin-top: 0.5rem;
244
+ }
245
+
246
+ /* Blockquote */
247
+ q {
248
+ quotes: "“" "”" "‘" "’";
249
+ font-style: normal;
250
+ }
251
+
252
+ blockquote {
253
+ font-family: var(--font-family-quote);
254
+ font-style: italic;
255
+ line-height: 1.65;
256
+ border-left: 0.5rem solid var(--color-accent);
257
+ padding-left: 1rem;
258
+ }
259
+
260
+ blockquote cite {
261
+ font-family: var(--font-family-base);
262
+ font-style: normal;
263
+ font-size: var(--font-size-small);
264
+ }
265
+
266
+ /* Tables */
267
+ table {
268
+ width: 100%;
269
+ border-collapse: collapse;
270
+ margin-bottom: 1.5rem;
271
+ transition: color var(--transition-duration);
272
+ }
273
+
274
+ table th {
275
+ text-align: left;
276
+ background: var(--color-accent);
277
+ }
278
+
279
+ table th,
280
+ table td {
281
+ padding: 0.5rem;
282
+ border-bottom: var(--border);
283
+ }
284
+
285
+ /* Code and pre-formatted text */
286
+ pre,
287
+ code,
288
+ var,
289
+ kbd,
290
+ tt {
291
+ font-family: var(--font-family-code);
292
+ font-size: var(--font-size-small);
293
+ }
294
+
295
+ pre {
296
+ max-width: 100%;
297
+ overflow: auto;
298
+ }
299
+
300
+ pre code {
301
+ font-size: 100%;
302
+ }
303
+
304
+ .highlight .gutter {
305
+ width: 3ch;
306
+ }
307
+
308
+ /*
309
+ Horizontal Rule
310
+ */
311
+ hr {
312
+ margin-block: 1.5rem;
313
+ height: 0;
314
+ border-bottom: var(--border);
315
+ }
316
+
317
+ /*
318
+ Media
319
+ */
320
+ /* Media */
321
+ img {
322
+ max-width: 100%;
323
+ overflow: hidden;
324
+ opacity: 1;
325
+ }
326
+
327
+ @media screen and (prefers-color-scheme: dark) {
328
+ img {
329
+ opacity: 0.75;
330
+ transition: opacity var(--transition-duration) ease;
331
+ }
332
+
333
+ img:hover,
334
+ img:focus {
335
+ opacity: 1;
336
+ }
337
+ }
338
+
339
+ .post-content img {
340
+ border-radius: 0.5rem;
341
+ box-shadow: var(--shadow);
342
+ }
343
+
344
+ @media screen and (width > 690px) {
345
+ .post-content img {
346
+ width: calc(100% - (0.5rem + 10rem));
347
+ }
348
+ }
349
+
350
+ img + em,
351
+ img + br + em {
352
+ display: block;
353
+ width: 10rem;
354
+ color: var(--color-details);
355
+ font-style: normal;
356
+ font-size: var(--font-size-small);
357
+ padding: 0.25rem 0.5rem;
358
+ }
359
+
360
+ @media screen and (width > 690px) {
361
+ img + em,
362
+ img + br + em {
363
+ position: absolute;
364
+ top: 0;
365
+ right: 0;
366
+ }
367
+ }
368
+
369
+ video,
370
+ iframe[src*="youtu"],
371
+ iframe[src*="twitch"],
372
+ iframe[src*="vimeo"] {
373
+ border: var(--border);
374
+ border-radius: var(--radius);
375
+ box-shadow: var(--shadow);
376
+ aspect-ratio: 16 / 9;
377
+ height: auto;
378
+ width: 100%;
379
+ }
@@ -0,0 +1,235 @@
1
+ html {
2
+ border-top: 0.5rem solid var(--color-accent);
3
+ }
4
+
5
+ body {
6
+ margin-block: 1rem;
7
+ margin-inline: 1rem;
8
+ }
9
+
10
+ @media screen and (width > 960px) {
11
+ body {
12
+ margin-inline: 1.5rem;
13
+ }
14
+ }
15
+
16
+ /*
17
+ Site Header
18
+ */
19
+
20
+ .site-header {
21
+ display: flex;
22
+ flex-flow: column nowrap;
23
+ align-items: center;
24
+ gap: 1rem;
25
+ margin-bottom: 2rem;
26
+ }
27
+
28
+ @media screen and (width > 640px) {
29
+ .site-header {
30
+ flex-flow: row nowrap;
31
+ justify-content: space-between;
32
+ }
33
+ }
34
+
35
+ /* Branding */
36
+ .site-branding {
37
+ display: flex;
38
+ flex-flow: row nowrap;
39
+ align-items: center;
40
+ gap: 1rem;
41
+ }
42
+
43
+ .site-logo {
44
+ display: block;
45
+ border-radius: 100%;
46
+ width: 1.5rem;
47
+ height: 1.5rem;
48
+ }
49
+
50
+ .site-title {
51
+ font-size: 1rem;
52
+ font-weight: 700;
53
+ margin-bottom: 0;
54
+ }
55
+
56
+ /* Main Menu */
57
+ .main-menu {
58
+ display: flex;
59
+ flex-flow: row wrap;
60
+ align-items: center;
61
+ justify-content: center;
62
+ gap: 1rem;
63
+ }
64
+
65
+ .main-menu .menu-item {
66
+ flex-grow: 0;
67
+ flex-shrink: 0;
68
+ }
69
+
70
+ /*
71
+ Site Content
72
+ */
73
+
74
+ .site-content {
75
+ display: flex;
76
+ flex-flow: column nowrap;
77
+ gap: 2rem;
78
+ }
79
+
80
+ @media screen and (width > 640px) {
81
+ .site-content {
82
+ max-width: 960px;
83
+ margin-inline: auto;
84
+ display: grid;
85
+ grid-template-columns: auto 30%;
86
+ gap: 3rem;
87
+ }
88
+ }
89
+
90
+ .post-title {
91
+ font-size: 1.5rem;
92
+ font-weight: 700;
93
+ margin-bottom: 1rem;
94
+ }
95
+
96
+ .post-footer {
97
+ display: flex;
98
+ flex-flow: column nowrap;
99
+ gap: 1rem;
100
+ font-size: var(--font-size-small);
101
+ color: var(--color-details);
102
+ margin-top: 1.5rem;
103
+ padding-bottom: 3rem;
104
+ margin-bottom: 3rem;
105
+ border-bottom: var(--border);
106
+ }
107
+
108
+ .post-meta._info {
109
+ display: flex;
110
+ flex-flow: row wrap;
111
+ gap: 0.5rem;
112
+ }
113
+
114
+ .post-meta._tags {
115
+ display: flex;
116
+ flex-flow: column nowrap;
117
+ }
118
+
119
+ .tags-label,
120
+ .tags-list {
121
+ margin-bottom: 0;
122
+ }
123
+
124
+ .tags-label {
125
+ font-size: var(--font-size-small);
126
+ }
127
+
128
+ .tags-list {
129
+ list-style: none;
130
+ display: flex;
131
+ flex-flow: row wrap;
132
+ gap: 0.5rem;
133
+ }
134
+
135
+ .tags-list li {
136
+ margin-block: 0;
137
+ padding-left: 0;
138
+ margin-left: 0;
139
+ }
140
+
141
+ .post-footer a {
142
+ text-decoration-color: transparent;
143
+ }
144
+
145
+ .post-footer a:hover,
146
+ .post-footer a:focus {
147
+ color: var(--color-foreground);
148
+ text-decoration-color: var(--color-accent);
149
+ }
150
+
151
+ .post-footer a:active {
152
+ color: var(--color-accent-alt);
153
+ }
154
+
155
+ .archive-title {
156
+ font-size: 1rem;
157
+ margin-bottom: 1.5rem;
158
+ }
159
+
160
+ /* Pagination */
161
+ .blog-pagination {
162
+ display: flex;
163
+ flex-flow: column nowrap;
164
+ align-items: center;
165
+ gap: 1rem;
166
+ margin-top: 2rem;
167
+ padding-block: 1.5rem;
168
+ font-size: var(--font-size-small);
169
+ color: var(--color-details);
170
+ }
171
+
172
+ @media screen and (width > 900px) {
173
+ .blog-pagination {
174
+ flex-flow: row nowrap;
175
+ justify-content: space-between;
176
+ }
177
+
178
+ .blog-pagination a {
179
+ flex-grow: 0;
180
+ flex-shrink: 0;
181
+ }
182
+
183
+ .blog-pagination .prev-page:first-child {
184
+ margin-right: auto;
185
+ }
186
+
187
+ .blog-pagination .next-page:last-child {
188
+ margin-left: auto;
189
+ }
190
+ }
191
+
192
+ /* Sidebar */
193
+ .sidebar {
194
+ font-size: var(--font-size-small);
195
+ }
196
+
197
+ .widget {
198
+ margin-bottom: 1.5rem;
199
+ }
200
+
201
+ .widget .widget-title {
202
+ font-size: var(--font-size-base);
203
+ margin-bottom: 1em;
204
+ }
205
+
206
+ /*
207
+ Site Footer
208
+ */
209
+
210
+ .site-footer {
211
+ margin-top: 2rem;
212
+ display: flex;
213
+ flex-flow: column nowrap;
214
+ align-items: center;
215
+ gap: 1rem;
216
+ color: var(--color-details);
217
+ font-size: var(--font-size-small);
218
+ }
219
+
220
+ .site-footer a:hover,
221
+ .site-footer a:focus {
222
+ color: var(--color-foreground);
223
+ }
224
+
225
+ .site-footer a:active {
226
+ color: var(--color-accent-alt);
227
+ }
228
+
229
+ .site-footer .footer-menu {
230
+ display: flex;
231
+ flex-flow: row wrap;
232
+ gap: 1rem;
233
+ align-items: center;
234
+ justify-content: center;
235
+ }