Update styling to use nested CSS

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);
+	}
 }