A charming Jekyll theme.
linus.arthr.dev/
jekyll-theme
feat: add link previews
+129
-26
+4
_includes/blog/post.html
+4
_includes/blog/post.html
+30
_includes/link-preview.html
+30
_includes/link-preview.html
···
1
+
{%- if include.url -%}
2
+
3
+
{%- assign preview = include.url | metadata -%}
4
+
<blockquote class="link-preview h-cite u-in-reply-to">
5
+
<cite class="preview-title p-name">
6
+
<a class="preview-link u-url" href="{{ include.url }}" rel="nofollow">
7
+
{{- preview['og:title'] | default: preview.title | default: include.url }} ↦
8
+
</a>
9
+
</cite>
10
+
<div class="preview-details">
11
+
{%- if preview['article:author'] -%}
12
+
<span class="preview-author p-author h-card">
13
+
{{ preview['article:author'] }}
14
+
</span>
15
+
{%- endif -%}
16
+
17
+
{%- if preview['article:published_time'] -%}
18
+
<time class="preview-date dt-published" datetime="{{ preview['og:publication_date'] | date_to_xmlschema }}">
19
+
{{ preview['article:published_time'] | date: site.date_formats.day }}
20
+
</time>
21
+
{%- endif -%}
22
+
23
+
{% assign preview_domain = include.url | remove: "http://" | remove: "https://" | split: "/" | first | remove: "/" %}
24
+
25
+
<a class="preview-website u-url" href="{{- preview_domain -}}" rel="nofollow">
26
+
{{ preview["og:site_name"] | default: preview_domain }}
27
+
</a>
28
+
</div>
29
+
</blockquote>
30
+
{%- endif -%}
+5
_layouts/post.html
+5
_layouts/post.html
+1
-1
_posts/2026-01-18-wikipedia.md
+1
-1
_posts/2026-01-18-wikipedia.md
+2
_posts/2026-02-20-text-formatting.md
+2
_posts/2026-02-20-text-formatting.md
···
8
8
- markup
9
9
---
10
10
11
+
{%- include link-preview.html url="https://paomortadela.com.br/2024/11/e-impossivel-descrever-o-clube-da-esquina/" -%}
12
+
11
13
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").
12
14
13
15
Texto com quebra de linha
+40
-13
assets/css/base.css
+40
-13
assets/css/base.css
···
6
6
blockquote {
7
7
padding-inline-start: 1lh;
8
8
border-left: 1px solid var(--color-border);
9
+
margin-right: 0;
10
+
11
+
blockquote {
12
+
margin-left: 1lh;
13
+
}
9
14
}
10
15
11
16
blockquote > *:not(:last-child) {
···
119
124
padding: calc(var(--spacing) / 4) calc(var(--spacing) / 2);
120
125
background-color: var(--color-support);
121
126
border: 2px solid var(--color-border);
122
-
box-shadow: 5px 2px 0 var(--color-shadows);
127
+
box-shadow: var(--shadow);
123
128
color: var(--color-background) !important;
124
129
font-weight: 700;
125
130
text-decoration: none !important;
···
128
133
transition-timing-function: ease;
129
134
130
135
&:hover {
131
-
box-shadow: 4px 2px 0 var(--color-shadows-hover);
136
+
box-shadow: var(--shadow-hover);
132
137
}
133
138
134
139
&:active {
135
-
box-shadow: 2px 2px 0 var(--color-shadows-hover);
140
+
box-shadow: var(--shadow-active);
136
141
}
137
142
138
143
~ & {
···
173
178
/* Details */
174
179
175
180
details {
176
-
border: 1px solid var(--color-border);
181
+
outline: 1px solid var(--color-border);
182
+
outline-offset: -1px;
177
183
border-radius: .3rem;
178
184
padding: calc(var(--spacing) / 2);
179
-
box-shadow: 1rem .5rem 0 var(--color-shadows);
185
+
box-shadow: var(--shadow);
186
+
transform: scale(1);
187
+
transform-origin: center center;
188
+
transition: transform var(--transition-duration) ease;
189
+
190
+
&:hover,
191
+
&:focus {
192
+
transform: scale(1.025)
193
+
}
194
+
195
+
&:active {
196
+
transform: scale(0.98);
197
+
}
180
198
181
199
summary + * {
182
200
border-top: 1px solid var(--color-border);
···
194
212
195
213
img, video, audio, iframe {
196
214
border-radius: .3rem;
197
-
box-shadow: 1rem .5rem 0 var(--color-shadows);
215
+
box-shadow: var(--shadow);
216
+
outline: 1px solid var(--color-border);
217
+
outline-offset: -1px;
198
218
}
199
219
200
220
video, audio, iframe {
···
219
239
/* Tables */
220
240
221
241
table {
222
-
border: 1px solid var(--color-shadows);
242
+
outline: 1px solid var(--color-border);
243
+
outline-offset: -1px;
223
244
border-radius: .3rem;
224
245
border-collapse: collapse;
225
246
border-spacing: 0;
226
-
box-shadow: 1rem .5rem 0 var(--color-shadows);
247
+
box-shadow: var(--shadow);
227
248
228
249
td, th {
229
250
padding-block: calc(var(--spacing) / 2);
230
251
padding-inline: calc(var(--spacing) / 2);
252
+
border-bottom: 1px solid var(--color-border);
253
+
}
254
+
255
+
th {
256
+
background-color: var(--color-border);
231
257
}
232
258
}
233
259
234
260
/* Horizontal rule */
235
261
hr {
236
-
margin-block: calc(var(--spacing) * 2);
237
-
background: var(--color-border);
238
262
border: none;
239
-
height: 1px;
263
+
height: var(--spacing);
264
+
width: 100%;
240
265
}
241
266
242
267
/* Footnotes */
···
244
269
.footnotes {
245
270
padding-top: var(--spacing);
246
271
margin-top: calc(var(--spacing) * 2);
247
-
border-top: 1px solid var(--color-shadows);
272
+
border-top: 1px solid var(--color-border);
248
273
font-size: 1.2rem;
249
274
}
250
275
···
254
279
background-color: var(--color-shadows);
255
280
padding: .3rem;
256
281
border-radius: .3rem;
282
+
outline: 1px solid var(--color-border);
283
+
outline-offset: -1px;
257
284
font-size: 1.2rem;
258
285
}
259
286
···
261
288
font-size: 1.2rem;
262
289
padding: calc(var(--spacing) / 2);
263
290
border-radius: .3rem;
264
-
box-shadow: 1rem .5rem 0 var(--color-shadows);
291
+
box-shadow: var(--shadow);
265
292
}
+47
-12
assets/css/layout.css
+47
-12
assets/css/layout.css
···
26
26
--color-support: #D9634E;
27
27
--color-shadows: color-mix(in srgb, var(--color-text), transparent 85%);
28
28
--color-shadows-hover: color-mix(in srgb, var(--color-text), transparent 75%);
29
-
--color-border: color-mix(in srgb, currentcolor, transparent 50%);
29
+
--color-border: color-mix(in srgb, currentcolor, transparent 90%);
30
+
31
+
--shadow:
32
+
0px 0px 0px 1px var(--color-shadows),
33
+
0px 1px 2px -1px var(--color-shadows),
34
+
0px 2px 4px 0px var(--color-shadows);
30
35
}
31
36
32
37
@media (prefers-color-scheme: dark) {
···
63
68
dl, dd, ol, ul,
64
69
figure, picture, audio, video,
65
70
table, iframe {
71
+
-webkit-font-smoothing: antialiased
72
+
font-variant-numeric: tabular-nums
66
73
margin: 0;
67
74
padding: 0;
68
75
}
···
70
77
img, video, audio, figure, picture,
71
78
table {
72
79
max-width: 100%;
80
+
margin-right: 0;
73
81
}
74
82
75
83
iframe {
···
200
208
display: inline-flex;
201
209
padding-inline: 8px;
202
210
border-radius: 3px;
203
-
box-shadow: 0.5rem 0.2rem 0 var(--color-shadows);
211
+
box-shadow: var(--shadow);
212
+
outline: 1px solid var(--color-border);
213
+
outline-offset: -1px;
204
214
color: var(--color-text) !important;
205
215
font-size: var(--text-size);
206
216
line-height: 1.85;
207
217
text-decoration: none !important;
208
-
transition: box-shadow var(--transition-duration) ease;
218
+
transform: scale(1);
219
+
transform-origin: center center;
220
+
transition: transform var(--transition-duration) ease;
221
+
222
+
&:hover,
223
+
&:focus {
224
+
transform: scale(1.025)
225
+
}
226
+
227
+
&:active {
228
+
transform: scale(0.98);
229
+
}
209
230
}
210
231
211
232
@media (prefers-color-scheme: dark) {
···
214
235
}
215
236
}
216
237
217
-
.category:hover,
218
-
.category:focus {
219
-
box-shadow: 0.4rem 0.2rem 0 var(--color-shadows-hover);
220
-
}
221
-
222
-
.category:active {
223
-
box-shadow: 0.1rem 0.1rem 0 var(--color-shadows-hover);
224
-
}
225
-
226
238
.blog-categories {
227
239
margin-bottom: calc(var(--spacing) * 2);
228
240
}
···
337
349
338
350
a {
339
351
color: var(--color-text);
352
+
}
353
+
}
354
+
355
+
.link-preview {
356
+
border: none;
357
+
border-radius: .3rem;
358
+
outline: 1px solid var(--color-border);
359
+
outline-offset: -1px;
360
+
box-shadow: var(--shadow);
361
+
padding: 1lh;
362
+
363
+
.preview-title {
364
+
display: block;
365
+
font-size: 1.6rem;
366
+
font-weight: bold;
367
+
font-style: normal;
368
+
margin-bottom: 0;
369
+
}
370
+
371
+
.preview-details {
372
+
display: inline-flex;
373
+
flex-flow: row wrap;
374
+
gap: 1ch;
340
375
}
341
376
}
342
377