arthr.me
A charming Jekyll theme.
jekyll-theme
feat(blog): post layout and formatting
arthr.tngl.sh
+1025
-62
+2
-2
_includes/blog/post.html
+2
-2
_includes/blog/post.html
···
50
50
</header>
51
51
52
52
{%- if include.is_archive -%}
53
-
{%- unless include.post.title == "" -%}
53
+
{%- if include.post.title == "" -%}
54
54
<div class="post-content p-summary">
55
55
{{ include.post.excerpt }}
56
56
</div>
57
-
{%- endunless -%}
57
+
{%- endif -%}
58
58
{%- else -%}
59
59
<div class="post-content e-content">
60
60
{{ include.post.content }}
+10
-13
_layouts/blog.html
+10
-13
_layouts/blog.html
···
44
44
45
45
{% if paginator.previous_page or paginator.next_page -%}
46
46
<nav class="blog-pagination" aria-label="{{- site.translations.blog_pagination_title -}}">
47
+
{% if paginator.previous_page -%}
48
+
<a class="as-button prev-page menu-item" href="{{ paginator.previous_page_path | relative_url }}" rel="prev">
49
+
{{- site.translations.blog_pagination_prev_page -}}
50
+
</a>
51
+
{%- endif %}
47
52
48
-
<div class="pagination-links">
49
-
{% if paginator.previous_page -%}
50
-
<a class="prev-page menu-item" href="{{ paginator.previous_page_path | relative_url }}" rel="prev">
51
-
{{- site.translations.blog_pagination_prev_page -}}
52
-
</a>
53
-
{%- endif %}
54
-
55
-
{% if paginator.next_page -%}
56
-
<a class="next-page menu-item" href="{{ paginator.next_page_path | relative_url }}" rel="next">
57
-
{{- site.translations.blog_pagination_next_page -}}
58
-
</a>
59
-
{%- endif %}
60
-
</div>
53
+
{% if paginator.next_page -%}
54
+
<a class="as-button next-page menu-item" href="{{ paginator.next_page_path | relative_url }}" rel="next">
55
+
{{- site.translations.blog_pagination_next_page -}}
56
+
</a>
57
+
{%- endif %}
61
58
</nav>
62
59
{%- endif %}
63
60
</div>
+3
-1
_layouts/default.html
+3
-1
_layouts/default.html
···
28
28
</style>
29
29
{%- endif -%}
30
30
31
-
<link rel="stylesheet" type="text/css" href="{%- link assets/css/layout.css -%}" />
31
+
<link rel="stylesheet" href="{%- link assets/css/base.css -%}" />
32
+
<link rel="stylesheet" href="{%- link assets/css/layout.css -%}" />
33
+
<link rel="stylesheet" href="{%- link assets/css/syntax.css -%}" />
32
34
</head>
33
35
<body>
34
36
<div class="site">
+2
_layouts/post.html
+2
_layouts/post.html
+8
_posts/2026-01-18-wikipedia.md
+8
_posts/2026-01-18-wikipedia.md
+16
_posts/2026-02-02-rss.md
+16
_posts/2026-02-02-rss.md
+8
_posts/2026-02-16-a-test-post.md
+8
_posts/2026-02-16-a-test-post.md
+262
_posts/2026-02-20-text-formatting.md
+262
_posts/2026-02-20-text-formatting.md
···
1
+
---
2
+
layout: post
3
+
title: Text formatting
4
+
---
5
+
6
+
Este é um parágrafo comum com **negrito**, *itálico*, ***negrito e itálico***, ~~tachado~~ e `código inline`. Também há [um link](https://example.com) e [um link com título](https://example.com "Título do link").
7
+
8
+
Texto com quebra de linha
9
+
forçada usando dois espaços.
10
+
11
+
12
+
# Título H1
13
+
14
+
## Título H2
15
+
16
+
### Título H3
17
+
18
+
#### Título H4
19
+
20
+
##### Título H5
21
+
22
+
###### Título H6
23
+
24
+
---
25
+
26
+
## Parágrafos e formatação inline
27
+
28
+
29
+
---
30
+
31
+
## Citações
32
+
33
+
> Esta é uma citação simples.
34
+
35
+
> Esta é uma citação com múltiplos parágrafos.
36
+
>
37
+
> Segundo parágrafo da citação.
38
+
>
39
+
> > Citação aninhada dentro de outra citação.
40
+
41
+
---
42
+
43
+
## Listas
44
+
45
+
### Lista não-ordenada
46
+
47
+
- Item um
48
+
- Item dois
49
+
- Sub-item A
50
+
- Sub-item B
51
+
- Sub-sub-item I
52
+
- Item três
53
+
54
+
### Lista ordenada
55
+
56
+
1. Primeiro item
57
+
2. Segundo item
58
+
1. Sub-item numerado
59
+
2. Sub-item numerado
60
+
3. Terceiro item
61
+
62
+
### Lista de tarefas
63
+
64
+
- [x] Tarefa concluída
65
+
- [ ] Tarefa pendente
66
+
- [x] Outra tarefa concluída
67
+
- [ ] Mais uma pendente
68
+
69
+
### Lista de definições (HTML puro)
70
+
71
+
<dl>
72
+
<dt>Termo</dt>
73
+
<dd>Definição do termo.</dd>
74
+
<dt>Outro termo</dt>
75
+
<dd>Definição do outro termo.</dd>
76
+
</dl>
77
+
78
+
---
79
+
80
+
## Tabelas
81
+
82
+
| Coluna A | Coluna B | Coluna C |
83
+
|:-------------|:------------:|-------------:|
84
+
| Alinhada esq | Centralizada | Alinhada dir |
85
+
| Dado 1 | Dado 2 | Dado 3 |
86
+
| Dado longo | Médio | Curto |
87
+
88
+
---
89
+
90
+
## Código
91
+
92
+
### Código inline
93
+
94
+
Use `console.log()` para depurar no JavaScript.
95
+
96
+
### Bloco de código sem linguagem
97
+
98
+
```
99
+
Texto pré-formatado
100
+
sem destaque de sintaxe.
101
+
```
102
+
103
+
### Bloco de código com linguagem
104
+
105
+
```html
106
+
<!doctype html>
107
+
<html lang="pt-BR">
108
+
<head>
109
+
<meta charset="UTF-8" />
110
+
<title>Exemplo</title>
111
+
</head>
112
+
<body>
113
+
<p>Olá, mundo!</p>
114
+
</body>
115
+
</html>
116
+
```
117
+
118
+
```css
119
+
:root {
120
+
--color-primary: #005fcc;
121
+
}
122
+
123
+
body {
124
+
font-family: system-ui, sans-serif;
125
+
color: var(--color-primary);
126
+
}
127
+
```
128
+
129
+
```js
130
+
const greet = (name) => `Olá, ${name}!`;
131
+
console.log(greet("Arthur"));
132
+
```
133
+
134
+
---
135
+
136
+
## Tags semânticas inline (HTML puro)
137
+
138
+
<p>
139
+
<abbr title="HyperText Markup Language">HTML</abbr> é a linguagem de marcação da web.
140
+
</p>
141
+
142
+
<p>
143
+
A fórmula da água é H<sub>2</sub>O e E = mc<sup>2</sup> é de Einstein.
144
+
</p>
145
+
146
+
<p>
147
+
<cite>Dom Casmurro</cite> é um romance de Machado de Assis.
148
+
</p>
149
+
150
+
<p>
151
+
<kbd>Ctrl</kbd> + <kbd>C</kbd> copia o texto selecionado.
152
+
</p>
153
+
154
+
<p>
155
+
O resultado foi <samp>Erro 404: Não encontrado</samp>.
156
+
</p>
157
+
158
+
<p>
159
+
<var>x</var> + <var>y</var> = 10
160
+
</p>
161
+
162
+
<p>
163
+
<mark>Este trecho está destacado</mark> como se fosse marca-texto.
164
+
</p>
165
+
166
+
<p>
167
+
<small>Texto em tamanho reduzido, usado para notas legais.</small>
168
+
</p>
169
+
170
+
<p>
171
+
<strong>Importância semântica forte</strong> vs. <b>negrito visual</b>.
172
+
</p>
173
+
174
+
<p>
175
+
<em>Ênfase semântica</em> vs. <i>itálico visual</i>.
176
+
</p>
177
+
178
+
<p>
179
+
<del>Texto removido/deletado</del> e <ins>texto inserido</ins>.
180
+
</p>
181
+
182
+
<p>
183
+
Texto com <span>span genérico</span> sem semântica própria.
184
+
</p>
185
+
186
+
---
187
+
188
+
## Figuras e imagens
189
+
190
+
### Imagem simples (Markdown)
191
+
192
+
193
+
194
+
### Figura com legenda (HTML puro)
195
+
196
+
<figure>
197
+
<img src="https://placehold.co/800x400" alt="Imagem de exemplo" />
198
+
<figcaption>Legenda descritiva da figura.</figcaption>
199
+
</figure>
200
+
201
+
---
202
+
203
+
## Áudio (HTML puro)
204
+
205
+
<figure>
206
+
<audio controls>
207
+
<source src="audio.mp3" type="audio/mpeg" />
208
+
<source src="audio.ogg" type="audio/ogg" />
209
+
Seu navegador não suporta o elemento <code>audio</code>.
210
+
</audio>
211
+
<figcaption>Legenda do áudio.</figcaption>
212
+
</figure>
213
+
214
+
---
215
+
216
+
## Vídeo (HTML puro)
217
+
218
+
<figure>
219
+
<video controls width="800" poster="poster.jpg">
220
+
<source src="video.mp4" type="video/mp4" />
221
+
<source src="video.webm" type="video/webm" />
222
+
Seu navegador não suporta o elemento <code>video</code>.
223
+
</video>
224
+
<figcaption>Legenda do vídeo.</figcaption>
225
+
</figure>
226
+
227
+
<iframe width="640" height="360" src="https://www.youtube.com/embed/yko6jKJ6ROQ" title="The Top 10 Gaming Genres...According to You!" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
228
+
229
+
---
230
+
231
+
## Notas de rodapé
232
+
233
+
Esta é uma afirmação que precisa de referência.[^1]
234
+
235
+
Outra frase com nota de rodapé mais longa.[^nota-longa]
236
+
237
+
[^1]: Referência curta.
238
+
[^nota-longa]: Esta é uma nota de rodapé com um texto mais longo e detalhado, podendo conter `código inline` e [links](https://example.com).
239
+
240
+
---
241
+
242
+
## Linha horizontal / divisor
243
+
244
+
---
245
+
246
+
***
247
+
248
+
___
249
+
250
+
---
251
+
252
+
## Bloco de detalhes / sumário (HTML puro)
253
+
254
+
<details>
255
+
<summary>Clique para expandir</summary>
256
+
<p>Conteúdo oculto que aparece ao expandir o bloco.</p>
257
+
<ul>
258
+
<li>Item oculto 1</li>
259
+
<li>Item oculto 2</li>
260
+
</ul>
261
+
</details>
262
+
+267
assets/css/base.css
+267
assets/css/base.css
···
1
+
:root {
2
+
--font-headings: ui-serif, serif;
3
+
--font-body: ui-sans-serif, sans-serif;
4
+
--font-code: ui-monospace, monospace;
5
+
6
+
--text-size: 1.4rem;
7
+
--text-line-height: 1.65;
8
+
--spacing: 2rem;
9
+
10
+
--transition-duration: 250ms;
11
+
12
+
--site-width: 700px;
13
+
--content-width: 420px;
14
+
--headings-width: 480px;
15
+
16
+
--color-background: #F5EDD8;
17
+
--color-text: #3B2A1A;
18
+
--color-link: #2D5438;
19
+
--color-link-hover: #1E3826;
20
+
--color-support: #D9634E;
21
+
--color-shadows: color-mix(in srgb, var(--color-text), transparent 75%);
22
+
--color-shadows-hover: color-mix(in srgb, var(--color-text), transparent 50%);
23
+
--color-border: color-mix(in srgb, currentcolor, transparent 50%);
24
+
}
25
+
26
+
@media (prefers-color-scheme: dark) {
27
+
:root {
28
+
--color-background: #3B2A1A;
29
+
--color-text: #F5EDD8;
30
+
--color-link: #E8A054;
31
+
--color-link-hover: #F5C880;
32
+
--color-support: #D9634E;
33
+
}
34
+
}
35
+
36
+
/* Quotes */
37
+
q {
38
+
quotes: "“" "”" "‘" "’";
39
+
}
40
+
41
+
blockquote {
42
+
padding-inline-start: 1lh;
43
+
border-left: 1px solid var(--color-border);
44
+
}
45
+
46
+
blockquote > *:not(:last-child) {
47
+
margin-bottom: var(--spacing);
48
+
}
49
+
50
+
cite {
51
+
font-style: italic;
52
+
}
53
+
54
+
/* Lists */
55
+
56
+
li {
57
+
margin-block: calc(var(--spacing) / 2)
58
+
}
59
+
60
+
ol ol {
61
+
list-style: lower-alpha;
62
+
}
63
+
64
+
.task-list {
65
+
list-style: none;
66
+
padding-inline-start: 0;
67
+
}
68
+
69
+
.task-list .task-list-item-checkbox {
70
+
margin-right: 0.5lh;
71
+
}
72
+
73
+
dl {
74
+
margin
75
+
}
76
+
77
+
dt {
78
+
font-weight: 700;
79
+
}
80
+
81
+
dd + dt {
82
+
margin-top: calc(var(--spacing) / 2);
83
+
}
84
+
85
+
/* Links */
86
+
87
+
a {
88
+
color: var(--color-link);
89
+
text-decoration-color: transparent;
90
+
transition-property: color, text-decoration-color, text-decoration-style;
91
+
transition-duration: var(--transition-duration);
92
+
transition-timing-function: ease;
93
+
}
94
+
95
+
a:hover,
96
+
a:focus {
97
+
color: var(--color-link-hover);
98
+
text-decoration: underline;
99
+
text-underline-offset: 0.2rem;
100
+
text-decoration-color: color-mix(in srgb, currentcolor, transparent 75%);
101
+
}
102
+
103
+
a:active {
104
+
text-decoration-thickness: 1px;
105
+
text-decoration-style: wavy;
106
+
}
107
+
108
+
109
+
/* Headings */
110
+
111
+
h1, h2, h3, h4, h5, h6 {
112
+
font-family: var(--font-headings);
113
+
font-weight: 400;
114
+
}
115
+
116
+
h1 {
117
+
font-size: 2em;
118
+
}
119
+
120
+
h2 {
121
+
font-size: 1.75em;
122
+
}
123
+
124
+
h3 {
125
+
font-size: 1.5em;
126
+
}
127
+
128
+
h4 {
129
+
font-size: 1.25em;
130
+
}
131
+
132
+
h5 {
133
+
font-size: 1em;
134
+
}
135
+
136
+
h6 {
137
+
font-size: .75em;
138
+
}
139
+
140
+
/* Inputs */
141
+
142
+
input[type="checkbox"],
143
+
inpit[type="radio"] {
144
+
accent-color: var(--color-support);
145
+
}
146
+
147
+
/* Buttons */
148
+
button,
149
+
input[type="button"],
150
+
input[type="reset"],
151
+
input[type="submit"],
152
+
.as-button {
153
+
display: inline-block;
154
+
padding: calc(var(--spacing) / 4) calc(var(--spacing) / 2);
155
+
background-color: var(--color-support);
156
+
border: 2px solid var(--color-border);
157
+
box-shadow: 5px 2px 0 var(--color-shadows);
158
+
color: var(--color-background) !important;
159
+
font-weight: 700;
160
+
text-decoration: none !important;
161
+
transition-property: background-color, box-shadow;
162
+
transition-duration: var(--transition-duration);
163
+
transition-timing-function: ease;
164
+
165
+
&:hover {
166
+
box-shadow: 4px 2px 0 var(--color-shadows-hover);
167
+
}
168
+
169
+
&:active {
170
+
box-shadow: 2px 2px 0 var(--color-shadows-hover);
171
+
}
172
+
173
+
~ & {
174
+
border-collapse: collapse;
175
+
border-left: 0;
176
+
}
177
+
178
+
&:first-of-type {
179
+
border-top-left-radius: var(--spacing);
180
+
border-bottom-left-radius: var(--spacing);
181
+
}
182
+
183
+
&:last-of-type {
184
+
border-top-right-radius: var(--spacing);
185
+
border-bottom-right-radius: var(--spacing);
186
+
}
187
+
}
188
+
189
+
/* Misc elements */
190
+
191
+
abbr {
192
+
cursor: help;
193
+
text-decoration: underline;
194
+
text-decoration-style: dotted;
195
+
text-underline-offset: 0.2rem;
196
+
}
197
+
198
+
mark {
199
+
background-color: var(--color-support);
200
+
color: var(--color-background);
201
+
}
202
+
203
+
del, ins {
204
+
text-decoration-style: wavy;
205
+
text-decoration-color: var(--color-support);
206
+
}
207
+
208
+
/* Details */
209
+
210
+
summary {
211
+
cursor: pointer;
212
+
}
213
+
214
+
/* Media */
215
+
216
+
img, video, audio, iframe {
217
+
border-radius: .3rem;
218
+
box-shadow: 1rem .5rem 0 var(--color-shadows);
219
+
}
220
+
221
+
iframe[src*="youtube"],
222
+
iframe[src*="vimeo"],
223
+
iframe[src*="twitch"] {
224
+
height: auto;
225
+
aspect-ratio: 16 / 9;
226
+
}
227
+
228
+
img + em,
229
+
figcaption {
230
+
display: block;
231
+
padding-inline-start: 0.5lh;
232
+
color: var(--color-shadows-hover);
233
+
font-size: 1.2rem;
234
+
}
235
+
236
+
/* Horizontal rule */
237
+
hr {
238
+
margin-block: calc(var(--spacing) * 2);
239
+
background: var(--color-border);
240
+
border: none;
241
+
height: 1px;
242
+
}
243
+
244
+
/* Footnotes */
245
+
246
+
.footnotes {
247
+
padding-top: var(--spacing);
248
+
margin-top: calc(var(--spacing) * 2);
249
+
border-top: 1px solid var(--color-shadows);
250
+
font-size: 1.2rem;
251
+
}
252
+
253
+
/* Pre-formatted text and code */
254
+
255
+
:not(pre) > code {
256
+
background-color: var(--color-shadows);
257
+
padding: .3rem;
258
+
border-radius: .3rem;
259
+
font-size: 1.2rem;
260
+
}
261
+
262
+
pre {
263
+
font-size: 1.2rem;
264
+
padding: calc(var(--spacing) / 2);
265
+
border-radius: .3rem;
266
+
box-shadow: 1rem .5rem 0 var(--color-shadows);
267
+
}
+218
-46
assets/css/layout.css
+218
-46
assets/css/layout.css
···
1
-
:root {
2
-
--font-headings: ui-serif, serif;
3
-
--font-body: ui-sans-serif, sans-serif;
4
-
--font-code: ui-monospace, monospace;
1
+
2
+
3
+
@layer reset {
4
+
html {
5
+
box-sizing: border-box;
6
+
color-scheme: light dark;
7
+
-webkit-font-smoothing: antialiased;
8
+
-webkit-text-size-adjust: 100%;
9
+
-webkit-font-feature-settings: "kern" 1;
10
+
-moz-font-feature-settings: "kern" 1;
11
+
-o-font-feature-settings: "kern" 1;
12
+
font-feature-settings: "kern" 1;
13
+
text-size-adjust: none;
14
+
hanging-punctuation: first allow-end last;
15
+
}
16
+
17
+
*,
18
+
*::before,
19
+
*::after {
20
+
box-sizing: inherit;
21
+
}
5
22
6
-
--text-size: 1.4em;
7
-
--text-line-height: 1.65;
8
-
--spacing: 2rem;
23
+
body, h1, h2, h3, h4, h5, h6,
24
+
p, blockquote, pre, hr,
25
+
dl, dd, ol, ul,
26
+
figure, picture, audio, video,
27
+
table, iframe {
28
+
margin: 0;
29
+
padding: 0;
30
+
}
31
+
32
+
img, video, audio, figure, picture,
33
+
table {
34
+
max-width: 100%;
35
+
}
36
+
37
+
iframe {
38
+
display: block;
39
+
}
40
+
41
+
h1,
42
+
h2,
43
+
h3,
44
+
h4,
45
+
h5,
46
+
h6 {
47
+
text-wrap: balance;
48
+
}
49
+
50
+
p {
51
+
text-wrap: pretty;
52
+
}
53
+
54
+
ul,
55
+
ol {
56
+
list-style-position: outside;
57
+
padding-inline-start: 1lh;
58
+
}
59
+
60
+
@media (prefers-reduced-motion) {
61
+
:root {
62
+
--transition-duration: 0 !important;
63
+
}
64
+
}
65
+
66
+
67
+
@media (prefers-reduced-motion: no-preference) {
68
+
html {
69
+
interpolate-size: allow-keywords;
70
+
}
71
+
}
72
+
73
+
input, button,
74
+
textarea, select {
75
+
font-family: inherit;
76
+
font-size: inherit;
77
+
}
78
+
79
+
:target {
80
+
scroll-margin-block: 5ex;
81
+
}
9
82
}
10
83
84
+
11
85
html {
12
-
box-sizing: border-box;
13
86
font: 62.5%/100% var(--font-body);
14
87
}
15
88
16
-
*,
17
-
*::before,
18
-
*::after {
19
-
box-sizing: inherit;
20
-
}
21
-
22
89
body {
23
90
padding-inline: 5vw;
91
+
background-color: var(--color-background);
92
+
color: var(--color-text);
24
93
font-size: var(--text-size);
25
94
line-height: 1.5;
26
95
}
···
28
97
.site {
29
98
display: flex;
30
99
flex-flow: column nowrap;
31
-
max-width: 70rem;
100
+
max-width: var(--site-width);
32
101
margin-block: calc(var(--spacing) * 2);
33
102
margin-inline: auto;
34
103
}
···
41
110
display: flex;
42
111
flex-flow: row wrap;
43
112
align-items: center;
44
-
margin-bottom: var(--spacing);
113
+
margin-bottom: calc(var(--spacing) * 2);
114
+
115
+
.site-branding {
116
+
display: inline-flex;
117
+
flex-flow: row nowrap;
118
+
align-items: center;
119
+
gap: calc(var(--spacing) / 2);
120
+
line-height: 100%;
121
+
}
122
+
123
+
.site-logo {
124
+
max-height: 2.5rem;
125
+
width: auto;
126
+
border-radius: 100%;
127
+
box-shadow: none;
128
+
}
129
+
130
+
.site-name {
131
+
font-family: var(--font-headings);
132
+
font-weight: bolder;
133
+
font-style: italic;
134
+
}
135
+
136
+
.site-title {
137
+
display: inline-block;
138
+
font-size: 2.5rem;
139
+
line-height: 1.6;
140
+
}
45
141
}
46
142
47
-
.site-header .site-branding {
143
+
.site-menu {
48
144
display: inline-flex;
49
-
flex-flow: row nowrap;
50
-
align-items: center;
51
-
gap: calc(var(--spacing) / 2);
52
-
line-height: 100%;
145
+
flex-flow: row wrap;
146
+
justify-items: flex-end;
147
+
gap: var(--spacing);
148
+
margin-left: auto;
149
+
}
150
+
151
+
.site-menu .menu-item {
152
+
flex-shrink: 0;
53
153
}
54
154
55
-
.site-header .site-logo {
56
-
max-height: 2.5rem;
57
-
width: auto;
58
-
border-radius: 100%;
155
+
/*
156
+
Content
157
+
*/
158
+
159
+
/* Categories */
160
+
.category {
161
+
display: inline-flex;
162
+
padding-inline: 8px;
163
+
border-radius: 3px;
164
+
box-shadow: 0.5rem 0.2rem 0 var(--color-shadows);
165
+
color: var(--color-text) !important;
166
+
font-size: var(--text-size);
167
+
line-height: 1.85;
168
+
text-decoration: none !important;
169
+
transition: box-shadow var(--transition-duration) ease;
59
170
}
60
171
61
-
.site-header .site-name {
172
+
@media (prefers-color-scheme: dark) {
173
+
.category {
174
+
color: var(--color-background) !important;
175
+
}
176
+
}
177
+
178
+
.category:hover,
179
+
.category:focus {
180
+
box-shadow: 0.4rem 0.2rem 0 var(--color-shadows-hover);
181
+
}
182
+
183
+
.category:active {
184
+
box-shadow: 0.1rem 0.1rem 0 var(--color-shadows-hover);
185
+
}
186
+
187
+
.blog-categories {
188
+
margin-bottom: calc(var(--spacing) * 2);
189
+
}
190
+
191
+
/* Archives */
192
+
.archive-title {
193
+
margin-bottom: calc(var(--spacing) * 2);
62
194
font-family: var(--font-headings);
63
-
font-weight: bolder;
64
-
font-style: italic;
65
-
font-size: 2.5rem;
66
195
}
67
196
68
-
.site-header .site-menu {
69
-
display: inline-flex;
70
-
flex-flow: row wrap;
71
-
justify-items: flex-end;
72
-
gap: var(--spacing);
197
+
.blog-pagination {
198
+
display: flex;
199
+
flex-flow: row nowrap;
200
+
max-width: var(--content-width);
73
201
margin-left: auto;
74
202
}
75
203
76
204
/*
77
-
Content
205
+
Post
78
206
*/
79
207
80
208
.post {
81
209
margin-bottom: calc(var(--spacing) * 4);
82
210
}
83
211
84
-
.post-header > * {
85
-
display: inline;
212
+
/* Header */
213
+
.post-header {
86
214
vertical-align: baseline;
87
-
font-size: 2rem;
215
+
margin-bottom: var(--spacing);
88
216
}
89
217
90
218
.post-header .post-permalink {
219
+
display: inline;
91
220
margin-right: calc(var(--spacing) / 4);
92
221
font-family: var(--font-headings);
222
+
color: color-mix(in srgb, var(--color-link), transparent 50%);
223
+
font-size: 2rem;
224
+
}
225
+
226
+
.post-header .post-permalink:hover,
227
+
.post-header .post-permalink:focus {
228
+
color: color-mix(in srgb, var(--color-link-hover), transparent 50%);
93
229
}
94
230
95
231
.post-title {
232
+
display: inline;
233
+
margin-block: 0;
96
234
font-family: var(--font-headings);
235
+
font-size: 2rem;
97
236
}
98
237
238
+
.post-header .category {
239
+
margin-left: calc(var(--spacing) / 4);
240
+
}
241
+
242
+
/* Content */
99
243
.post-content > * {
100
244
width: 100%;
101
-
max-width: 420px;
245
+
max-width: var(--content-width);
102
246
margin-left: auto;
247
+
margin-bottom: var(--spacing);
103
248
}
104
249
105
250
.post-content > h1,
···
108
253
.post-content > h4,
109
254
.post-content > h5,
110
255
.post-content > h6 {
111
-
max-width: 500px;
256
+
max-width: var(--headings-width);
112
257
}
113
258
114
-
.blog-pagination {
115
-
max-width: 420px;
259
+
.post-content a {
260
+
text-decoration-color: var(--color-border);
261
+
}
262
+
263
+
/* Post Footer */
264
+
.post-footer {
265
+
max-width: var(--content-width);
116
266
margin-left: auto;
267
+
margin-top: calc(var(--spacing) * 2);
268
+
font-size: 1.2rem;
269
+
}
270
+
271
+
.post-tags {
272
+
display: flex;
273
+
flex-flow: row wrap;
274
+
justify-content: flex-start;
275
+
padding-inline-start: 0;
276
+
gap: 1lh;
277
+
}
278
+
279
+
.post-tags .tag-item {
280
+
list-style: none;
281
+
padding: .2rem .5rem;
282
+
border-radius: .2rem;
283
+
background-color: var(--color-shadows);
284
+
285
+
&::before {
286
+
content: "#";
287
+
color: var(--color-shadows-hover);
288
+
}
289
+
290
+
a {
291
+
color: var(--color-text);
292
+
}
117
293
}
118
294
119
295
/*
···
126
302
max-width: 420px;
127
303
margin-left: auto;
128
304
}
129
-
130
-
img {
131
-
max-width: 100%;
132
-
}
+228
assets/css/syntax.css
+228
assets/css/syntax.css
···
1
+
/* This file was generated using `rougify style github` */
2
+
.highlight table td { padding: 5px; }
3
+
.highlight table pre { margin: 0; }
4
+
.highlight, .highlight .w {
5
+
color: #24292f;
6
+
background-color: #f6f8fa;
7
+
}
8
+
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
9
+
color: #cf222e;
10
+
}
11
+
.highlight .gr {
12
+
color: #f6f8fa;
13
+
}
14
+
.highlight .gd {
15
+
color: #82071e;
16
+
background-color: #ffebe9;
17
+
}
18
+
.highlight .nb {
19
+
color: #953800;
20
+
}
21
+
.highlight .nc {
22
+
color: #953800;
23
+
}
24
+
.highlight .no {
25
+
color: #953800;
26
+
}
27
+
.highlight .nn {
28
+
color: #953800;
29
+
}
30
+
.highlight .sr {
31
+
color: #116329;
32
+
}
33
+
.highlight .na {
34
+
color: #116329;
35
+
}
36
+
.highlight .nt {
37
+
color: #116329;
38
+
}
39
+
.highlight .gi {
40
+
color: #116329;
41
+
background-color: #dafbe1;
42
+
}
43
+
.highlight .kc {
44
+
color: #0550ae;
45
+
}
46
+
.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
47
+
color: #0550ae;
48
+
}
49
+
.highlight .sb {
50
+
color: #0550ae;
51
+
}
52
+
.highlight .bp {
53
+
color: #0550ae;
54
+
}
55
+
.highlight .ne {
56
+
color: #0550ae;
57
+
}
58
+
.highlight .nl {
59
+
color: #0550ae;
60
+
}
61
+
.highlight .py {
62
+
color: #0550ae;
63
+
}
64
+
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
65
+
color: #0550ae;
66
+
}
67
+
.highlight .o, .highlight .ow {
68
+
color: #0550ae;
69
+
}
70
+
.highlight .gh {
71
+
color: #0550ae;
72
+
font-weight: bold;
73
+
}
74
+
.highlight .gu {
75
+
color: #0550ae;
76
+
font-weight: bold;
77
+
}
78
+
.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
79
+
color: #0a3069;
80
+
}
81
+
.highlight .nd {
82
+
color: #8250df;
83
+
}
84
+
.highlight .nf, .highlight .fm {
85
+
color: #8250df;
86
+
}
87
+
.highlight .err {
88
+
color: #f6f8fa;
89
+
background-color: #82071e;
90
+
}
91
+
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
92
+
color: #6e7781;
93
+
}
94
+
.highlight .gl {
95
+
color: #6e7781;
96
+
}
97
+
.highlight .gt {
98
+
color: #6e7781;
99
+
}
100
+
.highlight .ni {
101
+
color: #24292f;
102
+
}
103
+
.highlight .si {
104
+
color: #24292f;
105
+
}
106
+
.highlight .ge {
107
+
color: #24292f;
108
+
font-style: italic;
109
+
}
110
+
.highlight .gs {
111
+
color: #24292f;
112
+
font-weight: bold;
113
+
}
114
+
115
+
@media (prefers-color-scheme: dark) {
116
+
.highlight table td { padding: 5px; }
117
+
.highlight table pre { margin: 0; }
118
+
.highlight, .highlight .w {
119
+
color: #c9d1d9;
120
+
background-color: #161b22;
121
+
}
122
+
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
123
+
color: #ff7b72;
124
+
}
125
+
.highlight .gr {
126
+
color: #f0f6fc;
127
+
}
128
+
.highlight .gd {
129
+
color: #ffdcd7;
130
+
background-color: #67060c;
131
+
}
132
+
.highlight .nb {
133
+
color: #ffa657;
134
+
}
135
+
.highlight .nc {
136
+
color: #ffa657;
137
+
}
138
+
.highlight .no {
139
+
color: #ffa657;
140
+
}
141
+
.highlight .nn {
142
+
color: #ffa657;
143
+
}
144
+
.highlight .sr {
145
+
color: #7ee787;
146
+
}
147
+
.highlight .na {
148
+
color: #7ee787;
149
+
}
150
+
.highlight .nt {
151
+
color: #7ee787;
152
+
}
153
+
.highlight .gi {
154
+
color: #aff5b4;
155
+
background-color: #033a16;
156
+
}
157
+
.highlight .kc {
158
+
color: #79c0ff;
159
+
}
160
+
.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
161
+
color: #79c0ff;
162
+
}
163
+
.highlight .sb {
164
+
color: #79c0ff;
165
+
}
166
+
.highlight .bp {
167
+
color: #79c0ff;
168
+
}
169
+
.highlight .ne {
170
+
color: #79c0ff;
171
+
}
172
+
.highlight .nl {
173
+
color: #79c0ff;
174
+
}
175
+
.highlight .py {
176
+
color: #79c0ff;
177
+
}
178
+
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
179
+
color: #79c0ff;
180
+
}
181
+
.highlight .o, .highlight .ow {
182
+
color: #79c0ff;
183
+
}
184
+
.highlight .gh {
185
+
color: #1f6feb;
186
+
font-weight: bold;
187
+
}
188
+
.highlight .gu {
189
+
color: #1f6feb;
190
+
font-weight: bold;
191
+
}
192
+
.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
193
+
color: #a5d6ff;
194
+
}
195
+
.highlight .nd {
196
+
color: #d2a8ff;
197
+
}
198
+
.highlight .nf, .highlight .fm {
199
+
color: #d2a8ff;
200
+
}
201
+
.highlight .err {
202
+
color: #f0f6fc;
203
+
background-color: #8e1519;
204
+
}
205
+
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
206
+
color: #8b949e;
207
+
}
208
+
.highlight .gl {
209
+
color: #8b949e;
210
+
}
211
+
.highlight .gt {
212
+
color: #8b949e;
213
+
}
214
+
.highlight .ni {
215
+
color: #c9d1d9;
216
+
}
217
+
.highlight .si {
218
+
color: #c9d1d9;
219
+
}
220
+
.highlight .ge {
221
+
color: #c9d1d9;
222
+
font-style: italic;
223
+
}
224
+
.highlight .gs {
225
+
color: #c9d1d9;
226
+
font-weight: bold;
227
+
}
228
+
}