From d62120cffa8f0c244a85799665e3506f41c91003 Mon Sep 17 00:00:00 2001
From: -k <slowdive@me.com>
Date: Tue, 21 Jan 2025 14:00:08 -0500
Subject: [PATCH 1/5] fix: improve navigation container

fixes #37
---
 sass/_search.scss   | 35 +----------------------------------
 sass/_site.scss     | 34 +++++++++++++++++++++-------------
 templates/base.html | 26 ++++++++++++++------------
 3 files changed, 36 insertions(+), 59 deletions(-)

diff --git a/sass/_search.scss b/sass/_search.scss
index c6e569a..feb497b 100644
--- a/sass/_search.scss
+++ b/sass/_search.scss
@@ -1,9 +1,8 @@
 .search-container {
-  position: absolute;
   font-size: 12px;
   top: 20px;
   left: 26px;
-  width: 20vw;
+  width: 42%;
   max-width: 300px;
   z-index: 2;
   input {
@@ -59,38 +58,6 @@
   }
 }
 
-@media screen and (max-width: 960px) {
-  .search-container {
-    width: 30vw;
-  }
-
-  .search-results {
-    width: 65vw;
-    right: unset;
-    margin-right: -50%;
-  }
-}
-
-@media screen and (max-width: 640px) {
-  .search-container {
-    width: 65vw;
-    max-width: 325px;
-    top: 70px;
-    left: 50%;
-    right: unset;
-    margin-right: -50%;
-    transform: translate(-50%, 0);
-  }
-
-  .search-results {
-    width: 75vw;
-    left: 25%;
-    right: unset;
-    margin-right: -25%;
-    transform: translate(-30%, 0);
-  }
-}
-
 @media (prefers-color-scheme: dark) {
   .search-container {
     input {
diff --git a/sass/_site.scss b/sass/_site.scss
index e2bb79d..ca39ae7 100644
--- a/sass/_site.scss
+++ b/sass/_site.scss
@@ -11,8 +11,10 @@
   width: 65%;
   float: right;
   overflow-y: auto;
+  text-align: justify;
   .content {
-    padding: 120px 10% 60px;
+    margin-bottom: auto;
+    padding: 0px 10% 0px;
   }
 }
 
@@ -44,9 +46,8 @@
       align-items: center;
     }
     .content {
-      padding: 120px 60px 60px;
+      padding: 0px 60px 0px;
       max-width: 600px;
-      min-height: 94%;
     }
   }
 }
@@ -62,12 +63,23 @@
 }
 
 nav.nav-bar {
-  position: absolute;
+  display: flex;
+  gap: 20px;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  flex: 1 1 22px;
   top: 20px;
-  right: 26px;
   z-index: 2;
 }
 
+#nav-container {
+  margin: 20px;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
 nav.nav-bar ul {
   font-size: 12px;
   text-transform: uppercase;
@@ -807,13 +819,14 @@ a.zola-anchor {
 }
 
 .footer-content {
+  vertical-align: bottom;
+  margin-top: auto;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   height: auto;
   line-height: 0.6rem;
-  bottom: 0;
 }
 
 .footer-links {
@@ -868,12 +881,6 @@ a.zola-anchor {
       grid-template-rows: repeat(4, auto);
     }
   }
-  nav.nav-bar {
-    left: 50%;
-    right: unset;
-    margin-right: -50%;
-    transform: translate(-50%, 0);
-  }
   .inner-post {
     h1 {
       line-height: 36px;
@@ -907,7 +914,8 @@ a.zola-anchor {
   }
   .block-right {
     .content {
-      padding: 145px 20px 40px;
+      height: 100%;
+      padding: 0px 20px 0px;
     }
   }
   .projects {
diff --git a/templates/base.html b/templates/base.html
index f3dd2d9..4010d66 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -39,19 +39,10 @@ <h1 class="section-title">{%- block page_title %}{% if page.title %}{{ page.titl
       </div>
     </div>
     <div class="block-right">
-      {% if config.build_search_index == true %}
-      <script defer src="{{ '/elasticlunr.min.js?v=' ~ get_hash(path='/elasticlunr.min.js', sha_type=512, base64=false) | safe }}"></script>
-      <script defer src="/search.js", integrity="sha512-{{ get_hash(path='/search.js', sha_type=512, base64=true) | safe }}"></script>
-      <nav class="search-container" id="search-nav">
-        <input id="search" type="search" placeholder="Search" aria-label="Search">
-        <div class="search-results">
-          <div class="search-results__items"></div>
-        </div>
-      </nav>
-      {% endif %}
+      {% block nav %}
+      <div id="nav-container">
       <nav class="nav-bar" role="navigation">
         <ul class="nav-menu">
-        {% block nav %}
           <li{% if active_path == "/" %} class="nav-active"{% endif %}><a href="{{ "/" | safe }}">Home</a></li>
           {% if config.extra.menu.posts == true %}
           <li{% if active_path is starting_with("/posts/") or active_path is starting_with("/tags/") or active_path is starting_with("/categories/")%} class="nav-active"{% endif %}><a href="{{ "/posts/" | safe }}" aria-haspopup="true">{{ config.extra.menu.posts_label }}</a>
@@ -65,9 +56,20 @@ <h1 class="section-title">{%- block page_title %}{% if page.title %}{{ page.titl
           {% for link in config.extra.menu.links %}
           <li{% if page %}{% if active_path is starting_with(link.url) %} class="nav-active"{% endif %}{% endif %}><a href="{% if link.url is starting_with("@") %}{{ get_url(path=link.url, trailing_slash=true) | safe }}{% else %}{{ link.url | safe }}{% endif %}">{{ link.name }}</a></li>
           {% endfor %}
-        {% endblock nav %}
         </ul>
       </nav>
+      {% if config.build_search_index == true %}
+      <script defer src="{{ '/elasticlunr.min.js?v=' ~ get_hash(path='/elasticlunr.min.js', sha_type=512, base64=false) | safe }}"></script>
+      <script defer src="/search.js", integrity="sha512-{{ get_hash(path='/search.js', sha_type=512, base64=true) | safe }}"></script>
+      <nav class="search-container" id="search-nav">
+        <input id="search" type="search" placeholder="Search" aria-label="Search">
+        <div class="search-results">
+          <div class="search-results__items"></div>
+        </div>
+      </nav>
+      {% endif %}
+      </div>
+      {% endblock nav %}
   {% block right %}
       <div class="content">
         {% block date %}<div class="date-highlight">{% if page.date %}{{ page.date | date(format="%d %b %Y") }}{% else %}x{% endif %}</div>{% endblock date %}

From 2b80b40c17717dc797be019c10dbcaaa49765f0a Mon Sep 17 00:00:00 2001
From: -k <slowdive@me.com>
Date: Wed, 22 Jan 2025 15:12:51 -0500
Subject: [PATCH 2/5] fix: improve content layout

---
 sass/_site.scss     | 35 +++++++++++++++++++++--------------
 templates/page.html |  3 ++-
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/sass/_site.scss b/sass/_site.scss
index ca39ae7..8bf4353 100644
--- a/sass/_site.scss
+++ b/sass/_site.scss
@@ -13,8 +13,10 @@
   overflow-y: auto;
   text-align: justify;
   .content {
+    display: flex;
+    flex-direction: column;
     margin-bottom: auto;
-    padding: 0px 10% 0px;
+    padding: 0px 10% 52px;
   }
 }
 
@@ -43,11 +45,15 @@
     display: block;
     > div {
       display: flex;
+      text-align: justify;
       align-items: center;
     }
     .content {
-      padding: 0px 60px 0px;
-      max-width: 600px;
+      display: flex;
+      padding: 0px 10% 52px;
+      margin-bottom: auto;
+      align-items: center;
+      justify-content: center;
     }
   }
 }
@@ -58,7 +64,7 @@
 }
 
 .content {
-  margin: 0 auto;
+  margin: 0 20px;
   overflow-wrap: break-word;
 }
 
@@ -384,14 +390,21 @@ a.zola-anchor {
   }
 }
 
+.post-info {
+  text-align: start;
+  display: flex;
+  align-items: flex-start;
+}
+
 #posts {
   .block-right {
-    display: block;
+    display: flex;
+    flex-direction: column;
     height: 100%;
     .content {
       height: auto;
-      min-height: 94%;
-      display: block;
+      display: flex;
+      flex-direction: column;
     }
   }
   .logo {
@@ -425,7 +438,6 @@ a.zola-anchor {
 }
 
 .posts-list {
-  margin: 50px 0;
   > li {
     margin-bottom: 23px;
     padding-bottom: 20px;
@@ -564,7 +576,6 @@ a.zola-anchor {
 .post-music {
   justify-content: center;
   align-items: center;
-  height: 100%;
   position: relative;
   padding: 6px 10px;
   display: inline-flex;
@@ -646,7 +657,7 @@ a.zola-anchor {
 .date-highlight {
   text-align: center;
   font-size: 16px;
-  margin: 0 0 50px;
+  margin: 50px 0 50px;
   color: $overlay-color;
   display: -webkit-box;
   display: -moz-box;
@@ -810,10 +821,6 @@ a.zola-anchor {
   }
 }
 
-.toc-block {
-  margin-bottom: 26px;
-}
-
 .toc-anchor {
   font-size: 15px;
 }
diff --git a/templates/page.html b/templates/page.html
index 57be1fa..c072ac8 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -21,7 +21,7 @@ <h1 class="section-title">{{ page.title | safe }}</h1>
       {% if page.extra.subtitle %}<h1>{{ page.extra.subtitle | safe}}</h1>{% endif %}
       {% if current_path is starting_with("/posts/") %}
       {% if config.extra.read_time == true or page.updated %}
-      <div class="post-ext-info">
+      <div class="post-info"><div class="post-ext-info">
         {% if config.extra.read_time == true %}
         <p>{{ page.reading_time }} minute{{ page.reading_time | pluralize }} reading time</p>
         {% endif %}
@@ -34,6 +34,7 @@ <h1 class="section-title">{{ page.title | safe }}</h1>
         {{ macros::music(artist=page.extra.music[0], track=page.extra.music[1]) }}
       {% endif %}
       {% endblock music %}
+      </div>
       {% if config.extra.toc == true and not page.extra.disable_toc %}{% if page.toc %}{% if page.toc | length >= 2 %}
       <div class="toc-block">
         <ul>

From 84c61a6cd0d36058f4759b5331c8f74a9ee5053c Mon Sep 17 00:00:00 2001
From: -k <slowdive@me.com>
Date: Wed, 22 Jan 2025 16:09:05 -0500
Subject: [PATCH 3/5] fix: improve `homepage` layout

---
 sass/_site.scss | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/sass/_site.scss b/sass/_site.scss
index 8bf4353..7843a16 100644
--- a/sass/_site.scss
+++ b/sass/_site.scss
@@ -42,16 +42,12 @@
   }
   .block-right {
     width: 50%;
-    display: block;
-    > div {
-      display: flex;
-      text-align: justify;
-      align-items: center;
-    }
+    display: flex;
+    flex-direction: column;
     .content {
       display: flex;
+      flex: 1;
       padding: 0px 10% 52px;
-      margin-bottom: auto;
       align-items: center;
       justify-content: center;
     }

From a13cac4197603d1f05d37909c0a5a61a9788f3df Mon Sep 17 00:00:00 2001
From: -k <slowdive@me.com>
Date: Wed, 22 Jan 2025 16:15:46 -0500
Subject: [PATCH 4/5] fix: limit content width

---
 sass/_site.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/sass/_site.scss b/sass/_site.scss
index 7843a16..1fc685b 100644
--- a/sass/_site.scss
+++ b/sass/_site.scss
@@ -13,6 +13,7 @@
   overflow-y: auto;
   text-align: justify;
   .content {
+    max-width: 100%;
     display: flex;
     flex-direction: column;
     margin-bottom: auto;

From b7d68437cbc60a04e9584a723ab8c97dcdb7301d Mon Sep 17 00:00:00 2001
From: -k <slowdive@me.com>
Date: Wed, 22 Jan 2025 16:30:38 -0500
Subject: [PATCH 5/5] fix: update `.projects`

---
 sass/_site.scss | 91 +++++++++++++++++++++++++------------------------
 1 file changed, 46 insertions(+), 45 deletions(-)

diff --git a/sass/_site.scss b/sass/_site.scss
index 1fc685b..f2d4c9e 100644
--- a/sass/_site.scss
+++ b/sass/_site.scss
@@ -682,56 +682,57 @@ a.zola-anchor {
 }
 
 .projects {
-    padding-right: 20px;
-    display: block;
-    > h2 {
-      font-size: 22px;
-      padding-top: 20px;
-      padding-left: 20px;
-      #project-archived {
-        text-decoration: line-through;
-      }
-    }
-    .project-lang {
-      font-size: 16px;
-    }
-    .project-license {
-      font-size: 10px;
-    }
-    .project-description {
-      font-size: 15px;
+  width: 100%;
+  padding-right: 20px;
+  display: block;
+  > h2 {
+    font-size: 22px;
+    padding-top: 20px;
+    padding-left: 20px;
+    #project-archived {
+      text-decoration: line-through;
     }
-    > ul {
-      padding: 0;
+  }
+  .project-lang {
+    font-size: 16px;
+  }
+  .project-license {
+    font-size: 10px;
+  }
+  .project-description {
+    font-size: 15px;
+  }
+  > ul {
+    padding: 0;
+    list-style-type: none;
+    > li {
+      margin-bottom: 14px;
+      padding-left: 20px;
       list-style-type: none;
-      > li {
-        margin-bottom: 14px;
-        padding-left: 20px;
-        list-style-type: none;
-      }
     }
-    .tags {
-      margin-top: 0;
-      padding-bottom: 10px;
-      padding-left: 0;
-      > li {
-        text-transform: lowercase;
-        list-style-type: none;
-      }
-    }
-    .tags:is(.project-tags) > ul {
-      padding: 0;
+  }
+  .tags {
+    margin-top: 0;
+    padding-bottom: 10px;
+    padding-left: 0;
+    > li {
+      text-transform: lowercase;
+      list-style-type: none;
     }
-    .tags:is(.project-tags) > li {
-      margin: 0;
-      font-size: 8px;
-      padding: 4px;
-      margin-right: 10px;
-      margin-bottom: 10px;
-      &:last-child {
-        margin-right: 0;
-      }
+  }
+  .tags:is(.project-tags) > ul {
+    padding: 0;
+  }
+  .tags:is(.project-tags) > li {
+    margin: 0;
+    font-size: 8px;
+    padding: 4px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    &:last-child {
+      margin-right: 0;
     }
+  }
 }
 
 .entry-meta {