From c7f95a14c37db7f1cb9d5d1cc8cbebf741ec41f7 Mon Sep 17 00:00:00 2001
From: Harrison Deng <yunyangdeng@gmail.com>
Date: Sun, 16 Jan 2022 01:29:30 -0600
Subject: [PATCH] Improved styling and naming scheme.

---
 src/App.vue                |  4 ++--
 src/main.js                |  2 +-
 src/pages/OverviewInfo.vue | 44 +++++++++++++++++++++++---------------
 src/router/routes.js       |  4 ++--
 src/styles/_variables.scss | 18 ++++++++--------
 src/styles/global.scss     | 12 +++++++----
 6 files changed, 49 insertions(+), 35 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9ac704d..062bb61 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,7 @@
         <a
           class="navbar-brand"
           href="/"
-        >RES</a>
+        >Reslate ES</a>
         <button
           class="navbar-toggler"
           type="button"
@@ -37,7 +37,7 @@
             </router-link>
             <router-link
               class="nav-link"
-              :to="{name: 'remcs'}"
+              :to="{name: 'resmcs'}"
               active-class="active"
             >
               Minecraft
diff --git a/src/main.js b/src/main.js
index c66a72c..144df6d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,7 +5,7 @@ import { createApp } from "vue";
 
 import { router } from "./router/router";
 
-document.body.classList.add("theme-light");
+document.body.classList.add("theme-dark");
 
 const app = createApp(App);
 app.use(router);
diff --git a/src/pages/OverviewInfo.vue b/src/pages/OverviewInfo.vue
index 1fc34b1..3b10e0d 100644
--- a/src/pages/OverviewInfo.vue
+++ b/src/pages/OverviewInfo.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="sections">
-    <div class="section">
+  <div class="pages">
+    <div class="page">
       <div class="panels">
         <div
           id="steam"
@@ -26,7 +26,7 @@
     </div>
     <div
       id="about"
-      class="section"
+      class="page"
     >
       <div class="contained-title">
         <h1>What is this?</h1>
@@ -38,30 +38,40 @@
 
 <style lang="scss" scoped>
 @use "@/styles/themer";
-
+@use "sass:color";
 #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");
+  @include themer.themed {
+    $gradient-color: themer.color-of("main");
+    background-size: cover;
+    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");
 
-  .contained-title {
-    color: white;
+    .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;
+  @include themer.themed {
+    $gradient-color: themer.color-of("main");
+    background-size: cover;
+    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");
+  
+    .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;
+  @include themer.themed {
+    $gradient-color: themer.color-of("main");
+    background-size: cover;
+    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");
+    .contained-title {
+      color: white;
+    }
   }
 }
+
 </style>
\ No newline at end of file
diff --git a/src/router/routes.js b/src/router/routes.js
index 1e086d7..536bc96 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -9,8 +9,8 @@ export const routes = [
     component: OverviewInfo,
   },
   {
-      path: "/remcs",
-      name: "remcs",
+      path: "/resmcs",
+      name: "resmcs",
       component: MinecraftServer,
   },
   {
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 9adaf0f..489cbb0 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,13 +1,13 @@
 $themes: (
-  "light": (
-    "background": #ebf0ef,
-    "navbar": #fef6ff,
-    "navbar-brand": #8a2be2,
-    "navbar-link": #684eff,
-    "navbar-active": #3f28c0,
-    "main": #8a2be2,
-    "footer": #e2762b,
-    "text": #1a1a1a,
+  "dark": (
+    "background": #2c093b,
+    "navbar": #623d99,
+    "navbar-brand": #fcfcff,
+    "navbar-link": #fcf0ff,
+    "navbar-active": #00c9a9,
+    "main": #501b69,
+    "footer": #15061d,
+    "text": #cfcfff,
     "special": #94e22b,
     "muted": #797a7e,
   ),
diff --git a/src/styles/global.scss b/src/styles/global.scss
index e48b54d..5b9c485 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -6,15 +6,18 @@
 header > nav {
   @extend .navbar;
   @extend .navbar-expand-lg;
-  @extend .border-bottom;
 
   position: fixed !important;
   top: 0px;
   left: 0px;
   right: 0px;
 
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+
   @include themer.themed {
-    background-color: themer.color-of("navbar");
+    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 {
@@ -41,12 +44,12 @@ header > nav {
   }
 }
 
-.sections {
+.pages {
   display: flex;
   flex-grow: 1;
   flex-direction: column;
 
-  .section {
+  .page {
     min-height: 100%;
     display: flex;
     flex-direction: column;
@@ -91,5 +94,6 @@ main {
   flex-grow: 1;
   @include themer.themed {
     color: themer.color-of("text");
+    background-color: themer.color-of("background");
   }
 }