Format links page

Group links by date and style them like cards.
This commit is contained in:
Hornwitser 2025-02-16 23:54:10 +01:00
parent 8a1313eb6e
commit 9f15da0835
2 changed files with 127 additions and 14 deletions

View file

@ -14,6 +14,10 @@ html {
text-size-adjust: none;
}
:is(ul, ol)[role="list"] {
list-style: none;
}
h1, h2, h3, h4, button, input, label {
line-height: 1.1;
}
@ -44,12 +48,12 @@ html {
scrollbar-gutter: stable;
}
hgroup h1 {
margin-bottom: 0.1em;
hgroup :is(h1, h2, h3, h4) {
margin-block-start: 0;
margin-block-end: 0.1em;
}
hgroup p {
font-style: italic;
margin-bottom: 1em;
}
h1, h2, h3, h4 {
@ -57,11 +61,21 @@ h1, h2, h3, h4 {
margin-block-end: 0.5em;
}
:is(p, ol, ul) + :is(p, ol, ul) {
padding-block-start: 1em;
:is(hgroup, p, blockquote, ol, ul, li) + :is(hgroup, blockquote, p, ol, ul, li) {
margin-block-start: var(--block-space, 1em);
}
ol, ul {
blockquote {
padding-inline: 1.25em;
}
blockquote::before {
content: "“";
}
blockquote::after {
content: "”";
}
:is(ol, ul):not([role]) {
padding-inline-start: 1.25em;
}
@ -102,13 +116,24 @@ body {
gap: 1em;
margin-block: 1em;
}
.author h1 {
margin-block-start: 0;
}
.author p {
margin-block-end: 0;
}
/* links */
.no-break {
display: inline-block;
max-width: 100%;
}
.link {
background-color: color-mix(in oklab, Canvas 90%, white);
padding: 0.5em;
border-radius: 0.5em;
}
.link>* {
--block-space: 0.5em;
}
/* sandbox */
.sandbox-inset-3d {
contain: paint;