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 {
+  h2 {
-    color: var(--primary-color);
+    a {
+      color: var(--primary-color);
 
-    &:hover {
+      &:hover {
-      color: var(--hover-color);
+        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 {
+#pagination {
-  li.page-item:not(.active) {
+  display: flex;
-    a {
+  justify-content: center;
-      color: var(--primary-color);
 
-      &:hover {
+  .pagination {
-        color: var(--hover-color);
+    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 {
+div#index-content {
-  font-size: 18px;
+  text-align: center;
-  margin-bottom: 20px;
 }
 
 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 {

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

@@ -104,6 +104,7 @@
   color: #6b6b6b;
   cursor: pointer;
   font-size: 16px;
+  text-transform: uppercase;
 }
 
 .luxbar-item {

themes/hugo-sustain/layouts/_default/list.html

@@ -88,7 +88,7 @@
               {{ .Summary }} <a class="learn-more" href="{{ .RelPermalink }}"></a>
             </div>
           {{ end }}
-          {{ template "_internal/pagination.html" . }}
+          <div id="pagination">{{ template "_internal/pagination.html" . }}</div>
         </div>
       </div>
     </div>

themes/hugo-sustain/layouts/index.html

@@ -2,19 +2,20 @@
   <body>
     <div id="wrap">
       {{ partial "header" . }}
-      <section id="about">
+      <section class="index" id="about">
         <div class="container">
-        <div class="avatar">
+        <div id="index-content">
-          <img class="img-circle" src="{{ .Site.BaseURL }}img/{{ .Site.Params.avatar }}" alt="Responsive image">
+          <div class="avatar">
-        </div>
+            <img class="img-circle" src="{{ .Site.BaseURL }}img/{{ .Site.Params.avatar }}" alt="Responsive image">
-        
+          </div>
-        {{ .Content }}
 
-        {{ partial "comments" . }}
+          {{ .Content }}
-        {{ partial "social" . }}
         </div>
-      </section>
+        {{ partial "recent" . }}
-    </div>
+      </div>
+    </section>
+  </div>
+    {{ partial "social" . }}
     {{ partial "footer" . }}
     {{ partial "js" . }}
     {{ partial "matomo" . }}

themes/hugo-sustain/layouts/partials/recent.html

@@ -0,0 +1,21 @@
+{{- $lastno := 3 }}
+{{- $size := sub 12 $lastno -1 }}
+{{- $id := 0 }}
+{{- $pages := .Site.RegularPages.ByDate.Reverse | first $lastno }}
+<div id="recent-posts">
+  {{- range $pages }}
+  <div class="row">
+    <div class="card col-xs-12 col-sm-{{ $size }} col-sm-offset-{{ $id }}">
+      <h4 class="card-title">
+        {{ partial "blog/pre-headline.html" . -}}
+        <a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a>
+      </h4>
+      <div class="metadata-summary">
+        {{- partial "blog/verb.html" . }}
+        on {{ .Date.Format "2 January 2006" }} - {{ range $i, $tag := .Params.tags }}{{ if $i }}, {{ end }}<a href="/tags/{{ lower $tag }}">#{{ $tag }}</a>{{ end }}
+      </div>
+    </div>
+  </div>
+  {{- $id = add $id 1 -}}
+  {{- end }}
+</div>