Format links page
Group links by date and style them like cards.
This commit is contained in:
parent
8a1313eb6e
commit
9f15da0835
2 changed files with 127 additions and 14 deletions
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue