Move UI into its own page.

src/styles/_elements.scss

@@ -0,0 +1,41 @@
+::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb);
+}
+
+::selection {
+    background: var(--accent);
+    color: var(--foreground);
+}
+
+::-moz-selection {
+    background: var(--accent);
+    color: var(--foreground);
+}
+
+::-webkit-selection {
+    background: var(--accent);
+    color: var(--foreground);
+}
+
+a,
+a:link,
+a:visited,
+a:hover {
+    text-decoration: none;
+    color: var(--accent);
+}
+
+hr {
+    border: 0;
+    height: 1px;
+    flex-grow: 1;
+}

src/styles/_fonts.scss

@@ -0,0 +1,9 @@
+@import "@fontsource/open-sans/300.css";
+@import "@fontsource/open-sans/400.css";
+@import "@fontsource/open-sans/600.css";
+@import "@fontsource/open-sans/700.css";
+
+@import "@fontsource/open-sans/300-italic.css";
+@import "@fontsource/open-sans/400-italic.css";
+@import "@fontsource/open-sans/600-italic.css";
+@import "@fontsource/open-sans/700-italic.css";

src/styles/_page.scss

@@ -0,0 +1,31 @@
+* {
+	text-rendering: optimizeLegibility !important;
+    -webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+
+    scrollbar-width: thin;
+    box-sizing: border-box;
+}
+
+html {
+    contain: content;
+    background: var(--background);
+    background-size: cover !important;
+    background-repeat: no-repeat !important;
+}
+
+html,
+body {
+    font-family: "Open Sans", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    caret-color: var(--accent);
+    color: var(--foreground);
+
+    -webkit-tap-highlight-color: transparent;
+    -webkit-overflow-scrolling: touch;
+    -webkit-text-size-adjust: 100%;
+    overscroll-behavior: contain;
+
+    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}

src/styles/index.scss

@@ -1,86 +1,3 @@
-@import "@fontsource/open-sans/300.css";
-@import "@fontsource/open-sans/400.css";
-@import "@fontsource/open-sans/600.css";
-@import "@fontsource/open-sans/700.css";
-
-@import "@fontsource/open-sans/300-italic.css";
-@import "@fontsource/open-sans/400-italic.css";
-@import "@fontsource/open-sans/600-italic.css";
-@import "@fontsource/open-sans/700-italic.css";
-
-@import "./temp-theme.scss";
-
-* {
-	text-rendering: optimizeLegibility !important;
-    -webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-
-    
-    scrollbar-width: thin;
-    box-sizing: border-box;
-}
-
-html {
-    contain: content;
-    background: var(--background);
-    background-size: cover !important;
-    background-repeat: no-repeat !important;
-}
-
-html,
-body {
-    font-family: "Open Sans", sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    caret-color: var(--accent);
-    color: var(--foreground);
-
-    -webkit-tap-highlight-color: transparent;
-    -webkit-overflow-scrolling: touch;
-    -webkit-text-size-adjust: 100%;
-    overscroll-behavior: contain;
-
-    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-}
-
-::-webkit-scrollbar {
-    width: 3px;
-    height: 3px;
-}
-
-::-webkit-scrollbar-track {
-    background: var(--scrollbar-track);
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--scrollbar-thumb);
-}
-
-::selection {
-    background: var(--accent);
-    color: var(--foreground);
-}
-
-::-moz-selection {
-    background: var(--accent);
-    color: var(--foreground);
-}
-
-::-webkit-selection {
-    background: var(--accent);
-    color: var(--foreground);
-}
-
-a,
-a:link,
-a:visited,
-a:hover {
-    text-decoration: none;
-    color: var(--accent);
-}
-
-hr {
-    border: 0;
-    height: 1px;
-    flex-grow: 1;
-}
+@import "elements";
+@import "fonts";
+@import "page";