styling newsletter section list

assets/css/extended/newsletter.scss

@@ -59,6 +59,7 @@ body.type-newsletter.kind-section {
     border: var(--main-border);
     background-color: var(--theme);
     margin-top: var(--content-gap);
+    padding-bottom: var(--icon-length);
     min-height: calc(100vh - var(--header-height) - var(--footer-height) - var(--content-gap));
     max-width: calc(var(--nav-width));
   }
@@ -82,13 +83,63 @@ body.type-newsletter.kind-section {
       max-width: calc(var(--post-width));
       margin: 0 auto;
     }
-    .entry-header h1 {
+
-      text-align: center;
+    .first-entry {
+      margin-bottom: 0;
+
+      .entry-header h1 {
+        text-align: center;
+      }
+      // .entry-content {
+      //   font-size: 16px;
+      // }
+    }
+
+    .list {
+      display: flex;
+      flex-direction: column;
+      margin-bottom: var(--content-gap);
+
+      .item {
+        display: flex;
+        border-bottom: 1px solid var(--tertiary-bg);
+        padding: 8px 0;
+
+        .date, .issueno {
+          font-size: .9em;
+          color: var(--secondary);
+        }
+        .date {
+          width: 150px;
+        }
+        .title {
+          flex-grow: 1;
+          font-weight: 500;
+          a {
+            display: block;
+            width: 100%;
+          }
+          a:hover, a:active {
+            color: var(--signature);
+          }
+          em {
+            color: var(--secondary);
+            font-style: normal;
+            font-size: .8em;
+            margin-inline-start: 1em;
+            vertical-align: top;
+          }
+        }
+        .issueno {
+          width: 50px;
+          text-align: right;
+        }
+      }
     }
   }
 }
 
-/* egular page layout */
+/* regular page layout */
 body.type-newsletter.kind-page {
   .newsletter-brand {
     display: flex;

layouts/newsletter/section.html

@@ -7,6 +7,7 @@
   <div class="first-entry">
     <header class="entry-header">
       <h1>{{ .Title }}</h1>
+      {{ with .Param "subtitle" }}<div class="subtitle">{{ . }}</div>{{ end }}
     </header>
     <section class="entry-content">{{ .Description | markdownify }}</section>
     {{- partial "newsletter_sub_form.html"}}
@@ -14,60 +15,34 @@
 
   {{- $pages := where .Pages "Params.hidden" "!=" true }}
 
-  {{/* related issue: https://github.com/gohugoio/hugo/issues/9003 */}}
-  {{ $paginator := "" }}
-  {{ if (.Param "paginate") }}
-    {{- $paginator = .Paginate $pages (.Param "paginate") }}
-  {{ else }}
-    {{- $paginator = .Paginate $pages }}
-  {{ end }}
 
-
+  <div class="list">
-  {{- range $index, $page := $paginator.Pages }}
+  {{- range first 5 $pages }}
-  <article class="post-entry">
+    <div class="item">
-    <header class="entry-header">
+      <div class="date">
-      <h2>
+        {{- if not .Date.IsZero -}}
-        {{- .Title }}
+          {{ .Date | time.Format (default "January 2, 2006" site.Params.DateFormat) }}
-        {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[Draft]</span></sup>{{- end }}
+        {{- end }}
-        {{- if .Weight }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[Pinned]</span></sup>{{- end }}
+      </div>
-      </h2>
+      <div class="title">
-    </header>
+        <a href="{{ .Permalink }}">{{- .Title }}
-    {{- if (ne (.Param "hideSummary") true) }}
+          {{- if .Draft }}<em>[Draft]</em>{{- end }}
-    <section class="entry-content">
+          {{- if .Weight }}<em>[Pinned]</em>{{- end }}
-      {{ if .Description }}
+        </a>
-        <p>{{ .Description | plainify | htmlUnescape }}</p>
+      </div>
-      {{ else }}
+      <div class="issueno">{{ with .Param "issueno" }}#{{ . }}{{ end }}</div>
-        <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p>
+    </div>
-      {{ end }}
-    </section>
-    {{- end }}
-    {{- if not (.Param "hideMeta") }}
-    <footer class="entry-footer">
-      {{- partial "post_meta.html" . -}}
-    </footer>
-    {{- end }}
-    <a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
-  </article>
   {{- end }}
-
-  {{- if gt $paginator.TotalPages 1 }}
-  <footer class="page-footer">
-    <nav class="pagination">
-      {{- if $paginator.HasPrev }}
-      <a class="prev" href="{{ $paginator.Prev.URL | absURL }}">« {{ i18n "prev_page" }}</a>
-      {{- end }}
-      {{- if $paginator.HasNext }}
-      <a class="next" href="{{ $paginator.Next.URL | absURL }}">{{ i18n "next_page" }} »</a>
-      {{- end }}
-    </nav>
-  </footer>
-  {{- end }}
-
-  {{- with .Param "archivesSlug" }}
-  <div>
-    <a href="{{ $.RelPermalink }}{{ . }}/">Archives</a>
   </div>
-  {{- end }}
+
+  <div>
+    {{- with .Param "archivesSlug" }}
+      <a href="{{ $.RelPermalink }}{{ . }}/">Archives</a>
+    {{- end }}
+    {{- with .Param "rssUrl" }}
+      <a href="{{ site.BaseURL }}{{ . }}">RSS</a>
+    {{- end }}
+  </div>
 
 </div>
 {{ end }}