Switched to MPA powered by Razor Pages

After reconsidering where I want to take this project, I realized that a MPA is more fitting.

Props/assets/scss/_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/scss/_variables.scss

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

Props/assets/scss/main.scss

@@ -0,0 +1,96 @@
+@use "themer";
+@use "~/node_modules/bootstrap/scss/bootstrap";
+@import "~/node_modules/bootstrap-icons/font/bootstrap-icons.css";
+@import "~/node_modules/simplebar/dist/simplebar.min.css";
+
+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;
+        }
+    }
+}
+
+body {
+    @include themer.themed {
+        background-color: themer.color-of("background");
+        color: themer.color-of("text");
+    }
+}
+
+footer {
+    @extend .py-2;
+    @extend .text-center;
+    @extend .border-top;
+    @include themer.themed {
+        background-color: themer.color-of("footer");
+        color: themer.color-of("muted");
+    }
+
+    a {
+        @include themer.themed {
+            color: themer.color-of("muted");
+        }
+    }
+
+    position: absolute;
+    bottom: 0;
+    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;
+}
+
+h1 {
+    font-size: 5em;
+}
+
+h2 {
+    font-size: 3em;
+}
+
+hr {
+    @extend .my-3;
+    @include themer.themed {
+        color: themer.color-of("bold");
+    }
+}
+
+html {
+    min-height: 100%;
+    position: relative;
+}