From 81aa6452390b2511a33ba237da50f40f0c8790f5 Mon Sep 17 00:00:00 2001 From: Thomas Voss Date: Mon, 23 Sep 2024 04:56:35 +0200 Subject: Update styling to use nested CSS --- src/style.css | 114 +++++++++++++++++++++++++++++++++------------------------- 1 file changed, 66 insertions(+), 48 deletions(-) (limited to 'src') diff --git a/src/style.css b/src/style.css index 0202e5c..15cfb5a 100644 --- a/src/style.css +++ b/src/style.css @@ -10,6 +10,7 @@ :root { --fg: black; --bg: white; + --faint: rgba(0, 0, 0, 0.75); } } @@ -17,6 +18,7 @@ :root { --fg: white; --bg: black; + --faint: rgba(255, 255, 255, 0.75); } a { @@ -32,11 +34,17 @@ body { font-family: serif; } -blockquote > p:first-child::before { content: '‘'; } -blockquote > p:last-child::after { content: '’'; } -blockquote.de > p:first-child::before { content: '„'; } -blockquote.de > p:last-child::after { content: '“'; } -blockquote + figcaption::before { content: '— '; } +blockquote { + p:first-child::before { content: '‘'; } + p:last-child::after { content: '’'; } + + &.de { + p:first-child::before { content: '„'; } + p:last-child::after { content: '“'; } + } + + & + figcaption::before { content: '— '; } +} blockquote, blockquote + figcaption { @@ -48,43 +56,46 @@ blockquote + figcaption { padding: .4rem .8rem; margin-inline: 1rem 0; margin-block: 2rem; -} -.quote blockquote { - margin-inline-start: 1rem; -} -.quote blockquote, -.quote blockquote p { - margin-block: .5rem; -} + blockquote { + margin-inline-start: 1rem; + &, p { + margin-block: .5rem; + } + } -.quote figcaption { - margin-inline-start: 2rem; - margin-block: .5rem; + figcaption { + margin-inline-start: 2rem; + margin-block: .5rem; + } } -header > div menu { - display: flex; - gap: 2ch; -} +header { + > div { + menu { + display: flex; + gap: 2ch; + } -header > div li { - list-style: none; -} + li { + list-style: none; + } + } -header div.head { - display: flex; - justify-content: space-between; - align-items: center; -} + div.head { + display: flex; + justify-content: space-between; + align-items: center; -header div.head menu { - display: flex; - gap: 2ch; -} + menu { + display: flex; + gap: 2ch; + } -header div.head li { - list-style: none; + li { + list-style: none; + } + } } .article { @@ -95,23 +106,22 @@ header div.head li { figure pre.code-sample { overflow-x: scroll; tab-size: 4; -} - -figure pre.code-sample > code { - counter-increment: line; -} -figure pre.code-sample > code::before { - position: absolute; + > code { + counter-increment: line; + &::before { + position: absolute; - margin-left: -4ch; - padding-right: .5ch; - width: 3ch; + margin-left: -4ch; + padding-right: .5ch; + width: 3ch; - text-align: right; - content: counter(line); - color: var(--fg); - border-right: 1px solid var(--fg); + text-align: right; + content: counter(line); + color: var(--fg); + border-right: 1px solid var(--fg); + } + } } footer { @@ -128,4 +138,12 @@ del { color: red; } aside { font-style: italic; + color: var(--faint); + + &[data-ref]::before { + font-style: normal; + position: absolute; + margin-inline-start: -2ch; + content: attr(data-ref); + } } -- cgit v1.2.3