feat: recent posts on index, CSS and HTML improvements

themes/hugo-sustain/assets/scss/default.scss

@@ -3,9 +3,11 @@
   --primary-color: #0D76EC;
   --hover-color: #12437A;
   --light-bg: #fff;
+  --light-bg-card: #f5f5f5;
   --primary-color-dark: #4da3ff;
   --hover-color-dark: #91c9ff;
-  --dark-bg: #222;
+  --dark-bg: #14161e;
+  --dark-bg-card: #1c212d;
   --dark-font-color: #eee;
   --dark-nav-color: #ddd;
 }
@@ -16,6 +18,7 @@ html, body {
   background-color: var(--light-bg);
   font-family: 'Source Sans Pro', sans-serif;
   border-top: 3px solid var(--primary-color);
+  font-size: 18px;
 }
 
 #wrap {
@@ -32,12 +35,15 @@ html, body {
 .container {
   width: auto;
   max-width: 800px;
-  text-align: center;
 
   .text-muted {
     margin: 20px 0;
   }
 
+  h1 {
+    text-align: center;
+  }
+
   a {
     color: var(--primary-color);
 
@@ -55,16 +61,28 @@ html, body {
     }
   }
 
+  p {
+    margin-bottom: 20px;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    span {
+      cursor: default;
+    }
+  }
+
   h1 {
     font-weight: bold;
     color: var(--primary-color);
   }
 
-  h2 a {
-    color: var(--primary-color);
+  h2 {
+    a {
+      color: var(--primary-color);
 
-    &:hover {
-      color: var(--hover-color);
+      &:hover {
+        color: var(--hover-color);
+      }
     }
   }
 }
@@ -115,17 +133,17 @@ html, body {
     }
 
     h2 {
+      font-size: 1.25rem;
       line-height: 24px;
-      font-size: 22px;
     }
 
     h5 {
       line-height: 30px;
-      font-size: 18px;
+      font-size: 1rem;
     }
 
     h6 {
-      font-size: 15px;
+      font-size: 0.9rem;
     }
   }
 }
@@ -250,7 +268,7 @@ html, body {
 }
 
 .metadata-summary {
-  font-size: 0.8em;
+  font-size: 0.8rem;
   opacity: 0.7;
 }
 
@@ -287,13 +305,18 @@ a.learn-more {
 }
 
 /* Pagination */
-.pagination {
-  li.page-item:not(.active) {
-    a {
-      color: var(--primary-color);
+#pagination {
+  display: flex;
+  justify-content: center;
 
-      &:hover {
-        color: var(--hover-color);
+  .pagination {
+    li.page-item:not(.active) {
+      a {
+        color: var(--primary-color);
+
+        &:hover {
+          color: var(--hover-color);
+        }
       }
     }
   }
@@ -302,17 +325,21 @@ a.learn-more {
 /* Footer */
 footer {
   border-bottom: 5px solid var(--primary-color);
+  text-align: center;
   text-decoration: none !important;
 
   .text-muted {
     color: #6b6b6b;
   }
+
+  p {
+    font-size: 0.8rem;
+  }
 }
 
 /* Site specific */
-section#about p {
-  font-size: 18px;
-  margin-bottom: 20px;
+div#index-content {
+  text-align: center;
 }
 
 div.contact p {
@@ -320,6 +347,24 @@ div.contact p {
   margin-bottom: 30px;
 }
 
+/* Recent posts */
+#recent-posts {
+  padding: 0 1rem;
+  .card {
+    // Box
+    padding: 1rem;
+    background-color: var(--light-bg-card);
+    border-radius: 0 1rem;
+    margin-bottom: .3rem;
+    text-align: left;
+
+    .card-title {
+      font-size: 1.1rem;
+      margin-top: 0;
+    }
+  }
+}
+
 /* Helpers */
 .vertical-align {
   display: flex;
@@ -341,7 +386,6 @@ pre code {
   .luxbar-menu a,
   .luxbar-item a {
     color: var(--dark-nav-color);
-    text-transform: uppercase;
   }
 
   .luxbar-menu-light .luxbar-hamburger span {
@@ -360,10 +404,6 @@ pre code {
       }
     }
 
-    h2 span {
-      cursor: default;
-    }
-
     h1,
     h2 a {
       color: var(--primary-color-dark);
@@ -387,6 +427,10 @@ pre code {
     }
   }
 
+  #recent-posts .card {
+    background-color: var(--dark-bg-card);
+  }
+
   // Pagination
   .pagination {
     li.page-item {