add CSS for UI shell

- add CSS for all UI elements outside of article content
- add additional CSS classes to be activated by JavaScript
- add Roboto and Roboto Mono font packages as dev dependencies
- change navigation button in toolbar to a toggle

1 files changed, 58 insertions, 0 deletions

diff --git a/src/css/base.css b/src/css/base.css
new file mode 100644
index 0000000..14ad1fc
--- /dev/null
+++ b/src/css/base.css
@@ -0,0 +1,58 @@
+:root {
+  --color-text: #222;
+  --color-navbar-bg: #0a0a0a;
+  --color-navbar-bg-focus: #000;
+  --color-navbar-text: #fff;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+html {
+  box-sizing: border-box;
+  font-family: 'Roboto', sans-serif;
+  font-size: 1.1em;
+  text-size-adjust: 100%;
+}
+
+@media (min-width: 1024px) {
+  html {
+    font-size: 1.2em;
+  }
+}
+
+body {
+  color: var(--color-text);
+  line-height: 1.6;
+  margin: 0;
+}
+
+code,
+pre {
+  font-family: 'Roboto Mono', monospace;
+}
+
+::-webkit-scrollbar {
+  width: 0.3333rem;
+  height: 0.3333rem;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #f0f0f0;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #c1c1c1;
+}
+
+::-webkit-scrollbar-thumb:window-inactive {
+  background: transparent;
+}