Initial project and page setup.

src/App.vue

@@ -0,0 +1,73 @@
+<template>
+  <header>
+    <nav class="navbar">
+      <div class="container-fluid">
+        <a
+          class="navbar-brand"
+          href="/"
+        >RES</a>
+        <button
+          class="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navigation"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <i class="bi bi-list" />
+        </button>
+        <div
+          id="navigation"
+          class="collapse navbar-collapse"
+        >
+          <div class="navbar-nav">
+            <router-link
+              class="nav-link"
+              :to="{name: 'IntroPortal'}"
+              active-class="active"
+            >
+              Info
+            </router-link>
+            <router-link
+              class="nav-link"
+              :to="{name: 'steam'}"
+              active-class="active"
+            >
+              Steam
+            </router-link>
+            <router-link
+              class="nav-link"
+              :to="{name: 'remcs'}"
+              active-class="active"
+            >
+              Minecraft
+            </router-link>
+          </div>
+        </div>
+      </div>
+    </nav>
+  </header>
+  <main>
+    <router-view />
+  </main>
+  <footer>
+    <!-- TODO: Proper footer. -->
+  </footer>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        greeting: "Hello World!"
+      };
+    }
+  };
+</script>
+
+<style>
+  .greeting {
+    color: red;
+    font-weight: bold;
+  }
+</style>

src/main.js

@@ -0,0 +1,12 @@
+import "@/styles/global.scss";
+import "bootstrap/dist/js/bootstrap";
+import App from "./App.vue";
+import { createApp } from "vue";
+
+import { router } from "./router/router";
+
+document.body.classList.add("theme-light");
+
+const app = createApp(App);
+app.use(router);
+app.mount("body");

src/pages/MinecraftServer.vue

@@ -0,0 +1,15 @@
+<template>
+  <main>
+    <h1>REMCS</h1>
+  </main>
+</template>
+
+<script>
+export default {
+  
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/pages/OverviewInfo.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="sections">
+    <div class="section">
+      <div class="panels">
+        <div
+          id="steam"
+          class="panel"
+        >
+          <div class="contained-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>
+          </div>
+        </div>
+        <div
+          id="minecraft"
+          class="panel"
+        >
+          <div class="contained-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>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      id="about"
+      class="section"
+    >
+      <div class="contained-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>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/themer";
+
+#steam {
+  background-size: cover;
+  background-image: radial-gradient(circle at center, rgba(0,0,0,0.55) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0,0,0,1) 100%), url("@/assets/images/controller.png");
+
+  .contained-title {
+    color: white;
+  }
+}
+
+#minecraft {
+  background-size: cover;
+  background-image: radial-gradient(circle at center, rgba(0,0,0,0.25) 0%, rgba(0, 0, 0, 0.10) 60%, rgba(0,0,0,1) 100%), url("@/assets/images/minecraft.png");
+
+  .contained-title {
+    color: white;
+  }
+}
+
+#about {
+  background-size: cover;
+  background-image: radial-gradient(circle at center, rgba(0,0,0,0.55) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0,0,0,1) 100%), url("@/assets/images/about.png");
+  .contained-title {
+    color: white;
+  }
+}
+</style>

src/pages/SteamServer.vue

@@ -0,0 +1,13 @@
+<template>
+  <h1>Steam System</h1>
+</template>
+
+<script>
+export default {
+  
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/router/router.js

@@ -0,0 +1,7 @@
+import { createRouter, createWebHashHistory } from "vue-router";
+import { routes } from "./routes";
+
+export const router = createRouter({
+  history: createWebHashHistory(),
+  routes: routes
+});

src/router/routes.js

@@ -0,0 +1,21 @@
+import OverviewInfo from "@/pages/OverviewInfo.vue";
+import MinecraftServer from "@/pages/MinecraftServer.vue";
+import SteamServer from "@/pages/SteamServer.vue";
+
+export const routes = [
+  {
+    path: "/",
+    name: "IntroPortal",
+    component: OverviewInfo,
+  },
+  {
+      path: "/remcs",
+      name: "remcs",
+      component: MinecraftServer,
+  },
+  {
+    path: "/steam",
+    name: "steam",
+    component: SteamServer,
+  }
+];

src/styles/_themer.scss

@@ -0,0 +1,17 @@
+@use "sass:map";
+@use "variables";
+
+// Applied Dmitry Borody's method for theming with modifications. - https://medium.com/@dmitriy.borodiy/easy-color-theming-with-scss-bc38fd5734d1
+@mixin themed($themes: variables.$themes) {
+    @each $theme, $vars in $themes {
+        .theme-#{$theme} &, &.theme-#{$theme} {
+            $theme-values: $vars !global;
+            @content;
+            $theme-values: null !global;
+        }
+    }
+}
+
+@function color-of($type) {
+    @return map.get($theme-values, $type);
+}

src/styles/_variables.scss

@@ -0,0 +1,14 @@
+$themes: (
+  "light": (
+    "background": #ebf0ef,
+    "navbar": #fef6ff,
+    "navbar-brand": #8a2be2,
+    "navbar-link": #684eff,
+    "navbar-active": #3f28c0,
+    "main": #8a2be2,
+    "footer": #e2762b,
+    "text": #1a1a1a,
+    "special": #94e22b,
+    "muted": #797a7e,
+  ),
+);

src/styles/dependencies.scss

@@ -0,0 +1,2 @@
+@use "/node_modules/bootstrap/scss/bootstrap";
+@import "/node_modules/bootstrap-icons/font/bootstrap-icons.css"; // @use introduces errors. Perhaps webpack is missing a loader?

src/styles/global.scss

@@ -0,0 +1,95 @@
+@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 {
+  @extend .navbar;
+  @extend .navbar-expand-lg;
+  @extend .border-bottom;
+
+  position: fixed !important;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+
+  @include themer.themed {
+    background-color: themer.color-of("navbar");
+  }
+
+  .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%);
+    }
+  }
+}
+
+.sections {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+
+  .section {
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.contained-title {
+  text-align: center;
+  max-width: 50%;
+}
+
+.panels {
+  display: flex;
+  flex-grow: 1;
+  flex-wrap: wrap;
+  width: 100%;
+  .panel {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+main {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  @include themer.themed {
+    color: themer.color-of("text");
+  }
+}