Serve extra jss or css from the page frontmatter. Much cleaner.

content/assets/css/_faces.css

@@ -1,47 +0,0 @@
-/*****************************
-* FACES
-*****************************/
-
-.faces {
-     display: flex;
-     justify-content: space-between;
-     width: 80vw;
-     height: 30vh;
-}
-
-.face {
-     width: 100%;
-     height: 33.33vh;
-     position: relative;
-     overflow: hidden;
-     transition: all 0.5s ease;
-}
-
-.face:hover {
-     filter: invert(50%);
-}
-
-.face img {
-     width: 100%;
-     height: 100%;
-     object-fit: contain;
-     opacity: 0;
-     transform: scale(0.9);
-     transition: all 2s ease-out forwards;
-}
-
-.face.active img {
-     animation: fadeIn 2s ease-out forwards;
-}
-
-@keyframes fadeIn {
-     0% {
-          opacity: 0;
-          transform: scale(0.9);
-     }
-
-     100% {
-          opacity: 1;
-          transform: scale(1);
-     }
-}

content/assets/css/_hero-text.css

@@ -1,74 +0,0 @@
-/*****************************
-* HERO TEXT
-*****************************/
-
-.hero-text {
-     flex: 1;
-     min-width: fit-content;
-     height: 50vh;
-     display: inline-block;
-     flex-direction: row;
-     justify-content: center;
-     padding: 5em;
-     font-family: var(--primary-font);
-     text-align: left;
-     margin: var(--zero);
-
-     h2 {
-          margin-bottom: 0.1em;
-          overflow: hidden;
-          border-right: .15em solid var(--tertiary-colour);
-          white-space: nowrap;
-          letter-spacing: .05em;
-          animation:
-               typing 5s steps(40, end) forwards 2s,
-               blink-caret 0.75s step-end infinite;
-     }
-
-     h4 {
-          font-weight: normal;
-
-          &#hover-text {
-
-               opacity: 0;
-               transition: opacity 0.5s ease-out;
-
-               &.fade-in {
-                    opacity: 1;
-               }
-
-               &.leave {
-                    opacity: 0;
-               }
-          }
-     }
-
-     .accent-divider {
-          background-color: var(--secondary-colour);
-          width: 100%;
-          height: 10px;
-          margin: 1em 0;
-     }
-}
-
-@keyframes typing {
-     from {
-          width: 0
-     }
-
-     to {
-          width: 100%
-     }
-}
-
-@keyframes blink-caret {
-
-     from,
-     to {
-          border-color: transparent;
-     }
-
-     50% {
-          border-color: var(--tertiary-colour);
-     }
-}

content/assets/css/_index.css

@@ -1,8 +1,11 @@
+@import url(_colours.css);
+
 /*****************************
 * INDEX
 * Styling for index pages.
 *****************************/
 
+/* Hide all the extra space around the content */
 .md-content__inner,
 .md-main__inner,
 .md-grid,
@@ -15,6 +18,7 @@ body,
      max-width: none;
 }
 
+/*  Make the content fill the entire viewing space */
 article,
 .md-container {
      min-height: 100%;
@@ -23,7 +27,28 @@ article,
      padding: 0;
 }
 
-nav,
+body {
+     min-height: 100vh;
+     display: flex;
+     justify-content: center;
+     align-items: center;
+     background-color: white;
+     width: 100%;
+}
+
+.container {
+     width: 100%;
+     height: 100%;
+}
+
+/* Hide the navigation elements and the title of the page */
+header,
 .md-content .md-typeset h1 {
      display: none !important;
 }
+
+/* This was creating an annoying space at the top */
+article.md-content__inner.md-typeset:before,
+article.md-content__inner.md-typeset:after {
+     content: none;
+}

content/assets/css/_loader.css

@@ -1,77 +0,0 @@
-/*****************************
-* PAGE LOADER
-*****************************/
-
-#loader {
-     position: fixed;
-     top: 0;
-     left: 0;
-     width: 100vw;
-     height: 100vh;
-     background-color: var(--secondary-colour);
-     display: flex !important;
-     justify-content: center;
-     align-items: center;
-     z-index: 9999;
-     transition: opacity 1s ease-out, transform 0.5s ease-out;
-     margin: 0;
-     padding: 0;
-}
-
-#loader.fade-out {
-     opacity: 0;
-     transform: scale(1.1);
-}
-
-#loader img {
-     width: 50px;
-     height: 50px;
-
-}
-
-@keyframes spin {
-     from {
-          transform: rotate(0deg);
-     }
-
-     to {
-          transform: rotate(360deg);
-     }
-}
-
-#loading-text {
-     font-family: var(--secondary-font);
-     font-size: 24px;
-     color: black;
-     animation: pulse 1s ease-in-out infinite;
-}
-
-@keyframes pulse {
-     0% {
-          opacity: 1;
-     }
-
-     50% {
-          opacity: 0.5;
-     }
-
-     100% {
-          opacity: 1;
-     }
-}
-
-@keyframes fadeOut {
-     from {
-          opacity: 1;
-          transform: scale(1);
-     }
-
-     to {
-          opacity: 0;
-          transform: scale(1.1);
-     }
-}
-
-.fade-out {
-     animation: fadeOut 1s ease-out forwards;
-}

content/assets/css/g.css

@@ -21,7 +21,8 @@ body {
      width: 100%;
 }
 
-nav, .md-header {
+nav,
+.md-header {
      background-color: var(--transparent);
 }
 
@@ -133,26 +134,14 @@ div.footer {
      margin: 30px 5px 5px 0;
      padding-bottom: 0;
      display: flex;
-     justify-content: space-between;
+     justify-content: center;
      align-items: center;
+     flex-direction: row;
+}
 
-     .version {
-          transform: rotate(180deg);
-          font-size: 8px;
-          margin-left: 20px;
-          writing-mode: vertical-rl;
-          font-family: var(--secondary-font);
-     }
-
-     .menu {
-          display: flex;
-          justify-content: center;
-          gap: 3em;
-          color: var(--primary-colour);
-          margin-left: 2em;
-          font-size: max(calc(var(--text-variable-size) * 2), calc(var(--text-min-size) + 2px));
-          font-family: var(--primary-font);
-     }
+div.footer>*:not(:last-child)::after {
+     content: " | ";
+     margin: 0 8px;
 }
 
 /*****************************