The code for my personal website, powered by Jekyll.
arthr.me
jekyll-site
personal-website
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 --color-background: #F6F3EE;
11 --color-text: #1E1510;
12 --color-link: #4D6845;
13 --color-link-hover: #324530;
14 --color-support: #A06840;
15}
16
17@media (prefers-color-scheme: dark) {
18 :root {
19 --color-background: #1A1210;
20 --color-text: #EEE9E0;
21 --color-link: #7FAF72;
22 --color-link-hover: #A0CF92;
23 --color-support: #C48855;
24 }
25}
26
27
28/* ===========================================
29 Webmentions
30 =========================================== */
31
32.webmentions {
33 max-width: var(--content-width);
34 margin-left: auto;
35 margin-top: calc(var(--spacing) * 2);
36 display: flex;
37 flex-flow: column nowrap;
38 gap: calc(var(--spacing) * 1.5);
39
40 &::before {
41 content: " ";
42 display: block;
43 height: 1px;
44 width: 3lh;
45 background-color: var(--color-border);
46 }
47}
48
49.webmentions__title {
50 font-family: var(--font-headings);
51 font-size: var(--text-size);
52 font-weight: normal;
53 font-style: italic;
54 color: color-mix(in srgb, var(--color-text), transparent 40%);
55}
56
57
58/* -------------------------------------------
59 Facepile (likes + reposts)
60 ------------------------------------------- */
61
62.webmentions__reactions {
63 display: flex;
64 flex-flow: column nowrap;
65 gap: calc(var(--spacing) / 2);
66}
67
68.webmentions__reactions-label {
69 font-size: 1.2rem;
70 color: color-mix(in srgb, var(--color-text), transparent 40%);
71 margin-bottom: 0;
72}
73
74.webmentions-facepile {
75 display: flex;
76 flex-flow: row wrap;
77 align-items: center;
78 padding-inline-start: 8px; /* offset for the first item's negative margin */
79 list-style: none;
80 margin: 0;
81}
82
83.webmentions-facepile__item {
84 margin-block: 0;
85 margin-inline-start: -8px;
86 transition: transform var(--transition-duration) ease, z-index 0s;
87 z-index: 0;
88
89 &:hover,
90 &:focus-within {
91 transform: translateY(-3px);
92 z-index: 1;
93 }
94}
95
96.webmentions-facepile__link {
97 display: block;
98 border-radius: 100%;
99}
100
101.webmentions-facepile__avatar {
102 display: block;
103 width: 28px;
104 height: 28px;
105 border-radius: 100%;
106 /* The background-color border "punches out" the gap between overlapping avatars */
107 outline: 2px solid var(--color-background);
108 box-shadow: none;
109 object-fit: cover;
110}
111
112.webmentions-facepile__avatar--placeholder {
113 width: 28px;
114 height: 28px;
115 display: flex;
116 align-items: center;
117 justify-content: center;
118 background-color: var(--color-shadows);
119 color: var(--color-text);
120 font-size: 1.2rem;
121 font-weight: bold;
122 text-transform: uppercase;
123 user-select: none;
124}
125
126
127/* -------------------------------------------
128 Reply thread
129 ------------------------------------------- */
130
131.webmentions__replies {
132 display: flex;
133 flex-flow: column nowrap;
134 gap: calc(var(--spacing) * 1.25);
135 list-style: none;
136 padding-inline-start: 0;
137 margin: 0;
138}
139
140.webmentions__replies > li {
141 margin-block: 0;
142}
143
144.webmention-thread {
145 display: grid;
146 grid-template-columns: 28px 1fr;
147 gap: 0 .8ch;
148 align-items: start;
149}
150
151.webmention-thread__avatar-col {
152 padding-top: .2em; /* nudge avatar to align with the author name baseline */
153}
154
155.webmention-thread__avatar {
156 display: block;
157 width: 28px;
158 height: 28px;
159 border-radius: 100%;
160 box-shadow: none;
161 object-fit: cover;
162}
163
164.webmention-thread__avatar--placeholder {
165 width: 28px;
166 height: 28px;
167 border-radius: 100%;
168 display: flex;
169 align-items: center;
170 justify-content: center;
171 background-color: var(--color-shadows);
172 font-size: 1.2rem;
173 font-weight: bold;
174 text-transform: uppercase;
175 user-select: none;
176}
177
178.webmention-thread__body {
179 display: flex;
180 flex-flow: column nowrap;
181 gap: .3em;
182}
183
184.webmention-thread__author {
185 font-size: 1.2rem;
186 font-weight: bold;
187 margin-bottom: 0;
188}
189
190.webmention-thread__author-link {
191 color: var(--color-text);
192 text-decoration: none;
193
194 &:hover,
195 &:focus {
196 text-decoration: underline;
197 text-decoration-color: var(--color-border);
198 }
199}
200
201.webmention-thread__content {
202 font-size: var(--text-size);
203 line-height: var(--text-line-height);
204}
205
206.webmention-thread__meta {
207 display: flex;
208 flex-flow: row wrap;
209 gap: 1ch;
210 font-size: 1.2rem;
211 color: color-mix(in srgb, var(--color-text), transparent 40%);
212}
213
214.webmention-thread__permalink {
215 color: inherit;
216}
217
218
219/* ===========================================
220 Syndication Callout
221 =========================================== */
222
223.syndication-callout {
224 max-width: var(--content-width);
225 margin-left: auto;
226 margin-top: calc(var(--spacing) * 2);
227 font-size: 1.2rem;
228 color: color-mix(in srgb, var(--color-text), transparent 40%);
229
230 p { margin: 0; line-height: 1.5; }
231
232 a {
233 color: var(--color-link);
234 text-decoration-color: var(--color-border);
235 text-underline-offset: 2px;
236 }
237
238 a:hover { color: var(--color-link-hover); }
239}
240
241
242/* ===========================================
243 Webring
244 =========================================== */
245
246.webring {
247 max-width: var(--content-width);
248 margin-inline: auto;
249 margin-top: calc(var(--spacing) * 2);
250 padding-block: calc(var(--spacing) * 1.5);
251 border-top: 1px solid var(--color-border);
252 display: flex;
253 flex-flow: row wrap;
254 gap: .5ch 2ch;
255 font-size: 1.2rem;
256 justify-content: center;
257
258 &::before {
259 content: attr(aria-label);
260 width: 100%;
261 text-align: center;
262 color: color-mix(in srgb, var(--color-text), transparent 60%);
263 font-style: italic;
264 }
265
266 a {
267 color: color-mix(in srgb, var(--color-text), transparent 40%);
268 text-decoration: none;
269 transition: color var(--transition-duration) ease;
270
271 &:hover,
272 &:focus {
273 color: var(--color-link-hover);
274 }
275 }
276}