The code for my personal website, powered by Jekyll.
arthr.me
jekyll-site
personal-website
adds styles to webring
+37
+37
assets/css/theme.css
+37
assets/css/theme.css
···
237
237
238
238
a:hover { color: var(--color-link-hover); }
239
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
+
}