Add theme support, light theme, and edgeless light

sass/includes/_base.sass

@@ -0,0 +1,92 @@
+$_theme: () !default
+
+@use "sass:map"
+
+body
+  background-color: map.get($_theme, "bg-2")
+  color: map.get($_theme, "fg-main")
+  font-family: "Bariol", sans-serif
+  font-size: 18px
+  margin: 0
+  padding: 0
+  // for footer alignment
+  min-height: 100vh
+  display: flex
+  flex-direction: column
+
+a
+  color: map.get($_theme, "link")
+
+pre, code
+  font-size: 0.88em
+
+code
+  background: map.get($_theme, "bg-1")
+  padding: 3px 5px
+  border-radius: 4px
+
+input, select, button
+  font-family: inherit
+  font-size: 16px
+  min-width: 0px
+
+button
+  cursor: pointer
+
+::placeholder
+  color: map.get($_theme, "placeholder")
+  opacity: 1
+
+// focus section
+
+:focus
+  outline: none
+
+:-moz-focusring
+  outline: none
+
+::-moz-focus-inner
+  border: 0
+
+select:-moz-focusring
+  color: transparent
+  text-shadow: 0 0 0 map.get($_theme, "fg-bright")
+
+body.show-focus
+  a, select, button, input, video, summary
+    &:focus
+      outline: 2px dotted map.get($_theme, "fg-main")
+
+video
+  background-color: black
+
+details
+  background-color: map.get($_theme, "bg-3")
+  padding: 12px
+  border: 1px solid map.get($_theme, "edge-grey")
+  border-radius: 8px
+
+  summary
+    cursor: pointer
+    line-height: 1
+    margin-bottom: 0
+    user-select: none
+    color: map.get($_theme, "fg-main")
+
+  &[open] summary
+    padding-bottom: 12px
+    border-bottom: 1px solid map.get($_theme, "edge-grey")
+    margin-bottom: 8px
+
+table
+  background-color: map.get($_theme, "bg-1")
+
+table, td, th
+  border: 1px solid map.get($_theme, "edge-grey")
+  border-collapse: collapse
+
+td, th
+  padding: 4px 8px
+
+thead, tr:nth-child(even)
+ background-color: map.get($_theme, "bg-0")