diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..d892e1c
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,2 @@
+import "./theme";
+import "./style";
diff --git a/assets/js/style.js b/assets/js/style.js
new file mode 100644
index 0000000..1b1fed8
--- /dev/null
+++ b/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>/.test(v.innerHTML)) {
+ v.classList.add('ul-checkbox');
+ }
+});
\ No newline at end of file
diff --git a/assets/js/theme.js b/assets/js/theme.js
new file mode 100644
index 0000000..24de5c9
--- /dev/null
+++ b/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;
+});
\ No newline at end of file
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 2ab2384..5fad051 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -1,3 +1,125 @@
+@import "normalize.scss";
@import "sketch.scss";
@import "markdown.scss";
-@import "syntax.scss";
\ No newline at end of file
+@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;
+}
\ No newline at end of file
diff --git a/assets/sass/markdown.scss b/assets/sass/markdown.scss
index edcd80a..7165df3 100644
--- a/assets/sass/markdown.scss
+++ b/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;
}
\ No newline at end of file
diff --git a/assets/sass/normalize.scss b/assets/sass/normalize.scss
new file mode 100644
index 0000000..dc13b8a
--- /dev/null
+++ b/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;
+}
diff --git a/assets/sass/sketch.scss b/assets/sass/sketch.scss
index 17abfa1..cb994b3 100644
--- a/assets/sass/sketch.scss
+++ b/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;
- }
-
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/assets/sass/syntax.scss b/assets/sass/syntax.scss
index 21f760c..6ba5280 100644
--- a/assets/sass/syntax.scss
+++ b/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 */