Implement document view.

.gitignore

@@ -0,0 +1,2 @@
+# IntelliJ
+.idea/

css/base.css

@@ -0,0 +1,17 @@
+@import "component.css";
+@import "doc.css";
+@import "footer.css";
+@import "header.css";
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans");
+
+body {
+    font-family: "Noto Sans", serif;
+    margin: 0;
+
+    transition-duration: 200ms;
+}
+
+.theme-dark {
+    color: white;
+    background-color: #1a1a1e;
+}

css/component.css

@@ -0,0 +1,128 @@
+.button {
+    margin: 0 10px;
+    padding: 10px 20px;
+    border-radius: 30px;
+
+    font-family: "Noto Sans", serif;
+    font-weight: bolder;
+
+    text-decoration: none;
+
+    transition-duration: 200ms;
+}
+
+.button-filled {
+    color: white !important;
+
+    background-color: #ff336a !important;
+}
+
+.button-filled:hover {
+    background-color: #f58 !important;
+}
+
+.theme-light .button {
+    color: black;
+    background-color: #ddd;
+}
+
+.theme-light .button:hover {
+    background-color: #ccc;
+}
+
+.theme-dark .button {
+    color: lightgray;
+    background-color: #2a2a2e;
+}
+
+.theme-dark .button:hover {
+    background-color: black;
+}
+
+.icon-button {
+    padding: 10px;
+    border-radius: 100%;
+
+    transition-duration: 200ms;
+}
+
+.theme-light .icon-button:hover {
+    background-color: lightgray;
+}
+
+.theme-dark .icon-button:hover {
+    background-color: #2a2a2e;
+}
+
+.check-element input {
+    position: absolute;
+    opacity: 0;
+    height: 0;
+    width: 0;
+}
+
+.theme-light .check-element input:checked ~ .icon-button {
+    background-color: lightgray;
+}
+
+.theme-dark .check-element input:checked ~ .icon-button {
+    background-color: #2a2a2e;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    position: absolute;
+    visibility: hidden;
+
+    padding: 10px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+
+    opacity: 0;
+    transition-duration: 200ms;
+}
+
+.dropdown-content a {
+    text-decoration: none;
+}
+
+.theme-light .dropdown-content a {
+    color: black;
+}
+
+.theme-dark .dropdown-content a {
+    color: white;
+}
+
+.theme-light .dropdown-content {
+    background-color: white;
+}
+
+.theme-dark .dropdown-content {
+    background-color: #2a2a2e;
+}
+
+.dropdown:hover .dropdown-content {
+    visibility: visible;
+    opacity: 1;
+}
+
+.list-link {
+    padding: 5px 10px;
+
+    border-radius: 5px;
+
+    transition-duration: 200ms;
+}
+
+.theme-light .list-link:hover {
+    background-color: lightgray;
+}
+
+.theme-dark .list-link:hover {
+    background-color: #1a1a1e;
+}

css/doc.css

@@ -0,0 +1,165 @@
+.content {
+    margin: 0 40px;
+
+    font-size: 16px;
+
+    a {
+        text-decoration: underline 2px solid;
+
+        font-weight: bold;
+    }
+
+    h1 {
+        font-size: 40px;
+    }
+
+    h2 {
+        font-size: 30px;
+    }
+
+    h3 {
+        font-size: 20px;
+    }
+
+    blockquote {
+        margin: 5px;
+        padding: 1px 10px;
+    }
+
+    blockquote.note {
+        border-left: 5px solid #1f6feb;
+        background-color: #1f6feb10;
+    }
+
+    blockquote.tip {
+        border-left: 5px solid #3fb950;
+        background-color: #3fb95010;
+    }
+
+    blockquote.important {
+        border-left: 5px solid #ab7df8;
+        background-color: #ab7df810;
+    }
+
+    blockquote.warning {
+        border-left: 5px solid #d29922;
+        background-color: #d2992210;
+    }
+
+    blockquote.caution {
+        border-left: 5px solid #f85149;
+        background-color: #f8514910;
+    }
+
+    code {
+        margin: 3px;
+        border-radius: 5px;
+    }
+
+    table, th, td {
+        margin: 20px 10px;
+
+        border: 1px solid gray;
+        border-collapse: collapse;
+    }
+
+    th, td {
+        padding: 5px 20px;
+    }
+
+    li {
+        margin: 5px 0;
+    }
+}
+
+main {
+    width: 100%;
+}
+
+.theme-light .content {
+    a, a:visited {
+        color: purple;
+    }
+
+    table tr:nth-child(even) {
+        background-color: #e0e0ea;
+    }
+}
+
+.theme-dark .content {
+    a, a:visited {
+        color: skyblue;
+    }
+
+    table tr:nth-child(even) {
+        background-color: #2a2a2e;
+    }
+}
+
+.outline-marker {
+    position: absolute;
+    top: 32px;
+    left: -1px;
+    z-index: 0;
+    opacity: 0;
+    width: 2px;
+    border-radius: 2px;
+    height: 18px;
+    background-color: blue;
+    transition: top .25s cubic-bezier(0, 1, .5, 1), background-color .5s, opacity .25s;
+}
+
+#sidenav {
+    margin: 0;
+    padding: 40px 0;
+
+    overflow: auto;
+
+    font-family: "Noto Sans Light", serif;
+    font-size: 14px;
+
+    ul {
+        margin: 0;
+    }
+
+    li {
+        margin: 5px 0;
+
+        list-style: none;
+        border-radius: 5px;
+
+        a {
+            text-decoration: none;
+
+            transition-duration: 200ms;
+        }
+    }
+}
+
+.theme-light #sidenav {
+    li {
+        a {
+            color: #3c3c43;
+        }
+    }
+
+    li:hover {
+        a {
+            color: black;
+        }
+    }
+}
+
+.theme-dark #sidenav {
+    li {
+        a {
+            color: gray;
+        }
+    }
+
+    li:hover {
+        a {
+            color: white;
+        }
+    }
+}

css/footer.css

@@ -0,0 +1,29 @@
+.footer {
+    margin: 0;
+    padding: 20px;
+
+    color: gray;
+
+    img {
+        filter: invert(50%);
+    }
+
+    a {
+        margin-top: 10px;
+
+        color: gray;
+        text-decoration: none;
+    }
+
+    a:hover {
+        text-decoration: underline;
+    }
+}
+
+.theme-light .footer {
+    background-color: #eee;
+}
+
+.theme-dark .footer {
+    background: #111;
+}