Uses CSS variables for common definitions, to allow for themes

src/components/PageStrcture/Footer.vue

@@ -27,16 +27,17 @@ export default {
 footer {
   padding: 0.5rem;
   text-align: center;
-  color: #5e6474;
-  opacity: 0.5;
-  background: #05070e;
+  color: var(--medium-grey);
+  opacity: var(--dimming-factor);
+  background: var(--background-darker);
   margin-top: 1rem;
+  border-top: 1px solid var(--outline-color);
 }
 
 footer a{
-  color: #5e6474;
+  color: var(--medium-grey);
   &:hover {
-    color: #9F86FF;
+    color: var(--primary);
   }
 }
 

src/components/PageStrcture/Nav.vue

@@ -23,7 +23,7 @@ nav {
         margin: 0.5rem;
         outline: none;
         border: none;
-        border-radius: 5px;
+        border-radius: var(--curve-factor);
         background: #607d8b33;
         -webkit-box-shadow: 1px 1px 2px #232323;
         box-shadow: 1px 1px 2px #232323;

src/components/PageStrcture/PageTitle.vue

@@ -30,9 +30,10 @@ export default {
     margin: 0;
   }
   span.subtitle {
-    color: var(--primary-transparent);
+    color: var(--primary);
     font-style: italic;
     text-shadow: 1px 1px 2px #130f23;
+    opacity: var(--dimming-factor);
   }
   @media screen and (max-width: 600px) {
     text-align: center;