Refactor CSS for improved readability and structure; enhance header and footer styles

themes/wikidarity/assets/css/main.css

@@ -3,7 +3,9 @@
   https://www.joshwcomeau.com/css/custom-css-reset/
 */
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -16,35 +18,57 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
-img, picture, video, canvas, svg {
+img,
+picture,
+video,
+canvas,
+svg {
   :root {
     /* Consider dark mode implementation later */
     color-scheme: light;
   }
+
   display: block;
   max-width: 100%;
 }
 
-input, button, textarea, select {
+input,
+button,
+textarea,
+select {
   font: inherit;
 }
 
-p, h1, h2, h3, h4, h5, h6 {
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   overflow-wrap: break-word;
 }
 
 p {
   text-wrap: pretty;
 }
-h1, h2, h3, h4, h5, h6 {
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   text-wrap: balance;
 }
 
-#root, #__next {
+#root,
+#__next {
   isolation: isolate;
 }
 
 /* Custom CSS for the Wikidarity theme */
+/* TODO: Add variables */
 
 :root {
   /* Consider dark mode implementation later */
@@ -61,7 +85,7 @@ body {
   font-family: "RecVar", Helvetica, Arial, sans-serif;
   max-width: 64rem;
   width: 100%;
-  min-height: 100vh;
+  min-height: 100svh;
   padding: 2rem;
   background-color: oklch(0.97 0 0);
   transition: background-color 0.2s ease;
@@ -70,7 +94,12 @@ body {
   gap: 2rem;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   padding-bottom: 0.5rem;
 }
 
@@ -114,25 +143,25 @@ a {
   color: #00e;
   text-decoration: underline transparent;
 }
+
 a:hover {
   text-decoration-color: #00e;
 }
+
 a:focus-visible {
   text-decoration-color: #00e;
   outline: 2px solid #00e;
   outline-offset: 2px;
 }
+
 a:visited {
   color: #551a8b;
 }
+
 a:visited:hover {
   text-decoration-color: #551a8b;
 }
-a:visited:focus {
-  text-decoration-color: #551a8b;
-  outline: 2px solid #551a8b;
-  outline-offset: 2px;
-}
+
 a:visited:focus-visible {
   text-decoration-color: #551a8b;
   outline: 2px solid #551a8b;
@@ -142,7 +171,7 @@ a:visited:focus-visible {
 blockquote {
   border-left: 2px solid oklch(0.145 0 0);
   padding: 0.5rem 1rem;
-  background-color: oklch(0.9 0 0);
+  background-color: oklch(0.922 0 0);
   border-radius: 3px;
 }
 
@@ -154,21 +183,46 @@ code {
   box-shadow: 0 1px 2px oklch(0.145 0 0);
 }
 
+/* Header Styles */
+
 header {
   border-bottom: 1px solid oklch(0.145 0 0);
   padding-bottom: 0.5rem;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
+
+  .header-left {
+    justify-content: flex-start;
+  }
+
+  .header-right {
+    justify-content: flex-end;
+  }
+
+  h1 {
+    font-variation-settings: 'CASL' 0.5, 'MONO' 0.2, 'wght' 700;
+    font-size: 2rem;
+    line-height: 1.2;
+    padding-bottom: 0;
+    color: oklch(0.145 0 0);
+
+    a,
+    a:hover,
+    a:focus-visible,
+    a:visited,
+    a:visited:hover,
+    a:visited:focus-visible {
+      color: inherit;
+    }
+
+    a:hover, a:focus-visible, a:visited:hover, a:visited:focus-visible {
+      text-decoration-color: oklch(0.145 0 0);
+    }
+  }
 }
 
-.header-left {
-  justify-content: flex-start;
-}
-
-.header-right {
-  justify-content: flex-end;
-}
+/* Footer Styles */
 
 footer {
   border-top: 1px solid oklch(0.145 0 0);
@@ -180,4 +234,4 @@ footer {
     padding: 1rem;
     gap: 1rem;
   }
-}
+}

themes/wikidarity/layouts/partials/header.html

@@ -2,6 +2,6 @@
     <h1><a href="{{ .Site.BaseURL }}">{{ site.Title }}</a></h1>
 </div>
 <div class="header-right">
-    <a href="https://cloud.wiki.cafe">Sign in</a>
+    <a href="https://console.wiki.cafe">Sign in</a>
 </div>
 <!-- {{ partial "menu.html" (dict "menuID" "main" "page" .) }} -->