From 99eef342e491af8f37d7c377980a2f5c61478ac9 Mon Sep 17 00:00:00 2001
From: ayoayco <ayo@ayco.io>
Date: Mon, 5 May 2025 18:33:31 +0200
Subject: [PATCH] style: fix styles after removing minima

---
 _includes/footer.html |  24 +++------
 _includes/header.html |  49 +++++-------------
 archives.html         |   6 +--
 assets/main.scss      | 118 ++++++++++++++++++++++++++++++------------
 4 files changed, 109 insertions(+), 88 deletions(-)

diff --git a/_includes/footer.html b/_includes/footer.html
index 6d7508e..7996e73 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -2,11 +2,10 @@
   <data class="u-url" value="{{ "/" | relative_url }}"></data>
 
   <div class="wrapper">
-    <div class="footer-col-wrapper">
       <div class="footer-col footer-col-1">
-      <div class="footer-site-title">
-          <a href="/">{{site.title}}</a>
-      </div>
+        <div class="footer-site-title">
+            <a href="/">{{site.title}}</a>
+        </div>
 
         <ul class="contact-list">
           <li class="p-name">
@@ -19,28 +18,21 @@
             {% if site.email %}
             <li><a class="u-email" href="mailto:{{ site.email }}">Email me</a></li>
             {% endif %}
+            {% if site.github_username %}
+            <li>
+              {% include icon-github.html username=site.github_username %}
+            </li>
+            {% endif %}
         </ul>
       </div>
 
       <div class="footer-col footer-col-2">
-        <ul class="social-media-list">
-          {% if site.github_username %}
-          <li>
-            {% include icon-github.html username=site.github_username %}
-          </li>
-          {% endif %}
-        </ul>
-      </div>
-
-      <div class="footer-col footer-col-3">
         <ul class="desc-list">
             <li>{{ site.description | escape }}</li>
             <li class="rss-subscribe">Subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a> or <a href="{{ site.bugreport_url }}">report a bug</a></li>
             <li class="privacy-link"><a href="{{ "/privacy-policy/" | relative_url }}">Privacy Policy</a></li>
         </ul>
       </div>
-    </div>
-
   </div>
 
 </footer>
diff --git a/_includes/header.html b/_includes/header.html
index 6991d5f..6170f3a 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,47 +1,26 @@
 <header class="site-header">
-  <div class="wrapper">
     {% assign default_paths = site.pages | map: "path" %} {% assign page_paths =
     site.header_pages | default: default_paths %}
     <div class="site-title-wrapper">
-      <a href="{{ '/' | relative_url }}" class="text-js site-title"
-        >{{ site.title }}</a
-      >
+      <a
+        href="{{ '/' | relative_url }}"
+        class="text-js site-title">
+        {{ site.title }}
+      </a>
     </div>
 
     {% if page_paths %}
     <nav class="site-nav">
-      <input type="checkbox" id="nav-trigger" class="nav-trigger" />
-      <label for="nav-trigger">
-        <span class="menu-icon">
-          <svg viewBox="0 0 18 15" width="18px" height="15px">
-            <path
-              fill="#424242"
-              d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"
-            />
-            <path
-              fill="#424242"
-              d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"
-            />
-            <path
-              fill="#424242"
-              d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"
-            />
-          </svg>
-        </span>
-      </label>
-      <div class="trigger">
-        {% for link in site.navigation %} {% assign current = nil %} {% if
-        page.url == link.url%} {% assign current = 'current' %} {% endif %}
+      {% for link in site.navigation %} {% assign current = nil %} {% if
+      page.url == link.url%} {% assign current = 'current' %} {% endif %}
 
-        <a
-          class="page-link {{ current }}"
-          href="{{ link.url | relative_url }}"
-          title="{{link.text}}"
-          >{{ link.text }}</a
-        >
-        {% endfor %}
-      </div>
+      <a
+        class="page-link {{ current }}"
+        href="{{ link.url | relative_url }}"
+        title="{{link.text}}"
+        >{{ link.text }}</a
+      >
+      {% endfor %}
     </nav>
     {% endif %}
-  </div>
 </header>
diff --git a/archives.html b/archives.html
index 668b1fd..fac2e22 100644
--- a/archives.html
+++ b/archives.html
@@ -1,9 +1,9 @@
 ---
-layout: default
+layout: page
+title: "Archives"
+permalink: /archives/
 ---
 
-<h1>Archives</h1>
-
 <div class="blog-home">
   {% if site.posts.size > 0 %}
   {% for post in site.posts  %}
diff --git a/assets/main.scss b/assets/main.scss
index a56ff96..211f3d5 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -57,6 +57,7 @@ body {
   h6 {
     font-family: "Source Serif Pro", serif;
     font-weight: bold;
+    margin-bottom: 1rem;
   }
 }
 
@@ -78,21 +79,69 @@ summary {
 header.site-header {
   background-color: #80ae3c;
   width: 100%;
-}
-
-footer svg {
-  display: inline;
-}
-
-.footer-site-title a {
-  color: rgba(141, 191, 66, 0.97);
-  text-transform: uppercase;
-  font-weight: bold;
-}
-
-.site-header {
+  padding: 1em;
   border: 0px !important;
   border-bottom: 1px solid hsla(0, 0%, 100%, 0.3) !important;
+
+  display: grid;
+  grid-template-columns: auto auto;
+
+  & .site-title {
+    font-size: x-large
+  }
+
+  & .site-nav {
+    text-align: right;
+    display: inline-block;
+    vertical-align: middle;
+    line-height: 40px;
+
+    & .page-link {
+      padding-right: 1rem;
+      color: #ffffff !important;
+      text-transform: uppercase;
+      text-decoration: none;
+      font-size: var(--font-size-base);
+
+      &.current {
+        text-decoration: underline;
+      }
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+footer {
+
+  padding: 1em;
+  border-top: 1px solid var(--text-color-light);
+
+  & svg {
+    display: inline;
+  }
+
+  & ul {
+    list-style: none;
+    padding-left: 0;
+  }
+
+  & .wrapper {
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: auto auto;
+
+    & .footer-col-2 {
+      text-align: right;
+    }
+  }
+
+  & .footer-site-title a {
+    color: rgba(141, 191, 66, 0.97);
+    text-transform: uppercase;
+    font-weight: bold;
+  }
 }
 
 table,
@@ -112,6 +161,19 @@ caption {
   font-size: var(--font-size-sm);
 }
 
+main.page-content {
+  padding: 0 1em;
+
+  & .wrapper {
+    display: grid;
+    gap: 1em;
+
+    & h1 {
+      line-height: 1.2;
+    }
+  }
+}
+
 .page-content .wrapper {
   margin: 0 auto;
 }
@@ -136,13 +198,6 @@ caption {
   }
 }
 
-.site-nav .page-link {
-  color: #ffffff !important;
-  text-transform: uppercase;
-  font-size: var(--font-size-base);
-  font-weight: bold;
-}
-
 .categories {
   width: 100%;
   text-align: center;
@@ -211,7 +266,6 @@ main.page-content {
 }
 
 main.page-content {
-  padding: 0;
   width: 70%;
 }
 
@@ -278,6 +332,10 @@ iframe.mastodon-embed {
   text-align: center;
 }
 
+p {
+  margin-bottom: 1rem;
+}
+
 .blog-post {
   &__header {
     &__category {
@@ -340,10 +398,6 @@ iframe.mastodon-embed {
       font-weight: bold;
     }
 
-    p {
-      margin-top: 1em;
-    }
-
     blockquote {
       font-style: normal;
       margin: 35px 0 !important;
@@ -363,7 +417,7 @@ iframe.mastodon-embed {
       font-size: var(--font-size-base);
       line-height: 1.58;
       letter-spacing: -0.003em;
-      margin-top: 0px;
+      margin-bottom: 1rem;
     }
   }
 
@@ -498,7 +552,7 @@ iframe.mastodon-embed {
 .blog-home {
   &__list-items {
     list-style: none;
-    margin-left: 0;
+    padding-left: 0;
 
     &__item {
       background-color: var(--text-color-light);
@@ -618,14 +672,10 @@ iframe.mastodon-embed {
     font-size: var(--font-size-lg);
   }
 
-  .site-nav {
-    background-color: #90c049 !important;
-    border: 1px solid hsla(0, 0%, 100%, 0.3) !important;
-  }
+header.site-header {
+  display: block
+}
 
-  .site-nav .menu-icon > svg path {
-    fill: #ffffff;
-  }
 }
 
 @media (prefers-color-scheme: dark) {