├── images
└── shibui-preview.jpg
├── Shibui.iatemplate
└── Contents
│ ├── Resources
│ ├── fonts
│ │ ├── secuela-italic-vf.woff
│ │ ├── secuela-italic-vf.woff2
│ │ ├── secuela-regular-vf.woff
│ │ ├── secuela-regular-vf.woff2
│ │ └── fonts.css
│ ├── document.html
│ ├── title.html
│ ├── header.html
│ ├── footer.html
│ └── styles
│ │ ├── variables.css
│ │ ├── normalize.css
│ │ └── style.css
│ └── Info.plist
└── README.md
/images/shibui-preview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kogakure/ia-writer-template-shibui/HEAD/images/shibui-preview.jpg
--------------------------------------------------------------------------------
/Shibui.iatemplate/Contents/Resources/fonts/secuela-italic-vf.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kogakure/ia-writer-template-shibui/HEAD/Shibui.iatemplate/Contents/Resources/fonts/secuela-italic-vf.woff
--------------------------------------------------------------------------------
/Shibui.iatemplate/Contents/Resources/fonts/secuela-italic-vf.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kogakure/ia-writer-template-shibui/HEAD/Shibui.iatemplate/Contents/Resources/fonts/secuela-italic-vf.woff2
--------------------------------------------------------------------------------
/Shibui.iatemplate/Contents/Resources/fonts/secuela-regular-vf.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kogakure/ia-writer-template-shibui/HEAD/Shibui.iatemplate/Contents/Resources/fonts/secuela-regular-vf.woff
--------------------------------------------------------------------------------
/Shibui.iatemplate/Contents/Resources/fonts/secuela-regular-vf.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kogakure/ia-writer-template-shibui/HEAD/Shibui.iatemplate/Contents/Resources/fonts/secuela-regular-vf.woff2
--------------------------------------------------------------------------------
/Shibui.iatemplate/Contents/Resources/document.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/Shibui.iatemplate/Contents/Resources/title.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/Shibui.iatemplate/Contents/Resources/header.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | -
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/Shibui.iatemplate/Contents/Resources/footer.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | /
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/Shibui.iatemplate/Contents/Resources/fonts/fonts.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-display: swap;
3 | font-family: "SecuelaVariable";
4 | font-style: normal;
5 | font-weight: 1 999;
6 | src: url("secuela-regular-vf.woff2") format("woff2");
7 | }
8 |
9 | @font-face {
10 | font-display: swap;
11 | font-family: "SecuelaVariable";
12 | font-style: italic;
13 | font-weight: 1 999;
14 | src: url("secuela-italic-vf.woff2") format("woff2");
15 | }
16 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Shibui (渋い) – An iA Writer Template
2 |
3 | 
4 |
5 | This template is inspired by the Japanese aesthetics style _shibui_ which was founded during the Muromachi period (1336-1392). I use the same style for my current personal branding on my [personal website](https://www.stefanimhoff.de/), for my [martial arts book](https://www.kogakure.de/en/) and my [photo blog](https://hamburg.stefanimhoff.de/).
6 |
7 | You can learn more about the [inspiration](https://www.stefanimhoff.de/new-website-2020-inspiration/) and [design](https://www.stefanimhoff.de/new-website-2020-design/) for this style.
8 |
9 | The CSS was written by [Stefan Imhoff](https://www.stefanimhoff.de/). I build this primarily for myself, feel free to use it, if you like.
10 |
--------------------------------------------------------------------------------
/Shibui.iatemplate/Contents/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleInfoDictionaryVersion
8 | 6.0
9 | CFBundleIdentifier
10 | com.example.template
11 | CFBundleName
12 | Shibui
13 | CFBundleShortVersionString
14 | 1.0.2
15 | CFBundleVersion
16 | 1
17 | IATemplateDocumentFile
18 | document
19 | IATemplateTitleFile
20 | title
21 | IATemplateFooterFile
22 | footer
23 | IATemplateFooterHeight
24 | 90
25 | IATemplateHeaderFile
26 | header
27 | IATemplateHeaderHeight
28 | 90
29 | IATemplateDescription
30 | Template inspired by the Japanese aesthetics style “shibui”.
31 | IATemplateAuthor
32 | Stefan Imhoff
33 | IATemplateAuthorURL
34 | https://www.stefanimhoff.de
35 |
36 |
37 |
--------------------------------------------------------------------------------
/Shibui.iatemplate/Contents/Resources/styles/variables.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --color-accent: hsl(86, 35%, 46%);
3 | --color-bg-code: #282c34;
4 | --color-fg-code: #abb2bf;
5 | }
6 |
7 | :root {
8 | --color-bg-full: #ffffff;
9 | --color-bg: hsl(40, 7%, 90%);
10 | --color-bg-dark: hsl(40, 7%, 80%);
11 | --color-border: rgb(185, 184, 182);
12 | --color-fg-feather-inverse: rgba(255, 255, 255, 0.05);
13 | --color-fg-feather: rgba(0, 0, 0, 0.05);
14 | --color-fg-full-inverse: #ffffff;
15 | --color-fg-full: #000000;
16 | --color-fg-soft-inverse: rgba(255, 255, 255, 0.2);
17 | --color-fg-soft: rgba(0, 0, 0, 0.2);
18 | --color-fg-strong-inverse: rgba(255, 255, 255, 0.8);
19 | --color-fg-strong: rgba(0, 0, 0, 0.8);
20 | --color-fg: hsl(40, 7%, 5%);
21 | --opacity-dark: 1;
22 | --opacity-light: 0;
23 | }
24 |
25 | .night-mode {
26 | --color-bg-full: #000000;
27 | --color-bg: hsl(40, 7%, 10%);
28 | --color-bg-dark: hsl(40, 7%, 5%);
29 | --color-border: rgb(73, 72, 70);
30 | --color-fg-feather-inverse: rgba(0, 0, 0, 0.05);
31 | --color-fg-feather: rgba(255, 255, 255, 0.05);
32 | --color-fg-full-inverse: #000000;
33 | --color-fg-full: #ffffff;
34 | --color-fg-soft-inverse: rgba(0, 0, 0, 0.2);
35 | --color-fg-soft: rgba(255, 255, 255, 0.2);
36 | --color-fg-strong-inverse: rgba(0, 0, 0, 0.8);
37 | --color-fg-strong: rgba(255, 255, 255, 0.8);
38 | --color-fg: hsla(40, 7%, 90%, 0.95);
39 | --opacity-dark: 0;
40 | --opacity-light: 1;
41 | }
42 |
43 | :root {
44 | /** Border Widths */
45 | --border-width-1: 1px;
46 | --border-width-10: 0.1em;
47 | --border-width-15: 0.15em;
48 |
49 | /** Font Families */
50 | --font-family-base: SecuelaVariable, Arial, sans-serif;
51 | --font-family-mono: Fira Code, Operator, Hasklig, Monoid, monospace;
52 |
53 | /** Font Sizes */
54 | --font-size-1: 0.65em;
55 | --font-size-2: clamp(0.65rem, 0.8vw, 0.75rem);
56 | --font-size-3: clamp(1rem, 1.1vw, 1.25rem);
57 | --font-size-4: clamp(1.25rem, 1.8vw, 2rem);
58 | --font-size-5: clamp(1.5rem, 2.9vw, 3.25rem);
59 | --font-size-6: clamp(2.25rem, 4.7vw, 5.3rem);
60 | --font-size-7: clamp(3.3rem, 7.3vw, 8.5rem);
61 | --font-size-8: clamp(4.5rem, 12.2vw, 13.87rem);
62 | --font-size-9: clamp(5.5rem, 28.7vw, 22.43rem);
63 |
64 | /** Font Weights */
65 | --font-weight-thin: 100;
66 | --font-weight-extra-light: 200;
67 | --font-weight-light: 300;
68 | --font-weight-normal: 400;
69 | --font-weight-medium: 500;
70 | --font-weight-semi-bold: 600;
71 | --font-weight-bold: 700;
72 | --font-weight-extra-bold: 800;
73 | --font-weight-black: 900;
74 |
75 | /** Line Heights */
76 | --line-height-1: 1;
77 | --line-height-2: 1.6;
78 |
79 | /** Radii */
80 | --radius-1: 2px;
81 | --radius-2: 5px;
82 | --radius-4: 8px;
83 | --radius-25: 25px;
84 | --radius-50: 50%;
85 |
86 | /** Shadows */
87 | --shadow-subtle-shade: 0 0 50px rgba(0, 0, 0, 0.2);
88 | --shadow-beveled-keyboard: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 2px #fff;
89 | --shadow-white-outline: 0 1px 0 #fff;
90 | --shadow-dark-inset: inset 0 0 5px rgba(0, 0, 0, 0.15);
91 |
92 | /** Space */
93 | --space-1: 0.335rem;
94 | --space-2: clamp(0.335rem, 0.72vw, 0.402rem);
95 | --space-3: clamp(0.402rem, 0.86vw, 0.482rem);
96 | --space-4: clamp(0.482rem, 1.03vw, 0.579rem);
97 | --space-5: clamp(0.579rem, 1.24vw, 0.694rem);
98 | --space-6: clamp(0.694rem, 1.49vw, 0.833rem);
99 | --space-7: clamp(0.833rem, 1.78vw, 1rem);
100 | --space-8: clamp(1rem, 2.14vw, 1.2rem);
101 | --space-9: clamp(1.2rem, 2.57vw, 1.44rem);
102 | --space-10: clamp(1.44rem, 3.7vw, 1.728rem);
103 | --space-11: clamp(1.728rem, 3.7vw, 2.074rem);
104 | --space-12: clamp(2.074rem, 4.44vw, 2.488rem);
105 | --space-13: clamp(2.488rem, 5.32vw, 2.986rem);
106 | --space-14: clamp(2.986rem, 6.39vw, 3.583rem);
107 | --space-15: clamp(3.583rem, 7.67vw, 4.3rem);
108 | --space-16: clamp(4.3rem, 9.2vw, 5.16rem);
109 | --space-17: clamp(5.16rem, 11.04vw, 6.192rem);
110 | --space-18: clamp(6.192rem, 13.25vw, 7.43rem);
111 | --space-19: clamp(7.43rem, 15.9vw, 8.916rem);
112 | --space-20: clamp(8.916rem, 19.08vw, 10.699rem);
113 | --space-55: 5.55vw;
114 |
115 | /** Transitions */
116 | --transition-duration-1: 100ms;
117 | --transition-duration-2: 200ms;
118 | --transition-duration-5: 500ms;
119 | }
120 |
--------------------------------------------------------------------------------
/Shibui.iatemplate/Contents/Resources/styles/normalize.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
2 |
3 | /* Document
4 | ========================================================================== */
5 |
6 | /**
7 | * 1. Correct the line height in all browsers.
8 | * 2. Prevent adjustments of font size after orientation changes in iOS.
9 | */
10 |
11 | html {
12 | line-height: 1.15; /* 1 */
13 | -webkit-text-size-adjust: 100%; /* 2 */
14 | }
15 |
16 | /* Sections
17 | ========================================================================== */
18 |
19 | /**
20 | * Remove the margin in all browsers.
21 | */
22 |
23 | body {
24 | margin: 0;
25 | }
26 |
27 | /**
28 | * Render the `main` element consistently in IE.
29 | */
30 |
31 | main {
32 | display: block;
33 | }
34 |
35 | /**
36 | * Correct the font size and margin on `h1` elements within `section` and
37 | * `article` contexts in Chrome, Firefox, and Safari.
38 | */
39 |
40 | h1 {
41 | font-size: 2em;
42 | margin: 0.67em 0;
43 | }
44 |
45 | /* Grouping content
46 | ========================================================================== */
47 |
48 | /**
49 | * 1. Add the correct box sizing in Firefox.
50 | * 2. Show the overflow in Edge and IE.
51 | */
52 |
53 | hr {
54 | box-sizing: content-box; /* 1 */
55 | height: 0; /* 1 */
56 | overflow: visible; /* 2 */
57 | }
58 |
59 | /**
60 | * 1. Correct the inheritance and scaling of font size in all browsers.
61 | * 2. Correct the odd `em` font sizing in all browsers.
62 | */
63 |
64 | pre {
65 | font-family: monospace, monospace; /* 1 */
66 | font-size: 1em; /* 2 */
67 | }
68 |
69 | /* Text-level semantics
70 | ========================================================================== */
71 |
72 | /**
73 | * Remove the gray background on active links in IE 10.
74 | */
75 |
76 | a {
77 | background-color: transparent;
78 | }
79 |
80 | /**
81 | * 1. Remove the bottom border in Chrome 57-
82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
83 | */
84 |
85 | abbr[title] {
86 | border-block-end: none; /* 1 */
87 | text-decoration: underline; /* 2 */
88 | text-decoration: underline dotted; /* 2 */
89 | }
90 |
91 | /**
92 | * Add the correct font weight in Chrome, Edge, and Safari.
93 | */
94 |
95 | b,
96 | strong {
97 | font-weight: black;
98 | }
99 |
100 | /**
101 | * 1. Correct the inheritance and scaling of font size in all browsers.
102 | * 2. Correct the odd `em` font sizing in all browsers.
103 | */
104 |
105 | code,
106 | kbd,
107 | samp {
108 | font-family: monospace, monospace; /* 1 */
109 | font-size: 1em; /* 2 */
110 | }
111 |
112 | /**
113 | * Add the correct font size in all browsers.
114 | */
115 |
116 | small {
117 | font-size: 80%;
118 | }
119 |
120 | /**
121 | * Prevent `sub` and `sup` elements from affecting the line height in
122 | * all browsers.
123 | */
124 |
125 | sub,
126 | sup {
127 | font-size: 75%;
128 | line-height: 0;
129 | position: relative;
130 | vertical-align: baseline;
131 | }
132 |
133 | sub {
134 | inset-block-end: -0.25em;
135 | }
136 |
137 | sup {
138 | inset-block-start: -0.5em;
139 | }
140 |
141 | /* Embedded content
142 | ========================================================================== */
143 |
144 | /**
145 | * Remove the border on images inside links in IE 10.
146 | */
147 |
148 | img {
149 | border-style: none;
150 | }
151 |
152 | /* Forms
153 | ========================================================================== */
154 |
155 | /**
156 | * 1. Change the font styles in all browsers.
157 | * 2. Remove the margin in Firefox and Safari.
158 | */
159 |
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 | font-family: inherit; /* 1 */
166 | font-size: 100%; /* 1 */
167 | line-height: 1.15; /* 1 */
168 | margin: 0; /* 2 */
169 | }
170 |
171 | /**
172 | * Show the overflow in IE.
173 | * 1. Show the overflow in Edge.
174 | */
175 |
176 | button,
177 | input {
178 | /* 1 */
179 | overflow: visible;
180 | }
181 |
182 | /**
183 | * Remove the inheritance of text transform in Edge, Firefox, and IE.
184 | * 1. Remove the inheritance of text transform in Firefox.
185 | */
186 |
187 | button,
188 | select {
189 | /* 1 */
190 | text-transform: none;
191 | }
192 |
193 | /**
194 | * Correct the inability to style clickable types in iOS and Safari.
195 | */
196 |
197 | button,
198 | [type="button"],
199 | [type="reset"],
200 | [type="submit"] {
201 | -webkit-appearance: button;
202 | }
203 |
204 | /**
205 | * Remove the inner border and padding in Firefox.
206 | */
207 |
208 | button::-moz-focus-inner,
209 | [type="button"]::-moz-focus-inner,
210 | [type="reset"]::-moz-focus-inner,
211 | [type="submit"]::-moz-focus-inner {
212 | border-style: none;
213 | padding: 0;
214 | }
215 |
216 | /**
217 | * Restore the focus styles unset by the previous rule.
218 | */
219 |
220 | button:-moz-focusring,
221 | [type="button"]:-moz-focusring,
222 | [type="reset"]:-moz-focusring,
223 | [type="submit"]:-moz-focusring {
224 | outline: 1px dotted ButtonText;
225 | }
226 |
227 | /**
228 | * Correct the padding in Firefox.
229 | */
230 |
231 | fieldset {
232 | padding: 0.35em 0.75em 0.625em;
233 | }
234 |
235 | /**
236 | * 1. Correct the text wrapping in Edge and IE.
237 | * 2. Correct the color inheritance from `fieldset` elements in IE.
238 | * 3. Remove the padding so developers are not caught out when they zero out
239 | * `fieldset` elements in all browsers.
240 | */
241 |
242 | legend {
243 | box-sizing: border-box; /* 1 */
244 | color: inherit; /* 2 */
245 | display: table; /* 1 */
246 | max-width: 100%; /* 1 */
247 | padding: 0; /* 3 */
248 | white-space: normal; /* 1 */
249 | }
250 |
251 | /**
252 | * Add the correct vertical alignment in Chrome, Firefox, and Opera.
253 | */
254 |
255 | progress {
256 | vertical-align: baseline;
257 | }
258 |
259 | /**
260 | * Remove the default vertical scrollbar in IE 10+.
261 | */
262 |
263 | textarea {
264 | overflow: auto;
265 | }
266 |
267 | /**
268 | * 1. Add the correct box sizing in IE 10.
269 | * 2. Remove the padding in IE 10.
270 | */
271 |
272 | [type="checkbox"],
273 | [type="radio"] {
274 | box-sizing: border-box; /* 1 */
275 | padding: 0; /* 2 */
276 | }
277 |
278 | /**
279 | * Correct the cursor style of increment and decrement buttons in Chrome.
280 | */
281 |
282 | [type="number"]::-webkit-inner-spin-button,
283 | [type="number"]::-webkit-outer-spin-button {
284 | height: auto;
285 | }
286 |
287 | /**
288 | * 1. Correct the odd appearance in Chrome and Safari.
289 | * 2. Correct the outline style in Safari.
290 | */
291 |
292 | [type="search"] {
293 | -webkit-appearance: textfield; /* 1 */
294 | outline-offset: -2px; /* 2 */
295 | }
296 |
297 | /**
298 | * Remove the inner padding in Chrome and Safari on macOS.
299 | */
300 |
301 | [type="search"]::-webkit-search-decoration {
302 | -webkit-appearance: none;
303 | }
304 |
305 | /**
306 | * 1. Correct the inability to style clickable types in iOS and Safari.
307 | * 2. Change font properties to `inherit` in Safari.
308 | */
309 |
310 | ::-webkit-file-upload-button {
311 | -webkit-appearance: button; /* 1 */
312 | font: inherit; /* 2 */
313 | }
314 |
315 | /* Interactive
316 | ========================================================================== */
317 |
318 | /*
319 | * Add the correct display in Edge, IE 10+, and Firefox.
320 | */
321 |
322 | details {
323 | display: block;
324 | }
325 |
326 | /*
327 | * Add the correct display in all browsers.
328 | */
329 |
330 | summary {
331 | display: list-item;
332 | }
333 |
334 | /* Misc
335 | ========================================================================== */
336 |
337 | /**
338 | * Add the correct display in IE 10+.
339 | */
340 |
341 | template {
342 | display: none;
343 | }
344 |
345 | /**
346 | * Add the correct display in IE 10.
347 | */
348 |
349 | [hidden] {
350 | display: none;
351 | }
352 |
--------------------------------------------------------------------------------
/Shibui.iatemplate/Contents/Resources/styles/style.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Shibui (渋い)
3 | *
4 | * This template is inspired by the Japanese aesthetics style
5 | * “shibui” which was founded during the Muromachi period (1336-1392).
6 | *
7 | */
8 |
9 | @import "normalize.css";
10 | @import "variables.css";
11 | @import "../fonts/fonts.css";
12 |
13 | html {
14 | box-sizing: border-box;
15 | font-size: 100%;
16 | scroll-behavior: smooth;
17 | }
18 |
19 | html.night-mode {
20 | color: #c9d1d9;
21 | }
22 |
23 | html:not(.night-mode) {
24 | color: #24292f;
25 | }
26 |
27 | *,
28 | *:before,
29 | *:after {
30 | box-sizing: inherit;
31 | }
32 |
33 | ::selection {
34 | background-color: #a3b387;
35 | color: #ffffff;
36 | }
37 |
38 | body {
39 | background-color: #ffffff;
40 | color: #000000;
41 | font-family: var(--font-family-base);
42 | font-weight: var(--font-weight-normal);
43 | line-height: var(--line-height-2);
44 | padding-inline-end: var(--horizontal-padding);
45 | padding-inline-start: var(--horizontal-padding);
46 | }
47 |
48 | @media screen {
49 | body {
50 | background-color: var(--color-bg);
51 | color: var(--color-fg);
52 | }
53 | }
54 |
55 | @supports (padding: constant(safe-area-inset-left)) and
56 | (padding: constant(safe-area-inset-right)) {
57 | body {
58 | padding-inline-start: calc(
59 | var(--horizontal-padding) + constant(safe-area-inset-left)
60 | );
61 | padding-inline-end: calc(
62 | var(--horizontal-padding) + constant(safe-area-inset-right)
63 | );
64 | }
65 | }
66 |
67 | @supports (padding: env(safe-area-inset-left)) and
68 | (padding: env(safe-area-inset-right)) {
69 | body {
70 | padding-inline-end: calc(
71 | var(--horizontal-padding) + env(safe-area-inset-right)
72 | );
73 | padding-inline-start: calc(
74 | var(--horizontal-padding) + env(safe-area-inset-left)
75 | );
76 | }
77 | }
78 |
79 | @media screen {
80 | body {
81 | margin-inline: auto;
82 | width: 88vw;
83 | }
84 | }
85 |
86 | @media (min-width: 768px) {
87 | body {
88 | --horizontal-padding: 15px;
89 | width: 66vw;
90 | }
91 | }
92 |
93 | @media (min-width: 1200px) {
94 | body {
95 | --horizontal-padding: 45px;
96 | width: 55vw;
97 | }
98 | }
99 |
100 | /** Headlines */
101 | :is(h1, h2, h3, h4, h5, h6) {
102 | font-weight: var(--font-weight-black);
103 | letter-spacing: -0.02em;
104 | line-height: var(--line-height-1);
105 | margin-block-start: 0;
106 | position: relative;
107 | }
108 |
109 | h1 {
110 | font-size: var(--font-size-7);
111 | margin-block-end: var(--space-13);
112 | }
113 |
114 | h2 {
115 | font-size: var(--font-size-5);
116 | margin-block-end: var(--space-10);
117 | margin-block-start: var(--space-13);
118 | }
119 |
120 | :is(h3, h4, h5, h6) {
121 | font-size: var(--font-size-4);
122 | margin-block-end: var(--space-8);
123 | margin-block-start: var(--space-13);
124 | }
125 |
126 | :is(h2, h3):first-of-type {
127 | margin-block-start: 0;
128 | }
129 |
130 | p:last-of-type + h3 {
131 | margin-block-start: var(--space-13);
132 | }
133 |
134 | .night-mode :is(h1, h2, h3, h4, h5, h6) {
135 | font-weight: var(--font-weight-extra-bold);
136 | }
137 |
138 | /** Paragraph */
139 | p {
140 | font-size: var(--font-size-3);
141 | font-variant-ligatures: no-common-ligatures;
142 | font-weight: var(--font-weight-normal);
143 | letter-spacing: normal;
144 | line-height: var(--line-height-2);
145 | margin-block-end: var(--space-10);
146 | margin-block-start: 0;
147 | }
148 |
149 | p:last-of-type {
150 | margin-block-end: 0;
151 | }
152 |
153 | .night-mode p {
154 | font-weight: var(--font-weight-light);
155 | }
156 |
157 | /** Lists */
158 | ul {
159 | font-size: var(--font-size-3);
160 | font-variant-ligatures: no-common-ligatures;
161 | list-style-type: square;
162 | margin-block-end: var(--space-12);
163 | margin-block-start: var(--space-12);
164 | padding-inline-start: 1.2em;
165 | }
166 |
167 | :is(ul ul, ul ol) {
168 | margin-block-start: var(--space-5);
169 | }
170 |
171 | ul li {
172 | margin-block-end: var(--space-5);
173 | }
174 |
175 | li ul {
176 | margin-block-end: 0;
177 | padding-inline-start: 2rem;
178 | }
179 |
180 | @media (min-width: 768px) {
181 | ul {
182 | padding-inline-start: 0;
183 | }
184 | }
185 |
186 | ol {
187 | font-size: var(--font-size-3);
188 | font-variant-ligatures: no-common-ligatures;
189 | margin-block-end: var(--space-12);
190 | margin-block-start: var(--space-12);
191 | padding-inline-start: 1.2em;
192 | }
193 |
194 | ol ol,
195 | ol ul {
196 | margin-block-start: var(--space-5);
197 | }
198 |
199 | ol li {
200 | margin-block-end: var(--space-2);
201 | }
202 |
203 | li ol {
204 | margin-block-end: 0;
205 | padding-inline-start: 2rem;
206 | }
207 |
208 | @media (min-width: 768px) {
209 | ol {
210 | padding-inline-start: 0;
211 | }
212 | }
213 |
214 | .task-list-item {
215 | list-style: none;
216 | }
217 |
218 | .task-list-item-checkbox {
219 | appearance: none;
220 | border-color: var(--color-border);
221 | border-radius: var(--radius-1);
222 | border-style: solid;
223 | border-width: var(--border-width-1);
224 | box-sizing: border-box;
225 | display: inline-flex;
226 | flex-shrink: 0;
227 | height: 1em;
228 | margin-inline-end: var(--space-1);
229 | position: relative;
230 | top: 2px;
231 | width: 1em;
232 | }
233 |
234 | .task-list-item-checkbox:checked {
235 | background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij4KICA8cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+CiAgPHBhdGggZD0iTTEwIDE1LjE3Mmw5LjE5Mi05LjE5MyAxLjQxNSAxLjQxNEwxMCAxOGwtNi4zNjQtNi4zNjQgMS40MTQtMS40MTR6IiBmaWxsPSJyZ2JhKDE0LCAxMywgMTIpIiAvPgo8L3N2Zz4K");
236 | background-position: center;
237 | background-repeat: no-repeat;
238 | background-size: 100%;
239 | }
240 |
241 | .night-mode .task-list-item-checkbox:checked {
242 | background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij4KICA8cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+CiAgPHBhdGggZD0iTTEwIDE1LjE3Mmw5LjE5Mi05LjE5MyAxLjQxNSAxLjQxNEwxMCAxOGwtNi4zNjQtNi4zNjQgMS40MTQtMS40MTR6IiBmaWxsPSJyZ2JhKDIzMSwyMzAsMjI4LDAuOTUpIiAvPgo8L3N2Zz4K");
243 | }
244 |
245 | dl {
246 | font-size: var(--font-size-3);
247 | margin-block-end: var(--space-12);
248 | margin-block-start: 0;
249 | }
250 |
251 | dt {
252 | font-weight: var(--font-weight-extra-bold);
253 | }
254 |
255 | dd {
256 | margin-inline-start: 0;
257 | padding-inline-start: 1.2em;
258 | }
259 |
260 | /** Critic Markup */
261 | del {
262 | text-decoration-thickness: 0.15em;
263 | }
264 |
265 | ins {
266 | text-decoration-style: solid;
267 | text-decoration-thickness: 0.15em;
268 | }
269 |
270 | mark {
271 | background-color: rgba(230, 240, 40, 0.7);
272 | border-color: rgba(0, 0, 0, 0.1);
273 | border-radius: 0.25em;
274 | box-shadow: var(--shadow-dark-inset);
275 | color: rgba(0, 0, 0, 0.75);
276 | padding-block-end: 0.4em;
277 | padding-block-start: 0.4em;
278 | padding-inline-end: 0.3em;
279 | padding-inline-start: 0.3em;
280 | }
281 |
282 | /** Code, Sample, Abbreviation, Keyboard Shortcuts etc. */
283 | pre {
284 | background-color: #2e3440;
285 | border-radius: 0.3em;
286 | color: #f8f8f2;
287 | margin-block-end: var(--space-10);
288 | margin-block-start: 0;
289 | overflow: auto;
290 | padding: 1em;
291 | white-space: pre;
292 | }
293 |
294 | @media print {
295 | body {
296 | --horizontal-padding: 75px;
297 | }
298 |
299 | body pre code {
300 | white-space: pre-wrap;
301 | }
302 | }
303 |
304 | p code,
305 | li code,
306 | samp {
307 | background-color: var(--color-bg-code);
308 | border-radius: 0.3em;
309 | color: var(--color-fg-code);
310 | padding-block-end: var(--space-1);
311 | padding-block-start: var(--space-1);
312 | padding-inline-end: var(--space-3);
313 | padding-inline-start: var(--space-3);
314 | white-space: normal;
315 | }
316 |
317 | kbd {
318 | background-color: #f7f7f7;
319 | border-color: #cccccc;
320 | border-style: solid;
321 | border-width: var(--border-width-1);
322 | box-shadow: var(--shadow-beveled-keyboard);
323 | color: #333333;
324 | display: inline-block;
325 | font-size: var(--font-size-2);
326 | font-weight: 700;
327 | line-height: 1.4;
328 | padding: 0.3em 0.6em 0.1em;
329 | text-shadow: var(--shadow-white-outline);
330 | white-space: nowrap;
331 | }
332 |
333 | abbr {
334 | font-variant: small-caps;
335 | }
336 |
337 | :is(code, kbd, samp) {
338 | font-family: var(--font-family-mono);
339 | font-size: clamp(0.8rem, 0.8vw, 1rem);
340 | }
341 |
342 | :is(abbr, dfn) {
343 | cursor: help;
344 | }
345 |
346 | /** Quotes */
347 | [lang|="en"] blockquote,
348 | blockquote[lang|="en"],
349 | [lang|="en"] q,
350 | q[lang|="en"] {
351 | quotes: "“" "”" "‘" "’";
352 | }
353 |
354 | [lang|="de"] blockquote,
355 | blockquote[lang|="de"],
356 | [lang|="de"] q,
357 | q[lang|="de"] {
358 | quotes: "»" "«" "›" "‹";
359 | }
360 |
361 | [lang|="ja"] blockquote,
362 | blockquote[lang|="ja"],
363 | [lang|="ja"] q,
364 | q[lang|="ja"] {
365 | font-style: normal;
366 | quotes: "「" "」," "『" "』";
367 | }
368 |
369 | blockquote {
370 | margin-block-end: var(--space-12);
371 | margin-block-start: var(--space-12);
372 | margin-inline-end: var(--space-8);
373 | margin-inline-start: var(--space-8);
374 | position: relative;
375 | }
376 |
377 | @media (min-width: 768px) {
378 | blockquote {
379 | margin-inline-end: var(--space-10);
380 | margin-inline-start: var(--space-10);
381 | }
382 | }
383 |
384 | blockquote :is(ul, ol) {
385 | padding-block-start: var(--space-6);
386 | }
387 |
388 | blockquote::before {
389 | color: var(--color-accent);
390 | content: "“";
391 | font-family: Trebuchet MS, Georgia, serif;
392 | font-size: var(--font-size-6);
393 | height: 0.6em;
394 | inset-block-start: -0.55em;
395 | inset-inline-start: -0.55em;
396 | position: absolute;
397 | }
398 |
399 | blockquote :is(p, ul, ol) {
400 | font-size: var(--font-size-3);
401 | font-style: italic;
402 | font-weight: var(--font-weight-extra-light);
403 | margin-block-end: var(--space-10);
404 | margin-block-start: 0;
405 | }
406 |
407 | blockquote :is(p, ul, ol):nth-last-child(2) {
408 | margin-block-end: var(--space-2);
409 | }
410 |
411 | blockquote :is(p, ul, ol) strong {
412 | font-style: italic;
413 | font-weight: var(--font-weight-bold);
414 | }
415 |
416 | blockquote :is(p, ul, ol):last-child strong {
417 | font-size: var(--font-size-3);
418 | font-style: normal;
419 | font-weight: var(--font-weight-bold);
420 | }
421 |
422 | blockquote :is(p, ul, ol):last-child strong::before {
423 | content: "—";
424 | font-weight: var(--font-weight-light);
425 | inset-inline-start: -0.8em;
426 | position: absolute;
427 | }
428 |
429 | blockquote :is(p, ul, ol):last-child strong::before em {
430 | font-size: var(--font-size-3);
431 | font-weight: var(--font-weight-normal);
432 | font-weight: var(--font-weight-extra-light);
433 | }
434 |
435 | q {
436 | font-style: italic;
437 | }
438 |
439 | q::before {
440 | font-style: normal;
441 | margin-inline-end: -0.05em;
442 | }
443 |
444 | q::after {
445 | font-style: normal;
446 | margin-inline-start: 0.1em;
447 | }
448 |
449 | /** Links */
450 | a {
451 | color: var(--color-fg);
452 | font-weight: var(--font-weight-semi-bold);
453 | text-decoration: underline;
454 | text-decoration-color: var(--color-fg-soft);
455 | text-decoration-thickness: 0.2em;
456 | text-underline-offset: auto;
457 | }
458 |
459 | :is(a:hover, a:focus) {
460 | text-decoration-color: var(--color-accent);
461 | }
462 |
463 | /** Figure & Caption */
464 | figure {
465 | background-color: rgba(210, 210, 210, 0.8);
466 | margin-block-end: var(--space-10);
467 | margin-block-start: 0;
468 | margin-inline-end: 0;
469 | margin-inline-start: 0;
470 | padding: var(--space-10);
471 | }
472 |
473 | figure img {
474 | max-width: 100%;
475 | }
476 |
477 | .night-mode figure {
478 | background-color: rgba(60, 60, 60, 0.8);
479 | padding: var(--space-10);
480 | }
481 |
482 | figcaption {
483 | font-size: clamp(0.8rem, 0.8vw, 0.75rem);
484 | text-align: center;
485 | }
486 |
487 | /** Image */
488 | img {
489 | background-color: var(--color-fg-feather);
490 | border-color: var(--color-fg-feather);
491 | border-radius: var(--radius-1);
492 | border-style: solid;
493 | border-width: 1px;
494 | box-shadow: 0 2px 3px var(--color-fg-feather);
495 | display: block;
496 | font-size: 0;
497 | height: auto;
498 | width: 100%;
499 | }
500 |
501 | .night-mode img {
502 | opacity: 0.87;
503 | }
504 |
505 | img[src$=".svg"] {
506 | background: transparent;
507 | border: 0;
508 | box-shadow: none;
509 | }
510 |
511 | /** Divider */
512 | hr {
513 | border-block-end-width: var(--border-width-1);
514 | border-block-start-width: 0;
515 | border-color: var(--color-fg-feather);
516 | border-inline-end-width: 0;
517 | border-inline-start-width: 0;
518 | border-style: solid;
519 | margin-block-end: var(--space-14);
520 | margin-block-start: var(--space-14);
521 | width: 100%;
522 | }
523 |
524 | /** Table */
525 | table {
526 | border-collapse: separate;
527 | border-spacing: 0 1em;
528 | font-size: var(--font-size-3);
529 | margin-block-end: var(--space-10);
530 | margin-block-start: var(--space-10);
531 | width: 100%;
532 | }
533 |
534 | table thead tr:first-child {
535 | background: var(--color-fg-feather);
536 | }
537 |
538 | table tbody tr:last-child {
539 | border-width: 0;
540 | }
541 |
542 | table th {
543 | display: block;
544 | }
545 |
546 | table td {
547 | display: block;
548 | }
549 |
550 | table tr {
551 | border-block-end: var(--border-width-1);
552 | border-block-start-width: var(--border-width-1);
553 | border-color: var(--color-border);
554 | border-inline-end-width: 0;
555 | border-inline-start-width: 0;
556 | border-style: solid;
557 | margin-block-end: var(--space-5);
558 | }
559 |
560 | table thead th,
561 | table tbody td {
562 | font-weight: var(--font-weight-normal);
563 | text-align: left;
564 | vertical-align: middle;
565 | }
566 |
567 | table thead th {
568 | font-weight: var(--font-weight-black);
569 | vertical-align: bottom;
570 | }
571 |
572 | table caption + thead tr:first-child th,
573 | table caption + thead tr:first-child td,
574 | table colgroup + thead tr:first-child th,
575 | table colgroup + thead tr:first-child td,
576 | table thead:first-child tr:first-child th,
577 | table thead:first-child tr:first-child td {
578 | border-block-start: 0;
579 | }
580 |
581 | @media (min-width: 768px) {
582 | table {
583 | border-collapse: collapse;
584 | border-spacing: 0;
585 | }
586 |
587 | table th,
588 | table td {
589 | display: table-cell;
590 | padding: var(--space-3);
591 | vertical-align: top;
592 | }
593 | }
594 |
595 | /* Footnotes */
596 | .footnote {
597 | color: var(--color-accent);
598 | font-weight: var(--font-weight-light);
599 | text-decoration: none;
600 | }
601 |
602 | .reversefootnote {
603 | color: var(--color-accent);
604 | font-weight: var(--font-weight-light);
605 | text-decoration: none;
606 | }
607 |
608 | .footnotes {
609 | padding-left: 2rem;
610 | position: relative;
611 | }
612 |
613 | .footnotes :target {
614 | background-color: var(--color-fg-feather);
615 | padding: var(--space-5);
616 | }
617 |
618 | .footnotes ol {
619 | counter-reset: item;
620 | list-style: none;
621 | margin: 0;
622 | padding: 0;
623 | }
624 |
625 | .footnotes li::before {
626 | content: counter(item);
627 | counter-increment: item;
628 | font-size: smaller;
629 | font-weight: var(--font-weight-black);
630 | left: 0;
631 | padding-top: 0.15rem;
632 | position: absolute;
633 | vertical-align: super;
634 | }
635 |
--------------------------------------------------------------------------------