backend: rework CSS

- Change text defaults to "small text"
- Add class for "big text"
- Use variable for gaps
- Split .gallery links normal style from pseudo classes
- Remove unused classes and elements

public/css/style.css

@@ -32,7 +32,9 @@
   --accent: var(--dark-theme-accent);
   --accent-hover: var(--dark-theme-accent-hover);
 
-  --viewport-width: 60rem;
+  --gap: 1.5rem;
+  --column-width: 15rem;
+  --viewport-width: 15rem;
 }
 
 *,
@@ -45,7 +47,6 @@ dd,
 dl,
 dt,
 h1,
-h2,
 p {
   margin: 0;
 }
@@ -56,31 +57,14 @@ body {
   background-color: var(--bg);
   color: var(--text);
   font-family: monospace;
-  font-size: 1.25rem;
-  line-height: 2.4;
-}
-
-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;
+  font-size: 1rem;
+  line-height: 1.5;
 }
 
 dl,
 h1,
-h2,
 p {
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--gap);
 }
 
 footer > p {
@@ -93,11 +77,6 @@ h1 {
   line-height: 2;
 }
 
-h2 {
-  font-size: 2.5rem;
-  line-height: 1.2;
-}
-
 a,
 a:link,
 a:visited {
@@ -114,6 +93,36 @@ img {
   height: auto;
 }
 
+body > header {
+  border-bottom: 0.0625rem solid var(--accent);
+}
+
+body > header > nav {
+  gap: 0 var(--gap);
+}
+
+body > header > nav > a {
+  font-weight: bold;
+  text-decoration: none;
+}
+
+main {
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-color: var(--accent);
+  padding-top: var(--gap);
+  margin-top: 0.1875rem;
+  margin-bottom: 0.1875rem;
+}
+
+body > footer {
+  border-top: 0.0625rem solid var(--accent);
+}
+
+.leading-loose {
+  line-height: 3;
+}
+
 dt {
   font-weight: bold;
 }
@@ -128,47 +137,30 @@ dd {
   width: var(--viewport-width);
 }
 
-.border-top {
-  border-top: 0.0625rem solid var(--accent);
-}
-
-.border-bottom {
-  border-bottom: 0.0625rem solid var(--accent);
-}
-
 .text-center {
   text-align: center;
 }
 
-.text-small {
-  font-size: 1rem;
-  line-height: 3;
+.text-big {
+  font-size: 1.25rem;
+  line-height: 2.4;
 }
 
-.main-nav {
-  gap: 0 1rem;
-}
-
-.main-nav > a {
-  font-weight: bold;
-  text-decoration: none;
-}
-
-/* 0.5rem padding compensates the unused 1rem gap at the end. */
 .gallery {
+  flex-wrap: wrap;
+  justify-content: center;
   align-items: center;
-  gap: 1rem;
-  padding: 0 0.5rem;
+  gap: var(--gap);
+  margin-bottom: var(--gap);
+}
+
+.gallery > a {
+  flex-basis: calc(var(--column-width) - var(--gap));
+  line-height: 0;
 }
 
-.gallery > a,
 .gallery > a:link,
 .gallery > a:visited {
-  line-height: 0;
-
-  max-height: 24rem;
-  max-width: 14rem;
-
   outline-offset: 0.1875rem;
   outline: 0.0625rem solid;
   outline-color: var(--accent);
@@ -188,26 +180,10 @@ dd {
   flex-direction: column;
 }
 
-.flex-c-center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.flex-c-wrap {
-  flex-wrap: wrap;
-}
-
 .flex-i-fullsize {
   flex: auto;
 }
 
-@media screen and (max-width: 30rem) {
-  :root {
-    --viewport-width: 100%;
-  }
-}
-
 @media screen and (min-width: 30rem) {
   :root {
     --viewport-width: 30rem;