From a25ba428ce6e68fe69bf9ab68460659078f89f7c Mon Sep 17 00:00:00 2001
From: Ross Williams <rossjrw@gmail.com>
Date: Tue, 20 Apr 2021 14:58:29 +0100
Subject: [PATCH] Split interface and preload CSS across components

---
 src/components/AppSelector.vue        |  83 +++-----
 src/components/AppSelectorButton.vue  | 140 ++++++++++++-
 src/components/Interface.vue          |  90 +++++++-
 src/components/MainTitle.vue          |  29 ++-
 src/components/apps/App.vue           |  36 +++-
 src/components/apps/AppSectionTop.vue |  24 ++-
 src/css/interface.css                 | 284 --------------------------
 src/css/mobile.css                    |  10 +-
 src/css/preload.css                   |  48 -----
 src/css/root.css                      |  43 ----
 src/css/statements.css                |  59 ------
 11 files changed, 327 insertions(+), 519 deletions(-)
 delete mode 100644 src/css/interface.css
 delete mode 100644 src/css/preload.css
 delete mode 100644 src/css/root.css
 delete mode 100644 src/css/statements.css

diff --git a/src/components/AppSelector.vue b/src/components/AppSelector.vue
index 30b2d8a..9b8338f 100644
--- a/src/components/AppSelector.vue
+++ b/src/components/AppSelector.vue
@@ -1,64 +1,10 @@
 <template>
   <ul class="apps">
-    <AppSelectorButton></AppSelectorButton>
-    <!--    Replace all of these with that component too-->
-    <li
-      id="terminal-app"
-      class="selector"
-      ng-click="aic.switchApp('terminal')"
-      ng-class="[aic.selectedApp == 'terminal' ? 'selected' : null, aic.ready.terminal ? null : 'disabled', aic.vars.terminalEmphasis ? 'emphasis' : null]"
-      ng-disabled=""
-    >
-      <a><i class="material-icons">dvr</i></a>
-      <div class="notification" ng-show="aic.notifications.terminal > 0">
-        <p>
-          {{ aic.notifications.terminal }}
-        </p>
-      </div>
-    </li>
-    <li
-      id="messages-app"
-      class="selector"
-      ng-click="aic.switchApp('messages')"
-      ng-class="[aic.selectedApp == 'messages' ? 'selected' : null, aic.ready.messages ? null : 'disabled', aic.vars.messagesEmphasis ? 'emphasis' : null]"
-      ng-disabled=""
-    >
-      <a><i class="material-icons">record_voice_over</i></a>
-      <div
-        class="notification"
-        ng-show="(aic.notifications.breach + aic.notifications.alexandra) > 0"
-      >
-        <p>{{ aic.notifications.breach + aic.notifications.alexandra }}</p>
-      </div>
-    </li>
-    <li
-      id="database-app"
-      class="selector"
-      ng-click="aic.switchApp('database')"
-      ng-class="[aic.selectedApp == 'database' ? 'selected' : null, aic.ready.database ? null : 'disabled', aic.vars.databaseEmphasis ? 'emphasis' : null]"
-      ng-disabled=""
-    >
-      <a><i class="material-icons">library_books</i></a>
-      <div class="notification" ng-show="aic.notifications.database > 0">
-        <p>
-          {{ aic.notifications.database }}
-        </p>
-      </div>
-    </li>
-    <li
-      id="run-app"
-      class="selector"
-      ng-click="aic.switchApp('run')"
-      ng-class="[aic.selectedApp == 'run' ? 'selected' : null, aic.ready.run ? null : 'disabled']"
-      ng-disabled=""
-    >
-      <a><i class="material-icons">directions_run</i></a>
-      <div class="notification" ng-show="aic.notifications.run > 0">
-        <p>
-          {{ aic.notifications.run }}
-        </p>
-      </div>
-    </li>
+    <AppSelectorButton app-name="ending"></AppSelectorButton>
+    <AppSelectorButton app-name="terminal"></AppSelectorButton>
+    <AppSelectorButton app-name="messages"></AppSelectorButton>
+    <AppSelectorButton app-name="database"></AppSelectorButton>
+    <AppSelectorButton app-name="run"></AppSelectorButton>
   </ul>
 </template>
 
@@ -71,3 +17,22 @@ export default defineComponent({
   components: { AppSelectorButton },
 })
 </script>
+
+<style lang="scss">
+ul {
+  position: absolute;
+  height: 100%;
+  margin: 0 -0.3125rem 0 0;
+  top: -50%;
+  transform: translate(0, 50%);
+  right: 0;
+  padding: 0;
+  transition: opacity 0.3s var(--ease-in-out) 1.2s;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  list-style: none;
+  width: auto;
+  opacity: 1;
+}
+</style>
diff --git a/src/components/AppSelectorButton.vue b/src/components/AppSelectorButton.vue
index d2d2fcc..ca27f59 100644
--- a/src/components/AppSelectorButton.vue
+++ b/src/components/AppSelectorButton.vue
@@ -1,13 +1,13 @@
 <template>
   <li
     id="ending-app"
-    class="selector"
-    ng-click="aic.switchApp('ending')"
-    ng-class="[aic.selectedApp == 'ending' ? 'selected' : null, aic.ready.ending ? null : 'disabled']"
-    ng-disabled=""
+    :class="aic.selectedApp === appName ? 'selected' : null"
+    @click="aic.switchApp('ending')"
   >
-    <a><i class="material-icons">clear</i></a>
-    <div class="notification" ng-show="aic.notifications.ending > 0">
+    <button :disabled="!aic.ready.ending">
+      <i class="material-icons">clear</i>
+    </button>
+    <div class="notification" v-if="TODO > 0">
       <p>
         {{ aic.notifications.ending }}
       </p>
@@ -20,7 +20,133 @@ import { defineComponent } from "vue"
 
 export default defineComponent({
   name: "AppSelectorButton",
+  props: {
+    appName: String,
+  },
 })
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+li {
+  position: relative;
+  list-style: none;
+  height: 100%;
+  width: 3.75rem;
+  margin: 0 0.3125rem;
+
+  button {
+    height: 2.5rem;
+    width: 2.5rem;
+    border-radius: 50%;
+    background-color: white;
+    display: inline-block;
+    position: absolute;
+    color: var(--middle-theme);
+    border: 0.0625rem white solid;
+    transition: box-shadow 0.2s var(--ease-in-out) 0s,
+      border-radius 0.2s var(--ease-in-out) 0s,
+      height 0.2s var(--ease-in-out) 0s, width 0.1s var(--ease-in-out) 0s,
+      border-width 0s;
+    top: 50%;
+    left: 50%;
+    margin-right: -50%;
+    transform: translate(-50%, -50%);
+    box-shadow: 0 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.14),
+      0 0.1875rem 0.0625rem -0.125rem rgba(0, 0, 0, 0.12),
+      0 0.0625rem 0.3125rem 0 rgba(0, 0, 0, 0.2);
+
+    &::before,
+    &::after {
+      box-shadow: none;
+      content: " ";
+      height: 100%;
+      width: 0.625rem;
+      position: absolute;
+    }
+
+    &::before {
+      top: 0;
+      left: -0.625rem;
+    }
+
+    &::after {
+      right: -0.625rem;
+    }
+
+    i {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-right: -50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &.selected {
+    transition: background-color 0.2s var(--ease-in-out);
+
+    button {
+      box-shadow: none;
+      border-radius: 0;
+      height: 100%;
+      width: 100%;
+      border-width: 0;
+      transition: box-shadow 0.1s var(--ease-in-out) 0s,
+        border-radius 0.1s var(--ease-in-out) 0s,
+        height 0.1s var(--ease-in-out) 0s, width 0.2s ease-in 0.2s,
+        border-width 0s;
+      animation: none;
+    }
+
+    button::before {
+      box-shadow: inset -0.1875rem 0 0.125rem -0.125rem rgba(0, 0, 0, 0.28),
+        inset -0.25rem 0 0.0625rem -0.125rem rgba(0, 0, 0, 0.14),
+        inset -0.125rem 0 0.3125rem -0.3125rem rgba(0, 0, 0, 0.2);
+    }
+
+    &:not(:last-of-type) button::after {
+      box-shadow: inset 0.1875rem 0 0.125rem -0.125rem rgba(0, 0, 0, 0.28),
+        inset 0.25rem 0 0.0625rem -0.125rem rgba(0, 0, 0, 0.14),
+        inset 0.125rem 0 0.3125rem -0.3125rem rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  &:not(.selected):hover button {
+    animation: bounce-with-x-translate 1s linear 1 both;
+  }
+
+  button[disabled] {
+    border: 0.0625rem var(--middle-theme) solid;
+    background-color: transparent;
+    color: transparent;
+    box-shadow: none;
+    animation: none;
+  }
+
+  .notification {
+    position: absolute;
+    top: 50%;
+    left: 75%;
+    margin-right: -50%;
+    transform: translate(-50%, 50%);
+    background: linear-gradient(to bottom, #e23, #d02);
+    min-width: 1.41em;
+    height: 1.41em;
+    border-radius: 1.41em;
+    box-shadow: 0 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.14),
+      0 0.1875rem 0.0625rem -0.125rem rgba(0, 0, 0, 0.12),
+      0 0.0625rem 0.3125rem 0 rgba(0, 0, 0, 0.2);
+
+    p {
+      text-align: center;
+      font-family: Nunito, Arial, Helvetica, sans-serif;
+      font-size: 0.9em;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin: 0 -50% 0 0;
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+</style>
diff --git a/src/components/Interface.vue b/src/components/Interface.vue
index 061439e..f1ece31 100644
--- a/src/components/Interface.vue
+++ b/src/components/Interface.vue
@@ -4,10 +4,10 @@
     ng-class="[aic.preload ? 'preload' : null, aic.ready.ending ? 'ended' : null]"
     ng-cloak
   >
-    <div id="app-selector">
+    <header>
       <MainTitle></MainTitle>
       <AppSelector></AppSelector>
-    </div>
+    </header>
     <TerminalApp></TerminalApp>
     <DatabaseApp></DatabaseApp>
   </div>
@@ -29,3 +29,89 @@ export default defineComponent({
   },
 })
 </script>
+
+<style lang="scss">
+#interface {
+  --light-theme: hsl(202, 82%, 44%);
+  --lightish-theme: hsl(209, 77%, 44%);
+  --middle-theme: hsl(217, 71%, 44%);
+  --dark-theme: hsl(237, 61%, 43%);
+
+  --plain-base: hsl(0, 0%, 100%);
+  --light-contrast: hsl(0, 0%, 93%);
+  --neutral-contrast: hsl(0, 0%, 87%);
+  --heavy-contrast: hsl(0, 0%, 80%);
+
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --monospace-font: "Fira Code", "Cousine", "Roboto Mono", monospace;
+  --app-title-height: 1.875rem;
+  --selector-shadow: 0 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.14),
+    0 0.1875rem 0.0625rem -0.125rem rgba(0, 0, 0, 0.12),
+    0 0.0625rem 0.3125rem 0 rgba(0, 0, 0, 0.2);
+
+  &.ended {
+    --light-theme: hsl(0, 100%, 53%);
+    --lightish-theme: hsl(0, 90%, 49%);
+    --middle-theme: hsl(0, 92%, 45%);
+    --dark-theme: hsl(0, 100%, 37%);
+  }
+
+  &.corrupted {
+    --light-theme: hsl(0, 0%, 33%);
+    --lightish-theme: hsl(0, 0%, 27%);
+    --middle-theme: hsl(0, 0%, 20%);
+    --dark-theme: hsl(0, 0%, 7%);
+  }
+}
+/* The preload class is applied to the interface before the game starts, to
+ * prompt the title into filling the screen and covering everything else.
+ */
+.preload header {
+  height: 100%;
+}
+.preload header .title {
+  top: 45%;
+  transform: translate(0, -50%);
+  height: 8.75rem;
+}
+header .title .title-info {
+  display: none;
+}
+.preload header .title .title-info {
+  display: block;
+  position: absolute;
+  top: 85%;
+  width: 100%;
+}
+.preload header .title .title-info p {
+  text-align: center;
+}
+.preload header .title .title-info button {
+  margin: 0 auto;
+}
+.preload header .title .title-image {
+  left: 50%;
+  transform: translate(-50%, 0);
+  background-position: center;
+}
+.preload header ul {
+  opacity: 0;
+  top: -999rem;
+}
+.preload .app-title p {
+  opacity: 0;
+}
+.preload *:not(button) {
+  transition: all 0s !important;
+}
+
+header {
+  --app-selector-height: 4.375rem;
+  height: var(--app-selector-height);
+  background: linear-gradient(to right, var(--light-theme), var(--dark-theme));
+  position: relative;
+  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
+  box-shadow: inset 0 -3px 1px -2px rgba(0, 0, 0, 0.12),
+    inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+}
+</style>
diff --git a/src/components/MainTitle.vue b/src/components/MainTitle.vue
index db8af16..ff65067 100644
--- a/src/components/MainTitle.vue
+++ b/src/components/MainTitle.vue
@@ -6,10 +6,6 @@
     ></div>
     <div class="title-info">
       <p>{{ ::aic.lang.version }}</p>
-      <p ng-hide="true">
-        This text should not be visible (unless you have javascript disabled) -
-        if you can see this text, please contact the author.
-      </p>
       <p ng-show="aic.onMobile">{{ ::aic.lang.mobileWarning }}</p>
       <button id="boot-up" class="option speech" ng-click="aic.bootUp()">
         {{ ::aic.lang.bootUp }}
@@ -26,4 +22,27 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.title {
+  display: block;
+  height: var(--app-selector-height);
+  margin: 0 5%;
+  position: relative;
+  transition: all 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
+  top: 0;
+  transform: translate(0, 0);
+
+  .title-image {
+    height: 100%;
+    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+    transform: translate(0, 0);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center left;
+  }
+}
+</style>
diff --git a/src/components/apps/App.vue b/src/components/apps/App.vue
index 8213f79..6c79077 100644
--- a/src/components/apps/App.vue
+++ b/src/components/apps/App.vue
@@ -29,13 +29,37 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-#messages-app .app-main {
-  height: calc(100% - var(--app-title-height));
-}
+//#messages-app .app-main {
+//  height: calc(100% - var(--app-title-height));
+//}
+//
+//#database-app .app-main {
+//  background: linear-gradient(to bottom, #fff, #eee);
+//  position: relative;
+//}
 
-#database-app .app-main {
-  background: linear-gradient(to bottom, #fff, #eee);
+#app-body {
+  height: calc(100% - 4.375rem);
   position: relative;
-  /*overflow-y: scroll;*/
+  overflow: hidden;
+  background-color: white;
+
+  .container {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    opacity: 1;
+    transition: visibility 0s linear 0s, height 0s linear 0s,
+      opacity 0.2s var(--ease-in-out);
+
+    &:not(.selected) {
+      height: 0;
+      overflow: hidden;
+      visibility: hidden;
+      opacity: 0;
+      transition: visibility 0s linear 0.2s, height 0s linear 0.2s,
+        opacity 0.2s var(--ease-in-out);
+    }
+  }
 }
 </style>
diff --git a/src/components/apps/AppSectionTop.vue b/src/components/apps/AppSectionTop.vue
index bb06f70..f8b0fbe 100644
--- a/src/components/apps/AppSectionTop.vue
+++ b/src/components/apps/AppSectionTop.vue
@@ -12,4 +12,26 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.app-title {
+  color: #000;
+  background-color: white;
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  height: 1.875rem;
+  box-shadow: 0 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.14),
+    0 0.1875rem 0.0625rem -0.125rem rgba(0, 0, 0, 0.12),
+    0 0.0625rem 0.3125rem 0 rgba(0, 0, 0, 0.2);
+  z-index: 10;
+
+  p {
+    font-family: Nunito, Arial, Helvetica, sans-serif;
+    margin: 0.125rem 5% 0;
+    font-size: 1.25rem;
+    display: inline-block;
+    opacity: 1;
+    transition: opacity 0.3s var(--ease-in-out) 1.2s;
+  }
+}
+</style>
diff --git a/src/css/interface.css b/src/css/interface.css
deleted file mode 100644
index d73b2f8..0000000
--- a/src/css/interface.css
+++ /dev/null
@@ -1,284 +0,0 @@
-/*     ____      __            ____
- *    /  _/___  / /____  _____/ __/___ _________
- *    / // __ \/ __/ _ \/ ___/ /_/ __ `/ ___/ _ \
- *  _/ // / / / /_/  __/ /  / __/ /_/ / /__/  __/
- * /___/_/ /_/\__/\___/_/  /_/  \__,_/\___/\___/
- */
-
-:root {
-  --light-theme: #1488cc;
-  --lightish-theme: #1a73c6;
-  --middle-theme: #205dbf;
-  --dark-theme: #2b32b2;
-
-  --plain-base: #fff;
-  --light-contrast: #eee;
-  --neutral-contrast: #ddd;
-  --heavy-contrast: #ccc;
-
-  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-  /* fira code is objectively the best monospace font */
-  --monospace-font: "Fira Code", "Cousine", "Roboto Mono", monospace;
-  --app-title-height: 1.875rem;
-  --selector-shadow: 0 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.14),
-    0 0.1875rem 0.0625rem -0.125rem rgba(0, 0, 0, 0.12),
-    0 0.0625rem 0.3125rem 0 rgba(0, 0, 0, 0.2);
-}
-#interface.ended {
-  --light-theme: #ff1111;
-  --lightish-theme: #ee0d0d;
-  --middle-theme: #dd0909;
-  --dark-theme: #bb0000;
-}
-#interface.corrupted {
-  --light-theme: #555;
-  --lightish-theme: #444;
-  --middle-theme: #333;
-  --dark-theme: #111;
-}
-
-#app-selector {
-  --app-selector-height: 4.375rem;
-  height: var(--app-selector-height);
-  background: linear-gradient(to right, var(--light-theme), var(--dark-theme));
-  position: relative;
-  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-  box-shadow: inset 0 -3px 1px -2px rgba(0, 0, 0, 0.12),
-    inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-}
-#app-selector .title {
-  display: block;
-  height: var(--app-selector-height);
-  margin: 0 5%;
-  position: relative;
-  transition: all 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-  top: 0;
-  transform: translate(0, 0);
-}
-#app-selector .title .title-image {
-  height: 100%;
-  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
-  position: absolute;
-  width: 100%;
-  top: 0;
-  left: 0;
-  transform: translate(0, 0);
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center left;
-}
-#app-selector ul {
-  position: absolute;
-  height: 100%;
-  margin: 0;
-  margin-right: -0.3125rem;
-  top: -50%;
-  transform: translate(0, 50%);
-  right: 0;
-  padding: 0;
-  transition: opacity 0.3s ease-in-out 1.2s;
-  transition: opacity 0.3s var(--ease-in-out) 1.2s;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  list-style: none;
-  width: auto;
-  opacity: 1;
-}
-#app-selector ul li.selector {
-  position: relative;
-  list-style: none;
-  height: 100%;
-  width: 3.75rem;
-  margin: 0 0.3125rem;
-}
-#app-selector ul li.selector.selected {
-  /*background-color: white;*/
-  transition: background-color 0.2s ease-in-out;
-  transition: background-color 0.2s var(--ease-in-out);
-}
-#app-selector ul li.selector a::before {
-  box-shadow: none;
-  content: " ";
-  height: 100%;
-  left: -0.625rem;
-  position: absolute;
-  top: 0;
-  width: 0.625rem;
-}
-#app-selector ul li.selector a::after {
-  box-shadow: none;
-  content: "";
-  height: 100%;
-  position: absolute;
-  right: -0.625rem;
-  width: 0.625rem;
-}
-#app-selector ul li.selector.selected a::before {
-  box-shadow: inset -0.1875rem 0 0.125rem -0.125rem rgba(0, 0, 0, 0.28),
-    inset -0.25rem 0 0.0625rem -0.125rem rgba(0, 0, 0, 0.14),
-    inset -0.125rem 0 0.3125rem -0.3125rem rgba(0, 0, 0, 0.2);
-  content: "";
-  height: 100%;
-  left: -0.625rem;
-  position: absolute;
-  top: 0;
-  width: 0.625rem;
-}
-#app-selector ul li.selector.selected:not(:last-of-type) a::after {
-  box-shadow: inset 0.1875rem 0 0.125rem -0.125rem rgba(0, 0, 0, 0.28),
-    inset 0.25rem 0 0.0625rem -0.125rem rgba(0, 0, 0, 0.14),
-    inset 0.125rem 0 0.3125rem -0.3125rem rgba(0, 0, 0, 0.2);
-  content: " ";
-  height: 100%;
-  position: absolute;
-  right: -0.625rem;
-  width: 0.625rem;
-}
-#app-selector ul li.selector a {
-  height: 2.5rem;
-  width: 2.5rem;
-  border-radius: 50%;
-  background-color: white;
-  display: inline-block;
-  position: absolute;
-  color: #205dbf;
-  color: var(--middle-theme);
-  border: 0.0625rem white solid;
-  transition: box-shadow 0.2s ease-in-out 0s,
-    box-shadow 0.2s var(--ease-in-out) 0s, border-radius 0.2s ease-in-out 0s,
-    border-radius 0.2s var(--ease-in-out) 0s, height 0.2s ease-in-out 0s,
-    height 0.2s var(--ease-in-out) 0s, width 0.1s ease-in-out 0s,
-    width 0.1s var(--ease-in-out) 0s, border-width 0s;
-  top: 50%;
-  left: 50%;
-  margin-right: -50%;
-  transform: translate(-50%, -50%);
-  box-shadow: 0 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.14),
-    0 0.1875rem 0.0625rem -0.125rem rgba(0, 0, 0, 0.12),
-    0 0.0625rem 0.3125rem 0 rgba(0, 0, 0, 0.2);
-}
-/*#app-selector ul li.selector:not(.disabled) a {
-  animation: bounce-with-x-translate-and-opacity 1s linear 1 both;
-}*/
-#app-selector ul li.selector.selected a {
-  box-shadow: none;
-  border-radius: 0;
-  height: 100%;
-  width: 100%;
-  border-width: 0;
-  transition: box-shadow 0.1s ease-in-out 0s,
-    box-shadow 0.1s var(--ease-in-out) 0s, border-radius 0.1s ease-in-out 0s,
-    border-radius 0.1s var(--ease-in-out) 0s, height 0.1s ease-in-out 0s,
-    height 0.1s var(--ease-in-out) 0s, width 0.2s ease-in 0.2s, border-width 0s;
-  animation: none;
-}
-#app-selector ul li.selector:not(.selected):not(.disabled):hover a {
-  animation: bounce-with-x-translate 1s linear 1 both;
-}
-#app-selector ul li.selector.disabled a {
-  border: 0.0625rem #205dbf solid;
-  border: 0.0625rem var(--middle-theme) solid;
-  background-color: transparent;
-  color: transparent;
-  box-shadow: none;
-}
-#app-selector ul li.selector.selected,
-#app-selector ul li.selector.disabled,
-#app-selector ul li.selector.selected a,
-#app-selector ul li.selector.disabled a {
-  cursor: default;
-}
-#app-selector ul li.selector a i {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-right: -50%;
-  transform: translate(-50%, -50%);
-}
-#app-selector ul,
-#app-selector ul li,
-#app-selector ul li a {
-  z-index: 20;
-}
-#app-selector ul li.selector .notification {
-  z-index: 30;
-  position: absolute;
-  top: 50%;
-  left: 75%;
-  margin-right: -50%;
-  transform: translate(-50%, 50%);
-  background: linear-gradient(to bottom, #e23, #d02);
-  min-width: 1.41em;
-  height: 1.41em;
-  border-radius: 1.41em;
-  box-shadow: 0 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.14),
-    0 0.1875rem 0.0625rem -0.125rem rgba(0, 0, 0, 0.12),
-    0 0.0625rem 0.3125rem 0 rgba(0, 0, 0, 0.2);
-}
-#app-selector ul li.selector .notification p {
-  margin: 0;
-  text-align: center;
-  font-family: Nunito, Arial, Helvetica, sans-serif;
-  font-size: 0.9em;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-right: -50%;
-  transform: translate(-50%, -50%);
-}
-#app-selector ul li.selector:not(.selected).emphasis {
-  animation: app-emphasis 0.5s ease-in-out infinite alternate;
-}
-
-.app-title {
-  color: #000;
-  background-color: white;
-  position: relative;
-  display: flex;
-  justify-content: flex-end;
-  height: 1.875rem; /* I'm so sorry */
-  box-shadow: 0 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.14),
-    0 0.1875rem 0.0625rem -0.125rem rgba(0, 0, 0, 0.12),
-    0 0.0625rem 0.3125rem 0 rgba(0, 0, 0, 0.2);
-  z-index: 10;
-}
-.app-title p {
-  font-family: Nunito, Arial, Helvetica, sans-serif;
-  margin: 0 5%;
-  margin-top: 0.125rem;
-  font-size: 1.25rem;
-  display: inline-block;
-  opacity: 1;
-  transition: opacity 0.3s ease-in-out 1.2s;
-  transition: opacity 0.3s var(--ease-in-out) 1.2s;
-}
-
-#app-body {
-  height: calc(100% - 4.375rem);
-  position: relative;
-  overflow: hidden;
-  background-color: white;
-}
-/* #app-body .app-main { */
-/*     height: calc(100% - 1.875rem); */
-/* } */
-#app-body .container {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  opacity: 1;
-  transition: visibility 0s linear 0s, height 0s linear 0s,
-    opacity 0.2s ease-in-out, opacity 0.2s var(--ease-in-out);
-}
-#app-body .container:not(.selected) {
-  height: 0;
-  overflow: hidden;
-  visibility: hidden;
-  opacity: 0;
-  transition: visibility 0s linear 0.2s, height 0s linear 0.2s,
-    opacity 0.2s ease-in-out, opacity 0.2s var(--ease-in-out);
-}
-#app-body .container:not(.selected) .app-title p {
-  margin-bottom: 2em;
-}
diff --git a/src/css/mobile.css b/src/css/mobile.css
index ad613cd..ee04b4c 100644
--- a/src/css/mobile.css
+++ b/src/css/mobile.css
@@ -11,26 +11,26 @@ font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [
 
 @media only screen and (max-width: 43.6875rem) {
   /* at less than 43.75rem probably a mobile device */
-  #app-selector .title {
+  header .title {
     height: 3.125rem;
   }
-  #app-selector .title .title-image {
+  header .title .title-image {
     top: 0;
     left: 50%;
     transform: translate(-50%, 0);
     background-position: center;
   }
-  #app-selector {
+  header {
     height: 6.875rem;
   }
-  #app-selector ul {
+  header ul {
     height: 3.75rem;
     top: 3.125rem;
     left: 0;
     transform: translate(0, 0);
     justify-content: center;
   }
-  #app-selector li.selector.disabled {
+  header li.selector.disabled {
     display: none;
   }
   .app-title {
diff --git a/src/css/preload.css b/src/css/preload.css
deleted file mode 100644
index 7665456..0000000
--- a/src/css/preload.css
+++ /dev/null
@@ -1,48 +0,0 @@
-/*     ____            __                __
- *    / __ \________  / /___  ____ _____/ /
- *   / /_/ / ___/ _ \/ / __ \/ __ `/ __  /
- *  / ____/ /  /  __/ / /_/ / /_/ / /_/ /
- * /_/   /_/   \___/_/\____/\__,_/\__,_/
- */
-
-.preload #app-body {
-  display: none;
-}
-.preload #app-selector {
-  height: 100%;
-}
-.preload #app-selector .title {
-  top: 45%;
-  transform: translate(0, -50%);
-  height: 8.75rem;
-}
-#app-selector .title .title-info {
-  display: none;
-}
-.preload #app-selector .title .title-info {
-  display: block;
-  position: absolute;
-  top: 85%;
-  width: 100%;
-}
-.preload #app-selector .title .title-info p {
-  text-align: center;
-}
-.preload #app-selector .title .title-info button {
-  margin: 0 auto;
-}
-.preload #app-selector .title .title-image {
-  left: 50%;
-  transform: translate(-50%, 0);
-  background-position: center;
-}
-.preload #app-selector ul {
-  opacity: 0;
-  top: -999rem;
-}
-.preload .app-title p {
-  opacity: 0;
-}
-.preload *:not(button) {
-  transition: all 0s !important;
-}
diff --git a/src/css/root.css b/src/css/root.css
deleted file mode 100644
index 88d9902..0000000
--- a/src/css/root.css
+++ /dev/null
@@ -1,43 +0,0 @@
-/*\
- * Maitreya.css, the styling behind SCP-4000
- * Written by Croquembouche, released under MIT
-\*/
-
-@import "wikidot.css";
-
-@import "preload.css";
-@import "interface.css";
-@import "options.css";
-
-@import "terminal.css";
-@import "messages.css";
-@import "database.css";
-@import "run.css";
-@import "ending.css";
-
-@import "mobile.css";
-@import "animations.css";
-@import "IBM_VGA8.css";
-/* @import url('statements.css'); */
-
-/* monospace import */
-/* other fonts are imported in the html but this one is Too Cool for that */
-@font-face {
-  font-family: "Fira Code";
-  src: url("https://raw.githubusercontent.com/tonsky/FiraCode/master/distr/eot/FiraCode-Regular.eot")
-      format("embedded-opentype"),
-    url("https://raw.githubusercontent.com/tonsky/FiraCode/master/distr/woff2/FiraCode-Regular.woff2")
-      format("woff2"),
-    url("https://raw.githubusercontent.com/tonsky/FiraCode/master/distr/woff/FiraCode-Regular.woff")
-      format("woff"),
-    url("https://raw.githubusercontent.com/tonsky/FiraCode/master/distr/ttf/FiraCode-Regular.ttf")
-      format("truetype");
-  font-weight: normal;
-  font-style: normal;
-}
-
-* {
-  -webkit-font-feature-settings: "liga" on, "calt" on;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-}
diff --git a/src/css/statements.css b/src/css/statements.css
deleted file mode 100644
index 3ed05aa..0000000
--- a/src/css/statements.css
+++ /dev/null
@@ -1,59 +0,0 @@
-/*    _____ __        __                            __
- *   / ___// /_____ _/ /____  ____ ___  ___  ____  / /______
- *   \__ \/ __/ __ `/ __/ _ \/ __ `__ \/ _ \/ __ \/ __/ ___/
- *  ___/ / /_/ /_/ / /_/  __/ / / / / /  __/ / / / /_(__  )
- * /____/\__/\__,_/\__/\___/_/ /_/ /_/\___/_/ /_/\__/____/
- */
-
-.statement {
-  box-sizing: border-box;
-  display: inline-block;
-  position: relative;
-  z-index: 10;
-}
-
-.statement:hover {
-  border: 0.1875rem #205dbf solid;
-  border: 0.1875rem var(--middle-theme) solid;
-  border-bottom-width: 0.75rem;
-  padding: 0.0625rem 0.1875rem 0.0625rem 0.1875rem;
-  margin: -0.25rem -0.375rem -0.8125rem -0.375rem;
-  border-radius: 0.375rem;
-  z-index: 50;
-  position: relative;
-}
-.statement:hover::after {
-  content: "";
-  width: 100%;
-  height: 0.625rem;
-  position: absolute;
-  background-image: url(images/loading.gif);
-  background-size: 0.625rem 0.625rem;
-  background-position: center center;
-  background-repeat: no-repeat;
-  text-align: center;
-  top: 1.3125rem;
-  margin-left: calc(-100% + 0.25rem);
-  z-index: 100;
-  color: white;
-  font-weight: bold;
-  font-size: 0.625rem;
-  line-height: 0.625rem;
-}
-
-.statement.true:hover {
-  animation: correct-color 0.1s linear 2s 1;
-  animation-fill-mode: forwards;
-}
-.statement.true:hover::after {
-  animation: correct-after 0s linear 1.95s 1;
-  animation-fill-mode: forwards;
-}
-.statement.false:hover {
-  animation: false-color 0.1s linear 2s 1;
-  animation-fill-mode: forwards;
-}
-.statement.false:hover::after {
-  animation: false-after 0s linear 1.95s 1;
-  animation-fill-mode: forwards;
-}