static asset generation restructured and reconfigured.

Props/assets/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);
+}

Props/assets/styles/_variables.scss

@@ -0,0 +1,12 @@
+$themes: (
+    "light": (
+        "background": #f4f4f4, 
+        "navbar": #FFF8F8, 
+        "main": #BDF2D5, 
+        "footer": #F2F2F2, 
+        "sub": #F4FCFC, 
+        "bold": #647b9b, 
+        "text": #1A1A1A, 
+        "muted": #797a7e, 
+    ),
+);

Props/assets/styles/dependencies.css

@@ -0,0 +1,2 @@
+@import "~/node_modules/bootstrap-icons/font/bootstrap-icons.css";
+@import "~/node_modules/simplebar/dist/simplebar.min.css";

Props/assets/styles/site-wide.scss

@@ -0,0 +1,119 @@
+@use "themer";
+@use "sass:color";
+@use "~/node_modules/bootstrap/scss/bootstrap";
+
+header > nav {
+    @extend .navbar-expand-lg;
+    @extend .navbar;
+    @extend .border-bottom;
+    @include themer.themed {
+        background-color: themer.color-of("navbar");
+    }
+
+    .nav-link, .navbar-brand {
+        @include themer.themed {
+            color: themer.color-of("bold");
+        }
+        &.active {
+            @include themer.themed {
+                color: themer.color-of("text");
+            }
+        }
+    }
+
+    .navbar-toggler {
+        .bi-list {
+            font-size: 1.5rem;
+        }
+    }
+}
+
+main {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+
+    .tear {
+        @extend .p-3;
+        border-top: 1px;
+        border-top-style: solid;
+        border-bottom: 1px;
+        border-bottom-style: solid;
+        @include themer.themed {
+            $tear: themer.color-of("background");
+            border-color: adjust-color($color: $tear, $lightness: -12%, $alpha: 1.0);
+            background-color: adjust-color($color: $tear, $lightness: -5%, $alpha: 1.0);
+        }
+    }
+}
+
+footer {
+    @extend .text-center;
+    @extend .border-top;
+    @extend .py-2;
+    @include themer.themed {
+        background-color: themer.color-of("footer");
+        color: themer.color-of("muted");
+    }
+
+    a {
+        @include themer.themed {
+            color: themer.color-of("muted");
+        }
+    }
+
+    width: 100%;
+}
+
+.jumbotron {
+    @extend .container-fluid;
+    @extend .p-4;
+    @include themer.themed {
+        background-color: themer.color-of("main");
+    }
+
+    &.sub {
+        @include themer.themed {
+            background-color: themer.color-of("sub");
+        }
+    }
+}
+
+.concise {
+    max-width: 630px;
+    width: inherit;
+}
+
+.less-concise {
+    max-width: 720px;
+    width: inherit;
+}
+
+hr.concise {
+    @extend .my-3;
+    @include themer.themed {
+        color: themer.color-of("bold");
+    }
+    width: 15%;
+    max-width: 160px;
+    min-width: 32px;
+    margin-left: auto;
+    margin-right: auto;
+    height: 2px;
+}
+
+html {
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    @include themer.themed {
+        background-color: themer.color-of("background");
+        color: themer.color-of("text");
+    }
+}