styles: extract components.scss

src/index.js

@@ -2,7 +2,8 @@ import { render } from 'preact'
 
 import '@fontsource/open-sans'
 
-import '~/src/style/base.css'
+import './style/base.scss'
+import './style/components.scss'
 
 import App from './App'
 

src/style/base.scss

@@ -0,0 +1,52 @@
+/* Layout */
+
+html, body {
+  margin: 0;
+  height: 100%;
+
+  font-family: 'Open Sans', sans-serif;
+  font-size: 18px;
+  line-height: 27px;
+
+  /* To prevent the white flash */
+  background: #000000;
+}
+
+#root {
+  height: 100%;
+}
+
+.app {
+  min-height: 100%;
+  box-sizing: border-box;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  color: var(--main-color);
+  background-color: var(--bg-color);
+
+  /* Fix for Jumping Scrollbar Issue  */
+  padding-left: calc(100vw - 100%);
+}
+
+.app > main {
+  flex: 1 1 auto;
+
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+@media (min-width: 800px) {
+  .app > main {
+    margin: 5vh 0;
+    max-width: 800px;
+  }
+}
+
+.status {
+  padding: var(--inner-padding);
+  word-break: break-word;
+}

src/style/components.scss

@@ -1,52 +1,16 @@
-/* Layout */
+/* Focus */
 
-html, body {
+*:focus-visible {
-  margin: 0;
+  outline: calc(0.5 * var(--separator-width)) solid var(--main-color);
-  height: 100%;
+  outline-offset: calc(1px + var(--separator-width));
-
-  font-family: 'Open Sans', sans-serif;
-  font-size: 18px;
-  line-height: 27px;
-
-  /* To prevent the white flash */
-  background: #000000;
 }
 
-#root {
+*::selection {
-  height: 100%;
+  color: var(--bg-color);
+  background: var(--main-color);
 }
 
-.app {
+/* Links */
-  min-height: 100%;
-  box-sizing: border-box;
-
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  color: var(--main-color);
-  background-color: var(--bg-color);
-
-  /* Fix for Jumping Scrollbar Issue  */
-  padding-left: calc(100vw - 100%);
-}
-
-.app > main {
-  flex: 1 1 auto;
-
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-}
-@media (min-width: 800px) {
-  .app > main {
-    margin: 5vh 0;
-    max-width: 800px;
-  }
-}
-
-/* Common */
 
 a,
 summary {
@@ -65,19 +29,7 @@ summary:hover {
   opacity: 0.8;
 }
 
-*:focus-visible {
+/* Separators */
-  outline: calc(0.5 * var(--separator-width)) solid var(--main-color);
-  outline-offset: calc(1px + var(--separator-width));
-}
-
-*::selection {
-  color: var(--bg-color);
-  background: var(--main-color);
-}
-
-ul {
-  list-style: square;
-}
 
 hr {
   border: 0;
@@ -85,13 +37,14 @@ hr {
   border-top: var(--separator-width) solid var(--main-color);
 }
 
-/* */
+/* Lists */
 
-input::placeholder {
+ul {
-  color: var(--main-color);
+  list-style: square;
-  opacity: 0.8;
 }
 
+/* Buttons */
+
 button {
   border: var(--separator-width) solid var(--main-color);
   background-color: var(--bg-color);
@@ -102,6 +55,13 @@ button {
   cursor: pointer;
 }
 
+/* Inputs */
+
+input::placeholder {
+  color: var(--main-color);
+  opacity: 0.8;
+}
+
 input,
 select {
   box-sizing: border-box;
@@ -147,9 +107,3 @@ input[type='file'] {
   text-indent: -100%;
   cursor: pointer;
 }
-/*  */
-
-.status {
-  padding: var(--inner-padding);
-  word-break: break-word;
-}