Fix display of the nav bar, footer and single element

assets/css/override.css

@@ -5,6 +5,21 @@
   * You should not modify this file.
   */
 
+/* Enable smooth scrolling for footnotes. */
+
+html {
+    scroll-behavior: smooth;
+}
+
+
+ol > li > ::first-line {
+line-height: 3.1em;
+
+}
+/*
+  * Dark theme  
+  */
+
 @media (prefers-color-scheme: dark) {
   body {
     color: #eee;

assets/css/style.css

@@ -18,7 +18,8 @@ body {
                  "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
     /* color: #454545; */
     font-size: 1.1em;
-    /* background: linear-gradient(90deg, #000 21px, transparent 1%) center, linear-gradient(#000 21px, transparent 1%) center, white; */
+    background: linear-gradient(90deg, #000 21px, transparent 1%) center, linear-gradient(#000 21px, transparent 1%) center, white;
+    background-color: #C9C8C8;
     background-size: 22px 22px;
     margin: 0;
     display: flex;
@@ -29,7 +30,6 @@ body {
     word-break: break-word;
 }
 
-}
 p {
     margin: 1.5em 0;
 }
@@ -86,7 +86,7 @@ p {
 .nav-header {
     margin: 0;
     padding: 0.4em;
-    font-size: 1.4em;
+    font-size: 1.5em;
 }
 .nav-text {
     font-weight: normal;
@@ -94,7 +94,8 @@ p {
     z-index: 105;
     color: black;
     font-weight: bolder;
-    font-size: 3rem;
+    font-size: 5rem;
+    transition: font-size 0.4s;
 }
 
 
@@ -102,6 +103,7 @@ p {
 
 .menu-container {
     align-content: space-between;
+    display: flex;
 }
 
 #menu {
@@ -129,14 +131,14 @@ p {
 
 
 .post {
-    margin: 0 0 1em 0;
+    margin: 3vw 1.8vw 3vw 1.8vw;
     line-height: 1.9;
 }
 .post-header {
     margin: 0 0 1.5em 0;
 }
 .post-title {
-    font-size: 1.8em;
+    font-size: 2em;
     font-weight: 500;
     line-height: 1.2;
     margin: 0 0 0.4em 0;
@@ -193,11 +195,11 @@ p {
     margin: 5em 0;
     line-height: 1.6em;
 }
-.card-container {
+
-}
 /* .card-container > a:first-of-type {
     margin-top: 5em;
 } */
+
 .card {
     display: block;
     /* margin: 3rem 0; */
@@ -230,10 +232,16 @@ p {
     flex-direction: column;
     align-items: stretch;
     border-style: none;
-    margin: 1em;
+    margin-bottom: 1em;
 }
+
+/* .blog-card-feed {
+  margin: 1em;
+} */
+
 .bc-next {
     margin-top: 0;
+
 }
 .card-img-container {
     position: relative;
@@ -247,7 +255,6 @@ p {
     object-fit: cover;
 }
 .card-img-overlay {
-    /* border-radius: 0.8rem 0.8rem 0 0; */
     position: absolute;
     top: 0;
     font-size: 1.27em;
@@ -495,7 +502,6 @@ footer h3 {
 
     .nav-header {
         margin: 0;
-        font-size: 1.4em;
         background-color: white;
     }
 
@@ -533,9 +539,8 @@ footer h3 {
         height: 100%;
         width: 16em;
     }
-    .card-img-overlay {
+
-        /* border-radius: 0.8rem 0.8rem 0 0; */
+    
-    }
     .card-body {
         margin: 1.3em 1.7em;
     }
@@ -550,12 +555,7 @@ footer h3 {
         font-size: 0.7em;
         margin-bottom: 0.7em;
     }
-    .content {
+    
-        /* border-radius: 1.2rem; */
-    }
-    .post {
-        margin: 1em 1.8em 2em 1.8em;
-    }
     .post-title {
         font-size: 2em;
     }

layouts/_default/li.html

@@ -1,5 +1,5 @@
 <a
-  href="{{ .Permalink }}" class="card blog-card" rel="bookmark" >
+  href="{{ .Permalink }}" class="card blog-card blog-card-feed" rel="bookmark" >
   <div class="card-img-container">
       {{ with .Resources.GetMatch "featuredImage" }}
     <picture>

layouts/_default/single.html

@@ -30,7 +30,7 @@
         {{ .Content }}
       </article>
     </main>
-    <nav class="end-nav side-padding card-container card content">
+    <nav class="end-nav card-container card">
       {{ with .PrevInSection }}
       {{ .Render "li-next" }}
       {{ end }}

layouts/partials/nav-bar.html

@@ -1,6 +1,6 @@
 <nav class="nav-bar card-container">
 
- <div class="card blog-card menu-container">
+ <div class="menu-container">
      <h1 class="nav-header">
          <a href="{{ .Site.BaseURL }}" class="nav-text">
            {{- if isset $.Site.Params "brand"}}