style adaptions, some style fixes

sass/main.scss

@@ -68,10 +68,10 @@ body{
 }
 .content {
   max-width: var(--max-layout-width);
-  margin: 0 auto;
+  margin: 3rem auto 1rem;
   padding: 0 24px;
   word-wrap: break-word;
-  min-height: 80vh;
+  min-height: calc(100vh - 10rem - 1px);
 }
 @media only screen and (max-width:1000px) {
   .content{

sass/parts/_footer.scss

@@ -1,19 +1,8 @@
 footer {
-    background-color: var(--navbar-color);
+  height: 3rem;
-    border-top: 1px solid var(--light-border-color);
+  border-top: 1px solid var(--light-border-color);
-    padding: 3rem 0;
+  background-color: var(--navbar-color);
-    font-family: var(--post-font-family);
+  font-family: var(--post-font-family);
-    margin-top: 1rem;
+  text-align: center;
-  }
+  line-height: 3;
-  
+}
-  footer section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1.25rem;
-  }
-  footer nav {
-    display: flex;
-    gap: 0.25rem;
-    margin: 0 1rem;
-  }

sass/parts/_header.scss

@@ -1,8 +1,8 @@
 .page-header {
+  margin: 4rem 0px 1rem 0px;
   font-size: 3em;
   line-height: 100%;
   font-family: var(--header-font);
-  margin: 4rem 0px 1rem 0px;
 }
 
 .centered-header {
@@ -16,8 +16,9 @@
   font-size: 1em;
 }
 
-header {
+body > header {
   width: 100%;
+  height: 3rem;
   background-color: var(--navbar-color);
 }
 .navbar{
@@ -27,7 +28,7 @@ header {
   flex-wrap: wrap;
   justify-content: space-between;
   padding: 1em 0;
-  margin:0 auto;
+  margin: 0 auto;
 }
 @media only screen and (max-width:1000px) {
   .navbar{
@@ -53,13 +54,14 @@ header {
 .nav-links{
   text-decoration: none;
   color: var(--text-color);
-  padding:5px;
+  padding: 5px;
-  border-radius:5px;
+  border-radius: 5px;
-  transition:100ms;
+  transition: transform .2s ease-out, background .3s ease, color .3s ease;
 }
 .nav-links:hover {
   color: var(--links);
-  background-color:var(--secondary-color);
+  background-color: var(--secondary-color);
+  transform: translateY(.5em);
 }
 header .main {
   display: flex;
@@ -73,13 +75,15 @@ header .main {
   /* Otherwise header and menu is too close on small screens*/
   margin-bottom: 10px;
 }
-.nav-navs img{
+.nav-navs img {
   border: none;
 }
-.home-title{
+.home-title {
+  display: inline-block;
+  padding: .25em 1em;
   font-size: 1.6em;
   color: var(--links);
-  background-color:var(--secondary-color);
+  background-color: var(--secondary-color);
 }
 .socials {
   /* flex-child */
@@ -91,6 +95,7 @@ header .main {
   justify-content: flex-start;
   align-items: flex-end;
   gap: 6px;
+  height: 2em;
 }
 
 .social {
@@ -111,8 +116,6 @@ header .main {
   letter-spacing: -0.5px;
 }
 
-@media (prefers-color-scheme: dark) {
+[data-theme="dark"] .social > img {
-  .social>img {
+  filter: invert(1);
-    filter: invert(1);
-  }
 }

sass/parts/_misc.scss

@@ -39,10 +39,10 @@ blockquote {
   padding-left: 1em;
 }
 
-a{
+a {
-  color:var(--text-color);
+  color: var(--text-color);
   text-decoration-color: var(--links);
-  font-weight:1000;
+  font-weight: 600;
 }
 
 a:hover {

templates/404.html

@@ -1,8 +1,8 @@
 {% extends "page.html" %}
 
 {% block main_content %}
-    <main class="centered-header">
+  <main class="centered-header">
-        {{ post_macros::page_header(title="404")}}
+    <h2>404</h2>
-        <span>You have reached somewhere I do not know, or I knew and I have hidden it to preserve my sanity</span>
+    <span>You have reached somewhere I do not know, or I knew and I have hidden it to preserve my sanity</span>
-    </main>
+  </main>
 {% endblock main_content %}

templates/cards.html

@@ -5,7 +5,7 @@
         {% set section = get_section(path=section.extra.section_path) %}
     {% endif -%}
 
-    {{ post_macros::page_header(title=section.title) }}
+    <h2>{{ section.title }}</h2>
 
     <main>
         {%- if paginator %}

templates/macros/macros.html

@@ -56,13 +56,6 @@
 {% endif -%}
 {% endmacro tags %}
 
-{% macro page_header(title) %}
-<h2>
-    {{ title }}
-</h2>
-{% endmacro content %}
-
-
 {% macro page_desc(desc) %}
 <div id="banner-container-home">
     <div id="home-banner-text">
@@ -79,78 +72,75 @@
 
 {% macro content(page) %}
 <main>
-    <article>
+  <article>
-        <div class="title">
+    <header class="title">
-            {#<h1 class="title">{{ page.title }}</h1>#}
+      <h1>{{ page.title }}</h1>
-            {{ post_macros::page_header(title=page.title) }}
 
-            <div class="meta">
+      <div class="meta">
-                {% if page.date %}
+        {% if page.taxonomies and page.taxonomies.tags %}
-                Posted on <time>{{ page.date | date(format="%Y-%m-%d") }}</time>
+        <div class="post-tags">
-                {% endif %}
+          <nav class="nav tags">
-
+            {% for tag in page.taxonomies.tags %}
-                {% if page.draft %}
+            🏷: <a href={{ get_taxonomy_url(kind='tags' , name=tag) | safe }}>{{ tag }}</a>
-                <span class="draft-label">DRAFT</span>
+            {% endfor %}
-                {% endif %}
+          </nav>
-
-                {% if page.taxonomies and page.taxonomies.tags %}
-                <div class="post-tags">
-                    <nav class="nav tags">
-                        {% for tag in page.taxonomies.tags %}
-                        🏷: <a href={{ get_taxonomy_url(kind='tags' , name=tag) | safe }}>{{ tag }}</a>
-                        {% endfor %}
-                    </nav>
-                </div>
-                {% endif %}
-                ||<span> {{ page.reading_time }} minute read</span>
-            </div>
-        </div>
-
-        {% if page.extra.tldr %}
-        <div class="tldr">
-            <strong>tl;dr:</strong>
-            {{ page.extra.tldr }}
         </div>
         {% endif %}
+        <span>
+          {% if page.draft %}
+          <span class="draft-label">DRAFT</span>
+          {% endif %}
+          {{ page.word_count }} words ({{ page.reading_time }} minute read)
+          {% if page.date %}posted on <time>{{ page.date | date(format="%Y-%m-%d") }}</time>{% endif %}
+        </span>
+      </div>
+    </header>
 
-        {# Optional table of contents #}
+    {% if page.extra.tldr %}
-        {% if config.extra.toc | default(value=false) %}
+    <div class="tldr">
-        {% if page.toc %}
+      <strong>tl;dr:</strong>
-        <h1>Table of Contents</h1>
+      {{ page.extra.tldr }}
+    </div>
+    {% endif %}
+
+    {# Optional table of contents #}
+    {% if config.extra.toc | default(value=false) %}
+    {% if page.toc %}
+    <h1>Table of Contents</h1>
+    <ul>
+      {% for h1 in page.toc %}
+      <li>
+        <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
+        {% if h1.children %}
         <ul>
-            {% for h1 in page.toc %}
+          {% for h2 in h1.children %}
-            <li>
+          <li>
-                <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
+            <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
-                {% if h1.children %}
+          </li>
-                <ul>
-                    {% for h2 in h1.children %}
-                    <li>
-                        <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
-                    </li>
 
-                    {% if h2.children %}
+          {% if h2.children %}
-                    <ul>
+          <ul>
-                        {% for h3 in h2.children %}
+            {% for h3 in h2.children %}
-                        <li>
+            <li>
-                            <a href="{{ h3.permalink | safe }}">{{ h3.title }}</a>
+              <a href="{{ h3.permalink | safe }}">{{ h3.title }}</a>
-                        </li>
-                        {% endfor %}
-                    </ul>
-                    {% endif %}
-                    {% endfor %}
-                </ul>
-                {% endif %}
             </li>
             {% endfor %}
+          </ul>
+          {% endif %}
+          {% endfor %}
         </ul>
         {% endif %}
-        {% endif %}
+      </li>
+      {% endfor %}
+    </ul>
+    {% endif %}
+    {% endif %}
 
-        <section class="body">
+    <section class="body">
-            {{ page.content | safe }}
+      {{ page.content | safe }}
-        </section>
+    </section>
 
-    </article>
+  </article>
 </main>
 {% endmacro content %}
 

templates/partials/footer.html

@@ -1,10 +1,5 @@
 <footer>
-    <section>
+  ©2023 Dan Tiskifer | Powered by
-        <nav>
+  <a href = "https://getzola.org/" rel="noopener noreferrer" target="_blank">Zola</a>
-            <span className="desktop-only">Made by 
+  <script src="{{ get_url(path='js/main.js', trailing_slash=false) | safe }}"/></script>
-                <a href = "https://syedzayyan.com/" rel="noopener noreferrer" target="_blank">SZM</a> and powered by 
-                <a href = "https://getzola.org/" rel="noopener noreferrer" target="_blank">Zola</a></span>
-        </nav>
-    </section>
-    <script src="{{ get_url(path='js/main.js', trailing_slash=false) | safe }}"/></script>
 </footer>

templates/section.html

@@ -9,7 +9,7 @@
     {{ post_macros::page_desc(desc=section.extra.desc) }}
 {% endif -%}
 
-{{ post_macros::page_header(title=section.title) }}
+<h2>{{ section.title }}</h2>
 
 <main class="list">
     {%- if paginator %}