From b5d964364bbb4d3aac043699486a6ebd78784c5e Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Thu, 14 Jul 2022 10:30:07 -0700
Subject: [PATCH] feat: improve styling for lists, fix anchor offset

---
 assets/styles/base.scss         | 60 +++++++++++++++++++--------------
 layouts/_default/taxonomy.html  |  6 ++--
 layouts/_default/term.html      |  2 +-
 layouts/partials/page-list.html | 19 +++++------
 4 files changed, 47 insertions(+), 40 deletions(-)

diff --git a/assets/styles/base.scss b/assets/styles/base.scss
index b2db108b..cec7b910 100644
--- a/assets/styles/base.scss
+++ b/assets/styles/base.scss
@@ -34,12 +34,12 @@ body {
   background-color: var(--light);
 }
 
-h1, h2, h3, h4, h5, h6, ol, ul, thead {
+h1, h2, h3, h4, h5, h6, thead {
   font-family: var(--font-header);
   color: var(--dark);
   font-weight: revert;
   margin: 2rem 0 0;
-  padding: revert;
+  padding: 2rem auto 1rem;
 
   &:hover > .hanchor {
     opacity: 1;
@@ -48,13 +48,12 @@ h1, h2, h3, h4, h5, h6, ol, ul, thead {
 
 .hanchor {
   font-family: var(--font-header);
-  margin-left: -1em;
-  opacity: 0.3;
+  opacity: 0.2;
   transition: opacity 0.3s ease;
   color: var(--secondary);
 }
 
-p, ul, text, a, tr, td, li {
+p, ul, text, a, tr, td, li, ol, ul {
   font-family: var(--font-body);
   color: var(--gray);
   fill: var(--gray);
@@ -176,16 +175,6 @@ blockquote {
   }
 }
 
-.section {
-  & h3 > a {
-    font-weight: 700;
-    margin: 0;
-  }
-  & p {
-    margin-top: 0;
-  }
-}
-
 article {
   & > h1 {
     font-size: 2em;
@@ -223,6 +212,7 @@ article {
   padding-left: 0;
 
   & .meta {
+    margin: 1.5em 0;
     & > h1 {
       margin: 0;
     }
@@ -258,8 +248,11 @@ sup > a {
   padding: 0 0.1em 0 0.2em;
 }
 
-#page-title > a {
-  font-family: var(--font-header);
+#page-title {
+  margin: 0;
+  & > a {
+    font-family: var(--font-header);
+  }
 }
 
 a {
@@ -357,10 +350,15 @@ hr {
   margin-top: 30vh;
 }
 
+.spacer {
+  flex: 1 1 auto;
+}
+
 header {
   display: flex;
   flex-direction: row;
   align-items: center;
+  margin: 1em 0 2em;
 
   & > h1 {
     font-size: 2em;
@@ -372,10 +370,6 @@ header {
     }
   }
 
-  & > .spacer {
-    flex: 1 1 auto;
-  }
-
   #search-icon {
     background-color: var(--lightgray);
     border-radius: 4px;
@@ -385,7 +379,7 @@ header {
     cursor: pointer;
     & > p {
       display: inline;
-      padding: 0 0.5em 0 1em;
+      padding: 0 1.5em 0 2em;
     }
   }
 
@@ -501,18 +495,32 @@ header {
 
 .section-ul {
   list-style: none;
+  margin-top: 2em;
   padding-left: 0;
 
   & > li {
-    border: 1px solid var(--outlinegray);
-    border-radius: 5px;
-    padding: 0 1em;
     margin-bottom: 1em;
 
+    & > .section {
+      display: flex;
+      align-items: center; 
+      
+      & h3 > a {
+        font-weight: 700;
+        margin: 0;
+      }
+      
+      & p {
+        margin: 0;
+        padding-right: 1em;
+        flex-basis: 6em; 
+      }
+    }
+
     & h3 {
       opacity: 1;
       font-weight: 700;
-      margin-bottom: 0em;
+      margin: 0em;
     }
 
     & .meta {
diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html
index 8f86b648..4f0b1175 100644
--- a/layouts/_default/taxonomy.html
+++ b/layouts/_default/taxonomy.html
@@ -12,11 +12,11 @@
         <div class="tags">
             {{ range .Site.Taxonomies.tags.ByCount }}
             <div class="meta">
-                <h1><a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a></h1>
-                <p><b>{{ .Count }}</b> notes with this tag {{if gt .Count 2}}(showing first 2 results){{end}}</p>
+                <h1><a href="{{ .Page.Permalink }}">{{ .Page.Title | humanize }}</a></h1>
+                <p><b>{{ .Count }}</b> notes with this tag {{if gt .Count 10}}(showing first 10 results){{end}}</p>
             </div>
             {{ with ($.Site.GetPage (printf "/tags/%s" .Page.Title)) }}
-            {{partial "page-list.html" (first 2 .Pages.ByLastmod.Reverse)}}
+            {{partial "page-list.html" (first 10 .Pages.ByLastmod.Reverse)}}
             {{ end }}
             {{ end }}
         </div>
diff --git a/layouts/_default/term.html b/layouts/_default/term.html
index abddc07b..dbee1c66 100644
--- a/layouts/_default/term.html
+++ b/layouts/_default/term.html
@@ -8,7 +8,7 @@
     <!-- Begin actual content -->
     {{partial "header.html" .}}
     <article>
-        <h1>Tag: {{.Title | humanize}}</h1>
+        <h1>Tag: {{ .Title }}</h1>
         {{partial "page-list.html" .Paginator.Pages}}
         {{ template "_internal/pagination.html" . }}
     </article>
diff --git a/layouts/partials/page-list.html b/layouts/partials/page-list.html
index e51c5dda..f630f1a7 100644
--- a/layouts/partials/page-list.html
+++ b/layouts/partials/page-list.html
@@ -2,19 +2,18 @@
     {{- range . -}}
     <li class="section-li">
         <div class="section">
+            <p class="meta">
+                {{if ne .Date .Lastmod}}{{ .Lastmod.Format "January 2, 2006" }}{{else}}Unknown{{end}}
+            </p>
             <div class="desc">
                 <h3><a href="{{ .Permalink }}">{{- .Title -}}</a></h3>
-                <ul class="tags">
-                    {{ range (.GetTerms "tags") }}
-                    <li><a href="{{ .Permalink }}">{{ .LinkTitle | title}}</a></li>
-                    {{ end }}
-                </ul>
-                <p>{{- .Summary -}}{{if .Truncated}}...{{end}}</p>
             </div>
-            <p class="meta">
-                {{ .ReadingTime }} minute read. Last updated {{if ne .Date .Lastmod}}{{ .Lastmod.Format "January 2, 2006" }}{{else}}Unknown{{end}}
-            </p>
-
+            <div class="spacer"></div>
+            <ul class="tags">
+                {{ range (.GetTerms "tags") }}
+                <li><a href="{{ .Permalink }}">{{ .LinkTitle | title}}</a></li>
+                {{ end }}
+            </ul>
         </div>
     </li>
     {{- end -}}