diff --git a/site/_includes/css/site.css b/site/_includes/css/site.css index bd24854..e1efb39 100644 --- a/site/_includes/css/site.css +++ b/site/_includes/css/site.css @@ -251,6 +251,21 @@ ul.collection { padding-left: 0; > li { list-style-type: none; + @media screen { + position: relative; + background-color: oklch(from var(--c-accent) calc(l * 0.4) calc(c * 0.33) h / 0.67); + box-shadow: inset 0 0 2rem -1rem var(--c-accent); + padding: 0.5rem; + border-radius: 0.25rem; + > a:first-of-type { + position: static; + &::before { + content: ""; + position: absolute; + inset: 0; + } + } + } > aside { display: inline; } @@ -258,7 +273,9 @@ ul.collection { &::before { content: none; } - color: var(--c-text-dim); + @media screen { + color: var(--c-text-dim); + } width: 100%; } + li { @@ -266,6 +283,7 @@ ul.collection { } } } + p { margin: 0; } @@ -349,56 +367,6 @@ body > header > nav { flex-direction: row; font-size: var(--s-1); } -@media print { - :root { - font-size: 10pt; - } - * { - text-shadow: none !important; - } - body { - --c-highlight: white --c-dark: white; - --c-accent: black; - --c-body-background: white; - - --c-text: black; - - --content-width: 100vw; - } - body { - background: none; - } - h1, - h2, - h3, - h4 { - opacity: 0.8; - } - :is(h1, h2, h3, h4, blockquote, .aside)::after { - content: none !important; - } - body > header > nav { - display: none; - } - body > footer { - display: none; - } - a[href^="http"]::after { - content: " (" attr(href) ")"; - font-size: 0.75em; - word-break: break-all; - font-family: "Commit Mono", monospace; - .footnotes & { - display: block; - } - } - .isso-postbox { - display: none; - } - .tag { - color: inherit; - } -} body > footer { position: relative; @@ -682,7 +650,8 @@ button, a.button { margin: 0 0.2em 0.2em 0; } .tag { - display: inline-flex; + display: inline-block; + position: relative; &::before { content: "#"; } @@ -694,13 +663,22 @@ button, a.button { &:hover { color: var(--c-text); } + &.button:has(.tagCount) { + padding-right: 2em; + } .tagCount { - display: inline-flex; - justify-content: center; + display: flex; align-items: center; - font-size: calc(1em / var(--ratio)); - color: var(--c-text); - width: 2em; + position: absolute; + overflow: hidden; + top: 0; + right: 0; + bottom: 0; + line-height: 0; + font-size: calc(3.3em); + font-weight: bold; + padding-right: 0.1em; + opacity: 0.175; } } @@ -778,3 +756,64 @@ body .isso-post-action { font-weight: 200; } } + +@media print { + :root { + font-size: 10pt; + } + * { + text-shadow: none !important; + } + body { + --c-highlight: white; + --c-dark: white; + --c-accent: black; + --c-body-background: white; + --c-text: black; + --content-width: 100vw; + --ratio: 1.2; + background: none; + } + h1, + h2, + h3, + h4 { + opacity: 0.8; + margin-top: 1rem; + } + main { + margin-top: 0; + } + :is(h1, h2, h3, h4, blockquote, .aside)::after { + content: none !important; + } + body > header > nav { + display: none; + } + body > footer { + display: none; + } + a[href^="http"]::after { + content: " (" attr(href) ")"; + font-size: 0.75em; + word-break: break-all; + font-family: "Commit Mono", monospace; + .footnotes & { + display: block; + } + } + .isso-postbox { + display: none; + } + .tag { + background: none !important; + color: inherit !important; + .tagCount { + color: inherit; + opacity: 0.25; + } + } + .button { + border: 1px solid #aaa !important; + } +}