Testing pre-push hook. Added some fonts.

content/assets/css/_chapter.css

@@ -1,50 +1,50 @@
-@import url(_colours.css);
-
 /*****************************
 * CHAPTER
 * Styling for chapter pages.
 *****************************/
 
+/* Removing all padding, margins, etc. The content covers the entire viewing area */
+body,
 .md-content__inner,
 .md-main__inner,
-.md-grid,
-html,
-body,
-* {
-     margin: 0;
-     padding: 0;
+.md-grid {
      box-sizing: border-box;
-     max-width: none;
-}
-
-article,
-.md-container {
-     min-height: 100%;
-     width: 100%;
      margin: 0;
+     max-width: none;
      padding: 0;
 }
 
 body {
-     min-height: 100vh;
+     align-items: center;
      display: flex;
      justify-content: center;
-     align-items: center;
-     background-color: white;
+     min-height: 100%;
      width: 100%;
 }
 
-.container {
+article,
+.md-container,
+div.md-content {
+     margin: 0;
+     min-height: 100%;
+     padding: 0;
      width: 100%;
-     height: 100%;
-}
-
-header,
-.md-content .md-typeset h1 {
-     display: none !important;
 }
 
 article.md-content__inner.md-typeset:before,
 article.md-content__inner.md-typeset:after {
      content: none;
 }
+
+/* Hide announcements bar on chapter pages */
+header,
+[data-md-component="skip"],
+[data-md-component="announce"],
+.md-content .md-typeset h1 {
+     display: none !important;
+}
+
+/* Hide the repo stuff */
+.md-source {
+     display: none !important;
+}

content/assets/css/_colours.css

@@ -1,54 +0,0 @@
-/*****************************
-* COLOURS
-*****************************/
-
-:root {
-     --background-colour: #FFF;
-     --primary-colour: #323036;
-     --secondary-colour: #EFE5DC;
-     --tertiary-colour: #818589;
-     --quarternary-colour: #FAF9F6;
-     --transparent: transparent;
-}
-
-/* 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);
-}
-
-[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);
-     }
-
-     figcaption,
-     a,
-     h4,
-     h5,
-     h6 {
-          color: var(--tertiary-colour);
-     }
-
-     a:hover {
-          color: var(--secondary-color);
-     }
-}

content/assets/css/_fonts.css

@@ -1,202 +0,0 @@
-/*****************************
-* 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.woff2');
-
-}
-
-@font-face {
-     font-family: 'Lato';
-     font-weight: bold;
-     font-style: italic;
-     src: url('../fonts/lato/Lato-BoldItalic.woff2');
-}
-
-@font-face {
-     font-family: 'Lato';
-     font-weight: light;
-     font-style: normal;
-     src: url('../fonts/lato/Lato-Regular.woff2');
-
-}
-
-@font-face {
-     font-family: 'Lato';
-     font-weight: light;
-     font-style: italic;
-     src: url('../fonts/lato/Lato-Italic.woff2');
-}
-
-@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.woff2');
-}
-
-@font-face {
-     font-family: 'DM Mono';
-     font-weight: normal;
-     font-style: italic;
-     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.woff2');
-}
-
-@font-face {
-     font-family: 'DM Mono';
-     font-weight: medium;
-     font-style: normal;
-     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.woff2');
-}
-
-@font-face {
-     font-family: 'DM Mono';
-     font-weight: light;
-     font-style: italic;
-     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.woff2');
-}
-
-@font-face {
-     font-family: 'DM Serif';
-     font-weight: bolder;
-     font-style: italic;
-     src: url('../fonts/open-sans/OpenSans-ExtraBold.woff2');
-}
-
-/* Variables */
-
-:root {
-     --primary-font: 'Libre Baskerville', serif;
-     --secondary-font: 'Lato', sans-serif;
-     --tertiary-font: 'DM Mono', monospace;
-     --number-font: 'Open Sans', sans-serif;
-}
-
-/* Typeset */
-
-.md-typeset {
-     p, li, ul {
-          font-family: var(--primary-font);
-     }
-
-     figcaption {
-          font-family: var(--secondary-font);
-          font-style: normal;
-     }
-
-     h1,
-     h2,
-     h3 {
-          font-family: var(--secondary-font);
-     }
-
-     h4,
-     h5,
-     h6 {
-          font-family: var(--secondary-font);
-     }
-}
-
-.md-typeset {
-
-     h1,
-     h2,
-     h3,
-     h4,
-     h5,
-     h6 {
-          font-weight: bold;
-     }
-}

content/assets/css/_media-player.css

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

content/assets/css/_page-resume.css

@@ -1,230 +0,0 @@
-/*****************************
-* 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: 4vw;
-     }
-
-     >label:nth-child(2) {
-          margin-left: 12vw;
-     }
-
-     >label:nth-child(3) {
-          margin-left: 24vw;
-     }
-
-     >label:nth-child(4) {
-          margin-left: 12vw;
-     }
-
-     >label:nth-child(5) {
-          margin-left: 10vw;
-     }
-}
-
-.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 !important;
-          padding: 2em !important;
-          margin: 2em !important;
-
-
-          h6 {
-               span {
-                    margin-right: 3px;
-               }
-          }
-
-          &:hover {
-               box-shadow: none !important;
-               border: none !important;
-               transition: 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);
-          }
-     }
-}

content/assets/css/_size.css

@@ -1,74 +0,0 @@
-/*****************************
-* SIZE
-*****************************/
-
-/* Standard screen size is based on 1728x1117 screen. */
-:root {
-     --text-min-size: 8px;
-     --text-variable-size: 0.7vw;
-     --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;
-     --horizontal-spacing: 0.3vw;
-     --vertical-spacing: 0.45vh;
-}
-
-/* Font sizes */
-.md-typeset {
-     p {
-          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,
-     h2,
-     h3,
-     h4,
-     h5,
-     h6 {
-          letter-spacing: normal;
-          margin: 0 0 5px 0;
-     }
-}
-
-.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) * 4), calc(var(--text-min-size) + 5px));
-     }
-
-     h3 {
-          font-size: max(calc(var(--text-variable-size) * 3.5), calc(var(--text-min-size) + 4px));
-     }
-
-     h4 {
-          font-size: max(calc(var(--text-variable-size) * 2.8), 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) + 8px), 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;
-}

content/assets/css/g.css

@@ -1,165 +0,0 @@
-@import url(_colours.css);
-@import url(_fonts.css);
-@import url(_size.css);
-@import url(_media-player.css);
-
-
-/*****************************
-* GENERAL RULES
-*****************************/
-
-body {
-     background: var(--background);
-     min-height: 100vh;
-     display: flex;
-     justify-content: center;
-     align-items: center;
-     width: 100%;
-}
-
-nav,
-.md-header {
-     background-color: var(--transparent);
-}
-
-a.md-header__button {
-     display: none !important;
-}
-
-.md-typeset a:hover {
-     text-decoration: none;
-}
-
-.md-header--shadow {
-     box-shadow: none;
-}
-
-.md-header__topic:first-child {
-     display: none;
-}
-
-/* Change colour of search highlighting. */
-.md-search-result__link:focus,
-.md-search-result__link:hover {
-     background-color: var(--transparent);
-}
-
-.md-typeset mark {
-     background-color: var(--transparent);
-}
-
-/* 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;
-}
-
-.md-typeset figcaption {
-     max-width: none;
-}
-
-/* Hide the repo stuff */
-.md-source {
-     display: none !important;
-}
-
-/*****************************
-* 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;
-     }
-}
-
-
-/*****************************
-* STATUS
-*****************************/
-
-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;
-     margin-bottom: 15px;
-}
-
-/*****************************
-* TOOLTIP
-*****************************/
-
-.md-annotation__index {
-     overflow: inherit;
-     vertical-align: inherit;
-}
-
-.md-tooltip {
-     box-shadow: none;
-     border: 1px solid var(--secondary-colour);
-     padding: 3px;
-     margin: 0;
-}
-
-.md-tooltip__inner {
-     font-family: var(--secondary-font);
-     font-size: 0.8em;
-     padding-top: 0;
-     padding-bottom: 0;
-}
-
-/*****************************
-* FOOTER
-*****************************/
-
-div.footer {
-     margin: 30px 5px 5px 0;
-     padding-bottom: 0;
-     display: flex;
-     justify-content: center;
-     align-items: center;
-     flex-direction: row;
-}
-
-div.footer>*:not(:last-child)::after {
-     content: " | ";
-     margin: 0 8px;
-}
-
-/*****************************
-* RESPONSIVE
-*****************************/
-
-@media (max-width: 768px) {
-     .faces {
-          flex-direction: column;
-     }
-
-
-     .three-column {
-          grid-template-columns: 1fr;
-
-          .column:nth-child(1) {
-               padding-left: 20px;
-          }
-
-          .column:nth-child(2) {
-               border: none;
-          }
-     }
-
-}

content/assets/css/index.css

@@ -1,14 +1,10 @@
-@import url(_colours.css);
+@import url("theme.css");
 
 /*****************************
-* HOME
+* INDEX
 * Styling for the homepage.
 *****************************/
 
-* {
-     box-sizing: border-box;
-}
-
 .content {
      align-items: center;
      display: flex;
@@ -24,7 +20,6 @@
 .content ul {
      align-items: center;
      display: flex;
-     font-size: 30px;
      height: 1.4em;
      justify-content: center;
      left: 50%;
@@ -40,17 +35,17 @@
      top: 20px;
      transform: translateX(-50%);
      width: 100%;
-     z-index: 5;
+     z-index: 0;
 }
 
 .content ul li {
      align-items: center;
      box-sizing: border-box;
      display: flex;
-     font-size: calc((min(100vw, 900px)) / 10);
+     font-size: 15vw;
      inset: 0;
      justify-content: center;
-     margin: 0;
+     margin: 0 !important;
      padding: 0;
      pointer-events: auto;
      position: absolute;
@@ -59,20 +54,24 @@
      width: 100%;
 }
 
+.content ul li:hover {
+     cursor: pointer;
+}
+
 .content ul li a {
      text-decoration: none !important;
 }
 
 .content ul li:nth-child(2) {
-     font-family: var(--primary-font);
+     font-family: var(--words-title) !important;
 }
 
 .content ul li:nth-child(3) {
-     font-family: var(--secondary-font);
+     font-family: var(--visuals-title);
 }
 
 .content ul li:nth-child(4) {
-     font-family: var(--tertiary-font);
+     font-family: var(--technical-title);
 }
 
 .content .faces {
@@ -86,6 +85,16 @@
      width: 100%;
 }
 
+.down-arrow {
+     animation: flash 1s infinite;
+     bottom: 20px;
+     color: var(--tertiary-colour);
+     font-size: 1rem;
+     left: 50%;
+     position: fixed;
+     transform: translateX(-50%);
+}
+
 .faces .slide {
      border-radius: 10px;
      left: 50%;
@@ -106,14 +115,27 @@
      width: 100%;
 }
 
-.down-arrow {
-     animation: flash 1s infinite;
-     bottom: 20px;
-     color: var(--secondary-colour);
-     font-size: 2rem;
-     left: 50%;
-     position: fixed;
-     transform: translateX(-50%);
+footer {
+     background: repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(75, 85, 99, 0.08) 19px, rgba(75, 85, 99, 0.08) 20px, transparent 20px, transparent 39px, rgba(75, 85, 99, 0.08) 39px, rgba(75, 85, 99, 0.08) 40px),
+          repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(75, 85, 99, 0.08) 19px, rgba(75, 85, 99, 0.08) 20px, transparent 20px, transparent 39px, rgba(75, 85, 99, 0.08) 39px, rgba(75, 85, 99, 0.08) 40px),
+          radial-gradient(circle at 20px 20px, rgba(55, 65, 81, 0.12) 2px, transparent 2px),
+          radial-gradient(circle at 40px 40px, rgba(55, 65, 81, 0.12) 2px, transparent 2px);
+     font-family: var(--general-sans);
+}
+
+.hero {
+     align-items: center;
+     display: flex;
+     height: 100vh;
+     justify-content: center;
+     margin: 0;
+     overflow: hidden;
+     padding: 0;
+     width: 100%;
+}
+
+.hidden {
+     display: none;
 }
 
 @keyframes flash {
@@ -127,14 +149,3 @@
           opacity: 0.5;
      }
 }
-
-.hero {
-     align-items: center;
-     display: flex;
-     height: 100vh;
-     justify-content: center;
-     margin: 0;
-     overflow: hidden;
-     padding: 0;
-     width: 100%;
-}

content/assets/css/theme.css

@@ -0,0 +1,181 @@
+/*****************************
+* Theme
+* Base CSS file
+------------------------------
+* COLOURS
+*****************************/
+
+/* Colour variables */
+:root {
+     --background-colour: #FFF;
+     --primary-colour: #323036;
+     --quarternary-colour: #FAF9F6;
+     --secondary-colour: #818589;
+     --tertiary-colour: #E6E6E6;
+     --transparent: transparent;
+}
+
+/* Adjust Zensical colours */
+[data-md-color-accent=custom] {
+     --md-default-bg-color: var(--background-colour);
+     --md-footer-bg-color: var(--background-colour);
+     --md-primary-bg-color: var(--background-colour);
+     --md-primary-fg-color: var(--primary-colour);
+     --md-primary-fg-color--dark: var(--primary-colour);
+     --md-primary-fg-color--light: var(--tertiary-colour);
+}
+
+/*****************************
+* FONTS
+*****************************/
+
+/* General */
+@font-face {
+     font-family: 'Source Code';
+     font-style: normal;
+     font-weight: 100 700;
+     src: url('../fonts/source-code.ttf') format('truetype');
+}
+
+@font-face {
+     font-family: 'Source Sans';
+     font-style: normal;
+     font-weight: 100 700;
+     src: url('../fonts/source-sans.ttf') format('truetype');
+}
+
+@font-face {
+     font-family: 'Source Serif';
+     font-style: normal;
+     font-weight: 100 700;
+     src: url('../fonts/source-serif.ttf') format('truetype');
+}
+
+/* Technical */
+@font-face {
+     font-family: 'DM Mono';
+     font-style: normal;
+     font-weight: 100 700;
+     src: url('../fonts/dm-mono.ttf') format('truetype');
+}
+
+@font-face {
+     font-family: 'DM Sans';
+     font-style: normal;
+     font-weight: 100 700;
+     src: url('../fonts/dm-sans.ttf') format('truetype');
+}
+
+@font-face {
+     font-family: 'Tiny5';
+     font-style: normal;
+     font-weight: 900;
+     src: url('../fonts/tiny5.ttf') format('truetype');
+}
+
+/* Visual */
+@font-face {
+     font-family: 'Plaster';
+     font-style: normal;
+     font-weight: 900;
+     src: url('../fonts/plaster.ttf') format('truetype');
+}
+
+@font-face {
+     font-family: 'Rubik';
+     font-style: normal;
+     font-weight: 100 700;
+     src: url('../fonts/rubik.ttf') format('truetype');
+}
+
+/* Words */
+@font-face {
+     font-family: 'EB Garamond';
+     font-style: italic;
+     font-weight: 100 700;
+     src: url('../fonts/eb-garamond-italics.ttf') format('truetype');
+}
+
+@font-face {
+     font-family: 'EB Garamond';
+     font-style: normal;
+     font-weight: 100 700;
+     src: url('../fonts/eb-garamond.ttf') format('truetype');
+}
+
+@font-face {
+     font-family: 'Playfair Display SC';
+     font-style: normal;
+     font-weight: 900;
+     src: url('../fonts/playfair-display-sc.ttf') format('truetype');
+}
+
+/* Variables */
+:root {
+     --general-sans: 'Source Sans', sans-serif;
+     --general-serif: 'Source Serif', serif;
+     --general-code: 'Source Code', monospace;
+     --technical-code: 'DM Mono', monospace;
+     --technical-text: 'DM Sans', monospace;
+     --technical-title: 'Tiny5', 'DM Mono', monospace;
+     --visuals-text: 'Rubik', sans-serif;
+     --visuals-title: 'Plaster', 'Rubik', sans-serif;
+     --words-text: 'EB Garamond', serif;
+     --words-title: 'Playfair Display SC', 'EB Garamond', serif;
+}
+
+/* Colours and weights */
+.md-typeset {
+
+     a,
+     figcaption {
+          color: var(--secondary-colour);
+          max-width: none;
+          text-decoration: none;
+     }
+
+     a:hover {
+          color: var(--teriary-color);
+     }
+
+     h1,
+     h2,
+     h3,
+     h4,
+     h5,
+     h6 {
+          color: var(--secondary-colour);
+          font-weight: bold;
+     }
+
+     p {
+          color: var(--primary-colour);
+     }
+}
+
+/*****************************
+* RULES
+*****************************/
+
+body {
+     align-items: center;
+     display: flex;
+     justify-content: center;
+     min-height: 100vh;
+     width: 100%;
+}
+
+/* Footer */
+footer {
+     align-items: center;
+     display: flex;
+     flex-direction: row;
+     justify-content: center;
+     margin-bottom: 5px;
+     padding-bottom: 0;
+}
+
+footer>*:not(:last-child)::after {
+     content: " | ";
+     margin: 0 8px;
+}

content/assets/fonts/fira-code/OFL.txt

@@ -1,93 +0,0 @@
-Copyright 2014-2020 The Fira Code Project Authors (https://github.com/tonsky/FiraCode)
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-https://openfontlicense.org
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.

content/assets/fonts/fira-code/README.txt

@@ -1,67 +0,0 @@
-Fira Code Variable Font
-=======================
-
-This download contains Fira Code as both a variable font and static fonts.
-
-Fira Code is a variable font with this axis:
-  wght
-
-This means all the styles are contained in a single file:
-  Fira_Code/FiraCode-VariableFont_wght.ttf
-
-If your app fully supports variable fonts, you can now pick intermediate styles
-that aren’t available as static fonts. Not all apps support variable fonts, and
-in those cases you can use the static font files for Fira Code:
-  Fira_Code/static/FiraCode-Light.ttf
-  Fira_Code/static/FiraCode-Regular.ttf
-  Fira_Code/static/FiraCode-Medium.ttf
-  Fira_Code/static/FiraCode-SemiBold.ttf
-  Fira_Code/static/FiraCode-Bold.ttf
-
-Get started
------------
-
-1. Install the font files you want to use
-
-2. Use your app's font picker to view the font family and all the
-available styles
-
-Learn more about variable fonts
--------------------------------
-
-  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
-  https://variablefonts.typenetwork.com
-  https://medium.com/variable-fonts
-
-In desktop apps
-
-  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
-  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
-
-Online
-
-  https://developers.google.com/fonts/docs/getting_started
-  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
-  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
-
-Installing fonts
-
-  MacOS: https://support.apple.com/en-us/HT201749
-  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
-  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
-
-Android Apps
-
-  https://developers.google.com/fonts/docs/android
-  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
-
-License
--------
-Please read the full license text (OFL.txt) to understand the permissions,
-restrictions and requirements for usage, redistribution, and modification.
-
-You can use them in your products & projects – print or digital,
-commercial or otherwise.
-
-This isn't legal advice, please consider consulting a lawyer and see the full
-license for all details.

content/assets/fonts/fira-sans/OFL.txt

@@ -1,93 +0,0 @@
-Copyright (c) 2012-2015, The Mozilla Foundation and Telefonica S.A.
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-https://openfontlicense.org
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.

content/assets/fonts/libre-baskerville/style.css

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

content/assets/js/index.js

@@ -1,4 +1,4 @@
-// HOME.js
+// INDEX.js
 // Manages the animations on the home page
 
 document.addEventListener('DOMContentLoaded', function () {
@@ -76,7 +76,7 @@ document.addEventListener('DOMContentLoaded', function () {
      }
 
      // Attach links to pages
-     const links = ['#', 'https://gugulet.hu/words', 'https://gugulet.hu/visuals', 'https://gugulet.hu/technical'];
+     const links = ['#', '/words', '/visuals', '/technical'];
      document.querySelectorAll('.list li').forEach((item, index) => {
           item.innerHTML = `<a href="${links[index]}">${item.innerHTML}</a>`;
      });
@@ -84,3 +84,10 @@ document.addEventListener('DOMContentLoaded', function () {
           slide.innerHTML = `<a href="${links[index]}">${slide.innerHTML}</a>`;
      });
 });
+
+// Hide the scroll icon when at the end of the page
+window.addEventListener('scroll', function () {
+     if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
+          document.getElementById('down-arrow').classList.add('hidden');
+     }
+});