fgixes to CSS and home page.

docs/src/fonts/libre-baskerville/style.css

@@ -0,0 +1,24 @@
+/* #### Generated By: http://font.download #### */
+
+    @font-face {
+    font-family: 'Libre Baskerville';
+    font-style: normal;
+    font-weight: normal;
+    src: local('Libre Baskerville'), url('LibreBaskerville-Regular.woff') format('woff');
+    }
+    
+
+    @font-face {
+    font-family: 'Libre Baskerville Italic';
+    font-style: normal;
+    font-weight: normal;
+    src: local('Libre Baskerville Italic'), url('LibreBaskerville-Italic.woff') format('woff');
+    }
+    
+
+    @font-face {
+    font-family: 'Libre Baskerville Bold';
+    font-style: normal;
+    font-weight: normal;
+    src: local('Libre Baskerville Bold'), url('LibreBaskerville-Bold.woff') format('woff');
+    }

docs/src/js/faces-intro.js

@@ -0,0 +1,16 @@
+// ---------------------
+// This script does the animations for the faces
+// on the home page.
+// ---------------------
+
+document.addEventListener('DOMContentLoaded', function () {
+     const imageContainers = document.querySelectorAll('.face');
+
+     setTimeout(() => {
+          imageContainers.forEach((container, index) => {
+               setTimeout(() => {
+                    container.classList.add('active');
+               }, (index + 1) * 1000); // Adjust delay between images
+          });
+     }, 4800);
+});

docs/src/js/hover-text.js

@@ -0,0 +1,22 @@
+// ---------------------
+// This script changes the text when hovering over faces on the home page.
+// ---------------------
+
+function setHoverText(elementId, text) {
+     const hoverTextElement = document.getElementById('hover-text');
+
+     document.getElementById(elementId).onmouseover = function () {
+          hoverTextElement.innerHTML = text;
+          hoverTextElement.classList.remove('leave');
+          hoverTextElement.classList.add('fade-in');
+     };
+
+     document.getElementById(elementId).onmouseout = function () {
+          hoverTextElement.classList.remove('fade-in');
+          hoverTextElement.classList.add('leave');
+     };
+}
+
+setHoverText('visual-hover', 'a thousand words at a time');
+setHoverText('technical-hover', 'in zeroes, ones, and other numbers');
+setHoverText('writing-hover', 'letter by letter, word by word');

docs/src/js/index-text.js

@@ -1,11 +0,0 @@
-document.getElementById('visual-hover').onmouseover = function () {
-     document.getElementById('hover-text').innerHTML = "a thousand words at a time";
-};
-
-document.getElementById('technical-hover').onmouseover = function () {
-     document.getElementById('hover-text').innerHTML = "in zeroes, ones, and other numbers";
-};
-
-document.getElementById('writing-hover').onmouseover = function () {
-     document.getElementById('hover-text').innerHTML = "letter by letter, word by word";
-};

docs/src/js/page-loader.js

@@ -1,3 +1,7 @@
+// ---------------------
+// This script loads the page loading animation.
+// ---------------------
+
 document.getElementById('loader').style.display = 'block';
 
 function fadeOutLoader() {

docs/src/stylesheets/_colours.css

@@ -1,22 +1,55 @@
-/* Change the colours of the root colour scheme */
+/*****************************
+* COLOURS
+*****************************/
+
 :root {
-     --background: #FAF9F6;
-     --md-primary-fg-color: #323036;
-     --md-primary-fg-color--light: #818589;
-     --md-primary-fg-color--dark: #323036;
-     --md-primary-bg-color: #FAF9F6;
-     --md-footer-bg-color: transparent;
-     --md-default-bg-color: #EFE5DC;
+     --background-colour: #FFF;
+     --primary-colour: #323036;
+     --secondary-colour: #EFE5DC;
+     --tertiary-colour: #818589;
+     --quarternary-colour: #FAF9F6;
 }
 
-[data-md-color-scheme=default] {
-     --md-default-bg-color: #FAF9F6;
+/* Adjust Mkdocs colours */
+
+:root {
+     --md-primary-fg-color: var(--primary-colour);
+     --md-primary-fg-color--light: var(--tertiary-colour);
+     --md-primary-fg-color--dark: var(--primary-colour);
+     --md-primary-bg-color: var(--background-colour);
+     --md-footer-bg-color: var(--background-colour);
+     --md-default-bg-color: var(--background-colour);
 }
 
-/* Edit the indigo accent colour scheme (no grey colour scheme) */
-[data-md-color-accent=indigo] {
-     --md-primary-fg-color: #323036;
-     --md-primary-fg-color--light: var(--md-primary-bg-color);
-     --md-primary-fg-color--dark: var(--md-primary-fg-color--dark);
-     --md-accent-fg-color: #323036;
+[data-md-color-accent=custom] {
+     --md-primary-fg-color: var(--primary-colour);
+     --md-primary-fg-color--light: var(--tertiary-colour);
+     --md-primary-fg-color--dark: var(--primary-colour);
+     --md-accent-fg-color: var(--secondary-colour);
+}
+
+/* Font colours */
+
+.md-typeset {
+
+     p,
+     h1,
+     h2,
+     h3 {
+          color: var(--primary-color);
+     }
+
+     h4,
+     h5,
+     h6 {
+          color: var(--tertiary-colour);
+     }
+
+     a {
+          color: var(--tertiary-colour);
+     }
+
+     a:hover {
+          color: var(--primary-color);
+     }
 }

docs/src/stylesheets/_fonts.css

@@ -0,0 +1,183 @@
+/*****************************
+* FONTS
+*****************************/
+
+@font-face {
+     font-family: 'Libre Baskerville';
+     font-weight: normal;
+     font-style: normal;
+     src: url('../fonts/libre-baskerville/LibreBaskerville-Regular.woff');
+}
+
+@font-face {
+     font-family: 'Libre Baskerville';
+     font-weight: bold;
+     font-style: normal;
+     src: url('../fonts/libre-baskerville/LibreBaskerville-Bold.woff');
+
+}
+
+@font-face {
+     font-family: 'Libre Baskerville';
+     font-weight: normal;
+     font-style: italic;
+     src: url('../fonts/libre-baskerville/LibreBaskerville-Italic.woff');
+
+}
+
+@font-face {
+     font-family: 'Lato';
+     font-weight: normal;
+     font-style: normal;
+     src: url('../fonts/lato/Lato-Regular.ttf');
+
+}
+
+@font-face {
+     font-family: 'Lato';
+     font-weight: normal;
+     font-style: italic;
+     src: url('../fonts/lato/Lato-Italic.ttf');
+
+}
+
+@font-face {
+     font-family: 'Lato';
+     font-weight: bold;
+     font-style: normal;
+     src: url('../fonts/lato/Lato-Bold.ttf');
+
+}
+
+@font-face {
+     font-family: 'Lato';
+     font-weight: bold;
+     font-style: italic;
+     src: url('../fonts/lato/Lato-BoldItalic.ttf');
+}
+
+@font-face {
+     font-family: 'Lato';
+     font-weight: light;
+     font-style: normal;
+     src: url('../fonts/lato/Lato-Light.ttf');
+
+}
+
+@font-face {
+     font-family: 'Lato';
+     font-weight: light;
+     font-style: italic;
+     src: url('../fonts/lato/Lato-LightItalic.ttf');
+}
+
+@font-face {
+     font-family: 'Lato';
+     font-weight: bolder;
+     font-style: normal;
+     src: url('../fonts/lato/Lato-Black.ttf');
+}
+
+@font-face {
+     font-family: 'Lato';
+     font-weight: bolder;
+     font-style: italic;
+     src: url('../fonts/lato/Lato-BlackItalic.ttf');
+}
+
+@font-face {
+     font-family: 'Lato';
+     font-weight: thin;
+     font-style: normal;
+     src: url('../fonts/lato/Lato-Light.ttf');
+}
+
+@font-face {
+     font-family: 'Lato';
+     font-weight: thin;
+     font-style: italic;
+     src: url('../fonts/lato/Lato-ThinItalic.ttf');
+}
+
+@font-face {
+     font-family: 'DM Mono';
+     font-weight: normal;
+     font-style: normal;
+     src: url('../fonts/dm-mono/DMMono-Regular.ttf');
+}
+
+@font-face {
+     font-family: 'DM Mono';
+     font-weight: normal;
+     font-style: italic;
+     src: url('../fonts/dm-mono/DMMono-Italic.ttf');
+}
+
+@font-face {
+     font-family: 'DM Mono';
+     font-weight: medium;
+     font-style: italic;
+     src: url('../fonts/dm-mono/DMMono-MediumItalic.ttf');
+}
+
+@font-face {
+     font-family: 'DM Mono';
+     font-weight: medium;
+     font-style: normal;
+     src: url('../fonts/dm-mono/DMMono-Medium.ttf');
+}
+
+@font-face {
+     font-family: 'DM Mono';
+     font-weight: light;
+     font-style: normal;
+     src: url('../fonts/dm-mono/DMMono-Light.ttf');
+}
+
+@font-face {
+     font-family: 'DM Mono';
+     font-weight: light;
+     font-style: italic;
+     src: url('../fonts/dm-mono/DMMono-LightItalic.ttf');
+}
+
+/* Variables */
+
+:root {
+     --primary-font: 'Libre Baskerville', serif;
+     --secondary-font: 'Lato', sans-serif;
+     --tertiary-font: 'DM Mono', monospace;
+}
+
+/* Typeset */
+
+.md-typeset p {
+     font-size: max(var(--text-variable-size), var(--text-min-size));
+}
+
+.md-typeset {
+
+     h1,
+     h2,
+     h3,
+     h4,
+     h5,
+     h6 {
+          font-weight: bold;
+     }
+}
+
+.md-typeset {
+
+     h1,
+     h2,
+     h3 {
+          font-family: var(--primary-font);
+     }
+
+     h4,
+     h5,
+     h6 {
+          font-family: var(--secondary-font);
+     }
+}

docs/src/stylesheets/_index.css

@@ -0,0 +1,30 @@
+/*****************************
+* INDEX
+* Styling for index pages.
+*****************************/
+
+.md-content__inner,
+.md-main__inner,
+.md-grid,
+html,
+body,
+* {
+     margin: 0;
+     padding: 0;
+     box-sizing: border-box;
+}
+
+article,
+.md-container {
+     min-height: 100%;
+     width: 100%;
+     margin: 0;
+     padding: 0;
+}
+
+header,
+nav,
+footer,
+.md-content .md-typeset h1 {
+     display: none !important;
+}

docs/src/stylesheets/_size.css

@@ -0,0 +1,84 @@
+/*****************************
+* SIZE
+*****************************/
+
+/* Standard screen size is based on 1728x1117 screen. */
+:root {
+     --text-min-size: 8px;
+     --text-variable-size: 0.7vw;
+     --zero: 0;
+     --full-width: 100vw;
+     --half-width: 50vw;
+     --third-width: 33.3vw;
+     --quarter-width: 25vw;
+     --fifth-width: 20vw;
+     --full-height: 100vh;
+     --half-height: 50vh;
+     --third-height: 33.3vh;
+     --quarter-height: 25vh;
+     --fifth-height: 20vh;
+     --three-column: repeat(3, 1fr);
+     --two-column: repeat(2, 1fr);
+     --horizontal-spacing: 0.3vw;
+     --vertical-spacing: 0.45vh;
+}
+
+/* Font sizes */
+
+.md-typeset {
+     p {
+          font-size: max(var(--text-variable-size), var(--text-min-size));
+     }
+
+     h1,
+     h2,
+     h3,
+     h4,
+     h5,
+     h6 {
+          letter-spacing: normal;
+          margin: var(--zero);
+     }
+}
+
+.md-typeset {
+     h1 {
+          font-size: max(calc(var(--text-variable-size) * 6), calc(var(--text-min-size) + 6px));
+     }
+
+     h2 {
+          font-size: max(calc(var(--text-variable-size) * 6), calc(var(--text-min-size) + 5px));
+     }
+
+     h3 {
+          font-size: max(calc(var(--text-variable-size) * 4), calc(var(--text-min-size) + 4px));
+     }
+
+     h4 {
+          font-size: max(calc(var(--text-variable-size) * 3), calc(var(--text-min-size) + 3px));
+     }
+
+     h5 {
+          font-size: max(calc(var(--text-variable-size) * 2), calc(var(--text-min-size) + 2px));
+     }
+
+     h6 {
+          font-size: max(calc(var(--text-variable-size) + 5px), calc(var(--text-min-size) + 1px));
+     }
+}
+
+/* Default padding and margins */
+
+div {
+     margin: calc(var(--vertical-spacing) * 2) 0;
+     padding: calc(var(--vertical-spacing) * 2) 0;
+
+     &.no-spacing {
+          margin: var(--zero);
+          padding: var(--zero);
+     }
+}
+
+span {
+     margin-left: var(--horizontal-spacing);
+}

docs/src/stylesheets/g.css

@@ -1,118 +1,491 @@
-@import "_colours.css";
-@import url("https: //api.fonts.coollabs.io/css2?family=Lato:wght@300;400;700;900&family=Libre+Baskerville&family=DM+Mono:wght@400;500&display=swap");
+@import url(_colours.css);
+@import url(_fonts.css);
+@import url(_size.css);
 
-/* Body background colour */
+/*****************************
+* GENERAL RULES
+*****************************/
 
 body {
-     background: transparent;
+     background: var(--background);
+     min-height: 100vh;
+     display: flex;
+     justify-content: center;
+     align-items: center;
+     width: 100%;
 }
 
-/* Link colours */
-a {
-     color: var(--md-primary-fg-color--light);
+.md-typeset a:hover {
+     text-decoration: none;
 }
 
-a:hover {
-     color: var(--md-primary-fg-color--dark);
-     text-decoration: none !important;
-}
-
-/* Bold headings */
-
-h1,
-h2,
-h3,
-h4,
-h5 {
-     font-weight: bold !important;
-}
-
-h1 {
-     color: var(--md-primary-fg-color--dark) !important
-}
-
-/* Paragraph font-size */
-.md-typeset {
-     font-size: .7rem;
-}
-
-/* Remove the shadow under the header */
 .md-header--shadow {
      box-shadow: none;
 }
 
-/* Make the logo in the header larger */
-.md-header__button.md-logo img,
-.md-header__button.md-logo svg {
-     height: 2.5rem;
-}
-
-/* Do not display the site title in the header */
 .md-header__topic:first-child {
      display: none;
 }
 
-/* Use dark colour for the navigation links */
-.md-typeset a,
-.md-nav__item .md-nav__link--active {
-     color: var(--md-primary-fg-color--dark);
-}
-
-/* Underline links in text on hover an focus */
-.md-typeset a:focus,
-.md-typeset a:hover {
-     text-decoration: underline;
-}
-
-/* Change the colour of links on hover and focus */
-.md-nav__link:focus,
-.md-nav__link:hover,
-.md-typeset .headerlink:focus,
-.md-typeset .headerlink:hover,
-.md-typeset :target>.headerlink {
-     color: var(--md-primary-bg-color);
-}
-
-html .md-footer-meta.md-typeset a,
-.md-copyright__highlight {
-     color: var(--md-primary-bg-color);
-}
-
-html .md-footer-meta.md-typeset a:hover,
-html .md-footer-meta.md-typeset a:focus {
-     color: var(--md-primary-fg-color--dark);
-}
-
-/* Make the footer background white and the content dark */
-.md-footer,
-.md-footer-meta {
-     background-color: var(--md-primary-fg-color);
-     color: var(--md-primary-bg-color);
-}
-
-/* Change colour of search highlighting */
-
+/* Change colour of search highlighting. */
 .md-search-result__link:focus,
 .md-search-result__link:hover {
-     background-color: #E6E6E6;
+     background-color: var(--secondary-colour);
 }
 
 .md-typeset mark {
-     background-color: var(--md-accent-fg-color);
+     background-color: var(--secondary-colour);
 }
 
-/* Hide stars and forks in git section */
-li.md-source__fact.md-source__fact--stars,
-li.md-source__fact.md-source__fact--forks {
-     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;
 }
 
-/* Fixing admonitions */
+/*****************************
+* HERO TEXT
+*****************************/
 
-.admonition {
-     border: none !important;
+.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#hover-text {
+          font-weight: normal;
+          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;
+     }
 }
 
-.admonition>p:nth-child(2) {
-     background-color: white !important;
+@keyframes typing {
+     from {
+          width: 0
+     }
+
+     to {
+          width: 100%
+     }
+}
+
+@keyframes blink-caret {
+
+     from,
+     to {
+          border-color: transparent;
+     }
+
+     50% {
+          border-color: var(--tertiary-colour);
+     }
+}
+
+/*****************************
+* INDEX 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);
+     }
+}
+
+@media (max-width: 768px) {
+     .faces {
+          flex-direction: column;
+     }
+}
+
+/*****************************
+* 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;
+}
+
+
+/* */
+
+.resume-icon-meta {
+     font-size: max(1vw, 8px);
+     color: var(--tertiary-colour);
+     text-align: left;
+     display: flex;
+     justify-content: left;
+     gap: 0.5rem;
+}
+
+.resume-icon-meta>div,
+.resume-icon-meta>a {
+     margin-right: 2em;
+     display: flex;
+     align-items: center;
+     font-family: var(--secondary-font);
+}
+
+svg {
+     width: 30px;
+     height: auto;
+     margin-right: 0.3rem;
+}
+
+span {
+     font-size: 1rem;
+}
+
+.annotate {
+     color: transparent;
+     font-size: small;
+}
+
+
+.md-annotation:not([hidden]) {
+     line-height: inherit;
+}
+
+
+.md-tooltip__inner {
+     font-family: var(--secondary-font);
+}
+
+.logo-and-title {
+     display: inline-block;
+}
+
+.logo-and-title img {
+     height: max(12px, 0.5vh);
+     margin-right: 10px;
+}
+
+.logo-and-title h4 {
+     display: inline-block;
+     font-family: var(--secondary-font);
+     margin-right: 5px;
+     font-size: max(16px, inherit);
+}
+
+.tabbed-labels {
+     font-family: var(--secondary-font);
+}
+
+.md-typeset .tabbed-labels>label {
+     font-size: max(1.7vw, 8px);
+}
+
+
+.tabbed-content {
+     background-color: #FAF9F6;
+}
+
+div.tabbed-block {
+     padding: 3em;
+}
+
+div.status-green {
+     background-color: #007a5a;
+     color: var(--background-colour);
+     border-radius: 5px;
+     padding: 5px 15px;
+     text-transform: uppercase;
+     font-family: var(--secondary-font);
+     font-weight: 900;
+     font-size: 0.8em;
+     width: fit-content;
+     margin: 0;
+     letter-spacing: 0.3em;
+}
+
+.tabbed-labels>label:nth-child(1) {
+     margin-left: 3vw;
+}
+
+.tabbed-labels>label:nth-child(2) {
+     margin-left: 18vw;
+}
+
+.tabbed-labels>label:nth-child(3) {
+     margin-left: 12vw;
+}
+
+.tabbed-labels>label:nth-child(4) {
+     margin-left: 21vw;
+}
+
+.tabbed-labels>label:nth-child(5) {
+     margin-left: 3vw;
+}
+
+span.md-annotation__index {
+     font-size: inherit;
+}
+
+
+div.tags {
+     font-size: max(9px, 0.8em);
+     font-style: italic;
+     color: var(--tertiary-colour);
+}
+
+.grid-3col-container {
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     max-width: 1500px;
+     padding: 20px 20px 20px 0;
+     width: 100vw;
+}
+
+/* Center content within columns */
+.grid-3col-item {
+     justify-self: center;
+     min-height: 150px;
+     padding: 20px;
+     text-align: left;
+}
+
+.grid-3col-item:nth-child(1) {
+     padding-left: 0;
+}
+
+.grid-3col-item:nth-child(2) {
+     border-left: 1px solid var(--secondary-colour);
+     border-right: 1px solid var(--secondary-colour);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+     .grid-3col-container {
+          grid-template-columns: 1fr;
+     }
+
+     .grid-3col-item:nth-child(1) {
+          padding-left: 20px;
+     }
+
+     .grid-3col-item:nth-child(2) {
+          border: none;
+     }
+}
+
+/* Optional: Add some styling to the content */
+.grid-3col-content {
+     font-size: 1.2em;
+     margin-top: 10px;
+}
+
+p.blurb {
+     margin: 20px 0;
+     font-size: 1.5em;
+}
+
+div.resume-footer {
+     margin: 30px 0 10px 0;
+     display: flex;
+     justify-content: space-between;
+     align-items: center;
+}
+
+.version {
+     transform: rotate(180deg);
+     font-size: 8px;
+     margin-left: 20px;
+     writing-mode: vertical-rl;
+     font-family: var(--secondary-font);
+}
+
+.resume-footer-menu {
+     display: flex;
+     justify-content: center;
+     gap: 3em;
+     color: var(--primary-colour);
+     margin-left: 2em;
+}
+
+
+.resume-footer-menu .technical {}
+
+span.visual {
+     text-decoration: none;
+     transition: all 0.3s ease;
+}
+
+
+
+span.visual:hover {
+     text-decoration: underline;
+     text-underline-offset: 3px;
+     text-decoration-thickness: 3px;
+     text-decoration-color: var(--secondary-colour);
+     transition: text-decoration 0.3s ease;
+}
+
+.portfolio>.grid-3col-container {
+     margin: 30px auto;
+     border-bottom: 1px solid var(--secondary-colour);
+     grid-template-columns: repeat(2, 1fr);
+     max-width: 1500px;
+     padding: 20px 20px 20px 0;
+     width: 100vw;
+}
+
+.portfolio>.grid-3col-item>.grid-3col-content {
+     display: flex;
+     justify-content: center;
+     align-items: center;
+     min-height: fit-content;
+     gap: 1rem;
+}
+
+.portfolio .grid-3col-item:nth-child(2) {
+     border: none;
+}
+
+.portfolio h4 {
+     font-size: 3em;
+     color: var(--secondary-colour);
+     /* text-transform: uppercase; */
+     font-family: var(--secondary-font);
+     text-align: center;
 }

docs/src/stylesheets/index.css

@@ -1,213 +0,0 @@
-@import url(_colours.css);
-@import url("https: //api.fonts.coollabs.io/css2?family=Lato:wght@300;400;700;900&family=Libre+Baskerville&family=DM+Mono:wght@400;500&display=swap");
-
-header,
-nav,
-footer,
-.md-content .md-typeset h1 {
-     display: none !important;
-}
-
-article,
-.md-container {
-     min-height: 100vh;
-     width: 100%;
-     margin: 0;
-     padding: 0;
-}
-
-.md-content__inner,
-.md-main__inner,
-.md-grid,
-html,
-body,
-* {
-     margin: 0;
-     padding: 0;
-     box-sizing: border-box;
-}
-
-.md-grid {
-     max-width: none;
-}
-
-/* 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;
-}
-
-body {
-     min-height: 100vh;
-     display: flex;
-     justify-content: center;
-     align-items: center;
-     background-color: white;
-     width: 100%;
-}
-
-.container {
-     width: 100%;
-     height: 100%;
-}
-
-.columns {
-     display: flex;
-     justify-content: space-between;
-     width: 100%;
-     height: 50vh;
-}
-
-.top-row {
-     flex: 1;
-     min-width: 100vw;
-     height: 50vh;
-     display: flex;
-     flex-direction: row;
-     justify-content: center;
-     padding: 5em;
-     font-family: 'Libre Baskerville', serif;
-}
-
-.top-row h2 {
-     margin-bottom: 0.1em;
-     font-size: 5vw;
-     font-weight: 900;
-     overflow: hidden;
-     border-right: .15em solid #818589;
-     white-space: nowrap;
-     letter-spacing: .05em;
-     animation:
-          typing 5s steps(40, end) forwards 2s,
-          blink-caret 0.75s step-end infinite;
-}
-
-@keyframes typing {
-     from {
-          width: 0
-     }
-
-     to {
-          width: 100%
-     }
-}
-
-@keyframes blink-caret {
-
-     from,
-     to {
-          border-color: transparent;
-     }
-
-     50% {
-          border-color: #818589;
-     }
-}
-
-.top-row p {
-     font-size: 3vw;
-     color: #818589;
-}
-
-.top-row * {
-     text-align: left;
-}
-
-/* Image Container Styling */
-.image-container {
-     width: 100%;
-     height: 33.33vh;
-     position: relative;
-     overflow: hidden;
-}
-
-.image-container:hover {
-     filter: invert(50%);
-}
-
-.image-container img {
-     width: 100%;
-     height: 100%;
-     object-fit: contain;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-     .columns {
-          flex-direction: column;
-     }
-}
-
-#loader {
-     position: fixed;
-     top: 0;
-     left: 0;
-     width: 100vw;
-     height: 100vh;
-     background-color: #EFE5DC;
-     display: flex !important;
-     justify-content: center;
-     align-items: center;
-     z-index: 9998;
-     transition: opacity 1s ease-out, transform 0.5s ease-out;
-}
-
-#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: Arial, sans-serif;
-     font-size: 24px;
-     color: black;
-     /* Change text color if needed */
-     animation: pulse 1s ease-in-out infinite;
-}
-
-@keyframes pulse {
-     0% {
-          opacity: 1;
-     }
-
-     50% {
-          opacity: 0.5;
-     }
-
-     100% {
-          opacity: 1;
-     }
-}
-
-/* Add fade-out animation */
-@keyframes fadeOut {
-     from {
-          opacity: 1;
-          transform: scale(1);
-     }
-
-     to {
-          opacity: 0;
-          transform: scale(1.1);
-     }
-}
-
-.fade-out {
-     animation: fadeOut 1s ease-out forwards;
-}