Redesign list layout

layouts/_default/list.html

@@ -5,9 +5,18 @@
         {{ if .Content }}
         <hr>
         {{ end }}
+
+        <div class="item-list">
+            <div class="item-list-group">
+                <ul class="item-list-items">
                     {{ range .Pages.ByTitle }}
+                    <li class="item-list-item" data-id="{{ with .File}}{{ .File.UniqueID }}{{ end }}">
                         {{ partial "list_item.html" . }}
+                    </li>
                     {{ end }}
+                </ul>
+            </div>
+        </div>
     </div>
 </div>
 {{ end }}

layouts/partials/content-details.html

@@ -1,9 +1,3 @@
-{{ if not .Date.IsZero }}
-  <span class="pr-2" title='{{ .Date.Format "January 2 2006" }}'>
-    <i class="far fa-calendar-alt pr-1 content-detail"></i> {{ .Date.Format "2006-01-02" }}
-  </span>
-{{ end }}
-
 {{ if not .Parent.IsHome }}
 {{ if gt .ReadingTime 2 }}
 <span class="pr-2" title="Reading time">

layouts/partials/list_item.html

@@ -1,9 +1,18 @@
-<div class="media list-page-item mb-3" data-id="{{ with .File}}{{ .File.UniqueID }}{{ end }}">
+<!-- Obtain "dateformat" from scratchpad (or fall back to default) -->
-  <div class="media-body">
+{{ if not (.Scratch.Get "dateformat") }}
-    <a href="{{ .RelPermalink }}">
+{{ .Scratch.Set "dateformat" "Jan 02, 2006" }}
-      <h5 class="my-0">{{ .Title }}</h5>
+{{ end }}
+{{ $dateformat := .Scratch.Get "dateformat" }}
+<!-- Reset scratchpad for next use (in next page) - avoids using old values -->
+{{ .Scratch.Set "dateformat" nil }}
+
+
+<a class="item-link" href="{{ .RelPermalink }}">
+    <span class="item-title">{{ .Title }}</span>
+    {{ if not .Date.IsZero }}
+    <span class="item-day">{{ .Date.Format $dateformat }}</span>
+    {{ end }}
 </a>
-    <small>{{ partial "content-details.html" . }}</small>
+<small class="item-details">{{ partial "content-details.html" . }}</small>
-    <p>{{ partial "summary.html" . }}</p>
+<!-- TODO: Only show summary on hover? -->
-  </div>
+<p class="item-summary">{{ partial "summary.html" . }}</p>
-</div>

layouts/posts/list.html

@@ -1,22 +1,34 @@
 {{ define "main" }}
 <div id="main">
     <div class="container">
-      {{ partial "content.html" . }}
+        <!-- Total posts, total words, link to tag list page, RSS -->
 
-      <!--Group posts by months-->
+        <div class="item-list">
-      {{ range .Pages.GroupByDate "2006-01" }}
+            {{ partial "content.html" . }}
-        {{ $month := print .Key  "-01"}}
+            <!-- Go through post groups by year -->
-        {{ $display := dateFormat "2006-01" $month }}
+            {{ range .Data.Pages.GroupByDate "2006" }}
-        <h3 class="mt-5" id="{{ $display }}">
+            {{ $year := .Key }}
-          <a href="#{{ $display }}">
+
-            <time datetime="{{ $month }}" title='{{ dateFormat "January 2006" $month }}'>{{ $display }}</time>
+            <div class="item-list-group">
+                <!-- Show the year for this group -->
+                <h3 class="item-list-year" id="{{ $year }}">
+                    <a href="#{{ $year }}">
+                        <time datetime="{{ $year }}" title='{{ $year }}'>{{ $year }}</time>
                     </a>
                 </h3>
-        <!--List posts belonging to current month -->
+
-        {{ range (sort .Pages "Date" "desc") }}
+                <!-- List all posts in this year group -->
+                <ul class="item-list-items">
+                    {{ range .Pages }}
+                    <li class="item-list-item" data-id="{{ with .File}}{{ .File.UniqueID }}{{ end }}">
+                        {{ .Scratch.Set "dateformat" "Jan 02" }}
                         {{ partial "list_item.html" . }}
+                    </li>
                     {{ end }}
+                </ul>
+            </div>
             {{ end }}
         </div>
     </div>
+</div>
 {{ end }}

static/src/scss/style.scss

@@ -195,3 +195,61 @@ img {
   width: 100%;
   height: 35vh;
 }
+
+.item-list {
+    width: 100%;
+    max-width: 1500px;
+    text-align: left;
+    padding: 20px;
+    margin: 20px auto;
+
+    .item-list-group {
+        display: flex;
+        margin-bottom: 1.9em;
+        line-height: normal;
+    }
+
+    .item-list-year {
+        padding-top: 6px;
+        margin-right: 1.8em;
+        font-size: 2em;
+    }
+
+    .item-list-items {
+        flex-grow: 1;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .item-list-item {
+        border-bottom: 1px grey dashed;
+
+        .item-link {
+            display: flex;
+            justify-content: space-between;
+            align-items: baseline;
+            text-decoration: none;
+        }
+
+        .item-title {
+            font-size: 1.3rem;
+            margin: 5px 0 5px 0;
+        }
+
+        .item-day {
+            flex-shrink: 0;
+            margin-left: 1em;
+            opacity: 0.8;
+        }
+
+        .item-details {
+            font-size: 0.8rem;
+            text-indent: 2em;
+        }
+
+        .item-summary {
+            font-size: 1rem;
+        }
+    }
+}