i know it is a lot

assets/css/atom.scss

@@ -0,0 +1,84 @@
+/* layout */
+.container {
+  max-width: var(--max-w);
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+/* flex & grid */
+.flex {
+  display: flex;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.items-baseline {
+  align-items: baseline;
+}
+
+/* spacing */
+$u: 0.25;
+@each $i, $class in (p, padding), (m, margin) {
+  @each $j, $size in (t, top), (r, right), (b, bottom), (l, left) {
+    @each $k in 0,1,2,3,4,5,6,7,8 {
+      .#{$i}#{$j}-#{$k} {
+        #{$class}-#{$size}: #{$u * $k}rem;
+      }
+    }
+  }
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* typography */
+$weights: (thin, 100), (extralight, 200), (light, 300), (normal, 400), 
+          (medium, 500), (semibold, 600), (bold, 700), (extrabold, 800);
+@each $k, $v in $weights {
+  .font-#{$k} {
+    font-weight: #{$v};
+  }
+}
+
+$texts: (xs, 0.75), (sm, 0.875), (base, 1), (lg, 1.125), (xl, 1.25),
+        (2xl, 1.5), (3xl, 1.875), (4xl, 2.25), (5xl, 3), (6xl, 3.75);
+@each $k, $s in $texts {
+  .text-#{$k} {
+    font-size: #{$s}rem;
+  }
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+/* interactivity */
+.cursor-pointer {
+  cursor: pointer;
+}

assets/css/main.scss

@@ -0,0 +1,58 @@
+@import "./pre.scss";
+@import "./theme.scss";
+@import "./atom.scss";
+@import "./md.scss";
+@import "./syntax.scss";
+
+:root {
+  --max-w: 640px;
+  --nav-s: 1.5rem;
+  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+@media screen and (min-width: 480px) {
+  :root {
+    --nav-s: .5rem;
+  }
+}
+
+
+html {
+  font-size: 16px;
+  -webkit-text-size-adjust: 100%;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  box-sizing: border-box;
+  border-collapse: collapse;
+}
+
+body {
+  margin: 0 16px;
+  font-family: var(--font);
+  font-weight: 400;
+  background-color: var(--back);
+  color: var(--text);
+  transition-property: background-color, border-color, color;
+  transition-duration: 0.5s;
+}
+
+main {
+  animation: showup 0.7s;
+}
+
+main p a {
+  color: var(--prime);
+}
+
+@keyframes showup {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}

assets/css/md.scss

@@ -1,6 +1,22 @@
+$heading: (h1, 2.25, 800), (h2, 2, 700), (h3, 1.75, 600), (h4, 1.5, 600),
+           (h5, 1.25, 500), (h6, 1, 400);
+@each $tag, $size, $weight in $heading {
+  .md #{$tag} {
+    font-size: #{$size}rem;
+    font-weight: $weight;
+    margin-top: 1rem;
+    margin-bottom: .75rem;
+  }
+}
+
+.md pre {
+  font-size: 13px;
+  line-height: 1.3;
+}
+
 .md blockquote {
-  background-color: rgba(148, 148, 149, 0.08) ;
+  background-color: #94949514;
-  padding: 1px 1rem;
+  padding: 1px .85em;
   border-left: 4px solid var(--prime);
   font-style: italic;
 }
@@ -26,7 +42,7 @@
 
 .md table th,
 .md table td {
-  padding: 10px 20px;
+  padding: .25rem 1rem;
 }
 
 .md img {
@@ -37,13 +53,19 @@
   overflow: auto hidden;
 }
 
+.md ul {
+  list-style: disc;
+  padding-inline-start: 22px;
+}
+
 .md ul input[type="checkbox"] {
+  margin: 0;
   margin-right: 3px;
 }
 
 .md .ul-checkbox {
   list-style: none;
-  padding-inline-start: 20px;
+  padding-inline-start: 2px;
 }
 
 .md li {
@@ -60,9 +82,9 @@
 }
 
 .md blockquote p {
-  margin: .5rem 0;
+  margin: .45rem 0;
   line-height: 1.5;
-  font-size: .9rem;
+  font-size: .95rem;
 }
 
 .md hr {
@@ -77,8 +99,3 @@
 .md p sup {
   margin-left: 4px;
 }
-
-.md a {
-  font-style: italic;
-  text-decoration: underline;
-}

assets/css/pre.scss

@@ -0,0 +1,134 @@
+/* This file is taken from https://github.com/tailwindlabs/tailwindcss/blob/master/src/css/preflight.css */
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+*/
+html {
+  --default-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.5;
+  font-family: var(--font, --default-font);
+  font-feature-settings: normal;
+}
+
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+body {
+  margin: 0;
+  line-height: inherit;
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+p,
+pre,
+figure,
+dl,
+dd,
+blockquote,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+.tag,
+p code {
+  font-size: .8em;
+  padding: 0.1em 0.3em;
+  border-radius: 1px;
+  background-color: #9999993b;
+}
+
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: var(--prime, inherit);
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  --default-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: var(--font-mono, --default-font-mono);
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+button,
+select {
+  text-transform: none;
+}
+
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(128, 128, 128, 0.7);
+}
+::-webkit-scrollbar-thumb:window-inactive {
+  background: rgba(128, 128, 128, 0.2);
+}
+
+::-webkit-scrollbar-thumb:active {
+  background-color: rgb(128, 128, 128);
+}

assets/css/syntax.scss

@@ -100,6 +100,7 @@
 .chroma .cpf {
   color: #ce9178;
 }
+
 /* LiteralNumber */
 .chroma .m,
 .chroma .mb,
@@ -139,4 +140,3 @@
   display: block;
   background-color: #585858;
 }
-

assets/css/theme.scss

@@ -0,0 +1,13 @@
+.light {
+  --prime: #1691b6;
+  --grid: #e1e1e1;
+  --back: #fff;
+  --text: #222;
+}
+
+.dark {
+  --prime: #1691b6;
+  --back: #181818;
+  --text: silver;
+  --grid: #555;
+}

assets/js/friends.js

@@ -31,7 +31,7 @@ function rss(xml) {
 
     // innsert dom
     const div = document.createElement('div')
-    div.className = 'flex justify-between sm:flex-col-reverse my-4 sm:mb-6 sm:mt-3'
+    div.className = 'flex justify-between'
     div.innerHTML = template(link, title, date)
     dom.appendChild(div)
 
@@ -52,6 +52,6 @@ function template() {
   const a = arguments
   return `
     <a href=${a[0]}>${a[1]}</a>
-    <div class="sm:mb-2 sm:text-xs">${format(a[2])}</div>
+    <div>${format(a[2])}</div>
   `.trim()
 }

assets/js/style.js

@@ -5,5 +5,5 @@ document.querySelectorAll('.md ul').forEach(v => {
   }
 });
 
-// use custom font family
+// // use custom font family
-document.querySelector('body').style.setProperty('--global-font-family', '{{ .Site.Params.globalFontFamily }}');
+// document.querySelector('body').style.setProperty('--global-font-family', '{{ .Site.Params.globalFontFamily }}');

assets/sass/atom.scss

@@ -1,186 +0,0 @@
-* {
-  line-height: 1;
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
-  outline: none;
-}
-
-header nav a {
-  line-height: 1.8;
-}
-
-$unit: 0.25rem;
-$scales: 0, 1, 2, 3, 4, 5, 6, 7, 8, 1.5;
-$screens: (
-  sm\:: 640px,
-);
-
-@mixin scale_with_prefix($prefix, $scale) {
-  $size: $scale * $unit;
-  .#{$prefix}mt-#{$scale} {
-    margin-top: $size;
-  }
-  .#{$prefix}mb-#{$scale} {
-    margin-bottom: $size;
-  }
-  .#{$prefix}ml-#{$scale} {
-    margin-left: $size;
-  }
-  .#{$prefix}mr-#{$scale} {
-    margin-right: $size;
-  }
-  .#{$prefix}my-#{$scale} {
-    margin-top: $size;
-    margin-bottom: $size;
-  }
-  .#{$prefix}mx-#{$scale} {
-    margin-left: $size;
-    margin-right: $size;
-  }
-
-  .#{$prefix}pb-#{$scale} {
-    padding-bottom: $size;
-  }
-  .#{$prefix}py-#{$scale} {
-    padding-top: $size;
-    padding-bottom: $size;
-  }
-}
-
-@each $scale in $scales {
-  @include scale_with_prefix("", $scale);
-
-  @each $screen, $size in $screens {
-    @media (max-width: $size) {
-      @include scale_with_prefix($screen, $scale);
-    }
-  }
-}
-
-@mixin style_with_prefix($prefix) {
-  .#{$prefix}block {
-    display: block;
-  }
-  .#{$prefix}flex {
-    display: flex;
-  }
-  .#{$prefix}flex-row {
-    flex-direction: row;
-  }
-  .#{$prefix}flex-col {
-    flex-direction: column;
-  }
-  .#{$prefix}flex-col-reverse {
-    flex-direction: column-reverse;
-  }
-  .#{$prefix}justify-between {
-    justify-content: space-between;
-  }
-  .#{$prefix}flex-nowrap {
-    flex-wrap: nowrap;
-  }
-  .#{$prefix}items-center {
-    align-items: center;
-  }
-  .#{$prefix}self-start {
-    align-self: flex-start;
-  }
-  .#{$prefix}hidden {
-    display: none;
-  }
-  .#{$prefix}text-xs {
-    font-size: .8rem;
-  }
-  .#{$prefix}text-sm {
-    font-size: .9rem;
-  }
-  .#{$prefix}text-md {
-    font-size: 1.25rem;
-  }
-  .#{$prefix}text-xl {
-    font-size: 1.5rem;
-  }
-  .#{$prefix}text-2xl {
-    font-size: 1.75rem;
-  }
-  .#{$prefix}text-3xl {
-    font-size: 2rem;
-  }
-  .#{$prefix}text-4xl {
-    font-size: 2.25rem;
-  }
-}
-
-@each $screen, $size in $screens {
-  @media (max-width: $size) {
-    @include style_with_prefix($screen);
-  }
-}
-
-@include style_with_prefix("");
-
-
-// border width
-.bw-0 {
-  border-width: 0;
-}
-
-// width
-.min-w-32 {
-  min-width: 0.25 * 32rem;
-}
-
-.whitespace-nowrap {
-  white-space: nowrap;
-}
-
-.overflow-x-auto {
-  overflow-x: auto;
-}
-
-.overflow-y-hidden {
-  overflow-y: hidden;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.not-first\:ml-3 {
-  &:not(:first-child) {
-    margin-left: 0.75rem;
-  }
-}
-
-
-/* font weight */
-.font-thin {
-  font-weight: 100;
-}
-
-.font-extralight {
-  font-weight: 200;
-}
-
-.font-light {
-  font-weight: 300;
-}
-
-.font-normal {
-  font-weight: 400;
-}
-
-.font-medium {
-  font-weight: 500;
-}
-
-.font-semibold {
-  font-weight: 600;
-}
-
-.font-bold {
-  font-weight: 700;
-}
-
-.text-left {
-  text-align: left;
-}

assets/sass/main.scss

@@ -1,148 +0,0 @@
-@import "atom.scss";
-@import "markdown.scss";
-@import "syntax.scss";
-@import "toc.scss";
-
-:root {
-  --prime: #0fa0ce;
-  --grid: #e1e1e1;
-  --back: #fff;
-  --text: #222;
-  --tag: #333;
-
-  --mobile-w: 640px;
-
-  --global-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-}
-
-html.dark {
-  --back: #181818;
-  --text: silver;
-  --grid: #555;
-  --tag: #999;
-
-  --ovo-ft: var(--text);
-  --ovo-bdr: var(--grid);
-  --ovo-bg: var(--back);
-  --ovo-bg-hvr: #555;
-  --ovo-tag: #30363d;
-}
-
-body {
-  font-family: var(--global-font-family);
-  font-size: 16px;
-  font-weight: 400;
-  color: var(--text);
-  background-color: var(--back);
-  transition-property: background-color, border-color, color;
-  transition-duration: 0.5s;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5 {
-  line-height: 1.5;
-}
-
-p {
-  line-height: 1.6;
-  text-align: justify;
-}
-
-hr {
-  border-width: 0;
-  border-top: 1px solid var(--grid);
-}
-
-a {
-  line-height: 1.5;
-  text-decoration: none;
-  color: inherit;
-}
-
-a:hover {
-  color: var(--prime);
-}
-
-main {
-  animation: showup 0.7s;
-}
-
-p a {
-  // font-style: italic;
-  text-decoration: underline;
-}
-
-footer a {
-  font-style: unset;
-  text-decoration: none;
-}
-
-header nav {
-  color: var(--tag);
-}
-
-header ul {
-  padding: 0;
-  list-style: none;
-}
-
-pre,
-code {
-  overflow: auto hidden;
-  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
-  font-size: 13px;
-  line-height: 1.3;
-}
-
-.minima-tag,
-p code {
-  background-color: var(--grid);
-  padding: 0.2em 0.4em;
-  border-radius: 1px;
-}
-
-::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: rgba(128, 128, 128, 0.7);
-}
-::-webkit-scrollbar-thumb:window-inactive {
-  background: rgba(128, 128, 128, 0.2);
-}
-
-::-webkit-scrollbar-thumb:active {
-  background-color: rgb(128, 128, 128);
-}
-
-h1::-webkit-scrollbar,
-nav::-webkit-scrollbar {
-  display: none;
-  width: 0;
-}
-
-@keyframes showup {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.home-intro {
-  line-height: 1.65;
-}
-
-.container {
-  max-width: var(--mobile-w);
-  margin: 0 auto;
-}

assets/sass/toc.scss

@@ -1,89 +0,0 @@
-details.toc {
-  position: sticky;
-  top: 0;
-  background-color: var(--back);
-  transition: .5s all;
-}
-
-details.toc summary {
-  position: relative;
-  width: fit-content;
-  cursor: pointer;
-  background-color: var(--back);
-  transition: .5s all;
-}
-
-details.toc div {
-  background-color: var(--back);
-  transition: .5s all;
-}
-
-details.toc ul {
-  list-style-type: none;
-  padding-inline-start: 1em;
-  margin: 0;
-}
-
-details.toc ul > li {
-  margin: 1em 0;
-}
-
-details.toc-bar,
-details.toc-lines {
-  & summary {
-    padding-right: 0.5em;
-    list-style: none;
-  }
-  & summary::-webkit-details-marker {
-    display: none;
-  }
-  & div {
-    padding-top: 1em;
-  }
-}
-
-details.toc-bar {
-  top: 1rem;
-  background-color: transparent;
-
-  & div {
-    top: -1em;
-    padding-top: 2em;
-    background-color: var(--back);
-  }
-
-  & summary {
-    --toc-bar-ht: 4px;
-    --toc-bar-wd: 8%;
-    width: var(--toc-bar-wd);
-    height: var(--toc-bar-ht);
-    margin-left: calc(50% - var(--toc-bar-wd) / 2);
-    border-radius: calc(var(--toc-bar-ht) / 2);
-    background-color: var(--text);
-    box-shadow: var(--back) 0 0 8px 8px;
-  }
-}
-
-details.toc-default,
-details.toc-lines {
-  & summary {
-    padding-top: 1em;
-  }
-}
-
-details.toc-lines {
-  & summary::before {
-    content: "≡";
-    font-size: 1.5em;
-    position: relative;
-    top: 0;
-  }
-}
-
-details[open] {
-  &.toc-lines summary::before {
-    content: "×";
-    font-size: 1.7em;
-    top: -4px;
-  }
-}

data/svg.toml

@@ -1,5 +1,5 @@
 github = '<svg fill="#63636f" width="18" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>'
 linkedin = '<svg fill="#0073b1" width="18" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>'
 twitter = '<svg fill="#1da1f2" width="18" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>'
+email = '<svg fill="#63636f" width="22" height="22" viewBox="0 0 24 24"><path d="M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm9.06 8.683L5.648 6.238L4.353 7.762l7.72 6.555l7.581-6.56l-1.308-1.513l-6.285 5.439z"/></svg>'
 rss = '<svg fill="#63636f" t="1626591563876" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1984" width="18" height="16"><path d="M128 768a128 128 0 1 0 0 256 128 128 0 0 0 0-256zM0 368v176c265.104 0 480 214.912 480 480h176c0-362.32-293.696-656-656-656zM0 0v176c468.336 0 848 379.664 848 848h176C1024 458.464 565.536 0 0 0z" p-id="1985"></path></svg>'
-toc = '<svg fill="var(--text)" width="22" height="22" t="1628036980313" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1020"><path d="M811.6 264.1H378.2c-19.8 0-36-16.2-36-36s16.2-36 36-36h433.5c19.8 0 36 16.2 36 36-0.1 19.8-16.3 36-36.1 36zM811.6 522.1H378.2c-19.8 0-36-16.2-36-36s16.2-36 36-36h433.5c19.8 0 36 16.2 36 36-0.1 19.8-16.3 36-36.1 36zM811.6 780.1H378.2c-19.8 0-36-16.2-36-36s16.2-36 36-36h433.5c19.8 0 36 16.2 36 36-0.1 19.8-16.3 36-36.1 36z" p-id="1021"></path><path d="M210.2 229m-37.9 0a37.9 37.9 0 1 0 75.8 0 37.9 37.9 0 1 0-75.8 0Z" p-id="1022"></path><path d="M210.2 487m-37.9 0a37.9 37.9 0 1 0 75.8 0 37.9 37.9 0 1 0-75.8 0Z" p-id="1023"></path><path d="M210.2 745m-37.9 0a37.9 37.9 0 1 0 75.8 0 37.9 37.9 0 1 0-75.8 0Z" p-id="1024"></path></svg>'

exampleSite/config.toml

@@ -6,7 +6,7 @@ googleAnalytics = ""
 
 # paginate decides the number of the newest posts
 # that'll be shown on the home page.
-paginate = 6
+paginate = 12
 
 # theme is the name of the hugo theme you're gonna use,
 # `hugo-theme-minima` is put here only for debuging,
@@ -16,8 +16,8 @@ theme = "hugo-theme-minima"
 # Author has some of your information to be shown on the home page.
 [author]
 name = "Mivinci"
-slogon = "A tech lover from Earth 🌍"
+slogon = "Living on Earth 🌍"
-description = "This is Minima, a clean and minimal Hugo theme porting from the [Hexo Minima](https://github.com/adisaktijrs/hexo-theme-minima). Except for everything from Hexo Minima like dark/light mode, Hugo Minima supports KaTeX, Mermaid, comments and some taxonomies like categories, series and tags. I created this using SASS, VanillaJS and the most importantly, Hugo. 😁"
+description = "This is Minima, a clean and minimal Hugo theme porting from [Hexo Minima](https://github.com/adisaktijrs/hexo-theme-minima). It has supported multiple color themes, math formulas, flowcharts, syntax highlighting, and of course taxonomies like categories, tags, and series."
 
 
 [params]
@@ -37,16 +37,13 @@ switch = ["🌚", "🌝"]
 defaultTheme = "system"
 # If set true, date of posts will be shown in the homepage.
 displayDate = true
+#
+displayDescription = true
 # If set true, users can select text from your post.
 selectable = true
-# Custom global font. notice: `globalFontFamily` won't be working
-# on texts in some special positions like on titles
-globalFontFamily = ""
 # If set true, all your posts will use the chosen comment plugin
 # except those with a `comment: false` specified in their front-matter
 commentOnAllPosts = true
-# toc decides the shape of the toc button. e.g. default, lines, bar
-toc = "lines"
 
 recent = "Recent Posts"
 older = "Older Posts"
@@ -85,18 +82,18 @@ placeholder = ""
 # in that file, each line must be formatted as `name = '<svg>'`
 # where `<svg>` is the svg code.
 [[params.social]]
-name = "github"  
-url = "https://github.com/mivinci/hugo-theme-minima"
-svg = ""
-[[params.social]]
-name = "linkedin"
-url = "https://linkedin/in/leonard-mivinci-63895317a"
-svg = ""
-[[params.social]]
 name = "twitter"
 url = "https://twitter.com/realmivinci"
 svg = ""
 [[params.social]]
+name = "email"
+url = "mailto:mivinci@qq.com"
+svg = ""
+[[params.social]]
+name = "github"  
+url = "https://github.com/mivinci/hugo-theme-minima"
+svg = ""
+[[params.social]]
 name = "rss"
 url = "/index.xml"
 svg = ""

exampleSite/content/chinese.md

@@ -1,17 +0,0 @@
----
-author: XJJ
-title: 中文测试
-date: 2021-07-16T10:52:59+08:00
-description: 
-comment: false
----
-
-## 二级标题
-
-这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文
-
-### 三级标题
-
-这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文这是测试正文
-
-#### 四级标题

exampleSite/content/instruction.md

@@ -3,6 +3,9 @@ author: Mivinci
 title: Instruction
 date: 2021-07-19T10:52:59+08:00
 description: A Clean and minimal Hugo theme porting from the [Hexo Minima](https://github.com/adisaktijrs/hexo-theme-minima). [Click me](https://h.xjj.pub/) to take a look.
+tags:
+    - Hugo
+    - Minima
 math: true
 comment: true
 ---

exampleSite/content/markdown-syntax.md

@@ -3,7 +3,6 @@ author: "Hugo Authors"
 title: "Markdown Syntax Guide"
 date: "2021-07-18T10:52:59+08:00"
 description: "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
-toc: true
 categories: ["Markdown"]
 ---
 

layouts/_default/baseof.html

@@ -2,7 +2,7 @@
 <html lang="en">
 {{ partial "head.html" . }}
 
-<body class="sm:mx-5 sm:my-0">
+<body>
   {{ partial "header.html" . }}
 
   {{ block "main" . }} {{ end }}

layouts/_default/list.html

@@ -1,14 +1,14 @@
 {{ define "main" }}
-<main class="container">
+<main class="container mx-auto">
-	{{ if isset .Data "Term" }}
+  {{ if isset .Data "Term" }}
-	<h2 class="my-8">{{ .Data.Singular | title }} - "{{ .Data.Term }}"</h2>
+  <h2 class="text-4xl mt-8 mb-8">{{ .Data.Singular | title }} - "{{ .Data.Term }}"</h2>
-	{{ else }}
+  {{ else }}
-	<h2 class="my-8">{{ .Title }}</h2>
+  <h2 class="text-4xl mt-8 mb-8">{{ .Title }}</h2>
-	{{ end }}
+  {{ end }}
-	<div class="mt-8">
+  <div class="mt-8">
-		{{ range .Data.Pages }}
+    {{ range .Data.Pages }}
-		{{ partial "list.html" . }}
+    {{ partial "item.html" . }}
-		{{ end }}
+    {{ end }}
-	</div>
+  </div>
 </main>
 {{ end }}

layouts/_default/single.html

@@ -1,24 +1,21 @@
 {{ define "main" }}
-<div class="container">
+<div class="container mx-auto">
-  {{ if .Params.toc }}
+  <h1 class="text-4xl font-extrabold mt-6 mb-6">{{ .Title }}</h1>
-  {{ partial "toc.html" . }}
+  <div class="mb-3 text-xs flex justify-between ">
-  {{ end }}
-  <h1 class="mt-6 mb-6">{{ .Title }}</h1>
-  <div class="mb-3 text-xs flex justify-between sm:flex-col">
     <div>
       {{ if .Site.Params.displayDate }}
       Posted at &mdash; {{ dateFormat .Site.Params.timeformat .Date }}
       {{ end }}
       {{ if .Draft }}
-      <span class="ml-3 minima-tag">
+      <span class="ml-3 tag">
         DRAFT
       </span>
       {{ end }}
     </div>
     {{ if .Params.tags }}
-    <div class="sm:mt-4">
+    <div>
       {{ range .Params.tags }}
-      <a class="not-first:ml-3" href="/tags/{{ . }}">#{{ . }}</a>
+      <a class="ml-1" href="/tags/{{ . }}">#{{ . }}</a>
       {{ end }}
     </div>
     {{ end }}

layouts/_default/terms.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
-<main class="container">
+<main class="container mx-auto">
-  <h2>{{ .Title }}</h2>
+  <h2 class="text-3xl font-bold">{{ .Title }}</h2>
   <nav class="flex flex-col">
     {{ $data := .Data }}
     {{ range $key, $value := .Data.Terms.ByCount }}

layouts/index.html

@@ -1,22 +1,22 @@
 {{ define "main" }}
-<main class="container">
+<main class="container mx-auto">
-  <h2 class="mt-8 mb-1">{{ .Site.Params.iam }} {{ .Site.Author.name }}</h2>
+  <h2 class="mt-8 text-3xl font-bold">{{ .Site.Params.iam }} {{ .Site.Author.name }}</h2>
-  <p class="my-0">{{ .Site.Author.slogon }}</p>
+  <p class="mt-0 mb-0">{{ .Site.Author.slogon }}</p>
-  <p class="my-3 home-intro">{{ .Site.Author.description | markdownify | safeHTML }}</p>
+  <p class="mt-3 mb-3 home-intro">{{ .Site.Author.description | markdownify | safeHTML }}</p>
   {{ if eq .Paginator.PageNumber 1 }}
-  <h3 class="mt-6 mb-4">{{ .Site.Params.recent }}</h3>
+  <h3 class="mt-6 mb-4 text-2xl font-bold">{{ .Site.Params.recent }}</h3>
   {{ else }}
-  <h3 class="mt-6 mb-4">{{ .Site.Params.older }}</h3>
+  <h3 class="mt-6 mb-4 text-2xl font-bold">{{ .Site.Params.older }}</h3>
   {{ end }}
   <div>
     {{ $paginator := .Paginate (where .Site.RegularPages "Kind" "page") }}
     {{ range $paginator.Pages }}
-    {{ partial "list.html" . }}
+    {{ partial "item.html" . }}
     {{ end }}
     {{ partial "paginator.html" . }}
   </div>
   {{ if .Site.Params.friends.feeds }}
-  <h3 class="my-6">{{ .Site.Params.friends.title }}</h3>
+  <h3 class="mt-6 mb-6 text-2xl font-semibold">{{ .Site.Params.friends.title }}</h3>
   <div id="friends"></div>
   {{ end }}
 </main>

layouts/partials/disqus.html

@@ -1,4 +1,4 @@
-<div id="disqus_thread" class="my-8"></div>
+<div id="disqus_thread" class="mt-8 mb-8"></div>
 <script type="text/javascript">
   (function () {
     // Don't ever inject Disqus on localhost--it creates unwanted

layouts/partials/footer.html

@@ -1,20 +1,22 @@
-<footer class="mt-8">
+<footer class="mt-8 mb-8">
-  <div class="container mt-8 flex sm:flex-col-reverse justify-between items-center">
+  <div class="container mx-auto">
-    <p class="mt-0 text-sm">
+    <div class="mt-8 flex justify-between items-center">
-      {{ .Site.Copyright }} |
+      <p class="mt-0 text-sm">
-      <a href="https://gohugo.io" target="_blank" rel="noopener noreferrer">Hugo</a> on
+        {{ .Site.Copyright }} |
-      <a href="https://github.com/mivinci/hugo-theme-minima" target="_blank" rel="noopener noreferrer">Minima</a>
+        <a href="https://gohugo.io" target="_blank" rel="noopener noreferrer">Hugo</a> on
-    </p>
+        <a href="https://github.com/mivinci/hugo-theme-minima" target="_blank" rel="noopener noreferrer">Minima</a>
-    <p class="flex items-center mt-0">
+      </p>
-      {{ range $_, $key := .Site.Params.Social }}
+      <p class="flex items-center mt-0">
-        <a class="icon mx-2" href="{{ $key.url }}" title="{{ $key.name }}">
+        {{ range $_, $key := .Site.Params.Social }}
-        {{ if $key.svg }}
+          <a class="icon ml-1 mr-1" href="{{ $key.url }}" title="{{ $key.name }}">
-          {{ $key.svg | safeHTML }}
+          {{ if $key.svg }}
-        {{ else }}
+            {{ $key.svg | safeHTML }}
-          {{ index $.Site.Data.svg $key.name | safeHTML }}
+          {{ else }}
+            {{ index $.Site.Data.svg $key.name | safeHTML }}
+          {{ end }}
+          </a>
         {{ end }}
-        </a>
+      </p>
-      {{ end }}
+    </div>
-    </p>
   </div>
 </footer>

layouts/partials/head.html

@@ -17,7 +17,7 @@
   <link rel="shortcut icon" href="{{ $favicon | relURL }}" type="image/x-icon" />
   {{ $hash := now.Unix }}
   {{ $options := (dict "targetPath" (printf `minima.%d.css` $hash) "outputStyle" "compressed" "enableSourceMap" true) }}
-  {{ $style := resources.Get "sass/main.scss" | resources.ToCSS $options }}
+  {{ $style := resources.Get "css/main.scss" | resources.ToCSS $options }}
   <link rel="stylesheet" href="{{ $style.RelPermalink }}">
   {{ $options = (dict "targetPath" (printf `minima.%d.js` $hash) "minify" true) }}
   {{ $js := resources.Get "js/main.js" | js.Build $options | resources.ExecuteAsTemplate (printf `minima.%d.js` $hash) . }}
@@ -36,7 +36,7 @@
     if (!('theme' in localStorage)) {
       const default_theme = '{{ .Site.Params.defaultTheme }}';
       
-      // For the first time entering this site, use the theme picked by the author.
+      // For the first time entering this site, use the theme specified in the configuration.
       if (default_theme === 'dark' || default_theme === 'light') {
         theme_2b_used = default_theme;
       }

layouts/partials/header.html

@@ -1,21 +1,21 @@
-<header class="sm:my-3 my-6">
+<header class="mt-3 mb-6">
-  <div class="container">
+  <div class="container mx-auto">
     <nav class="flex justify-between items-center">
       <div class="flex items-center">
         {{ if .Site.Params.brand }}
         <div class="mr-3 text-3xl"><a href="/">{{ .Site.Params.brand }}</a></div>
         {{ end }}
-        <div id="theme-switcher" class="text-left text-4xl cursor-pointer">{{ index .Site.Params.switch 1 }}</div>
+        <div id="theme-switcher" class="text-2xl cursor-pointer">{{ index .Site.Params.switch 1 }}</div>
       </div>
       <ul class="flex items-center font-medium
         whitespace-nowrap overflow-x-auto overflow-y-hidden">
         {{ range .Site.Menus.main }}
-        <li class="mx-2"><a href="{{ .URL | absLangURL }}">{{ .Name }}</a></li>
+        <li class="ml-1 mr-1"><a href="{{ .URL | absLangURL }}">{{ .Name }}</a></li>
         {{ end }}
       </ul>
-      <ul class="flex item-center text-sm font-bold">
+      <ul class="flex item-center text-xs font-bold">
         {{ range $.Site.Home.AllTranslations }}
-        <li class="ml-3"><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
+        <li class="ml-2"><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
         {{ end}}
       </ul>
     </nav>

layouts/partials/item.html

@@ -0,0 +1,17 @@
+<div>
+  <div class="flex justify-between">
+    {{ if .Page.Params.link }}
+    <a class="font-bold" href="{{ .Page.Params.link }}">{{ .Title }}</a>
+    {{ else }}
+    <a class="font-bold" href="{{ .RelPermalink }}">{{ .Title }}</a>
+    {{ end }}
+    {{ if .Site.Params.displayDate }}
+    <div class="text-xs font-bold">{{ dateFormat .Site.Params.timeformat .Date }}</div>
+    {{ end }}
+  </div>
+  {{ if .Site.Params.displayDescription }}
+  <p class="text-sm mb-2">
+    {{ .Description | markdownify | safeHTML }}
+  </p>
+  {{ end }}
+</div>

layouts/partials/list.html

@@ -1,10 +0,0 @@
-<div class="flex justify-between sm:flex-col my-3 sm:mb-4 sm:mt-3">
-{{ if .Page.Params.link }}
-<a class="" href="{{ .Page.Params.link }}">{{ .Title }}</a>
-{{ else }}
-<a class="" href="{{ .RelPermalink }}">{{ .Title }}</a>
-{{ end }}
-{{ if .Site.Params.displayDate }}
-  <div class="sm:mt-1 sm:text-xs">{{ dateFormat .Site.Params.timeformat .Date }}</div>
-{{ end }}
-</div>

layouts/partials/ovo.html

@@ -1,4 +1,4 @@
-<div id="ovo_thread" class="my-8">
+<div id="ovo_thread" class="mt-4 mb-4">
   <div class="flex flex-col items-center">评论插件加载中 OvO</div>
 </div>
 <link rel="stylesheet" href="//unpkg.com/@ovojs/ovo/dist/style.css">

layouts/partials/toc.html

@@ -1,26 +0,0 @@
-{{ if eq .Site.Params.toc "default" }}
-<details class="toc toc-default">
-  <summary></summary>
-  <div class="pb-1">
-    {{ .TableOfContents }}
-  </div>
-</details>
-{{ end }}
-
-{{ if eq .Site.Params.toc "bar" }}
-<details class="toc toc-bar">
-  <summary></summary>
-  <div class="pb-1">
-    {{ .TableOfContents }}
-  </div>
-</details>
-{{ end }}
-
-{{ if eq .Site.Params.toc "lines" }}
-<details class="toc toc-lines">
-  <summary></summary>
-  <div class="pb-1">
-    {{ .TableOfContents }}
-  </div>
-</details>
-{{ end }}