updated article styling

local/theme.scm

@@ -21,13 +21,18 @@
 	  (nav (span "Beigetragen am "
 				 (time (@ (datetime ,(date->string (post-date post) "~4")))
 					   ,(date->string (post-date post)
-									  "~d ~h. ~Y")))
-		   (span "Tags: "
+									  "~Y-~m-~d")))
+		   ,@(if (post-ref post 'author)
+				 `((span "Verfasst von " (em ,(post-ref post 'author))))
+				 '())
+		   ,@(if (post-ref post 'tags)
+				 `((span "Tags: "
 						 ,(intersperse
 						   (map (lambda (tag)
 								  (link tag (format #f "/tags/~a.xml" tag)))
-						(or (post-ref post 'tags) '()))
-				   ", "))
+								(post-ref post 'tags))
+						   ", ")))
+				 '())
 		   (span ,@(if (and site prefix)
 					   `(" "
 						 ,(link "Permalink"

static/style.css

+:root {
+	--fg-color: black;
+	--bg-color: whitesmoke;
+	--accent-color: dodgerblue;
+	--highlight-color: slateblue;
+	--header-fg-color: white;
+	--header-bg-color: darkslateblue;
+	--header-hover-color: rgba(0, 0, 0, 0.25);
+	--article-fg-color: black;
+	--article-bg-color: white;
+	--article-border-color: silver;
+	--secondary-fg-color: dimgray;
+	--secondary-bg-color: whitesmoke;
+}
+
+@media (prefers-color-scheme: dark) {
+	/* something */
+}
+
 html {
-	font-family: "Open Sans", "Noto Sans", Arial, sans-serif;
-	color: black;
-	background: whitesmoke;
+	font-family: "Open Sans", "Noto Sans", "Lato", Arial, sans-serif;
+	color: var(--fg-color);
+	background: var(--bg-color);
 	font-size: 120%;
 	line-height: 1.4em;
 }
@@ -13,19 +32,20 @@ body {
 	min-height: calc(100vh - 1.5em)
 }
 
-a { text-decoration: none; color: #3f9af4; }
+a { text-decoration: none; color: var(--accent-color); }
 a:hover { text-decoration: underline; }
 code, code { font-family: "Noto Sans Mono", Consolas, Monaco, monospace, monospace; }
 
 body > header {
-	color: white;
-	background: darkslateblue;
+	color: var(--header-fg-color);
+	background: var(--header-bg-color);
 	border-radius: 8px;
 }
 
 body > header > nav {
 	margin: 16px 0;
 	padding: 8px 0;
+	overflow-x: auto;
 }
 
 body > header > nav > a {
@@ -41,12 +61,13 @@ body > header > nav > a:first-of-type {
 }
 
 body > header > nav > a:hover {
-	background: rgba(0, 0, 0, 0.25);
+	background: var(--header-hover-color);
 	text-decoration: none;
 }
 
 article {
-	background: white;
+	color: var(--article-fg-color);
+	background: var(--article-bg-color);
 	margin: 16px 0;
 	padding: 16px 32px;
 	border-radius: 8px;
@@ -61,26 +82,33 @@ article > p:last-of-type {
 
 article > nav {
 	font-size: small;
-	color: dimgray;
+	color: var(--secondary-fg-color);
 	display: table;
-	line-height: 1.3;
-	padding: 8px 0;
-	border-top: 1px solid slateblue;
+	border: 0 solid var(--highlight-color);
+	border-top-width: 1px;
 	margin: 8px 0 0 auto;
+	padding: 8px;
+	line-height: 1.25;
 }
 
 article > nav > * {
 	display: block;
 }
 
+p {
+	overflow-wrap: break-word;
+	hyphens: auto;
+}
+
 hr {
-	border: 0px solid darkslateblue;
+	border: 0px solid var(--highlight-color);
 	border-bottom-width: 1px;
 }
 
 footer {
 	font-size: small;
-	color: dimgray;
+	color: var(--secondary-fg-color);
+	background: var(--secondary-bg-color);
 	text-align: center;
 }
 
@@ -92,6 +120,7 @@ footer {
 	
 	body > article {
 		margin: 16px;
+		/* border: 1px solid var(--article-border-color); */
 	}
 
 	body > header {
@@ -101,9 +130,21 @@ footer {
 	body > header > nav {
 		margin: 0;
 		display: flex;
-		overflow: auto;
 	}
 
+	/* body > article > nav { */
+	/* 	margin: 16px -32px -16px -32px; */
+	/* 	padding: 8px 32px; */
+	/* 	line-height: 1.25; */
+	/* 	float: none; */
+	/* 	display: block; */
+	/* 	background: var(--secondary-bg-color); */
+	/* 	border-width: 1px 0 0 0; */
+	/* 	border-bottom-left-radius: 8px; */
+	/* 	border-bottom-right-radius: 8px; */
+	/* 	border-color: var(--article-border-color); */
+	/* } */
+
 	body > header > nav > a {
 		white-space: nowrap;
 	}