RSEMCS mostly complete.

package-lock.json

@@ -9,8 +9,11 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "axios": "^0.24.0",
         "bootstrap": "^5.1.3",
-        "bootstrap-icons": "^1.7.2",
+        "core-js": "^3.20.3",
+        "css.gg": "^2.0.0",
+        "regenerator-runtime": "^0.13.9",
         "vue": "^3.2.26",
         "vue-router": "^4.0.12"
       },
@@ -2527,6 +2530,14 @@
         "lodash": "^4.17.14"
       }
     },
+    "node_modules/axios": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
+      "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
+      "dependencies": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "node_modules/babel-loader": {
       "version": "8.2.3",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.3.tgz",
@@ -2728,14 +2739,6 @@
         "@popperjs/core": "^2.10.2"
       }
     },
-    "node_modules/bootstrap-icons": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.7.2.tgz",
-      "integrity": "sha512-NiR2PqC73AQOPdVSu6GJfnk+hN2z6powcistXk1JgPnKuoV2FSdSl26w931Oz9HYbKCcKUSB6ncZTYJAYJl3QQ==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3102,6 +3105,16 @@
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
       "dev": true
     },
+    "node_modules/core-js": {
+      "version": "3.20.3",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.3.tgz",
+      "integrity": "sha512-vVl8j8ph6tRS3B8qir40H7yw7voy17xL0piAjlbBUsH7WIfzoedL/ZOr1OV9FyZQLWXsayOJyV4tnRyXR85/ag==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/core-js-compat": {
       "version": "3.20.2",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.20.2.tgz",
@@ -3199,6 +3212,11 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/css.gg": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/css.gg/-/css.gg-2.0.0.tgz",
+      "integrity": "sha512-8qO59kSXLbewo7xaUM4eC8328MTdGmb8atpmw6PRzeDGsZrCkAVjJzKeFDIntagl1/aCee+NG1OQtIvWAjgG/A=="
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -4113,7 +4131,6 @@
       "version": "1.14.7",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
       "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -6028,8 +6045,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
-      "dev": true
     },
     "node_modules/regenerator-transform": {
       "version": "0.14.5",
@@ -9445,6 +9461,14 @@
         "lodash": "^4.17.14"
       }
     },
+    "axios": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
+      "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
+      "requires": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "babel-loader": {
       "version": "8.2.3",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.3.tgz",
@@ -9608,11 +9632,6 @@
       "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
       "requires": {}
     },
-    "bootstrap-icons": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.7.2.tgz",
-      "integrity": "sha512-NiR2PqC73AQOPdVSu6GJfnk+hN2z6powcistXk1JgPnKuoV2FSdSl26w931Oz9HYbKCcKUSB6ncZTYJAYJl3QQ=="
-    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -9911,6 +9930,11 @@
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
       "dev": true
     },
+    "core-js": {
+      "version": "3.20.3",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.3.tgz",
+      "integrity": "sha512-vVl8j8ph6tRS3B8qir40H7yw7voy17xL0piAjlbBUsH7WIfzoedL/ZOr1OV9FyZQLWXsayOJyV4tnRyXR85/ag=="
+    },
     "core-js-compat": {
       "version": "3.20.2",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.20.2.tgz",
@@ -9981,6 +10005,11 @@
       "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==",
       "dev": true
     },
+    "css.gg": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/css.gg/-/css.gg-2.0.0.tgz",
+      "integrity": "sha512-8qO59kSXLbewo7xaUM4eC8328MTdGmb8atpmw6PRzeDGsZrCkAVjJzKeFDIntagl1/aCee+NG1OQtIvWAjgG/A=="
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -10705,8 +10734,7 @@
     "follow-redirects": {
       "version": "1.14.7",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
-      "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==",
+      "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ=="
-      "dev": true
     },
     "forwarded": {
       "version": "0.2.0",
@@ -12121,8 +12149,7 @@
     "regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
-      "dev": true
     },
     "regenerator-transform": {
       "version": "0.14.5",

package.json

@@ -37,8 +37,11 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
+    "axios": "^0.24.0",
     "bootstrap": "^5.1.3",
-    "bootstrap-icons": "^1.7.2",
+    "core-js": "^3.20.3",
+    "css.gg": "^2.0.0",
+    "regenerator-runtime": "^0.13.9",
     "vue": "^3.2.26",
     "vue-router": "^4.0.12"
   }

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <header>
-    <nav class="navbar">
+    <nav class="navbar navbar-expand-lg">
       <div class="container-fluid">
         <a
           class="navbar-brand"
@@ -9,39 +9,31 @@
         <button
           class="navbar-toggler"
           type="button"
+          style="height:1.25rem"
           data-bs-toggle="collapse"
           data-bs-target="#navigation"
           aria-expanded="false"
           aria-label="Toggle navigation"
         >
-          <i class="bi bi-list" />
+          <i class="gg-menu" />
         </button>
         <div
           id="navigation"
           class="collapse navbar-collapse"
         >
-          <div class="navbar-nav">
+          <div
-            <router-link
+            v-for="route in $router.getRoutes()"
-              class="nav-link"
+            :key="route.path"
-              :to="{name: 'IntroPortal'}"
+          >
-              active-class="active"
+            <div class="navbar-nav">
-            >
+              <router-link
-              Info
+                class="nav-link"
-            </router-link>
+                :to="route.path"
-            <router-link
+                active-class="active"
-              class="nav-link"
+              >
-              :to="{name: 'steam'}"
+                {{ route.name }}
-              active-class="active"
+              </router-link>
-            >
+            </div>
-              Steam
-            </router-link>
-            <router-link
-              class="nav-link"
-              :to="{name: 'resmcs'}"
-              active-class="active"
-            >
-              Minecraft
-            </router-link>
           </div>
         </div>
       </div>
@@ -56,18 +48,67 @@
 </template>
 
 <script>
+  import "/node_modules/bootstrap/js/dist/collapse";
   export default {
     data() {
+      console.log(this.$router.getRoutes());
       return {
-        greeting: "Hello World!"
       };
     }
   };
 </script>
 
-<style>
+<style lang="scss">
-  .greeting {
+@use "sass:color";
-    color: red;
+@use "@/styles/themer";
-    font-weight: bold;
+
+@use "/node_modules/css.gg/icons/scss/menu.scss";
+
+@import "/node_modules/bootstrap/scss/functions";
+@import "/node_modules/bootstrap/scss/variables";
+@import "/node_modules/bootstrap/scss/mixins";
+@import "/node_modules/bootstrap/scss/utilities";
+@import "/node_modules/bootstrap/scss/nav";
+@import "/node_modules/bootstrap/scss/navbar";
+@import "/node_modules/bootstrap/scss/transitions";
+
+
+.navbar {
+  position: fixed !important;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+
+  @include themer.themed {
+    border-bottom-color: color.adjust(themer.color-of("navbar"), $lightness: 10%);
+    background-color: color.change($color: themer.color-of("navbar"), $alpha: 0.75);
   }
+
+  .navbar-brand {
+    @extend .navbar-brand;
+    @include themer.themed {
+      color: themer.color-of("navbar-brand");
+    }
+  }
+
+  .nav-link {
+    @include themer.themed {
+      color: themer.color-of("navbar-link");
+    }
+    &.active {
+      @include themer.themed {
+        color: themer.color-of("navbar-active");
+      }
+    }
+  }
+
+  .navbar-toggler {
+    @include themer.themed {
+      color: color.invert(themer.color-of("navbar"), 100%);
+    }
+  }
+}
 </style>

src/main.js

@@ -1,6 +1,9 @@
 import "@/styles/global.scss";
-import "bootstrap/dist/js/bootstrap";
+import "core-js/stable"; 
+import "regenerator-runtime/runtime";
+
 import App from "./App.vue";
+
 import { createApp } from "vue";
 
 import { router } from "./router/router";

src/pages/MinecraftServer.vue

@@ -1,15 +1,199 @@
 <template>
-  <main>
+  <div class="pages">
-    <h1>REMCS</h1>
+    <div
-  </main>
+      id="introduction"
+      class="page"
+    >
+      <div class="title">
+        <h1>RSEMCS</h1>
+        <p>Reslate Systems - Entertainment: Minecraft Server, or RSEMCS (for brevity, of course), a the private survival Minecraft server. There is an overall objective to keep the server close to vanilla however with a few minor tweaks.</p>
+      </div>
+      <div class="content">
+        <h2>Status</h2>
+        <p>The server is currently <b>{{ online ? "online" : "offline" }}</b><span v-if="online"> with <b>{{ players.now }} players out of {{ players.max }}</b> slots currently playing. The server is running <b>{{ server.name }}</b></span><span v-else-if="lastOnline">. It was last seen online {{ LastOnlineInMin }} minutes ago</span>. This information was updated <b>{{ LastUpdateInSec }} seconds ago</b>.</p>
+      </div>
+    </div>
+    <div
+      id="about"
+      class="page"
+    >
+      <div class="panels">
+        <div
+          id="join"
+          class="panel"
+        >
+          <div class="title">
+            <h2>Looking to play?</h2>
+          </div>
+          <div class="content map">
+            <p>Assuming you are whitelisted, there's nothing to it asides from just joining the server at <code>ent.sys.reslate.xyz</code> (yup, exactly the same as this website).</p>
+          </div>
+        </div>
+        <div
+          id="basics"
+          class="panel"
+        >
+          <div class="board">
+            <div class="title">
+              <h2>Basics</h2>
+              <p>Some basics explaining the server.</p>
+            </div>
+            <div class="content">
+              <ul>
+                <li>The <b>currency</b> on the server is <b>emeralds</b>.</li>
+                <li>To create a <b>vault</b>, place a <b>sign</b> on any storage block</li>
+                <li><b>Grave Artifacts</b> can be held to produce a grave on death!</li>
+                <li><b>Protection Artifacts</b> can be used to protect your land and yourself!</li>
+                <li><b>/money help</b> will tell you how to use your money.</li>
+                <li><b>/ps help</b> will show you the commands for your <b>protection artifact</b>.</li>
+                <li><b>New recipes</b> can be found by checking your <b>recipe book</b>. Remember to check in the <b>crafting table</b>!</li>
+                <li><b>Infernal hostiles</b> are like minibosses! They are incredibly rare, however have equally incredible drops!</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>   
+    <div
+      id="maps"
+      class="page"
+    >
+      <div class="title">
+        <h2>Maps</h2>
+        <p>For all your reconnaissance needs...</p>
+      </div>
+      <iframe
+        ref="dynmap"
+        src="https:/ent.sys.reslate.xyz/resmcs/dynmap/"
+        class="map"
+        allowTransparency="true"
+        @load="iframeLoaded"
+      >
+        <p>Your browser does not support iframes. Visit <a href="https:/ent.sys.reslate.xyz/resmcs/dynmap/">the full dynmap page here</a></p>
+      </iframe>
+    </div>   
+  </div>
 </template>
 
 <script>
+import axios from "axios";
 export default {
-  
+  data() {
+    return {
+      online: "loading...",
+      motd: "loading...",
+      players: {
+        max: "loading...",
+        now: "loading..."
+      },
+      server: {
+        name: "loading...",
+        protocol: "loading...",
+      },
+      lastOnline: "loading...",
+      lastUpdate: "loading..."
+    };
+  },
+  computed: {
+    LastUpdateInSec() {
+      let date = new Date(this.lastUpdate * 1000);
+      return date.getSeconds();
+    },
+    LastOnlineInMin() {
+      let date = new Date(this.lastOnline * 1000);
+      return date.getMinutes();
+    }
+  },
+  async mounted() {
+    let results = await axios.get("https://mcapi.us/server/status?ip=ent.sys.reslate.xyz");
+    let info = results.data;
+    this.online = info.online;
+    this.motd = info.motd;
+    this.players = info.players;
+    this.server = info.server;
+    this.lastOnline = info.last_online;
+    this.lastUpdate = info.last_updated;
+  },
+  methods: {
+  },
 };
 </script>
 
 <style lang="scss" scoped>
+@use "@/styles/themer";
+@use "sass:color";
+
+#introduction {
+  @include themer.themed {
+    $gradient-color: themer.color-of("background");
+    background-image: 
+      radial-gradient(circle at center, 
+      color.change($color: $gradient-color, $alpha: 0.8) 0%, 
+      color.change($color: $gradient-color, $alpha: 0.1) 60%, 
+      color.change($color: $gradient-color, $alpha: 0.2) 100%
+      ), 
+      url("@/assets/images/minecraft/landscapes/day.png");
+  }
+}
+
+#about {
+  #basics {
+    .board {
+      .title, .content {
+        width: auto;
+        max-width: 35rem;
+      }
+    }
+
+    @include themer.themed {
+      $gradient-color: themer.color-of("background");
+      background-image: 
+        radial-gradient(circle at center, 
+        color.change($color: $gradient-color, $alpha: 0.8) 0%, 
+        color.change($color: $gradient-color, $alpha: 0.5) 60%, 
+        color.change($color: $gradient-color, $alpha: 0.2) 100%
+        ), 
+        url("@/assets/images/minecraft/textures/birch_plank.png");
+    }
+    background-repeat: repeat;
+    background-size: auto;
+    font-size: 1.25rem;
+  }
+}
+
+@font-face {
+  font-family: Pixel;
+  src: url("https://res.sys.reslate.xyz/dl/fonts/PublicPixel.ttf");
+}
+
+
+#maps {
+  padding-top: 4rem;
+  @include themer.themed {
+    $gradient-color: themer.color-of("background");
+    background-image: 
+      linear-gradient(180deg, 
+      color.change($color: $gradient-color, $alpha: 0.8) 0%, 
+      color.change($color: $gradient-color, $alpha: 0.8) 100%
+      ), 
+      url("@/assets/images/minecraft/landscapes/sunset.png");
+  }
+
+  .map {
+    width: 95%;
+    flex-grow: 1;
+    margin-bottom: 2.5%;
+    background-color: transparent;
+    
+    border-width: 20px;
+
+    border-image-slice:27 27 27 27;
+    border-image-width:20px 20px 20px 20px;
+    border-image-outset:0px 0px 0px 0px;
+    border-image-repeat:repeat repeat;
+    border-image-source:url("@/assets/images/minecraft/textures/map.png");
+    border-style:solid;
+  }
+}
 
 </style>

src/pages/OverviewInfo.vue

@@ -6,7 +6,7 @@
           id="steam"
           class="panel"
         >
-          <div class="contained-title">
+          <div class="title">
             <h2>Steam System</h2>
             <hr>
             <p>Access the RES Steam web interface for establishing connections to the game system and viewing some statistics.</p>
@@ -16,7 +16,7 @@
           id="minecraft"
           class="panel"
         >
-          <div class="contained-title">
+          <div class="title">
             <h2>Minecraft Server</h2>
             <hr>
             <p> Access the RES Minecraft Server web interface for interacting with a variety of game utilities and information.</p>
@@ -28,7 +28,7 @@
       id="about"
       class="page"
     >
-      <div class="contained-title">
+      <div class="title">
         <h1>What is this?</h1>
         <p>This is the web interface for Reslate Entertainment Systems. This is <b>not</b> a public service and you may be on this page by mistake. Alternatively, you may be this page completely intentionally!</p>
       </div>
@@ -41,9 +41,15 @@
 @use "sass:color";
 #steam {
   @include themer.themed {
-    $gradient-color: themer.color-of("main");
+    $gradient-color: themer.color-of("background");
-    background-size: cover;
+    background-image: 
-    background-image: radial-gradient(circle at center, color.change($color: $gradient-color, $alpha: 0.0) 0%, color.change($color: $gradient-color, $alpha: 0.1) 60%, color.change($color: $gradient-color, $alpha: 0.2) 100%), url("@/assets/images/controller.png");
+      radial-gradient(
+        circle at center, 
+        color.change($color: $gradient-color, $alpha: 0.0) 0%, 
+        color.change($color: $gradient-color, $alpha: 0.1) 60%, 
+        color.change($color: $gradient-color, $alpha: 0.2) 100%
+        ), 
+      url("@/assets/images/steam/controller.png");
 
     .contained-title {
       color: white;
@@ -53,9 +59,15 @@
 
 #minecraft {
   @include themer.themed {
-    $gradient-color: themer.color-of("main");
+    $gradient-color: themer.color-of("background");
-    background-size: cover;
+    background-image: 
-    background-image: radial-gradient(circle at center, color.change($color: $gradient-color, $alpha: 0.2) 0%, color.change($color: $gradient-color, $alpha: 0.1) 60%, color.change($color: $gradient-color, $alpha: 0.8, $lightness: 10%) 100%), url("@/assets/images/minecraft.png");
+      radial-gradient(
+        circle at center, 
+        color.change($color: $gradient-color, $alpha: 0.2) 0%, 
+        color.change($color: $gradient-color, $alpha: 0.1) 60%, 
+        color.change($color: $gradient-color, $alpha: 0.8, $lightness: 10%) 100%
+        ), 
+      url("@/assets/images/minecraft/landscapes/day.png");
   
     .contained-title {
       color: white;
@@ -65,9 +77,15 @@
 
 #about {
   @include themer.themed {
-    $gradient-color: themer.color-of("main");
+    $gradient-color: themer.color-of("background");
-    background-size: cover;
+    background-image: 
-    background-image: radial-gradient(circle at center, color.change($color: $gradient-color, $alpha: 0.55) 0%, color.change($color: $gradient-color, $alpha: 0.5) 60%, color.change($color: $gradient-color, $alpha: 1, $lightness: 10%) 100%), url("@/assets/images/about.png");
+      radial-gradient(
+        circle at center, 
+        color.change($color: $gradient-color, $alpha: 0.55) 0%, 
+        color.change($color: $gradient-color, $alpha: 0.5) 60%, 
+        color.change($color: $gradient-color, $alpha: 1, $lightness: 10%) 100%
+        ), 
+        url("@/assets/images/generic_room.png");
     .contained-title {
       color: white;
     }

src/router/routes.js

@@ -5,17 +5,17 @@ import SteamServer from "@/pages/SteamServer.vue";
 export const routes = [
   {
     path: "/",
-    name: "IntroPortal",
+    name: "Home",
     component: OverviewInfo,
   },
   {
-      path: "/resmcs",
+      path: "/mcs",
-      name: "resmcs",
+      name: "RSEMCS",
       component: MinecraftServer,
   },
   {
     path: "/steam",
-    name: "steam",
+    name: "RSE-Steam",
     component: SteamServer,
   }
 ];

src/styles/_variables.scss

@@ -1,13 +1,13 @@
 $themes: (
   "dark": (
-    "background": #2c093b,
+    "background": #531e6c,
     "navbar": #623d99,
     "navbar-brand": #fcfcff,
     "navbar-link": #fcf0ff,
     "navbar-active": #00c9a9,
     "main": #501b69,
     "footer": #15061d,
-    "text": #cfcfff,
+    "text": #dfdfff,
     "special": #94e22b,
     "muted": #797a7e,
   ),

src/styles/global.scss

@@ -1,67 +1,40 @@
 @use "themer";
 @use "sass:color";
-@use "/node_modules/bootstrap/scss/bootstrap";
-@import "/node_modules/bootstrap-icons/font/bootstrap-icons.css"; // @use introduces errors. Perhaps webpack is missing a loader?
 
-header > nav {
+@import "/node_modules/bootstrap/scss/bootstrap-utilities.scss";
-  @extend .navbar;
+@import "/node_modules/bootstrap/scss/root";
-  @extend .navbar-expand-lg;
+@import "/node_modules/bootstrap/scss/helpers";
-
+@import "/node_modules/bootstrap/scss/reboot";
-  position: fixed !important;
+@import "/node_modules/bootstrap/scss/containers";
-  top: 0px;
+@import "/node_modules/bootstrap/scss/type";
-  left: 0px;
-  right: 0px;
-
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-
-  @include themer.themed {
-    border-bottom-color: color.adjust(themer.color-of("navbar"), $lightness: 10%);
-    background-color: color.change($color: themer.color-of("navbar"), $alpha: 0.75);
-  }
-
-  .navbar-brand {
-    @include themer.themed {
-      color: themer.color-of("navbar-brand");
-    }
-  }
-
-  .nav-link {
-    @include themer.themed {
-      color: themer.color-of("navbar-link");
-    }
-    &.active {
-      @include themer.themed {
-        color: themer.color-of("navbar-active");
-      }
-    }
-  }
-
-  .navbar-toggler {
-    @include themer.themed {
-      color: color.invert(themer.color-of("navbar"), 100%);
-    }
-  }
-}
 
 .pages {
   display: flex;
-  flex-grow: 1;
   flex-direction: column;
 
   .page {
-    min-height: 100%;
+    background-size: cover;
+    min-height: 100vh;
     display: flex;
     flex-direction: column;
-    flex-grow: 1;
     align-items: center;
     justify-content: center;
-  }
-}
 
-.contained-title {
+    .title {
-  text-align: center;
+      @extend .container;
-  max-width: 50%;
+      @extend .my-3;
+      text-align: center;
+      max-width: 30rem;
+      margin: 0px;
+    }
+
+    .content {
+      @extend .container;
+      @extend .my-3;
+      max-width: 30rem;
+      margin: 0px;
+    }
+  }
 }
 
 .panels {
@@ -70,6 +43,7 @@ header > nav {
   flex-wrap: wrap;
   width: 100%;
   .panel {
+    background-size: cover;
     display: flex;
     flex-grow: 1;
     flex-direction: column;
@@ -78,22 +52,25 @@ header > nav {
   }
 }
 
-html {
-  height: 100%;
-}
-
-body {
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-}
-
 main {
-  display: flex;
+  min-height: 100vh;
-  flex-direction: row;
-  flex-grow: 1;
   @include themer.themed {
     color: themer.color-of("text");
     background-color: themer.color-of("background");
   }
 }
+
+code {
+  padding: 2px;
+  padding-left: 4px;
+  padding-right: 4px;
+  @include themer.themed {
+    color: themer.color-of("special");
+    background-color: color.invert(themer.color-of("special"), 100%);
+  }
+
+  border-radius: 2px;
+  border-width: 1px;
+  border-style: solid;
+  font-size: 1.05rem;
+}

webpack.common.js

@@ -49,6 +49,16 @@ module.exports = {
               test: /\.(woff|woff2|eot|ttf|otf)$/i,
               type: "asset/resource",
             },
+            {
+                test: /\.m?js$/,
+                exclude: /(node_modules|bower_components)/,
+                use: {
+                    loader: "babel-loader",
+                    options: {
+                        presets: ["@babel/preset-env"]
+                    }
+                }
+            }
         ]
     },
     resolve: {