Reset author

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/js/loader.js

@@ -0,0 +1,12 @@
+document.getElementById('loader').style.display = 'block';
+
+function fadeOutLoader() {
+     const loader = document.getElementById('loader');
+     loader.classList.add('fade-out');
+
+     setTimeout(() => {
+          loader.remove();
+     }, 1000);
+}
+
+setTimeout(fadeOutLoader, 2500);

docs/src/stylesheets/_colours.css

@@ -0,0 +1,22 @@
+/* Change the colours of the root colour scheme */
+: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;
+}
+
+[data-md-color-scheme=default] {
+     --md-default-bg-color: #FAF9F6;
+}
+
+/* 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;
+}

docs/src/stylesheets/g.css

@@ -0,0 +1,118 @@
+@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");
+
+/* Body background colour */
+
+body {
+     background: transparent;
+}
+
+/* Link colours */
+a {
+     color: var(--md-primary-fg-color--light);
+}
+
+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 */
+
+.md-search-result__link:focus,
+.md-search-result__link:hover {
+     background-color: #E6E6E6;
+}
+
+.md-typeset mark {
+     background-color: var(--md-accent-fg-color);
+}
+
+/* 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;
+}
+
+/* Fixing admonitions */
+
+.admonition {
+     border: none !important;
+}
+
+.admonition>p:nth-child(2) {
+     background-color: white !important;
+}

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;
+}