backend: rework and simplify styles

public/css/style.css

@@ -17,10 +17,20 @@
  */
 
 :root {
-  --bg-color: #0c0700;
-  --fg-color: #fff8f0;
-  --accent-color-0: #ec57bc;
-  --accent-color-1: #f7be00;
+  --dark-theme-bg: #0c0700;
+  --dark-theme-text: #fff8f0;
+  --dark-theme-accent: #ec57bc;
+  --dark-theme-accent-hover: #f7be00;
+
+  --light-theme-bg: #fff8f0;
+  --light-theme-text: #0c0700;
+  --light-theme-accent: #dc3a23;
+  --light-theme-accent-hover: #4997ce;
+
+  --bg: var(--dark-theme-bg);
+  --text: var(--dark-theme-text);
+  --accent: var(--dark-theme-accent);
+  --accent-hover: var(--dark-theme-accent-hover);
 }
 
 *,
@@ -41,15 +51,27 @@ p {
 body {
   margin: 0 auto;
   min-height: 100vh;
-  background-color: var(--bg-color);
-  color: var(--fg-color);
+  background-color: var(--bg);
+  color: var(--text);
   font-family: monospace;
   font-size: 1.25rem;
   line-height: 2.4;
 }
 
-main {
+body > header {
+  border-bottom: 0.0625rem solid var(--accent);
+  margin-bottom: 0.1875rem;
+}
+
+body > main {
   padding-top: 1.5rem;
+  border-top: 0.0625rem solid var(--accent);
+  border-bottom: 0.0625rem solid var(--accent);
+}
+
+body > footer {
+  border-top: 0.0625rem solid var(--accent);
+  margin-top: 0.1875rem;
 }
 
 dl,
@@ -74,18 +96,15 @@ h2 {
   line-height: 1.2;
 }
 
-a {
-  color: var(--accent-color-0);
-}
-
+a,
 a:link,
 a:visited {
-  color: var(--accent-color-0);
+  color: var(--accent);
 }
 
 a:hover,
 a:active {
-  color: var(--accent-color-1);
+  color: var(--accent-hover);
 }
 
 dt {
@@ -102,16 +121,12 @@ dd {
   width: 60rem;
 }
 
-.border-bottom {
-  border-bottom: 1px solid;
-}
-
 .border-top {
-  border-top: 1px solid;
+  border-top: 0.0625rem solid var(--accent);
 }
 
-.border-accent {
-  border-color: var(--accent-color-0);
+.border-bottom {
+  border-bottom: 0.0625rem solid var(--accent);
 }
 
 .text-center {
@@ -123,27 +138,15 @@ dd {
   line-height: 3;
 }
 
-.bg-color {
-  background-color: var(--bg-color);
+.main-nav {
+  gap: 0 1rem;
 }
 
-.fg-color {
-  color: var(--fg-color);
-}
-
-.fg-accent {
-  color: var(--accent-color-0);
-}
-
-.main-nav-link {
+.main-nav > a {
   font-weight: bold;
   text-decoration: none;
 }
 
-.main-nav-link-gap {
-  gap: 0 1rem;
-}
-
 /* 0.5rem padding compensates the unused 1rem gap at the end. */
 .gallery {
   align-items: center;
@@ -151,15 +154,22 @@ dd {
   padding: 0 0.5rem;
 }
 
-.gallery-image {
+.gallery > a > img,
+.gallery > a:link > img,
+.gallery > a:visited > img {
   max-height: 24rem;
   max-width: 14rem;
   height: 100%;
   width: 100%;
+
+  outline-offset: 0.1875rem;
+  outline: 0.0625rem solid;
+  outline-color: var(--accent);
 }
 
-.media-image {
-  max-width: 100%;
+.gallery > a:hover > img,
+.gallery > a:active > img {
+  outline-color: var(--accent-hover);
 }
 
 .flex-c-horizontal {