chore: switch to scss, use default page scaling

frontend/src/index.jsx

@@ -10,7 +10,7 @@ import contextReducer from './actions'
 
 import 'react-toastify/dist/ReactToastify.css'
 import 'material-symbols'
-import './index.sass'
+import './index.scss'
 
 const store = configureStore({
   reducer: {

frontend/src/index.scss

@@ -0,0 +1,158 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,300;0,400;0,600;0,700;1,300;1,400&display=swap');
+
+:root {
+  --font-family: 'Noto Sans', Roboto, Arial, sans-serif;
+  --color-surface-01: #19161f;
+  --color-surface-02: #1f1e26;
+  --color-surface-03: #24202e;
+  --color-surface-04: #2e2a38;
+  --color-surface-05: #302c3a;
+  --color-surface-06: #3a3544;
+  --color-text: #d7d4d5;
+  --color-text-hl: #fbfbfb;
+  --color-text-dim: #ababab;
+
+  --color-cyan: #0ed3fe;
+  --color-blue: #4600ff;
+  --color-magenta: #b000ff;
+  --color-violet: #885bff;
+  --color-yellow: #fcde00;
+  --color-red: #ff2404;
+  --color-green: #5fff5f;
+
+  --input-height: 32px;
+  --font-size: 0.9rem;
+  --gap-size: 6px;
+  --section-gap: 6px;
+}
+
+// Hacks
+
+::-webkit-scrollbar {
+  width: 20px;
+  height: 20px;
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--color-surface-04);
+  border-radius: 20px;
+  border: 6px solid transparent;
+  background-clip: content-box;
+
+  &:hover {
+    background-color: var(--color-surface-05);
+  }
+}
+
+.material-symbols-outlined {
+  font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 200, 'opsz' 20;
+  vertical-align: bottom;
+  position: relative;
+}
+
+html {
+  padding: 0;
+  margin: 0;
+  background-color: var(--color-surface-01);
+
+  color: var(--color-text);
+  font-size: var(--font-size);
+  font-family: var(--font-family);
+}
+
+#root {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  padding: var(--section-gap);
+  gap: var(--section-gap);
+}
+
+a {
+  color: var(--color-text);
+  text-decoration: none;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+main {
+  flex-grow: 1;
+  display: flex;
+  gap: var(--section-gap);
+
+  &.row,
+  &.column {
+    align-items: stretch;
+  }
+}
+
+section {
+  display: flex;
+  padding: 12px;
+  border-radius: 5px;
+  background-color: var(--color-surface-02);
+  border: 1px solid transparent;
+}
+
+.section-changed {
+  border: 1px solid var(--color-violet);
+}
+
+//
+// Helper classes
+//
+
+.nopad {
+  padding: 0;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  gap: var(--section-gap);
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--section-gap);
+}
+
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.grow {
+  position: relative;
+  flex-grow: 1;
+}
+
+.third {
+  flex-basis: 30%;
+}
+
+.half {
+  flex-basis: 50%;
+}
+
+.contained {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}