add language navigator and fix some styles

assets/sass/atom.scss

@@ -110,13 +110,15 @@ $screens: (
   }
 }
 
-@include style_with_prefix("");
 @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;
@@ -147,4 +149,38 @@ $screens: (
   &: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

@@ -4,38 +4,36 @@
 @import "toc.scss";
 
 :root {
-  --pm: #0fa0ce;
-  --bd: #e1e1e1;
-  --bg: #fff;
-  --ft: #222;
+  --prime: #0fa0ce;
+  --grid: #e1e1e1;
+  --back: #fff;
+  --text: #222;
   --tag: #333;
 
-  --w-mobile: 640px;
+  --mobile-w: 640px;
 
   --global-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
 html.dark {
-  --bg: #181818;
-  --ft: silver;
-  --bd: #555;
+  --back: #181818;
+  --text: silver;
+  --grid: #555;
   --tag: #999;
 
-  --ovo-ft: var(--ft);
-  --ovo-bdr: var(--bd);
-  --ovo-bg: var(--bg);
+  --ovo-ft: var(--text);
+  --ovo-bdr: var(--grid);
+  --ovo-bg: var(--back);
   --ovo-bg-hvr: #555;
   --ovo-tag: #30363d;
 }
 
 body {
-  max-width: var(--w-mobile);
-  margin: 3rem auto 0;
   font-family: var(--global-font-family);
   font-size: 16px;
   font-weight: 400;
-  color: var(--ft);
-  background-color: var(--bg);
+  color: var(--text);
+  background-color: var(--back);
   transition-property: background-color, border-color, color;
   transition-duration: 0.5s;
 }
@@ -45,8 +43,6 @@ h2,
 h3,
 h4,
 h5 {
-  font-family: "Noto Serif SC", 'Times New Roman', Times, sans-serif;
-  font-weight: 700;
   line-height: 1.5;
 }
 
@@ -57,7 +53,40 @@ p {
 
 hr {
   border-width: 0;
-  border-top: 1px solid var(--bd);
+  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,
@@ -70,39 +99,11 @@ code {
 
 .minima-tag,
 p code {
-  background-color: var(--bd);
+  background-color: var(--grid);
   padding: 0.2em 0.4em;
   border-radius: 1px;
 }
 
-a {
-  line-height: 1.5;
-  text-decoration: none;
-  color: inherit;
-}
-
-a:hover {
-  color: var(--pm);
-}
-
-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);
-}
-
 ::-webkit-scrollbar {
   width: 4px;
   height: 4px;
@@ -139,4 +140,9 @@ nav::-webkit-scrollbar {
 
 .home-intro {
   line-height: 1.65;
+}
+
+.container {
+  max-width: var(--mobile-w);
+  margin: 0 auto;
 }

assets/sass/markdown.scss

@@ -1,7 +1,7 @@
 .md blockquote {
   background-color: rgba(148, 148, 149, 0.08) ;
   padding: 1px 1rem;
-  border-left: 4px solid var(--pm);
+  border-left: 4px solid var(--prime);
   font-style: italic;
 }
 
@@ -16,12 +16,12 @@
 }
 
 .md table thead {
-  border-top: 2px solid var(--ft);
-  border-bottom: 1px solid var(--ft);
+  border-top: 2px solid var(--text);
+  border-bottom: 1px solid var(--text);
 }
 
 .md table tbody {
-  border-bottom: 2px solid var(--ft);
+  border-bottom: 2px solid var(--text);
 }
 
 .md table th, 

assets/sass/toc.scss

@@ -1,7 +1,7 @@
 details.toc {
   position: sticky;
   top: 0;
-  background-color: var(--bg);
+  background-color: var(--back);
   transition: .5s all;
 }
 
@@ -9,12 +9,12 @@ details.toc summary {
   position: relative;
   width: fit-content;
   cursor: pointer;
-  background-color: var(--bg);
+  background-color: var(--back);
   transition: .5s all;
 }
 
 details.toc div {
-  background-color: var(--bg);
+  background-color: var(--back);
   transition: .5s all;
 }
 
@@ -49,7 +49,7 @@ details.toc-bar {
   & div {
     top: -1em;
     padding-top: 2em;
-    background-color: var(--bg);
+    background-color: var(--back);
   }
 
   & summary {
@@ -59,8 +59,8 @@ details.toc-bar {
     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(--ft);
-    box-shadow: var(--bg) 0 0 8px 8px;
+    background-color: var(--text);
+    box-shadow: var(--back) 0 0 8px 8px;
   }
 }