v6

README.md

@@ -1,5 +1,5 @@
 <div align="center">
-<h1>Paper <sup><sup><sub>5.1</sub></sup></sup></h1>
+<h1>Paper <sup><sup><sub>6</sub></sup></sup></h1>
 
 Demo → [hugo-paper.vercel.app](https://hugo-paper.vercel.app/)
 
@@ -49,10 +49,15 @@ Available options to `config.toml`:
 disqusShortname = 'YOUR_DISQUS_SHORTNAME'   # add disqus comments
 
 [params]
-  disableHLJS = true                         # don't use highlight.js
+    disableHLJS = true                         # disable loading highlight.js
     twitter = 'YOUR_TWITTER_ID'                # twitter.com/YOUR_TWITTER_ID
     github = 'YOUR_GITHUB_ID'                  # github.com/YOUR_GITHUB_ID
     instagram = 'YOUR_INSTAGRAM_ID'            # instagram.com/YOUR_INSTAGRAM_ID
+
+    # Display profile on home page
+    avatar = 'IMAGE_URL'      # Gravatar email or image url(e.g. "https://deno.land/logo.svg")
+    name = 'YOUR_NAME'
+    bio = 'YOUR_BIO'
 ```
 
 ## License

assets/app.css

@@ -3,50 +3,12 @@
  * A simple, clean, flexible Hugo theme
  * https://github.com/nanxiaobei/hugo-paper
  * Designed by 南小北 (https://lee.so/)
- * Updated in 2021.8.24
+ * Updated in 2022.7.20
  */
 
-/* Theme
+@tailwind base;
- -------------------------------------------------- */
+@tailwind components;
-:root {
+@tailwind utilities;
-  --gap: 3.5rem;
-  --y-gap: 8rem;
-  --wide: 140rem;
-  --narrow: 80rem;
-  --side: calc((var(--wide) - var(--narrow)) / 2);
-  --header: 8rem;
-  --footer: calc(8rem + var(--safe-bottom));
-
-  --light: 255, 255, 255;
-  --dark: 22, 22, 22;
-  --hljs-bg: #111;
-
-  --safe-bottom: 0;
-}
-
-@supports (bottom: constant(safe-area-inset-bottom)) {
-  :root {
-    --safe-bottom: constant(safe-area-inset-bottom);
-  }
-}
-
-@supports (bottom: env(safe-area-inset-bottom)) {
-  :root {
-    --safe-bottom: env(safe-area-inset-bottom);
-  }
-}
-
-.dark {
-  --light: 22, 22, 22;
-  --dark: 255, 255, 255;
-  --hljs-bg: #282828;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
 
 html,
 body {
@@ -55,37 +17,11 @@ body {
 
 html {
   -webkit-tap-highlight-color: transparent;
-  font-size: 8px;
+  background: #fffefc;
 }
 
-body {
+html.dark {
-  --white: rgba(var(--light), 1);
+  background: #000;
-  --black: rgba(var(--dark), 1);
-
-  --pro: rgba(var(--dark), 1);
-  --lit: rgba(var(--dark), 0.64);
-  --air: rgba(var(--dark), 0.48);
-  --fog: rgba(var(--dark), 0.12);
-
-  display: flex;
-  flex-direction: column;
-  padding-right: var(--gap);
-  padding-left: var(--gap);
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-    'Open Sans', 'Helvetica Neue', sans-serif;
-  font-size: 2rem;
-  line-height: 1.8;
-  color: var(--pro);
-  word-break: break-word;
-  background: var(--white);
-  transition: background 0.4s ease-out;
-}
-
-body > * {
-  flex-shrink: 0;
-  width: 100%;
-  margin-inline: auto;
 }
 
 .not-ready,
@@ -93,582 +29,48 @@ body > * {
   transition: none !important;
 }
 
-@media (max-width: 1199px) {
+.btn {
-  html {
+  @apply rounded-full bg-black py-4 px-6 text-sm text-white no-underline shadow-lg duration-100 active:scale-95 dark:bg-white dark:text-black;
-    font-size: 7px;
-  }
 }
 
-/* Reset
+.link {
--------------------------------------------------- */
+  @apply duration-200 hover:text-black dark:hover:text-white;
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 0;
-  font-size: inherit;
-  font-weight: 700;
-  line-height: 1.2;
-}
-
-p {
-  margin: 0;
-}
-
-strong,
-b {
-  font-weight: 500;
-}
-
-ul,
-ol {
-  padding: 0;
-  margin: 0;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-table {
-  width: 100%;
-  border-spacing: 0;
-  border-collapse: collapse;
-}
-
-button,
-input,
-textarea {
-  padding: 0;
-  font: inherit;
-  background: transparent;
-  border: 0;
-  outline: 0;
-  -webkit-appearance: none;
-}
-
-button,
-input[type='button'],
-input[type='submit'] {
-  cursor: pointer;
-}
-
-input,
-textarea {
-  padding: 0;
-  border: 0;
-}
-
-input:-webkit-autofill,
-textarea:-webkit-autofill {
-  box-shadow: 0 0 0 6rem var(--white) inset;
-}
-
-img {
-  display: block;
-  max-width: 100%;
-}
-
-/* Header
- -------------------------------------------------- */
-.header {
-  display: flex;
-  max-width: var(--wide);
-  height: var(--header);
-}
-
-.header a {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-}
-
-.logo {
-  display: flex;
-  min-width: var(--side);
-  padding-right: var(--gap);
-}
-
-.site-name {
-  max-width: calc(100% - 2rem - 3rem);
-  padding-bottom: 0.3rem;
-  overflow: auto;
-  font-size: 3.4rem;
-  font-weight: 700;
-  white-space: nowrap;
-}
-
-.btn-dark {
-  width: 3rem;
-  margin-left: 2rem;
-  cursor: pointer;
-  background: url(./theme.png) left / auto 3rem no-repeat;
-  transition: background-position 0.4s steps(5);
-}
-
-.dark .btn-dark {
-  background-position: right;
-}
-
-.menu {
-  display: flex;
-  overflow: auto;
-}
-
-.menu a + a {
-  margin-left: var(--gap);
-}
-
-.menu a.active {
-  opacity: 0.44;
-}
-
-.social {
-  display: flex;
-  margin-left: auto;
-}
-
-.social a {
-  width: 3rem;
-  margin-left: 3rem;
-  background: var(--url) center center no-repeat;
-}
-
-.dark .social a {
-  filter: invert(1);
-}
-
-@media (max-width: 1199px) {
-  .logo {
-    min-width: auto;
-  }
-
-  [data-menu='true'] {
-    --header: 16rem;
-  }
-
-  [data-menu='true'] .header {
-    position: relative;
-  }
-
-  [data-menu='true'] .header > * {
-    height: calc(var(--header) / 2);
-  }
-
-  [data-menu='true'] .menu {
-    position: absolute;
-    inset: auto 0 0;
-    border-bottom: 1px solid var(--fog);
-  }
-}
-
-/* Main
- -------------------------------------------------- */
-.main {
-  max-width: var(--narrow);
-  min-height: calc(100% - var(--header) - var(--footer));
-  padding-top: var(--y-gap);
-  padding-bottom: var(--y-gap);
-}
-
-.main-title {
-  margin-bottom: calc(var(--y-gap) + 1rem);
-  font-size: 3rem;
-  font-weight: 400;
-  color: var(--lit);
-}
-
-.main-nav {
-  display: flex;
-  margin-top: 5rem;
-}
-
-.main-nav a {
-  font-size: 1.8rem;
-  line-height: 5.5rem;
-  color: var(--white);
-  background: var(--black);
-  border-radius: 0.5rem;
-  padding-inline: 3rem;
-}
-
-.main-nav .next {
-  margin-left: auto;
-}
-
-/* Post entry
- -------------------------------------------------- */
-.post-entry {
-  position: relative;
-  padding-block: 2rem;
-  transition: transform 0.1s;
-}
-
-.post-entry:first-of-type {
-  margin-top: -2rem;
-}
-
-.post-entry:active {
-  transform: scale(0.99);
-}
-
-.post-entry h2 {
-  margin-bottom: 0.2rem;
-  font-size: 3rem;
-}
-
-.post-entry time {
-  flex-shrink: 0;
-  font-size: 1.7rem;
-  color: var(--air);
-}
-
-.post-entry a {
-  position: absolute;
-  inset: 0;
-}
-
-/* Post single
- -------------------------------------------------- */
-.post-title {
-  margin-bottom: calc(var(--y-gap) + 1rem);
-}
-
-.post-title p {
-  display: flex;
-  margin-bottom: 1.5rem;
-  font-size: 1.6rem;
-  color: var(--air);
-  transform: translateY(0.4rem);
-}
-
-.post-title p span::before {
-  content: '·';
-  margin-inline: 0.8rem;
-}
-
-.post-title h1 {
-  font-size: 5rem;
-  transform: translateX(-0.3rem);
-}
-
-.post-tags {
-  margin-top: 7rem;
-}
-
-.post-tags a {
-  display: inline-block;
-  font-weight: 500;
-  line-height: 5rem;
-  color: var(--lit);
-  background: rgba(var(--dark), 0.05);
-  border-radius: 0.5rem;
-  padding-inline: 2rem;
 }
 
-.post-tags a + a {
+.btn-menu::before,
-  margin-left: 0.5rem;
+.btn-menu::after {
+  @apply block h-[2px] w-5 bg-black duration-200 content-[''] dark:invert;
 }
 
-.post-nav {
+.nav-wrapper {
-  display: flex;
+  background: #fffefc;
-  justify-content: space-between;
-  margin-top: var(--y-gap);
-  background: rgba(var(--dark), 0.05);
-  border-radius: 0.5rem;
 }
 
-.post-nav a {
+.open {
-  display: flex;
+  @apply overflow-hidden;
-  align-items: center;
-  width: 50%;
-  padding: var(--gap);
-  font-size: 2.4rem;
-  font-weight: 700;
-  line-height: 1.2;
 }
 
-.post-nav a span + span {
+.open .btn-menu::before {
-  margin-left: 1rem;
+  @apply w-6 translate-y-[5.5px] rotate-45;
 }
 
-.post-nav .prev {
+.open .btn-menu::after {
-  padding-right: 1rem;
+  @apply w-6 -translate-y-[5.5px] -rotate-45;
 }
 
-.post-nav .next {
+.open .nav-wrapper {
-  justify-content: flex-end;
+  @apply top-0;
-  padding-left: 1rem;
-  margin-left: auto;
 }
 
-.post-comments {
+article pre {
-  margin-top: var(--y-gap);
+  @apply shadow-lg;
-}
-
-@media (max-width: 1199px) {
-  .post-title {
-    display: block;
-  }
-
-  .post-title aside {
-    flex-direction: row;
-    width: auto;
-    padding-right: 0;
-    margin-bottom: 0.5rem;
-    margin-left: 0;
-    transform: none;
-  }
-
-  .post-title aside span::before {
-    content: '·';
-    margin-inline: 0.5rem;
-  }
-}
-
-/* Post content
- -------------------------------------------------- */
-.post-content {
-  font-size: 2.2rem;
-}
-
-.post-content h1,
-.post-content h2,
-.post-content h3,
-.post-content h4,
-.post-content h5,
-.post-content h6 {
-  margin-block: 2rem;
-}
-
-.post-content h1 {
-  margin-top: var(--y-gap);
-  font-size: 4.5rem;
-}
-
-.post-content h2 {
-  margin-top: 6rem;
-  font-size: 3.5rem;
-}
-
-.post-content h3 {
-  font-size: 2.5rem;
-}
-
-.post-content h4 {
-  font-size: 2.2rem;
-}
-
-.post-content h5 {
-  font-size: 1.8rem;
-}
-
-.post-content h6 {
-  font-size: 1.5rem;
-}
-
-.post-content img {
-  margin-inline: auto;
-}
-
-.post-content a {
-  padding-bottom: 0.2rem;
-  font-weight: 500;
-  border-bottom: 2px solid var(--pro);
-}
-
-.post-content a code {
-  margin-inline: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.post-content del {
-  text-decoration: none;
-  background: linear-gradient(to right, var(--pro) 100%, transparent 0) 0 50% / 1px 1px repeat-x;
-}
-
-.post-content p,
-.post-content ul,
-.post-content ol,
-.post-content dl,
-.post-content details {
-  margin-bottom: 3rem;
-}
-
-.post-content ul,
-.post-content ol {
-  padding-left: 2.5rem;
-}
-
-.post-content li {
-  margin-top: 0.6rem;
-}
-
-.post-content li p {
-  margin-bottom: 0;
-}
-
-.post-content dl {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0;
-}
-
-.post-content dt {
-  width: 25%;
-  font-weight: 500;
-}
-
-.post-content dd {
-  width: 75%;
-  padding-left: 1.3rem;
-  margin-left: 0;
-}
-
-.post-content dt ~ dt,
-.post-content dd ~ dd {
-  margin-top: 1.3rem;
-}
-
-.post-content table {
-  margin-bottom: 4rem;
-}
-
-.post-content table th,
-.post-content table:not(.highlighttable) td {
-  min-width: 10rem;
-  padding: 1.5rem 1rem;
-  line-height: 1.5;
-  border-bottom: 1px solid var(--fog);
-}
-
-.post-content table th {
-  font-size: 1.6rem;
-  text-align: left;
-}
-
-.post-content table:not(.highlighttable) td code:only-of-type {
-  margin-inline: 0;
-}
-
-.post-content .highlight,
-.post-content pre {
-  margin: 0 calc(var(--gap) * -1) 4rem;
-  overflow-x: auto;
-  background: var(--hljs-bg) !important;
-  border-radius: 0.5rem;
-}
-
-.post-content ul pre {
-  margin-left: calc(var(--gap) * -2);
-}
-
-.post-content .highlight pre {
-  margin-inline: 0;
-  margin-bottom: 0;
-}
-
-/* table */
-.post-content .highlighttable {
-  table-layout: fixed;
-}
-
-.post-content .highlighttable td:first-of-type {
-  width: 5rem;
-}
-
-.post-content .highlighttable td .linenodiv {
-  padding-right: 0 !important;
-}
-
-.post-content .highlighttable td .linenodiv pre,
-.post-content .highlighttable td .highlight {
-  margin-bottom: 0;
-}
-
-.post-content .highlighttable td .highlight pre code::-webkit-scrollbar {
-  display: none;
-}
-
-/* inline */
-.post-content .highlight span {
-  background: transparent !important;
-}
-
-.post-content code {
-  padding: 0.5rem 1rem;
-  margin-inline: 0.5rem;
-  font-family: Menlo, Monaco, 'Courier New', Courier, monospace;
-  font-size: 0.8em;
-  line-height: 1.5;
-  background: rgba(var(--dark), 0.06);
-  border-radius: 0.3rem;
-}
-
-.post-content pre code {
-  display: block;
-  padding: var(--gap);
-  margin-inline: 0;
-  color: rgba(255, 255, 255, 0.8);
-  background: transparent;
-  border-radius: 0;
-}
-
-.post-content blockquote {
-  padding: 0 0 0 calc(var(--gap) - 0.4rem);
-  margin: 0 0 0 calc(var(--gap) * -1);
-  border-left: 0.4rem solid var(--pro);
-}
-
-.post-content hr {
-  height: 1px;
-  background: var(--fog);
-  border: 0;
-  margin-block: 12rem;
-}
-
-.post-content iframe {
-  width: 100%;
-  background: var(--black);
-}
-
-/* Footer
- -------------------------------------------------- */
-.footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  max-width: var(--narrow);
-  height: var(--footer);
-  padding-bottom: var(--safe-bottom);
-  margin-top: auto;
-  font-size: 1.6rem;
-  color: var(--lit);
-  border-top: 1px solid var(--fog);
-}
-
-.footer p + p::before {
-  content: '·';
-  margin-inline: 0.6rem;
-}
 
-.footer a:hover {
+  padding: theme('space.8') !important;
-  color: var(--pro);
+  margin-inline: calc(theme('space.8') * -1);
-  border-bottom: 1px solid var(--pro);
 }
 
-/* 404
+article blockquote {
- -------------------------------------------------- */
+  padding: 0 0 0 calc(theme('space.8') - 3px) !important;
-.title-404 {
+  margin: 0 0 0 calc(theme('space.8') * -1) !important;
-  display: flex;
+  border-color: theme('colors.zinc.800') !important;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding-bottom: 8rem;
-  font-size: 16rem;
 }

exampleSite/config.toml

@@ -18,6 +18,12 @@ title = "Paper"
   twitter = 'nanxiaobei'
   github = 'nanxiaobei'
   instagram = 'nan.xiaobei'
+  rss = true
+
+  avatar = 'nanxiaobei@gmail.com'
+  name = 'Lee'
+  bio = 'Discover fresh context'
+
 # ------------------------------
 
 # needed to  render raw HTML (e.g. <sub>, <sup>, <kbd>, <mark>)
@@ -33,6 +39,11 @@ title = "Paper"
     name = "About"
     url = "/about/"
     weight = 10
+  [[menu.main]]
+    identifier = "contact"
+    name = "Contact"
+    url = "/contact/"
+    weight = 10
 
 [taxonomies]
 category = "categories"

exampleSite/content/contact.md

@@ -0,0 +1,10 @@
++++
+title = "Contact"
+description = "Hugo, the world's fastest framework for building websites"
+date = "2019-02-28"
+aliases = ["about-us", "about-hugo", "contact"]
+author = "lee.so"
++++
+
+- [github.com/nanxiaobei](https://github.com/nanxiaobei)
+- [lee.so](https://lee.so)

layouts/404.html

@@ -1,3 +1,3 @@
 {{ define "main" }}
-<h1 class="title-404">404</h1>
+<h1 class="absolute inset-x-8 top-0 bottom-16 flex items-center justify-center text-9xl">404</h1>
 {{ end }}

layouts/_default/baseof.html

@@ -1,20 +1,37 @@
 <!DOCTYPE html>
 
-{{ $.Scratch.Delete "social-list" }}<!---->
+{{ $.Scratch.Delete "social_list" }}<!---->
-{{ $social := slice "twitter" "github" "instagram" }}<!---->
+{{ $.Scratch.Delete "avatar_url" }}<!---->
-{{ range $social }}<!---->
+
+<!-- social_list -->
+{{ $socialParams := slice "twitter" "github" "instagram" "rss" }}<!---->
+{{ range $socialParams }}<!---->
 {{ if isset site.Params . }}<!---->
-{{ $.Scratch.Add "social-list" (slice .) }}<!---->
+{{ $.Scratch.Add "social_list" (slice .) }}<!---->
 {{ end }}<!---->
 {{ end }}<!---->
 
-<html lang="{{ site.LanguageCode }}">
+<!-- avatar_url -->
+{{ if site.Params.avatar }}<!---->
+{{ if in site.Params.avatar "http" }}<!---->
+{{ $.Scratch.Set "avatar_url" site.Params.avatar }}<!---->
+{{ else }}<!---->
+{{ $md5 := (md5 site.Params.avatar) }}<!---->
+{{ $url := print "https://www.gravatar.com/avatar/" $md5 "?s=160&d=identicon" }}<!---->
+{{ $.Scratch.Set "avatar_url" $url }}<!---->
+{{ end }}<!---->
+{{ end }}<!---->
+
+<html class="not-ready text-sm lg:text-base" lang="{{ site.LanguageCode }}">
   {{ partial "head.html" . }}
-
+  <body class="text-black duration-200 ease-out dark:text-white">
-  <body class="not-ready" data-menu="{{ isset site.Menus `main` }}">
     {{ partial "header.html" . }}
 
-    <main class="main">{{ block "main" . }}{{ end }}</main>
+    <main
+      class="prose prose-zinc relative mx-auto min-h-[calc(100%-10rem)] max-w-3xl px-8 pt-16 pb-40 dark:prose-invert"
+    >
+      {{ block "main" . }}{{ end }}
+    </main>
 
     {{ partial "footer.html" . }}
   </body>

layouts/_default/list.html

@@ -2,31 +2,57 @@
 
 <!-- Main Title -->
 {{ if .Title }}
-<h1 class="main-title">{{ .Title }}</h1>
+<h1 class="mb-20">{{ .Title }}</h1>
 {{ end }}
 
 <!-- $pages -->
-{{ $pages := union .RegularPages .Sections }}
+{{ $pages := union .RegularPages .Sections }}<!---->
-<!---->{{ if .IsHome }} {{ $pages = where site.RegularPages "Type" "in" site.Params.mainSections }}
+{{ if .IsHome }}<!---->
+{{ $pages = where site.RegularPages "Type" "in" site.Params.mainSections }}<!---->
 {{ end }}
 
 <!-- Articles -->
-{{ $paginator := .Paginate $pages }} {{ range $index, $page := $paginator.Pages }}
+{{ $paginator := .Paginate $pages }} {{ range $index, $page := $paginator.Pages }}<!---->
-<article class="post-entry">
+
-  <h2>{{ .Title }}</h2>
+<!-- avatar -->
-  <time>{{ .Date | time.Format ":date_medium" }}</time>
+{{ if and $.IsHome (eq $paginator.PageNumber 1) (eq $index 0) }}<!---->
-  <a href="{{ .Permalink }}"></a>
+
+{{ $avatar_url := $.Scratch.Get `avatar_url` }}<!---->
+{{ if or $avatar_url site.Params.name }}
+<div class="mb-20 flex">
+  {{ if $avatar_url }}
+  <img
+    class="my-0 mr-5 !h-20 !w-20 rounded-full bg-zinc-100 dark:border dark:border-zinc-700"
+    src="{{ $avatar_url }}"
+    alt="avatar"
+  />
+  {{ end }}<!---->
+  {{ if site.Params.name }}
+  <div>
+    <h1 class="mt-1 mb-2.5 text-3xl font-bold">{{ site.Params.name }}</h1>
+    <div>{{ site.Params.bio | default (print "Personal blog by " site.Params.name) }}</div>
+  </div>
+  {{ end }}
+</div>
+{{ end }}<!---->
+
+{{ end }}
+
+<article class="relative my-10 first-of-type:mt-0 last-of-type:mb-0">
+  <h2 class="!my-0 pb-1 !leading-none">{{ .Title }}</h2>
+  <time class="text-sm text-zinc-500">{{ .Date | time.Format ":date_medium" }}</time>
+  <a class="absolute inset-0" href="{{ .Permalink }}"></a>
 </article>
 {{ end }}
 
 <!-- Main Nav -->
 {{ if gt $paginator.TotalPages 1 }}
-<nav class="main-nav">
+<nav class="mt-20 flex">
   {{ if $paginator.HasPrev }}
-  <a class="prev" href="{{ $paginator.Prev.URL }}">← {{ i18n "prev_page" }}</a>
+  <a class="btn" href="{{ $paginator.Prev.URL }}">← {{ i18n "prev_page" }}</a>
   {{ end }}<!---->
   {{ if $paginator.HasNext }}
-  <a class="next" href="{{ $paginator.Next.URL }}">{{ i18n "next_page" }} →</a>
+  <a class="btn ml-auto" href="{{ $paginator.Next.URL }}">{{ i18n "next_page" }} →</a>
   {{ end }}
 </nav>
 {{ end }}<!---->

layouts/_default/single.html

@@ -1,24 +1,33 @@
 {{ define "main" }}
 
-<article class="post-single">
+<article>
-  <header class="post-title">
+  <header class="mb-16">
-    <p>
+    <h1 class="!my-0 pb-2">{{ .Title }}</h1>
+
+    {{ if ne .Type "page" }}
+    <div class="text-[0.9em] text-zinc-500">
       {{ if .Date }}
       <time>{{ .Date | time.Format ":date_medium" }}</time>
-      {{ end }}
+      {{ end }}<!---->
       {{ if or .Params.Author site.Author.name }}
+      <span class="mx-1">&middot;</span>
       <span>{{ .Params.Author | default site.Author.name }}</span>
       {{ end }}
-    </p>
+    </div>
-    <h1>{{ .Title }}</h1>
+    {{ end }}
   </header>
-  <section class="post-content">{{ .Content }}</section>
+
+  <section>{{ .Content }}</section>
 
   <!-- Post Tags -->
   {{ if .Params.tags }}
-  <footer class="post-tags">
+  <footer class="mt-12 flex flex-wrap">
     {{ range .Params.tags }} {{ $href := print (absURL "tags/") (urlize .) }}
-    <a href="{{ $href }}">{{ . }}</a>
+    <a
+      class="mr-1.5 mb-1.5 rounded-lg bg-zinc-100 px-4 py-2 no-underline dark:bg-zinc-800"
+      href="{{ $href }}"
+      >{{ . }}</a
+    >
     {{ end }}
   </footer>
   {{ end }}
@@ -26,21 +35,28 @@
   <!-- Post Nav -->
   {{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}<!---->
   {{ if and (gt (len $pages) 1) (in $pages . ) }}
-  <nav class="post-nav">
+  <nav class="mt-16 flex rounded-lg bg-zinc-100 text-lg dark:bg-zinc-800">
     {{ with $pages.Next . }}
-    <a class="prev" href="{{ .Permalink }}"><span>←</span><span>{{ .Name }}</span></a>
+    <a class="flex w-1/2 items-center p-6 pr-3 font-bold no-underline" href="{{ .Permalink }}"
-    {{ end }} {{ with $pages.Prev . }}
+      ><span class="mr-1.5">←</span><span>{{ .Name }}</span></a
-    <a class="next" href="{{ .Permalink }}"><span>{{ .Name }}</span><span>→</span></a>
+    >
+    {{ end }}<!---->
+    {{ with $pages.Prev . }}
+    <a
+      class="ml-auto flex w-1/2 items-center justify-end p-6 pl-3 font-bold no-underline"
+      href="{{ .Permalink }}"
+      ><span>{{ .Name }}</span><span class="ml-1.5">→</span></a
+    >
     {{ end }}
   </nav>
   {{ end }}
 
   <!-- Disqus -->
   {{ if and site.DisqusShortname (not (eq .Params.comments false)) }}
-  <div id="disqus_thread" class="post-comments"></div>
+  <div id="disqus_thread"></div>
   <script>
-    var disqusShortname = '{{ site.DisqusShortname }}';
+    const disqusShortname = '{{ site.DisqusShortname }}';
-    var script = document.createElement('script');
+    const script = document.createElement('script');
     script.src = 'https://' + disqusShortname + '.disqus.com/embed.js';
     script.setAttribute('data-timestamp', +new Date());
     document.head.appendChild(script);

layouts/partials/footer.html

@@ -1,7 +1,11 @@
-<footer class="footer">
+<footer class="mx-auto flex h-[5rem] max-w-3xl items-center px-8 text-sm text-zinc-500">
-  <p>&copy; {{ now.Year }} <a href="{{ `` | absURL }}">{{ site.Title }}</a></p>
+  <div class="mr-auto">
-  <p>Powered by <a href="https://gohugo.io/" rel="noopener" target="_blank">Hugo️️</a>️</p>
+    &copy; {{ now.Year }}
-  <p>
+    <a class="link" href="{{ `` | absURL }}">{{ site.Title }}</a>
-    <a href="https://github.com/nanxiaobei/hugo-paper" rel="noopener" target="_blank">Paper 5.1</a>
+  </div>
-  </p>
+  <a class="link mx-6" href="https://gohugo.io/" rel="noopener" target="_blank">Powered by Hugo️️</a
+  >️
+  <a class="link" href="https://github.com/nanxiaobei/hugo-paper" rel="noopener" target="_blank"
+    >▷ Paper 6</a
+  >
 </footer>

layouts/partials/head.html

@@ -7,6 +7,7 @@
   <title>{{ if not .IsHome }}{{ .Title }} - {{ end }}{{ site.Title }}</title>
 
   <!-- Meta -->
+  <meta name="theme-color" />
   {{ if eq .Kind "page" }}
   <meta name="description" content="{{ .Summary }}" />
   <meta name="author" content="{{ .Params.Author | default site.Author.name }}" />
@@ -16,15 +17,14 @@
   {{ end }}
 
   <!-- Styles & Scripts -->
-  {{ $app_css := resources.Get "app.css" }}
+  {{ $main_css := resources.Get "main.css" }}
   <!---->
   {{ $custom_css := resources.Get "custom.css" }}
   <!---->
-  {{ $css := slice $app_css $custom_css | resources.Concat "app.css" | minify }}
+  {{ $css := slice $main_css $custom_css | resources.Concat "main.css" | minify }}
   <link rel="preload stylesheet" as="style" href="{{ $css.Permalink }}" />
 
   {{ if and .IsPage (not site.Params.disableHLJS) }}
-  <link rel="preload stylesheet" as="style" href="{{ `an-old-hope.min.css` | absURL }}" />
   <script
     defer
     src="{{ `highlight.min.js` | absURL }}"
@@ -33,9 +33,16 @@
   {{ end }}
 
   <!-- Preload -->
-  <link rel="preload" as="image" href="{{ `theme.png` | absURL }}" />
+  <link rel="preload" as="image" href="{{ `theme.svg` | absURL }}" />
 
-  {{ range $.Scratch.Get "social-list" }}
+  {{ $avatar_url := $.Scratch.Get "avatar_url" }}
+  <!---->
+  {{ if $avatar_url }}
+  <link rel="preload" as="image" href="{{ $avatar_url }}" />
+  {{ end }}
+  <!---->
+
+  {{ range $.Scratch.Get "social_list" }}
   <link rel="preload" as="image" href="{{ printf `%s.svg` . | absURL }}" />
   {{ end }}
 

layouts/partials/header.html

@@ -1,51 +1,82 @@
-<header class="header">
+<header class="mx-auto flex h-[5rem] max-w-3xl px-8 lg:justify-center">
-  {{ if .IsHome }}
+  <div class="relative z-50 mr-auto flex items-center">
-  <h1 class="logo">
+    <a class="-translate-x-[1px] -translate-y-0.5 text-3xl font-bold" href="{{ `` | absURL }}"
-    <a class="site-name" href="{{ `` | absURL }}">{{ site.Title }}</a><a class="btn-dark"></a>
+      >{{ site.Title }}</a
-  </h1>
+    >
-  {{ else }}
+    <a
-  <p class="logo">
+      class="btn-dark ml-7 h-[1.4rem] w-[1.4rem] shrink-0 cursor-pointer [background:url(./theme.svg)_left_center/cover_no-repeat] dark:invert dark:[background-position:right]"
-    <a class="site-name" href="{{ `` | absURL }}">{{ site.Title }}</a><a class="btn-dark"></a>
+    ></a>
-  </p>
+  </div>
-  {{ end }}
+
+  <a
+    class="btn-menu relative z-50 -mr-8 flex h-[5rem] w-[5rem] shrink-0 cursor-pointer flex-col items-center justify-center gap-2.5 lg:hidden"
+  ></a>
 
   <script>
-    let bodyClx = document.body.classList;
+    const metaTheme = document.querySelector('meta[name="theme-color"]');
-    let btnDark = document.querySelector('.btn-dark');
+    const htmlClass = document.documentElement.classList;
-    let sysDark = window.matchMedia('(prefers-color-scheme: dark)');
+    requestAnimationFrame(() => {
-    let darkVal = localStorage.getItem('dark');
+      htmlClass.remove('not-ready');
+    });
 
-    let setDark = (isDark) => {
+    const setDark = (newDark) => {
-      bodyClx[isDark ? 'add' : 'remove']('dark');
+      metaTheme.setAttribute('content', newDark ? '#000' : '#FCFAF9');
-      localStorage.setItem('dark', isDark ? 'yes' : 'no');
+      htmlClass[newDark ? 'add' : 'remove']('dark');
+      localStorage.setItem('dark', newDark);
     };
 
-    setDark(darkVal ? darkVal === 'yes' : sysDark.matches);
+    // init
-    requestAnimationFrame(() => bodyClx.remove('not-ready'));
+    const darkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+    const darkVal = localStorage.getItem('dark');
+    setDark(darkVal ? darkVal === 'true' : darkScheme.matches);
 
-    btnDark.addEventListener('click', () => setDark(!bodyClx.contains('dark')));
+    // listen system
-    sysDark.addEventListener('change', (event) => setDark(event.matches));
+    darkScheme.addEventListener('change', (event) => {
+      setDark(event.matches);
+    });
+
+    // manual switch
+    const btnDark = document.querySelector('.btn-dark');
+    btnDark.addEventListener('click', () => {
+      setDark(localStorage.getItem('dark') !== 'true');
+    });
+
+    // mobile menu
+    const btnMenu = document.querySelector('.btn-menu');
+    btnMenu.addEventListener('click', () => {
+      htmlClass.toggle('open');
+    });
   </script>
 
+  <div
+    class="nav-wrapper fixed inset-x-0 top-full z-40 flex h-full select-none flex-col justify-center pb-16 duration-200 dark:bg-black lg:static lg:h-auto lg:flex-row lg:!bg-transparent lg:pb-0 lg:transition-none"
+  >
     {{ $url := .RelPermalink }}<!---->
     {{ with site.Menus.main }}
-  <nav class="menu">
+    <nav class="lg:ml-14 lg:flex lg:flex-row lg:items-center lg:space-x-7">
       {{ range . }}
-    <a class="{{ if eq .URL $url }}active{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
+      <a
+        class="block font-medium lg:font-normal text-center leading-[5rem] text-3xl lg:text-base {{ if eq .URL $url }}active{{ end }}"
+        href="{{ .URL }}"
+        >{{ .Name }}</a
+      >
       {{ end }}
     </nav>
     {{ end }}<!---->
 
-  {{ with $.Scratch.Get "social-list" }}
+    {{ with $.Scratch.Get "social_list" }}
-  <nav class="social">
+    <nav
-    {{ range . }}
+      class="mt-12 flex justify-center space-x-10 dark:invert lg:mt-0 lg:ml-14 lg:items-center lg:space-x-7"
+    >
+      {{ range . }}<!---->
       <a
-      class="{{ . }}"
+        class="h-8 w-8 [background:var(--url)_center_center/cover_no-repeat] lg:h-6 lg:w-6"
         style="--url: url(./{{ . }}.svg)"
-      href="https://{{ . }}.com/{{ site.Params.Get . }}"
+        href="{{ if eq . `rss` }} {{ `index.xml` | absURL }} {{ else }} https://{{ . }}.com/{{ site.Params.Get . }} {{ end }}"
         target="_blank"
       ></a>
-    {{ end }}
+      {{ end }}<!---->
     </nav>
-  {{ end }}
+    {{ end }}<!---->
+  </div>
 </header>

static/an-old-hope.min.css

@@ -1 +0,0 @@
-.hljs-comment,.hljs-quote{color:#B6B18B}.hljs-variable,.hljs-template-variable,.hljs-tag,.hljs-name,.hljs-selector-id,.hljs-selector-class,.hljs-regexp,.hljs-deletion{color:#EB3C54}.hljs-number,.hljs-built_in,.hljs-builtin-name,.hljs-literal,.hljs-type,.hljs-params,.hljs-meta,.hljs-link{color:#E7CE56}.hljs-attribute{color:#EE7C2B}.hljs-string,.hljs-symbol,.hljs-bullet,.hljs-addition{color:#4FB4D7}.hljs-title,.hljs-section{color:#78BB65}.hljs-keyword,.hljs-selector-tag{color:#B45EA4}.hljs{display:block;overflow-x:auto;background:#1C1D21;color:#c0c5ce;padding:.5em}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}

static/github.svg

@@ -1 +1 @@
-<svg viewBox="-0.8 -1 17.6 17.6" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="1.3 1.3 21.4 21.4"><path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"/></svg>

static/instagram.svg

@@ -1 +1 @@
-<svg viewBox="-1.5 -3 53 53" xmlns="http://www.w3.org/2000/svg"><path d="M25 1c-6.52 0-7.34.03-9.9.14-2.55.12-4.3.53-5.82 1.12a11.76 11.76 0 0 0-4.25 2.77 11.76 11.76 0 0 0-2.77 4.25c-.6 1.52-1 3.27-1.12 5.82C1.03 17.66 1 18.48 1 25c0 6.5.03 7.33.14 9.88.12 2.56.53 4.3 1.12 5.83a11.76 11.76 0 0 0 2.77 4.25 11.76 11.76 0 0 0 4.25 2.77c1.52.59 3.27 1 5.82 1.11 2.56.12 3.38.14 9.9.14 6.5 0 7.33-.02 9.88-.14 2.56-.12 4.3-.52 5.83-1.11a11.76 11.76 0 0 0 4.25-2.77 11.76 11.76 0 0 0 2.77-4.25c.59-1.53 1-3.27 1.11-5.83.12-2.55.14-3.37.14-9.89 0-6.51-.02-7.33-.14-9.89-.12-2.55-.52-4.3-1.11-5.82a11.76 11.76 0 0 0-2.77-4.25 11.76 11.76 0 0 0-4.25-2.77c-1.53-.6-3.27-1-5.83-1.12A170.2 170.2 0 0 0 25 1zm0 4.32c6.4 0 7.16.03 9.69.14 2.34.11 3.6.5 4.45.83 1.12.43 1.92.95 2.76 1.8a7.43 7.43 0 0 1 1.8 2.75c.32.85.72 2.12.82 4.46.12 2.53.14 3.29.14 9.7 0 6.4-.02 7.16-.14 9.69-.1 2.34-.5 3.6-.82 4.45a7.43 7.43 0 0 1-1.8 2.76 7.43 7.43 0 0 1-2.76 1.8c-.84.32-2.11.72-4.45.82-2.53.12-3.3.14-9.7.14-6.4 0-7.16-.02-9.7-.14-2.33-.1-3.6-.5-4.45-.82a7.43 7.43 0 0 1-2.76-1.8 7.43 7.43 0 0 1-1.8-2.76c-.32-.84-.71-2.11-.82-4.45a166.5 166.5 0 0 1-.14-9.7c0-6.4.03-7.16.14-9.7.11-2.33.5-3.6.83-4.45a7.43 7.43 0 0 1 1.8-2.76 7.43 7.43 0 0 1 2.75-1.8c.85-.32 2.12-.71 4.46-.82 2.53-.11 3.29-.14 9.7-.14zm0 7.35a12.32 12.32 0 1 0 0 24.64 12.32 12.32 0 0 0 0-24.64zM25 33a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm15.68-20.8a2.88 2.88 0 1 0-5.76 0 2.88 2.88 0 0 0 5.76 0z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="2.2 2.2 19.6 19.6"><path d="M 8 3 C 5.239 3 3 5.239 3 8 L 3 16 C 3 18.761 5.239 21 8 21 L 16 21 C 18.761 21 21 18.761 21 16 L 21 8 C 21 5.239 18.761 3 16 3 L 8 3 z M 18 5 C 18.552 5 19 5.448 19 6 C 19 6.552 18.552 7 18 7 C 17.448 7 17 6.552 17 6 C 17 5.448 17.448 5 18 5 z M 12 7 C 14.761 7 17 9.239 17 12 C 17 14.761 14.761 17 12 17 C 9.239 17 7 14.761 7 12 C 7 9.239 9.239 7 12 7 z M 12 9 A 3 3 0 0 0 9 12 A 3 3 0 0 0 12 15 A 3 3 0 0 0 15 12 A 3 3 0 0 0 12 9 z"/></svg>

static/rss.svg

@@ -0,0 +1 @@
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="7.5 7.5 81 81"><g transform="translate(0,96) scale(0.1,-0.1)" stroke="none"><path d="M145 815 l-25 -24 0 -311 0 -311 25 -24 24 -25 311 0 311 0 24 25 25 24 0 311 0 311 -25 24 -24 25 -311 0 -311 0 -24 -25z m227 -106 c195 -42 348 -229 348 -426 l0 -43 -39 0 -38 0 -5 64 c-15 185 -174 336 -355 336 l-43 0 0 40 c0 40 0 40 40 40 21 0 63 -5 92 -11z m-2 -165 c104 -31 190 -151 190 -265 0 -39 0 -39 -39 -39 l-38 0 -6 55 c-11 104 -78 171 -181 182 l-56 6 0 38 c0 38 1 39 38 39 21 0 62 -7 92 -16z m-30 -204 c11 -11 20 -29 20 -40 0 -26 -34 -60 -60 -60 -26 0 -60 34 -60 60 0 11 9 29 20 40 11 11 29 20 40 20 11 0 29 -9 40 -20z"/></g></svg>

static/theme.svg

@@ -0,0 +1 @@
+<svg width="64" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-12,0)"><path d="M9.3812 2.04327C7.76937 2.50154 6.2485 3.36519 4.97948 4.63421C1.00684 8.60687 1.00684 15.0478 4.97948 19.0205C8.95213 22.9932 15.3931 22.9932 19.3657 19.0205C20.6429 17.7433 21.5095 16.211 21.9654 14.5876M9.5384 2C8.6321 5.39377 9.51018 9.16492 12.1726 11.8274C14.8351 14.4899 18.6063 15.368 22 14.4617" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" /></g><g transform="translate(12,0)"><path d="M17.5 17.5L19 19M20 12H22M6.5 6.5L5 5M17.5 6.5L19 5M6.5 17.5L5 19M2 12H4M12 2V4M12 20V22M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" /></g></svg>

static/twitter.svg

@@ -1 +1 @@
-<svg viewBox="0.9 0.5 22.8 22.8" xmlns="http://www.w3.org/2000/svg"><g><path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z" /></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="2.1 2.1 19.8 19.8"><path d="M22,3.999c-0.78,0.463-2.345,1.094-3.265,1.276c-0.027,0.007-0.049,0.016-0.075,0.023c-0.813-0.802-1.927-1.299-3.16-1.299 c-2.485,0-4.5,2.015-4.5,4.5c0,0.131-0.011,0.372,0,0.5c-3.353,0-5.905-1.756-7.735-4c-0.199,0.5-0.286,1.29-0.286,2.032 c0,1.401,1.095,2.777,2.8,3.63c-0.314,0.081-0.66,0.139-1.02,0.139c-0.581,0-1.196-0.153-1.759-0.617c0,0.017,0,0.033,0,0.051 c0,1.958,2.078,3.291,3.926,3.662c-0.375,0.221-1.131,0.243-1.5,0.243c-0.26,0-1.18-0.119-1.426-0.165 c0.514,1.605,2.368,2.507,4.135,2.539c-1.382,1.084-2.341,1.486-5.171,1.486H2C3.788,19.145,6.065,20,8.347,20 C15.777,20,20,14.337,20,8.999c0-0.086-0.002-0.266-0.005-0.447C19.995,8.534,20,8.517,20,8.499c0-0.027-0.008-0.053-0.008-0.08 c-0.003-0.136-0.006-0.263-0.009-0.329c0.79-0.57,1.475-1.281,2.017-2.091c-0.725,0.322-1.503,0.538-2.32,0.636 C20.514,6.135,21.699,4.943,22,3.999z"/></svg>