.

docs/src/js/index-text.js

@@ -0,0 +1,11 @@
+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/stylesheets/index.css

@@ -0,0 +1,213 @@
+@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;
+}

docs/src/stylesheets/index2.css

@@ -0,0 +1,104 @@
+@import url(_colours.css);
+
+header,
+nav,
+footer,
+.md-content .md-typeset h1 {
+     display: none !important;
+}
+
+* {
+     margin: 0;
+     padding: 0;
+     box-sizing: border-box;
+}
+
+html {
+     min-height: 100vh;
+     width: 100%;
+}
+
+body {
+     background-color: white;
+     height: 100%;
+     font-family: 'Lato', sans-serif;
+     font-weight: bold;
+     margin: 0;
+     padding: 0;
+     box-sizing: border-box;
+}
+
+.md-grid {
+     max-width: 100vw;
+     margin: 0;
+     padding: 0;
+}
+
+.md-content__inner {
+     padding: 0;
+     margin: 0;
+}
+
+.grid-container {
+     display: grid;
+     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+     gap: 50px;
+     min-height: 95vh;
+     width: 100%;
+     padding: 0;
+}
+
+.column {
+     position: relative;
+     width: 100%;
+     height: auto;
+     background-size: contain;
+     background-repeat: no-repeat;
+     background-position: center center;
+     transition: all 0.3s ease;
+     opacity: 0.5;
+}
+
+.column:hover {
+     opacity: 1;
+     filter: invert(50%);
+}
+
+.content {
+     position: static;
+     top: 0;
+     left: 0;
+     width: 100%;
+     height: 100%;
+     opacity: 0;
+     transition: all 0.3s ease;
+     color: var(--md-primary-fg-color);
+     display: flex;
+     align-items: center;
+     justify-content: center;
+     text-align: center;
+     z-index: 1;
+}
+
+.column:hover .content {
+     opacity: 0;
+     animation: fadeIn 1s ease-out forwards;
+}
+
+@keyframes fadeIn {
+     from {
+          opacity: 0;
+     }
+
+     to {
+          opacity: 1;
+     }
+}
+
+div.content>div {
+     margin: 0;
+     font-size: 1.5em;
+     color: var(--md-primary-fg-color);
+     padding: 8px;
+     font-size: 1.5em;
+}