Fix white theme and borders uniformity

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;
@@ -18,7 +33,7 @@
   .content {
       background: #121212;
       border: solid;
-      border-width: 1px;
+      border-width: 3px;
       border-color: white;
   }
 
@@ -46,7 +61,7 @@
       color: white;
       border: solid;
       border-color: white;
-      border-width: 2px;
+      border-width: 3px;
 
   }
 

assets/css/style.css

@@ -16,20 +16,18 @@
 body {
     font-family: Avenir, HelveticaNeue-Light, "Helvetica Neue Light",
                  "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-    /* color: #454545; */
+    color: #454545;
     font-size: 1.1em;
-    /* background: linear-gradient(90deg, #000 21px, transparent 1%) center, linear-gradient(#000 21px, transparent 1%) center, white; */
     background-size: 22px 22px;
     margin: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
-    box-sizing: border-box;
+    /* box-sizing: border-box; */
     word-break: break-word;
 }
 
-}
 p {
     margin: 1.5em 0;
 }
@@ -54,7 +52,7 @@ p {
     width: 100%;
     background-color: white;
     border-radius: 1.2rem;
-    box-shadow: 0 0.7rem 2.3rem 0 rgba(0,0,0,0.3);
+    /* box-shadow: 0 0.7rem 2.3rem 0 rgba(0,0,0,0.3); */
 }
 .home-faceshot {
     margin: 0;
@@ -86,7 +84,7 @@ p {
 .nav-header {
     margin: 0;
     padding: 0.4em;
-    font-size: 1.4em;
+    font-size: 1.5em;
 }
 .nav-text {
     font-weight: normal;
@@ -94,7 +92,7 @@ p {
     z-index: 105;
     color: black;
     font-weight: bolder;
-    font-size: 3rem;
+    font-size: 5rem;
 }
 
 
@@ -102,6 +100,7 @@ p {
 
 .menu-container {
     align-content: space-between;
+    display: flex;
 }
 
 #menu {
@@ -129,14 +128,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;
@@ -167,10 +166,10 @@ p {
     max-width: 50rem;
     /* border-radius: 1.2rem; */
     z-index: 2;
-    transition: transform 0.2s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.2s cubic-bezier(0.25,0.8,0.25,1);
+    /* transition: transform 0.2s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.2s cubic-bezier(0.25,0.8,0.25,1); */
 
     border: solid;
-    border-width: 1px;
+    border-width: 3px;
     border-color: black;
 }
 
@@ -193,23 +192,22 @@ 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; */
     width: 100%;
     max-width: 50rem;
-    box-sizing: border-box;
+    /* /* box-sizing: border-box; */ */
     background-color: white;
     text-decoration: none;
     /* border-radius: 1.2rem; */
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    transition: transform 0.2s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.2s cubic-bezier(0.25,0.8,0.25,1);
+    /* transition: transform 0.2s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.2s cubic-bezier(0.25,0.8,0.25,1); */
-    /* box-shadow: 0 0.7rem 2.3rem 0 rgba(0,0,0,0.3); */
 }
 .home-card {
     padding: 0.8em;
@@ -224,7 +222,7 @@ p {
     display: flex;
 
     border: solid;
-    border-color: grey;
+    border-color: black;
     border-width: 3px;
 
     flex-direction: column;
@@ -239,6 +237,7 @@ p {
 
 .bc-next {
     margin-top: 0;
+
 }
 .card-img-container {
     position: relative;
@@ -252,14 +251,13 @@ p {
     object-fit: cover;
 }
 .card-img-overlay {
-    /* border-radius: 0.8rem 0.8rem 0 0; */
     position: absolute;
     top: 0;
     font-size: 1.27em;
     text-align: center;
     padding: 0.77em 0;
     width: 100%;
-    box-sizing: border-box;
+    /* /* box-sizing: border-box; */ */
     margin: 0;
     color: white;
     background-color: rgba(0, 0, 0, 0.4);
@@ -320,11 +318,11 @@ p {
     background-color: #FFF;
     text-decoration: none;
     border-radius: 0.3rem;
-    transition: transform 0.1s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.1s cubic-bezier(0.25,0.8,0.25,1);
+    /* transition: transform 0.1s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.1s cubic-bezier(0.25,0.8,0.25,1); */
-    box-shadow: 0 0.7rem 2.3rem 0 rgba(0,0,0,0.3);
+    /* box-shadow: 0 0.7rem 2.3rem 0 rgba(0,0,0,0.3); */
 }
 .button:hover {
-    box-shadow: 0 0.05rem 0.15rem rgba(0,0,0,0.12), 0 0.05rem 0.1rem rgba(0,0,0,0.24);
+    /* box-shadow: 0 0.05rem 0.15rem rgba(0,0,0,0.12), 0 0.05rem 0.1rem rgba(0,0,0,0.24); */
     transform: scale(0.97);
 }
 .button:active {
@@ -337,12 +335,12 @@ p {
 .side-padding {
     padding-left: 1.2rem !important;
     padding-right: 1.2rem !important;
-    box-sizing: border-box !important;
+    /* /* box-sizing: border-box !important; */ */
 }
 .side-text-padding {
     padding-left: 1.2rem !important;
     padding-right: 1.2rem !important;
-    box-sizing: border-box !important;
+    /* /* box-sizing: border-box !important; */ */
 }
 .small-pic {
     display: block;
@@ -500,7 +498,6 @@ footer h3 {
 
     .nav-header {
         margin: 0;
-        font-size: 1.4em;
         background-color: white;
     }
 
@@ -529,8 +526,9 @@ footer h3 {
         flex-direction: row;
         align-items: stretch;
         border: solid;
-        border-color: grey;
+        border-color: black;
         border-width: 3px;
+        border-style: solid;
     }
     .card-img {
         margin: 0;
@@ -538,9 +536,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;
     }
@@ -555,12 +552,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/home.html

@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <html lang="{{ .Site.LanguageCode }}" dir="ltr">
+
   {{ partial "head.html" . }}
+  
   <body class="list-body">
 
     <main class="card-container side-gutter">

layouts/_default/li.html

@@ -1,5 +1,4 @@
-<a
+<a href="{{ .Permalink }}" class="card blog-card blog-card-feed" 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

@@ -4,12 +4,11 @@
   {{ partial "head.html" . }}
 
   <body class="single-body">
-    
+
-    <main class="">
-      <!--  -->
     {{ partial "nav-bar.html" . }}
 
-      <article class="content side-text-padding {{ if ne .Params.dropcap false }}dropcase{{ end }}">
+    <main class="content side-text-padding">
+      <article class="post {{ if ne .Params.dropcap false }}dropcase{{ end }}">
         <header class="post-header">
           <h1 class="post-title">{{ .Title }}</h1>
           {{ if isset .Params "date" }}<p class="post-date">Posted <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "Jan 2, 2006" }}</time></p>{{ end }}
@@ -31,7 +30,7 @@
         {{ .Content }}
       </article>
     </main>
-    <nav class="end-nav card">
+    <nav class="end-nav card-container card">
       {{ with .PrevInSection }}
       {{ .Render "li-next" }}
       {{ end }}

layouts/partials/footer.html

@@ -1,5 +1,5 @@
 
-<nav class="content card card-container side-padding">
+<nav class="end-nav side-padding card-container card content">
       {{ partial "openring-out.html" . }}
 
 </nav>

layouts/partials/nav-bar.html

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