style improvement

assets/js/main.js

@@ -0,0 +1,2 @@
+import "./theme";
+import "./style";

assets/js/style.js

@@ -0,0 +1,6 @@
+// This file contains some codes to fix style of elements under `.md`
+document.querySelectorAll('.md ul').forEach(v => {
+  if (/<li><input .+>.+<\/li>/.test(v.innerHTML)) {
+    v.classList.add('ul-checkbox');
+  }
+});

assets/js/theme.js

@@ -0,0 +1,16 @@
+const light = '🌝', dark = '🌚';
+const LIGHT = 'light', DARK = 'dark';
+const themeSwitcher = document.getElementById('theme-switcher');
+
+themeSwitcher.innerHTML = localStorage.theme === LIGHT ? light : dark;
+
+themeSwitcher.addEventListener('click', function () {
+  const currentTheme = localStorage.theme,
+    newTheme = currentTheme === LIGHT ? DARK : LIGHT,
+    { classList } = document.querySelector('html'),
+    text = newTheme === LIGHT ? light : dark;
+  classList.remove(currentTheme);
+  classList.add(newTheme);
+  localStorage.theme = newTheme;
+  themeSwitcher.innerHTML = text;
+});

assets/sass/main.scss

@@ -1,3 +1,125 @@
+@import "normalize.scss";
 @import "sketch.scss";
 @import "markdown.scss";
-@import "syntax.scss";
+@import "syntax.scss";
+
+:root {
+  --pm: #0fa0ce;
+  --bd: #e1e1e1;
+  --bg: #fff;
+  --ft: #222;
+  --tag: #333;
+
+  --w-mobile: 640px;
+}
+
+html.dark {
+  --bg: #262d33;
+  --ft: #c5c4c4;
+  --bd: #555;
+  --tag: #999;
+
+  --ovo-ft: var(--ft);
+  --ovo-bdr: var(--bd);
+  --ovo-bg: var(--bg);
+  --ovo-bg-hvr: #555;
+  --ovo-tag: #30363d;
+}
+
+body {
+  font-family: Helvetica, sans-serif;
+  max-width: var(--w-mobile);
+  margin: 50px auto 0;
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--ft);
+  background-color: var(--bg);
+  transition-property: background-color, border-color, color;
+  transition-duration: 0.5s;
+  @media (max-width: 640px) {
+    margin: 1em 2em;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-family: "Noto Serif SC", "Times New Roman", sans-serif;
+  font-weight: 700;
+  line-height: 1.5;
+}
+
+p {
+  margin-top: 0;
+  line-height: 1.5;
+  text-align: left;
+}
+
+hr {
+  margin: 30px 0;
+  border-width: 0;
+  border-top: 1px solid var(--bd);
+}
+
+pre,
+code {
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 13px;
+}
+
+p code {
+  background-color: var(--bd);
+  padding: 0.2em 0.4em;
+  border-radius: 1px;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:not(.icon) {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-color: var(--pm);
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, var(--pm) 50%);
+  background-size: 100% 200%;
+  transition: background-position 0.2s ease-in-out;
+}
+
+a:not(.icon):hover,
+a:not(.icon):focus {
+  background-position: 0 100%;
+  color: #fff;
+}
+
+a.icon:hover {
+  transform: translateY(-5px);
+  transition: transform 0.3s ease-in-out;
+}
+
+main {
+  animation: showup 0.7s;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-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);
+}
+
+.nowrap::-webkit-scrollbar {
+  display: none;
+  width: 0;
+}

assets/sass/markdown.scss

@@ -1,5 +1,4 @@
 .md blockquote {
-  font-family: 'Inter';
   background-color: rgba(148, 148, 149, 0.08) ;
   margin: 1.5em 0px;
   padding: 1.1em 20px 1px 20px;
@@ -17,13 +16,14 @@
   overflow: auto;
 }
 
-.md table th {
-  background-color: var(--bg);
+.md table thead {
+  background-color: var(--bd);
 }
 
-.md table th, table td {
+.md table th, 
+.md table td {
   padding: 10px 20px;
-  border: 1px solid var(--bd);
+  border-bottom: 1px solid var(--bd);
 }
 
 .md img {
@@ -37,4 +37,17 @@
 
 .md .katex {
   overflow: auto hidden;
+}
+
+.md ul input[type="checkbox"] {
+  margin-right: 3px;
+}
+
+.md .ul-checkbox {
+  list-style: none;
+  padding-inline-start: 20px;
+}
+
+.md .highlight {
+  margin: 1em 0;
 }

assets/sass/normalize.scss

@@ -0,0 +1,351 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+     ========================================================================== */
+
+/**
+   * Remove the margin in all browsers.
+   */
+
+body {
+  margin: 0;
+}
+
+/**
+   * Render the `main` element consistently in IE.
+   */
+
+main {
+  display: block;
+}
+
+/**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+     ========================================================================== */
+
+/**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+     ========================================================================== */
+
+/**
+   * Remove the gray background on active links in IE 10.
+   */
+
+a {
+  background-color: transparent;
+}
+
+/**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+   * Add the correct font size in all browsers.
+   */
+
+small {
+  font-size: 80%;
+}
+
+/**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+     ========================================================================== */
+
+/**
+   * Remove the border on images inside links in IE 10.
+   */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+     ========================================================================== */
+
+/**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+   * Remove the inner border and padding in Firefox.
+   */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+   * Restore the focus styles unset by the previous rule.
+   */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+   * Correct the padding in Firefox.
+   */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+     ========================================================================== */
+
+/*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+
+details {
+  display: block;
+}
+
+/*
+   * Add the correct display in all browsers.
+   */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+     ========================================================================== */
+
+/**
+   * Add the correct display in IE 10+.
+   */
+
+template {
+  display: none;
+}
+
+/**
+   * Add the correct display in IE 10.
+   */
+
+[hidden] {
+  display: none;
+}

assets/sass/sketch.scss

@@ -1,282 +1,162 @@
-:root {
-    --pm: #0fa0ce;
-    --bd: #e1e1e1;
-    --bg: #fff;
-    --ft: #222;
-    --tag: #333;
-  
-    --w-mobile: 640px;
-  }
-  
-  html.dark {
-    --bg: #262d33;
-    --ft: #c5c4c4;
-    --bd: #555;
-    --tag: #999;
-  
-    --ovo-ft: var(--ft);
-    --ovo-bdr: var(--bd);
-    --ovo-bg: var(--bg);
-    --ovo-bg-hvr: #555;
-    --ovo-tag: #30363d;
-  }
-  
-  body {
-    font-family: Helvetica, sans-serif;
-    max-width: var(--w-mobile);
-    margin: 50px auto 0;
-    font-size: 16px;
-    font-weight: 400;
-    color: var(--ft);
-    background-color: var(--bg);
-    transition-property: background-color, border-color, color;
-    transition-duration: .5s;
-  }
-  
-  h1,h2,h3,h4,h5 {
-    font-family: 'Noto Serif SC', 'Times New Roman', sans-serif;
-    font-weight: 700;
-    line-height: 1.5;
-  }
-  
-  p {
-    margin-top: 0;
-    line-height: 1.5;
-    text-align: left;
-  }
-  
-  hr {
-    margin: 30px 0;
-    border-width: 0;
-    border-top: 1px solid var(--bd);
-  }
-  
-  pre,
-  code {
-    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
-    font-size: 13px;
+.row {
+  display: flex;
+  align-items: center;
+}
+
+.col {
+  display: flex;
+  flex-direction: column;
+}
+
+.jc-bt {
+  justify-content: space-between;
+}
+
+.as-s {
+  align-self: start;
+}
+
+.ai-c {
+  align-items: center;
+}
+
+.gap-0_5 {
+  gap: 0.8rem;
+}
+
+.gap-1 {
+  gap: 1rem;
+  row-gap: 1rem;
+}
+
+.gap-2 {
+  gap: 2rem;
+  row-gap: 2rem;
+}
+
+.gap-3 {
+  gap: 3rem;
+  row-gap: 3rem;
+}
+
+.lg-1 {
+  font-size: 1.2em;
+}
+
+.sm-1 {
+  font-size: 0.8em;
+}
+
+.mtb-1 {
+  margin: 1em 0;
+}
+
+.mtb-2 {
+  margin: 2em 0;
+}
+
+.mb-1 {
+  margin-bottom: 1em;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mt-2 {
+  margin-top: 2em;
+}
+
+.ml-1 {
+  margin-left: 1em;
+}
+
+.ml-2 {
+  margin-left: 2em;
+}
+
+.mr-2 {
+  margin-right: 2em;
+}
+
+.mw-6 {
+  min-width: 6em;
+}
+
+.c-tag {
+  color: var(--tag);
+}
+
+.btn {
+  cursor: pointer;
+}
+
+.hidden {
+  display: none;
+}
+
+.tag-pm {
+  font-size: 0.7em;
+  font-weight: bold;
+  line-height: 1;
+  color: #fff;
+  background-color: var(--pm);
+  border-radius: 20px;
+  padding: 2px 8px;
+}
+
+details.toc ul {
+  list-style-type: none;
+  padding-inline-start: 1em;
+  margin: 0;
+}
+
+details.toc ul > li {
+  margin: 1em 0;
+}
+
+.nowrap {
+  white-space: nowrap;
+  overflow: auto;
+}
+
+@keyframes showup {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
   }
 
-  p code {
-    background-color: var(--bd);
-    padding: .2em .4em;
-    // border-radius: 6px;
+  to {
+    opacity: 1;
+    transform: none;
   }
-  
-  a {
-    text-decoration: none;
-  }
-  
-  a:not(.icon) {
-    color: inherit;
-    text-decoration: underline;
-    text-decoration-color: var(--pm);
-    background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 50%, var(--pm) 50% );
-    background-size: 100% 200%;
-    transition: background-position .2s ease-in-out;
-  }
-  
-  a:not(.icon):hover,
-  a:not(.icon):focus {
-    background-position: 0 100%;
-    color: #fff;
-  }
-  
-  a.icon:hover {
-    transform: translateY(-5px);
-    transition: transform .3s ease-in-out;
-  }
-  
-  main {
-    animation: showup 0.7s;
-  }
-  
-  .row {
-    display: flex;
-    align-items: center;
-  }
-  
-  .col {
-    display: flex;
+}
+
+@media (max-width: 640px) {
+  .row-mob {
     flex-direction: column;
+    align-items: flex-start;
+    gap: 0;
+    row-gap: 0;
   }
-  
-  .jc-bt {
-    justify-content: space-between;
-  }
-  
-  .as-s {
-    align-self: start;
-  }
-  
-  .ai-c {
+
+  .al-c-mob {
     align-items: center;
   }
-  
-  .gap-0_5 {
-    gap: .8rem;
-  }
-  
-  .gap-1 {
-    gap: 1rem;
-    row-gap: 1rem;
-  }
-  
-  .gap-2 {
-    gap: 2rem;
-    row-gap: 2rem;
-  }
-  
-  .gap-3 {
-    gap: 3rem;
-    row-gap: 3rem;
-  }
-  
-  .lg-1 {
-    font-size: 1.2em;
-  }
-  
-  .sm-1 {
-    font-size: .8em;
-  }
-  
-  .mtb-1 {
-    margin: 1em 0;
-  }
-  
-  .mtb-2 {
-    margin: 2em 0;
-  }
-  
-  .mb-1 {
-    margin-bottom: 1em;
-  }
-  
-  .mb-0 {
-    margin-bottom: 0;
-  }
-  
-  .mt-2 {
-    margin-top: 2em;
-  }
-  
-  .ml-1 {
-    margin-left: 1em;
-  }
-  
-  .ml-2 {
-    margin-left: 2em;
+
+  .col-rev-mob {
+    flex-direction: column-reverse;
   }
 
-  .mr-2 {
-    margin-right: 2em;
+  .sm-2-mob {
+    font-size: 0.9em;
   }
 
-  .mw-6 {
-    min-width: 6em;
+  .mb-0_5-mob {
+    margin-bottom: 0.5em;
   }
-  
-  .c-tag {
-    color: var(--tag);
+
+  .mb-1_5-mob {
+    margin-bottom: 1.5em;
   }
-  
-  .btn {
-    cursor: pointer;
-  }
-  
-  .hidden {
-    display: none;
-  }
-  
-  .tag-pm {
-    font-size: .7em;
-    font-weight: bold;
-    line-height: 1;
-    color: #fff;
-    background-color: var(--pm);
-    border-radius: 20px;
-    padding: 2px 8px;
-  }
-  
-  details.toc ul {
-    list-style-type: none;
-    padding-inline-start: 1em;
-    margin: 0;
-  }
-  
-  details.toc ul>li {
-    margin: 1em 0;
-  }
-  
-  .nowrap {
-    white-space: nowrap;
-    overflow: auto;
-  }
-  
-  @keyframes showup {
-    from {
-      opacity: 0;
-      transform: translateY(20px);
-    }
-  
-    to {
-      opacity: 1;
-      transform: none;
-    }
-  }
-  
-  @media (max-width: 640px) {
-    body {
-      margin: 1em 2em;
-    }
-  
-    .row-mob {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 0;
-      row-gap: 0;
-    }
-  
-    .al-c-mob {
-      align-items: center;
-    }
-  
-    .col-rev-mob {
-      flex-direction: column-reverse;
-    }
-  
-    .sm-2-mob {
-      font-size: .9em;
-    }
-  
-    .mb-0_5-mob {
-      margin-bottom: .5em;
-    }
-  
-    .mb-1_5-mob {
-      margin-bottom: 1.5em;
-    }
-  }
-  
-  /* Scroll bar */
-  ::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-  
-  ::-webkit-scrollbar-thumb {
-    background: rgba(128, 128, 128, .7);
-  }
-  ::-webkit-scrollbar-thumb:window-inactive {
-    background: rgba(128, 128, 128, .2);
-  }
-  
-  ::-webkit-scrollbar-thumb:active {
-    background-color: rgb(128, 128, 128);
-  }
-  
-  .nowrap::-webkit-scrollbar {
-    display: none;
-    width: 0;
-  }
-  
+}

assets/sass/syntax.scss

@@ -5,7 +5,6 @@ code[class*="language-"] {
   text-shadow: none;
   font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
   line-height: 1.5;
-  color: #d4d4d4;
 }
 
 .chroma {
@@ -70,7 +69,7 @@ code[class*="language-"] {
 .chroma .fm,
 .chroma .nl,
 .chroma .nn {
-  color: #3f4c50;
+  color: #569cd6;
 }
 
 /* NameProperty */