From d7a42a2fd7919ac37ff98be31edc34c3511d255f 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 b2db108..cec7b91 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 8f86b64..4f0b117 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 abddc07..dbee1c6 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 e51c5dd..f630f1a 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 -}}