The code for my personal website, powered by Jekyll.
arthr.me
jekyll-site
personal-website
feat: add webmention styling
+313
-2
+1
-1
Gemfile
+1
-1
Gemfile
+2
_config.yml
+2
_config.yml
···
105
105
endpoint: https://brid.gy/publish/flickr
106
106
mastodon:
107
107
endpoint: https://brid.gy/publish/mastodon
108
+
templates:
109
+
webmentions: _includes/webmentions/webmentions.html
108
110
legacy_domains:
109
111
- https://arthrfrts.tumblr.com
110
112
- https://irrelefante.tumblr.com
+109
_includes/webmentions/webmentions.html
+109
_includes/webmentions/webmentions.html
···
1
+
{%- if html_proofer_ignore == "all" -%}
2
+
{%- assign html_proofer_attr = " data-proofer-ignore" -%}
3
+
{%- endif -%}
4
+
5
+
{%- assign reactions = webmentions | where_exp: "item", "item.type == 'like' or item.type == 'repost'" -%}
6
+
{%- assign replies = webmentions | where_exp: "item", "item.type == 'reply' or item.type == 'mention'" -%}
7
+
8
+
{% if webmentions.size > 0 %}
9
+
<section class="webmentions"{{ html_proofer_attr }}>
10
+
<h2 class="webmentions__title">Webmentions</h2>
11
+
12
+
{% if reactions.size > 0 %}
13
+
<div class="webmentions__reactions">
14
+
<p class="webmentions__reactions-label">
15
+
{{ reactions.size }}
16
+
{%- if reactions.size == 1 %} pessoa curtiu ou repostou{%- else %} pessoas curtiram ou repostaram{%- endif %}
17
+
</p>
18
+
<ul class="webmentions-facepile" aria-label="Reações">
19
+
{% for webmention in reactions %}
20
+
{% if webmention.author %}
21
+
<li class="webmentions-facepile__item">
22
+
{% if webmention.author.url %}
23
+
<a class="webmentions-facepile__link u-url" href="{{ webmention.author.url }}" rel="nofollow">
24
+
{% endif %}
25
+
{% if webmention.author.photo %}
26
+
<img
27
+
class="webmentions-facepile__avatar u-photo"
28
+
src="{{ webmention.author.photo }}"
29
+
alt="{{ webmention.author.name }}"
30
+
title="{{ webmention.author.name }}"
31
+
loading="lazy"
32
+
width="28"
33
+
height="28">
34
+
{% else %}
35
+
<span class="webmentions-facepile__avatar webmentions-facepile__avatar--placeholder" title="{{ webmention.author.name }}">
36
+
{{ webmention.author.name | slice: 0 }}
37
+
</span>
38
+
{% endif %}
39
+
{% if webmention.author.url %}
40
+
</a>
41
+
{% endif %}
42
+
</li>
43
+
{% endif %}
44
+
{% endfor %}
45
+
</ul>
46
+
</div>
47
+
{% endif %}
48
+
49
+
{% if replies.size > 0 %}
50
+
<ol class="webmentions__replies">
51
+
{% for webmention in replies %}
52
+
<li id="webmention-{{ webmention.id }}" class="webmention-thread h-cite webmention-thread--{{ webmention.type }}">
53
+
<div class="webmention-thread__avatar-col">
54
+
{% if webmention.author.photo %}
55
+
{% if webmention.author.url %}
56
+
<a class="u-url" href="{{ webmention.author.url }}" rel="nofollow" tabindex="-1" aria-hidden="true">
57
+
{% endif %}
58
+
<img
59
+
class="webmention-thread__avatar u-photo"
60
+
src="{{ webmention.author.photo }}"
61
+
alt=""
62
+
loading="lazy"
63
+
width="28"
64
+
height="28">
65
+
{% if webmention.author.url %}
66
+
</a>
67
+
{% endif %}
68
+
{% else %}
69
+
<span class="webmention-thread__avatar webmention-thread__avatar--placeholder" aria-hidden="true">
70
+
{{ webmention.author.name | slice: 0 }}
71
+
</span>
72
+
{% endif %}
73
+
</div>
74
+
75
+
<div class="webmention-thread__body p-author h-card">
76
+
<p class="webmention-thread__author">
77
+
{% if webmention.author.url %}
78
+
<a class="webmention-thread__author-link u-url" href="{{ webmention.author.url }}" rel="nofollow">
79
+
<span class="p-name">{{ webmention.author.name }}</span>
80
+
</a>
81
+
{% else %}
82
+
<span class="p-name">{{ webmention.author.name }}</span>
83
+
{% endif %}
84
+
</p>
85
+
86
+
{% if webmention.content or webmention.title %}
87
+
<div class="webmention-thread__content p-content">
88
+
{{ webmention.content | default: webmention.title }}
89
+
</div>
90
+
{% endif %}
91
+
92
+
<footer class="webmention-thread__meta">
93
+
{% if webmention.pubdate %}
94
+
<time class="dt-published" datetime="{{ webmention.pubdate | date: '%FT%T%:z' }}">
95
+
{{ webmention.pubdate | date: "%d/%m/%y" }}
96
+
</time>
97
+
{% endif %}
98
+
{% if webmention.uri %}
99
+
<a class="webmention-thread__permalink u-url" href="{{ webmention.uri }}" rel="nofollow">Permalink</a>
100
+
{% endif %}
101
+
</footer>
102
+
</div>
103
+
</li>
104
+
{% endfor %}
105
+
</ol>
106
+
{% endif %}
107
+
108
+
</section>
109
+
{% endif %}
+1
-1
_posts/2026-03-09-your-ai-slop-bores-me.md
+1
-1
_posts/2026-03-09-your-ai-slop-bores-me.md
···
13
13
- inteligência artificial
14
14
- web games
15
15
- jogos
16
-
title: ""
16
+
title: "Your AI Slop Bores Me"
17
17
---
18
18
19
19
Muito bonito esse jogo em que as vezes você é um humano, fazendo pedidos, as vezes você é a IA respondendo a esses pedidos de outros humanos. Promove aquele tipo de interação efêmera mas marcante que jogos como _Journey_ e _Sky_ também proporcionam.
+200
assets/css/theme.css
+200
assets/css/theme.css
···
1
+
/*
2
+
Custom styles for arthr.me
3
+
Overrides the linus theme defaults.
4
+
*/
5
+
6
+
:root {
7
+
--font-body: "Atkinson Hyperlegible Next", sans-serif;
8
+
--font-code: "Atkinson Hyperlegible Mono", monospace;
9
+
}
10
+
11
+
12
+
/* ===========================================
13
+
Webmentions
14
+
=========================================== */
15
+
16
+
.webmentions {
17
+
max-width: var(--content-width);
18
+
margin-left: auto;
19
+
margin-top: calc(var(--spacing) * 2);
20
+
display: flex;
21
+
flex-flow: column nowrap;
22
+
gap: calc(var(--spacing) * 1.5);
23
+
24
+
&::before {
25
+
content: " ";
26
+
display: block;
27
+
height: 1px;
28
+
width: 3lh;
29
+
background-color: var(--color-border);
30
+
}
31
+
}
32
+
33
+
.webmentions__title {
34
+
font-family: var(--font-headings);
35
+
font-size: var(--text-size);
36
+
font-weight: normal;
37
+
font-style: italic;
38
+
color: color-mix(in srgb, var(--color-text), transparent 40%);
39
+
}
40
+
41
+
42
+
/* -------------------------------------------
43
+
Facepile (likes + reposts)
44
+
------------------------------------------- */
45
+
46
+
.webmentions__reactions {
47
+
display: flex;
48
+
flex-flow: column nowrap;
49
+
gap: calc(var(--spacing) / 2);
50
+
}
51
+
52
+
.webmentions__reactions-label {
53
+
font-size: 1.2rem;
54
+
color: color-mix(in srgb, var(--color-text), transparent 40%);
55
+
margin-bottom: 0;
56
+
}
57
+
58
+
.webmentions-facepile {
59
+
display: flex;
60
+
flex-flow: row wrap;
61
+
align-items: center;
62
+
padding-inline-start: 8px; /* offset for the first item's negative margin */
63
+
list-style: none;
64
+
margin: 0;
65
+
}
66
+
67
+
.webmentions-facepile__item {
68
+
margin-block: 0;
69
+
margin-inline-start: -8px;
70
+
transition: transform var(--transition-duration) ease, z-index 0s;
71
+
z-index: 0;
72
+
73
+
&:hover,
74
+
&:focus-within {
75
+
transform: translateY(-3px);
76
+
z-index: 1;
77
+
}
78
+
}
79
+
80
+
.webmentions-facepile__link {
81
+
display: block;
82
+
border-radius: 100%;
83
+
}
84
+
85
+
.webmentions-facepile__avatar {
86
+
display: block;
87
+
width: 28px;
88
+
height: 28px;
89
+
border-radius: 100%;
90
+
/* The background-color border "punches out" the gap between overlapping avatars */
91
+
outline: 2px solid var(--color-background);
92
+
box-shadow: none;
93
+
object-fit: cover;
94
+
}
95
+
96
+
.webmentions-facepile__avatar--placeholder {
97
+
width: 28px;
98
+
height: 28px;
99
+
display: flex;
100
+
align-items: center;
101
+
justify-content: center;
102
+
background-color: var(--color-shadows);
103
+
color: var(--color-text);
104
+
font-size: 1.2rem;
105
+
font-weight: bold;
106
+
text-transform: uppercase;
107
+
user-select: none;
108
+
}
109
+
110
+
111
+
/* -------------------------------------------
112
+
Reply thread
113
+
------------------------------------------- */
114
+
115
+
.webmentions__replies {
116
+
display: flex;
117
+
flex-flow: column nowrap;
118
+
gap: calc(var(--spacing) * 1.25);
119
+
list-style: none;
120
+
padding-inline-start: 0;
121
+
margin: 0;
122
+
}
123
+
124
+
.webmentions__replies > li {
125
+
margin-block: 0;
126
+
}
127
+
128
+
.webmention-thread {
129
+
display: grid;
130
+
grid-template-columns: 28px 1fr;
131
+
gap: 0 .8ch;
132
+
align-items: start;
133
+
}
134
+
135
+
.webmention-thread__avatar-col {
136
+
padding-top: .2em; /* nudge avatar to align with the author name baseline */
137
+
}
138
+
139
+
.webmention-thread__avatar {
140
+
display: block;
141
+
width: 28px;
142
+
height: 28px;
143
+
border-radius: 100%;
144
+
box-shadow: none;
145
+
object-fit: cover;
146
+
}
147
+
148
+
.webmention-thread__avatar--placeholder {
149
+
width: 28px;
150
+
height: 28px;
151
+
border-radius: 100%;
152
+
display: flex;
153
+
align-items: center;
154
+
justify-content: center;
155
+
background-color: var(--color-shadows);
156
+
font-size: 1.2rem;
157
+
font-weight: bold;
158
+
text-transform: uppercase;
159
+
user-select: none;
160
+
}
161
+
162
+
.webmention-thread__body {
163
+
display: flex;
164
+
flex-flow: column nowrap;
165
+
gap: .3em;
166
+
}
167
+
168
+
.webmention-thread__author {
169
+
font-size: 1.2rem;
170
+
font-weight: bold;
171
+
margin-bottom: 0;
172
+
}
173
+
174
+
.webmention-thread__author-link {
175
+
color: var(--color-text);
176
+
text-decoration: none;
177
+
178
+
&:hover,
179
+
&:focus {
180
+
text-decoration: underline;
181
+
text-decoration-color: var(--color-border);
182
+
}
183
+
}
184
+
185
+
.webmention-thread__content {
186
+
font-size: var(--text-size);
187
+
line-height: var(--text-line-height);
188
+
}
189
+
190
+
.webmention-thread__meta {
191
+
display: flex;
192
+
flex-flow: row wrap;
193
+
gap: 1ch;
194
+
font-size: 1.2rem;
195
+
color: color-mix(in srgb, var(--color-text), transparent 40%);
196
+
}
197
+
198
+
.webmention-thread__permalink {
199
+
color: inherit;
200
+
}