From c11f29672e178e9de1a51e807b54b93989869994 Mon Sep 17 00:00:00 2001
From: Amolith <amolith@secluded.site>
Date: Wed, 31 May 2023 13:01:24 -0400
Subject: [PATCH] improve post list styling

---
 themes/secluded/assets/scss/_header.scss    |  6 +++---
 themes/secluded/assets/scss/_list.scss      | 24 +++++++++++++++------
 themes/secluded/assets/scss/_main.scss      |  6 ------
 themes/secluded/assets/scss/_variables.scss |  1 +
 themes/secluded/layouts/_default/list.html  | 12 ++++-------
 themes/secluded/layouts/generic/single.html |  2 +-
 6 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/themes/secluded/assets/scss/_header.scss b/themes/secluded/assets/scss/_header.scss
index 81ac742..36e8ad0 100644
--- a/themes/secluded/assets/scss/_header.scss
+++ b/themes/secluded/assets/scss/_header.scss
@@ -18,10 +18,10 @@
             padding: 0px;
         }
         li {
-            display: inline;
+            display: inline-block;
             padding-left: 15px;
         }
-        @media (max-width: 600px) {
+        @media (max-width: $max-width) {
             float: none;
             ul {
                 padding: 5px 0px 5px;
@@ -41,7 +41,7 @@
         color: inherit;
     }
     border-bottom: 2px solid;
-    @media (max-width: 600px) {
+    @media (max-width: $max-width) {
         text-align: center;
     }
 }
diff --git a/themes/secluded/assets/scss/_list.scss b/themes/secluded/assets/scss/_list.scss
index 803faab..88da250 100644
--- a/themes/secluded/assets/scss/_list.scss
+++ b/themes/secluded/assets/scss/_list.scss
@@ -17,23 +17,35 @@
         text-decoration: none;
         color: inherit;
     }
+
     ul {
         list-style-type: none;
         margin: 0px;
         padding: 0px;
     }
+
+    &-item {
+        margin: 40px -12px;
+        padding: 5px 10px;
+        border: 2px solid $dark;
+        border-radius: 7px;
+    }
+
     &-title {
         font-size: larger;
         font-weight: bold;
+        margin: 5px 0px;
     }
 
-    &-day {
-        float: right;
-    }
-    &-item {
-        padding-bottom: 35px;
+    &-summary {
+        margin: 5px 0px;
     }
 
-    &-list {
+    &-meta {
+        margin: 5px 0px 13px 0px;
+    }
+
+    &-tags {
+        margin: 5px 0px 13px 0px;
     }
 }
diff --git a/themes/secluded/assets/scss/_main.scss b/themes/secluded/assets/scss/_main.scss
index 017e74f..a45a1fa 100644
--- a/themes/secluded/assets/scss/_main.scss
+++ b/themes/secluded/assets/scss/_main.scss
@@ -233,9 +233,3 @@ footer {
     font-style: italic;
   }
 }
-
-@media (max-width: 55em) {
-  html {
-    max-width: 650px;
-  }
-}
diff --git a/themes/secluded/assets/scss/_variables.scss b/themes/secluded/assets/scss/_variables.scss
index 07d6bee..3760471 100644
--- a/themes/secluded/assets/scss/_variables.scss
+++ b/themes/secluded/assets/scss/_variables.scss
@@ -6,3 +6,4 @@ $dark-highlight: #ff6565;
 $light-highlight: #c6359e;
 $gradient-left: #e96443;
 $gradient-right: #904e95;
+$max-width: 45em;
diff --git a/themes/secluded/layouts/_default/list.html b/themes/secluded/layouts/_default/list.html
index ef30e08..5763f81 100644
--- a/themes/secluded/layouts/_default/list.html
+++ b/themes/secluded/layouts/_default/list.html
@@ -19,20 +19,16 @@
         </p>
     </div>
 
-    <hr/>
-
     <div class="posts">
         <ul class="posts-list">
             {{- range .Pages }}
             {{- if .Params.rss_only }}
             {{- else }}
             <li class="posts-item">
-                <a href="{{.Permalink}}">
-                    <span class="posts-title" style="view-transition-name: post-title-{{ .Title | urlize }}">{{.Title}}</span>
-                    <span class="posts-day" style="view-transition-name: post-day-{{ .Title | urlize }}">{{ if .Site.Params.dateformShort }}{{ .Date.Format .Site.Params.dateformShort }}{{ else }}{{ .Date.Format "2006-01-02" }}{{ end }}</span>
-                </a>
-                <p style="view-transition-name: post-summary-{{ .Title | urlize }}">{{ .Summary | truncate 140 }}</p>
-                <p>
+                <p class="posts-title" style="view-transition-name: post-title-{{ .Title | urlize }}"><a href="{{.Permalink}}">{{.Title}}</a></p>
+                <p class="posts-summary" style="view-transition-name: post-summary-{{ .Title | urlize }}">{{ .Summary | truncate 140 }}</p>
+                <p class="posts-meta"><strong>Reading Time:</strong> {{ .ReadingTime }} minutes | <strong>Published:</strong> {{ dateFormat "2006-01-02" .Date }}</p>
+                <p class="posts-tags">
                     {{ $title := .Title }}
                     {{- range (.GetTerms "tags") }}
                     <a class="button" href="{{.Permalink}}" style="view-transition-name: post-tags-{{ $title | urlize }}{{ .Title | urlize }}">{{.Title}}</a>
diff --git a/themes/secluded/layouts/generic/single.html b/themes/secluded/layouts/generic/single.html
index a3a548f..b909f29 100644
--- a/themes/secluded/layouts/generic/single.html
+++ b/themes/secluded/layouts/generic/single.html
@@ -3,7 +3,7 @@
     <article>
         <div class="frontmatter">
             <h1 class="post-title" style="view-transition-name: title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
-            <p><strong>Reading Time:</strong> {{ .ReadingTime }} minutes | <strong>Published:</strong> {{ dateFormat "2006-01-02" .Date }} | <strong>Last Edited:</strong> {{ dateFormat "2006-01-02" .Lastmod }}</a></p>
+            <p><strong>Reading Time:</strong> {{ .ReadingTime }} minutes | <strong>Published:</strong> {{ dateFormat "2006-01-02" .Date }} | <strong>Last Edited:</strong> {{ dateFormat "2006-01-02" .Lastmod }}></p>
         </div>
         {{- if .Params.toc }}
         <aside id="toc">