summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorThomas Voss <mail@thomasvoss.com> 2024-09-23 04:56:35 +0200
committerThomas Voss <mail@thomasvoss.com> 2024-09-23 04:56:35 +0200
commit81aa6452390b2511a33ba237da50f40f0c8790f5 (patch)
tree48177a371b3cdc367292dd40354696752d9dc045
parent86e91d1313a5fae771399ece56cd959e4ac04199 (diff)
Update styling to use nested CSS
-rw-r--r--src/style.css114
1 files changed, 66 insertions, 48 deletions
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);
+ }
}