hugo-theme-terminal

commit dbe7205f0a2fb54838978022129ab7aff89756d8
parent d201e7a80c715c0d8d30e18b549259053cbbe840
Author: Lou Woell <lou.woell@posteo.de>
Date:   Wed, 15 Oct 2025 16:25:59 +0200

Better spacing on list views

Diffstat:
M
assets/css/buttons.scss
 | 
4
++--
M
assets/css/post.scss
 | 
103
+++++++++++++++++++++++++++++++++++++++++++++++--------------------------------
M
layouts/list.html
 | 
27
+++++++++++----------------

3 files changed, 74 insertions(+), 60 deletions(-)
diff --git a/assets/css/buttons.scss b/assets/css/buttons.scss
@@ -60,14 +60,14 @@ a.button {
 a.read-more,
 a.read-more:hover,
 a.read-more:active {
-  display: inline-flex;
+  display: block;
   border: none;
   color: $accent;
   background: none;
   box-shadow: none;
   padding: 0;
-  margin-top: 20px;
   max-width: 100%;
+  text-align: left;
 }
 
 .code-toolbar {
diff --git a/assets/css/post.scss b/assets/css/post.scss
@@ -29,6 +29,7 @@
 
   &-meta {
     font-size: 1rem;
+    margin-left: 2px;
     margin-bottom: 10px;
     opacity: .5;
 
@@ -45,7 +46,7 @@
     $border: 3px dotted $accent;
     position: relative;
     color: $accent;
-    margin: 0 0 15px;
+    margin: 0.25rem 2px 0.5rem;
     padding-bottom: 15px;
     border-bottom: $border;
 
@@ -65,7 +66,8 @@
 
   &-tags {
     display: block;
-    margin-bottom: 10px;
+    margin-left: 2px;
+    margin-bottom: 0.25rem;
     font-size: 1rem;
     opacity: .5;
 
@@ -74,10 +76,6 @@
     }
   }
 
-  &-content {
-    margin-top: 30px;
-  }
-
   &-cover {
     border: 20px solid $accent;
     background: transparent;
@@ -100,22 +98,69 @@
       color: $accent;
     }
   }
+
+  &.on-list {
+      margin-top: 1rem;
+      padding-bottom: 1rem;
+
+      .post-title {
+          font-size: 1.2rem;
+          margin-bottom: 0.5rem;
+          padding-bottom: 0.5rem;
+      }
+  }
+
+  &-description {
+      margin: 0 2rem 0;
+  }
+
+  .read-more {
+      margin-top: 0.5rem;
+  }
+
+  &-preview-grid {
+      display: grid;
+      column-gap: 2rem;
+      grid-auto-columns: 1fr 3fr;
+      grid-auto-rows: min-content;
+
+      margin-left: 2rem;
+      margin-right: 2rem;
+
+      .post-cover {
+          grid-row: 1 / 3;
+          grid-column: 1;
+          border: 0;
+          padding: 0;
+          margin: 0;
+          contain: style;
+      }
+
+      .post-description {
+          grid-column: 2;
+      }
+
+      .read-more {
+          grid-row: 2;
+          grid-column: 2;
+      }
+  }
 }
 
 .post--regulation {
-  h1 {
-    justify-content: center;
-  }
+    h1 {
+        justify-content: center;
+    }
 
-  h2 {
-    justify-content: center;
-    margin-bottom: 10px;
+    h2 {
+        justify-content: center;
+        margin-bottom: 10px;
 
-    & + h2 {
-      margin-top: -10px;
-      margin-bottom: 20px;
+        & + h2 {
+            margin-top: -10px;
+            margin-bottom: 20px;
+        }
     }
-  }
 }
 
 .hanchor {
@@ -132,29 +177,3 @@ h1:hover a, h2:hover a, h3:hover a, h4:hover a {
 .footnotes {
   color: transparentize($color, .5);
 }
-
-.post.on-list {
-    margin-top: 1rem;
-    padding-bottom: 1rem;
-}
-
-.post-on-list-content-preview {
-    display: grid;
-    column-gap: 2em;
-    grid-auto-columns: 1fr 3fr;
-
-    // margin: 0;
-
-    .post-cover {
-        grid-column: 1;
-        border: 0;
-        padding: 0;
-        margin: 0;
-        contain: style;
-    }
-
-    .post-content {
-        grid-column: 2;
-        margin: 0;
-    }
-}
diff --git a/layouts/list.html b/layouts/list.html
@@ -31,26 +31,21 @@
         </div>
 
         {{ if .Params.cover }}
-        <div class="post-on-list-content-preview">
+          <div class="post-preview-grid">
             {{ partial "cover.html" . }}
         {{ end }}
 
-          <div class="post-content">
-            {{ if .Params.showFullContent }}
-              {{ .Content }}
-            {{ else if .Description }}
-              {{ .Description | markdownify }}
-            {{ else }}
-              {{ .Summary | plainify }}
-            {{ end }}
-
-            {{ if not .Params.showFullContent }}
+        <div class="post-description">
+          {{ if .Description }}
+            {{ .Description | markdownify }}
+          {{ else }}
+            {{ .Summary | plainify }}
+          {{ end }}
+        </div>
 
-            <div>
-              <a class="read-more button" href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore }} →</a>
-            </div>
-            {{ end }}
-          </div>
+        <a class="read-more button" href="{{.RelPermalink}}">
+          {{ $.Site.Params.ReadMore }} →
+        </a>
 
       {{ if .Params.cover }}
         </div>