layouts/_default/single.html

@@ -2,14 +2,13 @@
 <div class="container">
 <h1>{{ .Title }}</h1>
 {{ partial "metadata.html" . }}
-<br><br>
-{{ .Content }}
-
-<h3>Written by</h3>
+<p class="author-list">
 {{- range .Params.authors }}
   {{- with $.Site.GetPage "taxonomyTerm" (printf "authors/%s" (urlize .)) }}
-    <a href="{{ .Permalink }}"><p>{{ .Params.name }}</p></a>
+  ~ <a href="{{ .Permalink }}"><b>{{ .Params.name }}</b></a><br>
   {{ end }}
 {{ end }}
+</p>
+{{ .Content }}
 </div>
 {{ end }}
\ No newline at end of file

layouts/index.html

@@ -2,7 +2,26 @@
     <main aria-role="main">
         <div class="container">
             <h1>{{ .Site.Title }}</h1>
-            {{ .Content }}
+            <div class="box">
+                <div class="row">
+                    {{ .Content }}
+                </div>
+                <div class="row">
+                  <div class="column">
+                    <h2>Latest posts</h2>
+                    {{ range (first 5 ($.Site.RegularPages.ByDate.Reverse)) }}
+                        <h3><a class="highlight btn btn-outline-dark tag-btn" href="{{ .RelPermalink | absURL }}">{{ .Title | title }}</a></h3>
+                    {{ end }}
+                  </div>
+                  <div class="column">
+                    <h2>Recent tags</h2>
+                    {{ range (first 5 (where $.Site.Pages "Type" "tags")) }}
+                        <h3><a class="highlight btn btn-outline-dark tag-btn" href="{{ .RelPermalink | absURL }}">{{ .Title | title }}</a></h3>
+                    {{ end }}
+                  </div>
+                </div>
+              </div>
+            </div>
         </div>
     </main>
 {{ end }}

static/css/main.css

@@ -47,6 +47,10 @@ a:hover {
     color: var(--sucs-accent-secondary);
 }
 
+.highlight {
+    color: var(--sucs-text-primary);
+}
+
 .container {
     max-width: min(80%, 800px);
 }
@@ -80,4 +84,23 @@ header {
 
 .pagination__item--current {
     color: var(--sucs-text-primary) !important;
-}
\ No newline at end of file
+}
+
+.box {
+    width: 100%;
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 100%;
+}
+
+.column {
+    display: flex;
+    flex-direction: column;
+    flex-basis: 100%;
+    flex: 1 0;
+}
+  
\ No newline at end of file