feat: add notes

styles/bundles/markdown.css

@@ -0,0 +1,59 @@
+@import url('/styles/common.css');
+@import url('/styles/classes/breaks.css');
+@import url('/styles/classes/flex.css');
+@import url('/styles/classes/ul-directions.css');
+
+@import url('/styles/components/footer.css');
+@import url('/styles/components/header.css');
+@import url('/styles/components/pre-icon.css');
+@import url('/styles/components/reference.css');
+
+@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
+
+body {
+  max-width: 800px;
+  min-width: 300px;
+  padding: 4em;
+  margin: 4.5em auto auto;
+
+  background: var(--background);
+  font-family: var(--mono-font);
+  font-weight: 400;
+  font-size: 15px;
+  color: var(--text);
+  caret-color: var(--primary);
+}
+
+math {
+  font-family: "Crimson Text";
+}
+
+pre.sourceCode {
+  width: 100%;
+  counter-reset: line-numbering;
+}
+
+code.sourceCode {
+  width: 100%;
+  padding: 1em;
+  display: inline-block;
+  overflow: scroll;
+}
+
+code.sourceCode > span {
+  counter-increment: line-numbering;
+}
+
+code.sourceCode > span::before {
+  content: counter(line-numbering);
+  display: inline-block;
+  width: 2em;
+  margin-right: 1em;
+  text-align: right;
+  color: #888;
+  user-select: none;
+}
+
+*, *::before, *::after {
+  transition: all .3s ease-out;
+}

styles/code-highlight/default.css

@@ -0,0 +1,28 @@
+.sourceCode {
+    color: lightblue;
+}
+
+.sourceCode .bu, .sourceCode .pp {
+    color: khaki;
+}
+
+.sourceCode .op {
+    color: var(--text);
+}
+
+.sourceCode .fu {
+    color: dodgerblue;
+}
+
+.sourceCode .kw, .sourceCode .cf {
+    color: var(--primary);
+}
+
+.sourceCode .co {
+    color: #aaa;
+    font-style: italic;
+}
+
+.sourceCode .st {
+    color: orange;
+}