Add TOC & update style

assets/scss/_predefined.scss

@@ -4,6 +4,9 @@ $accent: #54bab9;
 
 // Fonts
 //
-$fonts: Avenir, Montserrat, Calibri, "URW Gothic", source-sans-pro, -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, Microsoft Yahei, sans-serif;
-$fonts-serif: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, Georgia, "Source Han Serif SC VF", "Source Han Serif CN VF", "Source Han Serif SC", "Source Han Serif CN", "Noto Serif CJK SC", source-han-serif-sc, serif;
-$fonts-mono: ui-monospace, "Cascadia Code", "Fira Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", "YaHei Consolas Hybrid", monospace, sans-serif;
+$fonts-sans: Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, -apple-system, BlinkMacSystemFont, Calibri, PingFang SC, Hiragino Sans GB, Microsoft Yahei, sans-serif;
+
+:root {
+  --fonts-serif: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, Georgia, "Source Han Serif SC VF", "Source Han Serif CN VF", "Source Han Serif SC", "Source Han Serif CN", "Noto Serif CJK SC", source-han-serif-sc, serif;
+  --fonts-mono: ui-monospace, "Cascadia Code", "Fira Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", "YaHei Consolas Hybrid", monospace, sans-serif;
+}

assets/scss/style.scss

@@ -42,7 +42,7 @@ select,
 textarea {
   color: var(--c-txt);
   background-color: var(--c-bg);
-  font-family: $fonts;
+  font-family: $fonts-sans;
   transition: color .5s, background-color .5s, border-color .5s;
 }
 
@@ -87,7 +87,7 @@ h1 {
 
 .recent-posts-list {
   li {
-    margin-top: .25rem;
+    margin-top: .125rem;
   }
 
   span {
@@ -100,6 +100,16 @@ h1 {
   }
 }
 
+.site-nav {
+  li {
+    margin-top: .125rem;
+  }
+
+  a {
+    display: block;
+  }
+}
+
 .site-footer {
   font-size: 75%;
 }
@@ -113,7 +123,7 @@ h4,
 h5,
 h6 {
   font-weight: bold;
-  font-family: $fonts-serif;
+  font-family: var(--fonts-serif);
 }
 
 ul,
@@ -152,7 +162,7 @@ a {
   text-decoration-color: var(--c-txt-alt2);
   text-decoration-thickness: 1px;
   text-underline-offset: 0.25em;
-  transition: color .3s, text-decoration-color .3s;
+  transition: color .3s, text-decoration-color .3s, border-color .3s;
 
   &:hover {
     color: $accent;
@@ -170,6 +180,7 @@ a {
     font-style: italic;
     text-decoration: none;
     color: var(--c-txt-alt);
+
     &:hover {
       color: $accent;
     }
@@ -179,7 +190,7 @@ a {
 pre,
 code,
 pre tt {
-  font-family: $fonts-mono;
+  font-family: var(--fonts-mono);
   letter-spacing: normal;
 }
 
@@ -207,7 +218,7 @@ code {
 blockquote {
   margin: 1.5em 1em;
   font-style: italic;
-  font-family: $fonts-serif;
+  font-family: var(--fonts-serif);
   font-size: 125%;
   letter-spacing: normal;
   color: var(--c-txt-alt);
@@ -361,12 +372,39 @@ textarea {
   margin-bottom: 1.5rem;
   line-height: normal;
   font-size: 90%;
-  font-style: italic;
   color: var(--c-txt-alt);
+
+  label {
+    cursor: pointer;
+  }
+}
+
+#toc-toggle {
+  display: none;
+}
+
+#toc {
+  display: none;
+  margin-top: .75rem;
+  border: 1px dashed var(--c-bg-alt);
+
+  a {
+    display: block;
+    color: var(--c-txt-alt);
+    text-decoration: none;
+
+    &:hover {
+      color: $accent;
+    }
+  }
+}
+
+#toc-toggle:checked+#toc {
+  display: block;
 }
 
 .footnotes {
-  font-size: 75%;
+  font-size: 80%;
 
   p {
     margin: 0;
@@ -415,11 +453,9 @@ a.footnote-ref {
 }
 
 .post-year {
-  margin-bottom: .75em;
-  line-height: 1;
-  font-size: 150%;
-  font-family: $fonts-serif;
-  font-style: italic;
+  margin-bottom: .5rem;
+  font-weight: bold;
+  letter-spacing: .125em;
 }
 
 .post-list {

layouts/_default/baseof.html

@@ -42,7 +42,7 @@
 	{{- end -}}
 	{{ block "main" . }}
 	{{ end }}
-	<nav class="wrapper">
+	<nav class="wrapper site-nav">
 		<h2>Index / 索引</h2>
 		<ul class="lsc">
 			{{- range .Site.Menus.main -}}

layouts/index.html

@@ -8,7 +8,7 @@
 		{{- end }}
 	</main>
 	<section class="wrapper">
-		<h2>Latest / 最近 <a href="/writing" class="tdln">…</a></h2>
+		<h2>Latest / 最新 <a href="/writing/" class="tdln">…</a></h2>
 		<ul class="recent-posts-list lsc">
 			{{ range first 3 (where site.RegularPages "Type" "in" "writing") -}}
 			<li>

layouts/writing/single.html

@@ -3,6 +3,14 @@
 		<h1>{{.Title}}</h1>
 		<div class="dim post-info">
 			{{ dateFormat ":date_long" .Date.Local }}
+			{{- if .Params.toc -}}
+			&nbsp;&#183;
+			<label for="toc-toggle">目录</label>
+			<input type="checkbox" id="toc-toggle">
+			<div id="toc">
+				{{ .TableOfContents }}
+			</div>
+			{{- end }}
 		</div>
 		{{ if .Content -}}
 		<div class="content">