From b2c2b7e3a511ba3f0641ad8acab4022e13f3e657 Mon Sep 17 00:00:00 2001
From: Lucas <lucas@domain.invalid>
Date: Sun, 26 Mar 2023 20:56:06 +0000
Subject: [PATCH] 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           | 120 +++++++++++++--------------------
 templates/_pager.html.ep       |   2 +-
 templates/layouts/main.html.ep |   8 +--
 3 files changed, 53 insertions(+), 77 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 95b0af2..bf209d3 100644
--- a/public/css/style.css
+++ b/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;
diff --git a/templates/_pager.html.ep b/templates/_pager.html.ep
index 215d244..875e500 100644
--- a/templates/_pager.html.ep
+++ b/templates/_pager.html.ep
@@ -1,6 +1,6 @@
 % if (my $pager = stash("pager")) {
 <footer>
-  <nav class="text-center">
+  <nav class="text-center leading-loose">
     <%= link_to "<<" => url_with->query({ page => $pager->{first_page} })
         if exists $pager->{first_page} %>
     <%= link_to "<" => url_with->query({ page => $pager->{previous_page} })
diff --git a/templates/layouts/main.html.ep b/templates/layouts/main.html.ep
index 8a46b70..03f87cf 100644
--- a/templates/layouts/main.html.ep
+++ b/templates/layouts/main.html.ep
@@ -6,9 +6,9 @@
   <title><%= join(" - ", "Pooru", title() // ()) %></title>
   <%= stylesheet "/css/style.css" %>
 </head>
-<body class="bg-default fg-default flex-c-vertical">
-  <header>
-    <nav class="viewport flex-c-horizontal main-nav">
+<body class="flex-c-vertical">
+  <header class="border-bottom">
+    <nav class="viewport text-big flex-c-horizontal">
       <%= link_to "Pooru~" => "/" %>
       <%= link_to "random" => "/random" %>
       <%= link_to "tags" => "/tags" %>
@@ -22,7 +22,7 @@
     </div>
   </main>
   <footer class="border-top">
-    <p class="viewport text-center text-small">
+    <p class="viewport text-center leading-loose">
     Powered by <%= link_to OpenBSD => "https://www.openbsd.org" %> and <%= link_to Perl => "https://www.perl.org/" %>.
     </p>
   </footer>