Organized the stylesheets,converted fonts to woff.

docs/src/js/index.js

@@ -1,7 +1,8 @@
-// ---------------------
-// This script changes the text when hovering over faces on the home page.
-// ---------------------
+/*
+Homepage
+*/
 
+// This script changes the text when hovering over faces on the home page.
 function setHoverText(elementId, text) {
      const hoverTextElement = document.getElementById('hover-text');
 
@@ -21,11 +22,8 @@ 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');
 
-// ---------------------
-// This script does the animations for the faces
-// on the home page.
-// ---------------------
 
+// This script does the animations for the faces on the home page.
 document.addEventListener('DOMContentLoaded', function () {
      const imageContainers = document.querySelectorAll('.face');
 

docs/src/js/loader.js

@@ -1,7 +1,8 @@
-// ---------------------
-// This script loads the page loading animation.
-// ---------------------
+/*
+PAGE LOADER
+*/
 
+// This loads a screen before the page is fully loaded.
 document.getElementById('loader').style.display = 'block';
 
 function fadeOutLoader() {

docs/src/js/resume.js

@@ -1,3 +1,8 @@
+/*
+RESUME
+*/
+
+// Make elements visible as the user scrolls down the page by applying a class
 window.addEventListener('scroll', function () {
      const contents = document.querySelectorAll('.fade-in-up-section');
 
@@ -10,3 +15,11 @@ window.addEventListener('scroll', function () {
           }
      });
 });
+
+// Get the name of the company from URL
+const urlParams = new URLSearchParams(window.location.search);
+
+if (urlParams.has('name')) {
+     const paramValue = urlParams.get('name');
+     document.getElementById('companyName').innerHTML = ` ${paramValue}`;
+}

docs/src/stylesheets/_button.css

@@ -0,0 +1,15 @@
+/*****************************
+* BUTTON
+*****************************/
+
+div.button {
+     font-family: var(--secondary-font);
+     border-bottom: 3px solid var(--secondary-colour);
+     width: fit-content;
+     padding-bottom: 3px;
+     font-weight: bold;
+
+     &:hover {
+          border-bottom: 3px solid white;
+     }
+}

docs/src/stylesheets/_colours.css

@@ -40,16 +40,14 @@
           color: var(--primary-color);
      }
 
+     figcaption,
+     a,
      h4,
      h5,
      h6 {
           color: var(--tertiary-colour);
      }
 
-     a {
-          color: var(--tertiary-colour);
-     }
-
      a:hover {
           color: var(--secondary-color);
      }

docs/src/stylesheets/_faces.css

@@ -0,0 +1,47 @@
+/*****************************
+* 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);
+     }
+}

docs/src/stylesheets/_fonts.css

@@ -29,7 +29,7 @@
      font-family: 'Lato';
      font-weight: bold;
      font-style: normal;
-     src: url('../fonts/lato/Lato-Bold.ttf');
+     src: url('../fonts/lato/Lato-Bold.woff2');
 
 }
 
@@ -37,14 +37,14 @@
      font-family: 'Lato';
      font-weight: bold;
      font-style: italic;
-     src: url('../fonts/lato/Lato-BoldItalic.ttf');
+     src: url('../fonts/lato/Lato-BoldItalic.woff2');
 }
 
 @font-face {
      font-family: 'Lato';
      font-weight: normal;
      font-style: normal;
-     src: url('../fonts/lato/Lato-Regular.ttf');
+     src: url('../fonts/lato/Lato-Regular.woff2');
 
 }
 
@@ -52,7 +52,7 @@
      font-family: 'Lato';
      font-weight: normal;
      font-style: italic;
-     src: url('../fonts/lato/Lato-Italic.ttf');
+     src: url('../fonts/lato/Lato-Italic.woff2');
 
 }
 
@@ -60,56 +60,56 @@
      font-family: 'DM Mono';
      font-weight: normal;
      font-style: normal;
-     src: url('../fonts/dm-mono/DMMono-Regular.ttf');
+     src: url('../fonts/dm-mono/DMMono-Regular.woff2');
 }
 
 @font-face {
      font-family: 'DM Mono';
      font-weight: normal;
      font-style: italic;
-     src: url('../fonts/dm-mono/DMMono-Italic.ttf');
+     src: url('../fonts/dm-mono/DMMono-Italic.woff2');
 }
 
 @font-face {
      font-family: 'DM Mono';
      font-weight: medium;
      font-style: italic;
-     src: url('../fonts/dm-mono/DMMono-MediumItalic.ttf');
+     src: url('../fonts/dm-mono/DMMono-MediumItalic.woff2');
 }
 
 @font-face {
      font-family: 'DM Mono';
      font-weight: medium;
      font-style: normal;
-     src: url('../fonts/dm-mono/DMMono-Medium.ttf');
+     src: url('../fonts/dm-mono/DMMono-Medium.woff2');
 }
 
 @font-face {
      font-family: 'DM Mono';
      font-weight: light;
      font-style: normal;
-     src: url('../fonts/dm-mono/DMMono-Light.ttf');
+     src: url('../fonts/dm-mono/DMMono-Light.woff2');
 }
 
 @font-face {
      font-family: 'DM Mono';
      font-weight: light;
      font-style: italic;
-     src: url('../fonts/dm-mono/DMMono-LightItalic.ttf');
+     src: url('../fonts/dm-mono/DMMono-LightItalic.woff2');
 }
 
 @font-face {
      font-family: 'Open Sans';
      font-weight: medium;
      font-style: normal;
-     src: url('../fonts/open-sans/OpenSans-Medium.ttf');
+     src: url('../fonts/open-sans/OpenSans-Medium.woff2');
 }
 
 @font-face {
      font-family: 'DM Serif';
      font-weight: bolder;
      font-style: italic;
-     src: url('../fonts/open-sans/OpenSans-ExtraBold.ttf');
+     src: url('../fonts/open-sans/OpenSans-ExtraBold.woff2');
 }
 
 /* Variables */
@@ -123,23 +123,15 @@
 
 /* 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: 900;
+     p {
+          font-family: var(--primary-font);
      }
-}
 
-.md-typeset {
+     figcaption {
+          font-family: var(--secondary-font);
+          font-style: normal;
+     }
 
      h1,
      h2,
@@ -153,3 +145,15 @@
           font-family: var(--secondary-font);
      }
 }
+
+.md-typeset {
+
+     h1,
+     h2,
+     h3,
+     h4,
+     h5,
+     h6 {
+          font-weight: bold;
+     }
+}

docs/src/stylesheets/_hero-text.css

@@ -0,0 +1,74 @@
+/*****************************
+* 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);
+     }
+}

docs/src/stylesheets/_loader.css

@@ -0,0 +1,77 @@
+/*****************************
+* 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;
+}

docs/src/stylesheets/_media-player.css

@@ -0,0 +1,37 @@
+/*****************************
+* MEDIA PLAYER
+*****************************/
+
+media-player {
+     margin: 5px 0;
+
+     * {
+          filter: none;
+     }
+}
+
+.light .vds-time,
+.vds-button {
+     --default-color: #818589 !important;
+     color: #818589 !important;
+}
+
+.light .vds-audio-layout .vds-play-button,
+.vds-audio-layout.light .vds-play-button {
+     --default-bg: transparent !important;
+}
+
+.media-audio-layout {
+     background-color: transparent !important;
+}
+
+.vds-audio-layout.light {
+     --default-bg: transparent !important;
+}
+
+.vds-title {
+     font-family: var(--secondary-font);
+     font-size: 0.8em;
+     font-weight: bold;
+     color: #818589;
+}

docs/src/stylesheets/_page-resume.css

@@ -0,0 +1,228 @@
+/*****************************
+* RESUMÉ
+*****************************/
+
+/* Fade in content */
+.fade-in-up-section {
+     opacity: 0;
+     transform: translateY(20px);
+     transition: opacity 2s ease-in-out, transform 2s ease-in-out;
+}
+
+.fade-in-up-section.visible {
+     opacity: 1;
+     transform: translateY(0);
+}
+
+.fade-in-up-content {
+     padding: 20px;
+     border-radius: 5px;
+     /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
+}
+
+/* Career meta-information */
+.meta-icons {
+     font-size: max(calc(var(--text-variable-size) + 3px), var(--text-min-size));
+     font-family: var(--secondary-font);
+     font-weight: 900;
+     color: var(--tertiary-colour);
+     text-align: left;
+     display: flex;
+     justify-content: left;
+     gap: 25px;
+     width: fit-content;
+     margin: 0;
+
+     & .md-typeset .twemoji {
+          height: max(calc(var(--text-variable-size) + 5px), var(--text-min-size));
+     }
+
+     & svg {
+          margin-right: 3px;
+     }
+
+     a:hover {
+          color: var(--secondary-colour);
+     }
+}
+
+/* Career timeline */
+.tabbed-labels {
+     font-family: var(--number-font);
+     font-weight: 900;
+     margin-bottom: 0;
+
+     a:hover {
+          color: var(--secondary-colour);
+     }
+
+     label {
+          font-size: max(calc(var(--text-variable-size) + 9px), calc(var(--text-min-size) + 3px)) !important;
+     }
+
+     >label:nth-child(1) {
+          margin-left: 3vw;
+     }
+
+     >label:nth-child(2) {
+          margin-left: 18vw;
+     }
+
+     >label:nth-child(3) {
+          margin-left: 12vw;
+     }
+
+     >label:nth-child(4) {
+          margin-left: 21vw;
+     }
+
+     >label:nth-child(5) {
+          margin-left: 3vw;
+     }
+}
+
+.tabbed-content {
+     background-color: var(--quarternary-colour);
+     margin-top: 0;
+}
+
+div.tabbed-block {
+     padding: 1em 2.5em;
+}
+
+/* Timeline content */
+.logo-and-title {
+     display: inline-block;
+     margin: 0;
+
+     img {
+          height: max(15px, 0.5vh);
+          margin-right: 10px;
+     }
+
+     h6 {
+          display: inline-block;
+          margin-right: 5px;
+     }
+}
+
+div.tags {
+     font-family: var(--primary-font);
+     font-size: max(var(--text-variable-size), var(--text-min-size));
+     font-style: italic;
+     color: var(--tertiary-colour);
+     margin: 0;
+     padding: 0;
+}
+
+.three-column {
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     max-width: 1500px;
+     padding: 0;
+     width: 100%;
+
+     .column {
+          justify-self: center;
+          padding: 20px;
+          text-align: left;
+
+          &:nth-child(1) {
+               padding-left: 0;
+          }
+
+          &:nth-child(2) {
+               border-left: 1px solid var(--secondary-colour);
+               border-right: 1px solid var(--secondary-colour);
+          }
+
+          .content {
+               h6 {
+                    font-size: max(calc(var(--text-variable-size) + 7px), calc(var(--text-min-size) + 2px));
+                    font-family: var(--secondary-font);
+                    margin-bottom: 8px;
+               }
+          }
+     }
+}
+
+p.blurb {
+     font-family: var(--primary-font);
+     font-size: max(calc(var(--text-variable-size) + 5px), var(--text-min-size));
+     margin-top: 25px;
+}
+
+/* Portfolio */
+.grid.cards {
+
+     li {
+          background-color: var(--quarternary-colour);
+          border: none !important;
+          border-radius: 5px !important;
+          box-shadow: none;
+          padding: 2em !important;
+          margin: 2em !important;
+
+          h6 {
+               span {
+                    margin-right: 3px;
+               }
+          }
+
+          &:hover {
+               box-shadow: none !important;
+               border: none !important;
+          }
+     }
+}
+
+.writing {
+     padding: 4em;
+
+     h6 {
+          margin-bottom: 8px;
+     }
+}
+
+.two-column {
+     display: grid;
+     grid-template-columns: repeat(2, 1fr);
+     max-width: 1500px;
+     padding: 20px 20px 20px 0;
+     width: 100%;
+     margin: 10px auto;
+
+     .column {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 20px;
+          text-align: left;
+
+          .content {
+               display: flex;
+               flex-direction: column;
+               justify-content: center;
+               height: 100%;
+          }
+     }
+}
+
+/* Contact */
+
+div.contact-me {
+     display: flex;
+     justify-content: center;
+     align-items: center;
+     text-align: center;
+
+     div.button {
+          font-size: 1.8em;
+          color: var(--tertiary-colour);
+          border: none;
+
+          &:hover {
+               color: var(--secondary-colour);
+          }
+     }
+}

docs/src/stylesheets/_size.css

@@ -6,7 +6,6 @@
 :root {
      --text-min-size: 8px;
      --text-variable-size: 0.7vw;
-     --zero: 0;
      --full-width: 100vw;
      --half-width: 50vw;
      --third-width: 33.3vw;
@@ -24,7 +23,11 @@
 /* Font sizes */
 .md-typeset {
      p {
-          font-size: max(var(--text-variable-size), var(--text-min-size));
+          font-size: max(calc(var(--text-variable-size) + 3px), var(--text-min-size));
+     }
+
+     figcaption {
+          font-size: max(calc(var(--text-variable-size)), var(--text-min-size));
      }
 
      h1,
@@ -34,7 +37,7 @@
      h5,
      h6 {
           letter-spacing: normal;
-          margin: var(--zero);
+          margin: 0 0 5px 0;
      }
 }
 
@@ -60,7 +63,7 @@
      }
 
      h6 {
-          font-size: max(calc(var(--text-variable-size) + 5px), calc(var(--text-min-size) + 1px));
+          font-size: max(calc(var(--text-variable-size) + 8px), calc(var(--text-min-size) + 1px));
      }
 }
 

docs/src/stylesheets/g.css

@@ -1,6 +1,13 @@
 @import url(_colours.css);
 @import url(_fonts.css);
 @import url(_size.css);
+@import url(_loader.css);
+@import url(_page-resume.css);
+@import url(_hero-text.css);
+@import url(_faces.css);
+@import url(_button.css);
+@import url(_media-player.css);
+
 
 /*****************************
 * GENERAL RULES
@@ -44,494 +51,9 @@ article.md-content__inner.md-typeset:after {
 }
 
 .md-typeset figcaption {
-     font-family: var(--secondary-font);
-     color: var(--tertiary-colour);
-     font-size: 0.8em;
-     font-style: normal;
      max-width: none;
 }
 
-.vds-title {
-     font-family: var(--secondary-font);
-     font-size: 0.8em;
-}
-
-/*****************************
-* BUTTON
-*****************************/
-
-div.button {
-     font-family: var(--secondary-font);
-     border-bottom: 3px solid var(--secondary-colour);
-     width: fit-content;
-     padding-bottom: 3px;
-     font-weight: bold;
-
-     &:hover {
-          border-bottom: 3px solid white;
-     }
-}
-
-/*****************************
-* 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);
-     }
-}
-
-/*****************************
-* 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);
-     }
-}
-
-
-
-/*****************************
-* 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;
-}
-
-/*****************************
-* RESUMÉ
-*****************************/
-
-/* Fade in content */
-.fade-in-up-section {
-     opacity: 0;
-     transform: translateY(20px);
-     transition: opacity 2s ease-in-out, transform 2s ease-in-out;
-}
-
-.fade-in-up-section.visible {
-     opacity: 1;
-     transform: translateY(0);
-}
-
-.fade-in-up-content {
-     padding: 20px;
-     border-radius: 5px;
-     /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
-}
-
-/* Career meta-information */
-.meta-icons {
-     font-size: max(calc(var(--text-variable-size) + 3px), var(--text-min-size));
-     font-family: var(--secondary-font);
-     font-weight: 900;
-     color: var(--tertiary-colour);
-     text-align: left;
-     display: flex;
-     justify-content: left;
-     gap: 25px;
-     width: fit-content;
-     margin: 0;
-
-     & .md-typeset .twemoji {
-          height: max(calc(var(--text-variable-size) + 5px), var(--text-min-size));
-     }
-
-     & svg {
-          margin-right: 3px;
-     }
-
-     a:hover {
-          color: var(--secondary-colour);
-     }
-}
-
-/* Career timeline */
-.tabbed-labels {
-     font-family: var(--number-font);
-     font-weight: 900;
-     margin-bottom: 0;
-
-     a:hover {
-          color: var(--secondary-colour);
-     }
-
-     label {
-          font-size: max(calc(var(--text-variable-size) + 9px), calc(var(--text-min-size) + 3px)) !important;
-     }
-
-     >label:nth-child(1) {
-          margin-left: 3vw;
-     }
-
-     >label:nth-child(2) {
-          margin-left: 18vw;
-     }
-
-     >label:nth-child(3) {
-          margin-left: 12vw;
-     }
-
-     >label:nth-child(4) {
-          margin-left: 21vw;
-     }
-
-     >label:nth-child(5) {
-          margin-left: 3vw;
-     }
-}
-
-.tabbed-content {
-     background-color: var(--quarternary-colour);
-     margin-top: 0;
-}
-
-div.tabbed-block {
-     padding: 1em 2.5em;
-}
-
-/* Timeline content */
-.logo-and-title {
-     display: inline-block;
-     margin: 0;
-
-     img {
-          height: max(15px, 0.5vh);
-          margin-right: 10px;
-     }
-
-     h6 {
-          display: inline-block;
-          margin-right: 5px;
-     }
-}
-
-.tags {
-     font-size: max(9px, 0.8em);
-     font-style: italic;
-     color: var(--tertiary-colour);
-     margin: 0;
-     padding: 0;
-}
-
-.three-column {
-     display: grid;
-     grid-template-columns: repeat(3, 1fr);
-     max-width: 1500px;
-     padding: 0;
-     width: 100%;
-
-     .column {
-          justify-self: center;
-          padding: 20px;
-          text-align: left;
-
-          &:nth-child(1) {
-               padding-left: 0;
-          }
-
-          &:nth-child(2) {
-               border-left: 1px solid var(--secondary-colour);
-               border-right: 1px solid var(--secondary-colour);
-          }
-
-          .content {
-               h6 {
-                    font-size: max(calc(var(--text-variable-size) + 5px), calc(var(--text-min-size) + 2px));
-                    color: var(--primary-colour);
-                    text-transform: uppercase;
-                    margin-bottom: 8px;
-               }
-
-               p {
-                    font-size: max(calc(var(--text-variable-size) + 3px), var(--text-min-size));
-               }
-          }
-     }
-}
-
-p.blurb {
-     font-size: max(calc(var(--text-variable-size) + 3px), var(--text-min-size));
-     margin-top: 25px;
-}
-
-/* Portfolio */
-.grid.cards {
-
-     li {
-          background-color: var(--quarternary-colour);
-          border: none !important;
-          border-radius: 5px !important;
-          box-shadow: none;
-          padding: 2em !important;
-          margin: 2em !important;
-
-          h6 {
-               text-transform: initial !important;
-
-               span {
-                    margin-right: 3px;
-               }
-          }
-
-          &:hover {
-               box-shadow: none !important;
-               border: none !important;
-          }
-     }
-}
-
-.writing {
-     padding: 4em;
-
-     h6 {
-          font-size: max(calc(var(--text-variable-size) + 5px), calc(var(--text-min-size) + 2px));
-          color: var(--primary-colour);
-          text-transform: uppercase;
-          margin-bottom: 8px;
-     }
-
-     p {
-          font-size: max(calc(var(--text-variable-size) + 3px), var(--text-min-size));
-     }
-}
-
-.two-column {
-     display: grid;
-     grid-template-columns: repeat(2, 1fr);
-     max-width: 1500px;
-     padding: 20px 20px 20px 0;
-     width: 100%;
-     margin: 10px auto;
-
-     .column {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          padding: 20px;
-          text-align: left;
-
-          .content {
-               display: flex;
-               flex-direction: column;
-               justify-content: center;
-               height: 100%;
-
-               h6 {
-                    font-size: max(calc(var(--text-variable-size) + 5px), calc(var(--text-min-size) + 2px));
-                    color: var(--primary-colour);
-                    text-transform: uppercase;
-                    margin-bottom: 8px;
-               }
-
-               p {
-                    font-size: max(calc(var(--text-variable-size) + 3px), var(--text-min-size));
-               }
-
-               div {
-                    font-family: var(--secondary-font);
-               }
-          }
-     }
-}
-
-/* Contact */
-
-div.contact-me {
-     display: flex;
-     justify-content: center;
-     align-items: center;
-
-     div.button {
-          font-size: 1.8em;
-          text-transform: uppercase;
-          font-weight: bold !important;
-          color: var(--tertiary-colour);
-
-          &:hover {
-               border-bottom: 3px solid var(--tertiary-colour);
-               color: var(--secondary-colour);
-          }
-     }
-}
-
 /*****************************
 * STATUS
 *****************************/