Preparing for deploying with GitHub pages.

_site/assets/search.js

@@ -0,0 +1,52 @@
+fetch('/search_index.json')
+  .then(r => r.json())
+  .then(data => {
+    const idx = elasticlunr.Index.load(data);
+    const docs = idx.documentStore.docs;
+    const searchInput = document.getElementById('search');
+    const out = document.getElementById('searchResults');
+    const filterSelect = document.getElementById('searchMode');
+
+    function runSearch(q, tags = 'all') {
+      let result = idx.search(q, { expand: true }).map(r => docs[r.ref] )
+      if (tags === 'all') {
+        return result;
+      }
+      
+      result = result.filter(d => tags === 'all' || d.tags.includes(tags));
+
+      return result;
+    }
+
+    function render(doc) {
+      console.log(doc.imageq)
+      let tagsHTML = "";
+      console.log(doc.tags)
+
+      doc.tags.forEach(tag => {
+        tagsHTML += `<div class="tag-${tag}">${tag}</div>`
+      });
+
+      return `<div class="searchItem">
+        <p>${doc.image ? `<img float=left class="searchItemImage" src="${doc.image}">` : ''} <a class="searchItemTitle" href="${doc.url}">${doc.title}</a>${doc.author ? ` by <a href="/authors/${doc.author}">${doc.author}</a>` : ''}</p>
+        <p class="searchItemDescription">${doc.subtitle}</p>
+        <div class="searchItemTagHolder">
+          ${tagsHTML}
+        </div>
+      </div>`;
+    }
+
+    function update() {
+      const q = searchInput.value.trim();
+      if (!q) {
+        out.innerHTML = '';
+        return;
+      }
+      
+      const results = runSearch(q, filterSelect.value);
+      out.innerHTML = results.map(render).join('');
+    }
+
+    searchInput.addEventListener('input', update);
+    filterSelect.addEventListener('change', update);
+  });

_site/assets/stylesheets/home.css

@@ -0,0 +1,28 @@
+#homeUpdates {
+    background-color: var(--accent-secondary);
+    border: thick solid var(--accent-color);
+    width: 50%;
+    margin: 0px 2em 2em 2em;
+    padding: 1em;
+    height: fit-content;
+    border-radius: 4px;
+}
+
+#featureAndUpdates {
+    display: flex;
+    flex-direction: row;
+    margin-top: 1em;
+}
+
+@media only screen and (max-width: 1280px) {
+    #featureAndUpdates {
+        flex-direction: column;
+        gap: 1em;
+        flex-flow: column-reverse;
+    }
+    
+    #homeUpdates {
+        width: 100%;
+        margin: 0;
+    }
+}

_site/assets/stylesheets/project.css

@@ -0,0 +1,121 @@
+#projectTitle {
+    font-size: xx-large;
+}
+
+#projectTitleSubtitle {
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+#projectTitleSubtitle h1 {
+    margin-bottom: 0;
+}
+
+#projectHeader {
+    padding-top: 20px;
+    gap: 20px;
+    display: flex;
+}
+
+#project {
+    display: flex;
+    flex-direction: column;
+    gap: var(--box-gap);
+    width: 100%;
+}
+
+#downloadLink {
+    color: gray;
+    height: fit-content;
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-left: auto;
+    text-align: right;
+    /* text-shadow: 2px 2px black; */
+}
+
+#downloadButton:hover {
+    cursor: pointer;
+}
+
+#projectHeader img {
+    outline: 2px solid gray;
+    height: 5em;
+    image-rendering: pixelated;
+}
+
+#projectTitleAuthor {
+    display: flex;
+}
+
+#projectAuthor {
+    margin-left: .6em;
+    margin-top: auto;
+    /* margin-bottom: .4em; */
+}
+
+#projectImageCarrousel {
+    outline: 2px solid gray;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+}
+
+#projectCarrouselImageHolder {
+    height: 100%;
+    gap: 1em;
+    overflow: auto;
+    scroll-margin-left: 10px;
+    overflow-x: scroll;
+    white-space: nowrap;
+}
+
+.projectImage {
+    transition: .4s;
+    height: 95%;
+    max-width: 10em;
+    object-fit: cover;
+    /* filter: grayscale(); */
+}
+
+/* .projectImage:hover {
+    filter: none;
+    opacity: .8;
+    max-width: 100%;
+    object-fit: unset;
+} */
+
+#projectImagesAndInfo {
+    display: flex;
+    gap: 2em;
+    height: 12em;
+}
+
+#projectInfo {
+    outline: 2px solid var(--accent-color);
+    background-color: var(--accent-background);
+    flex-grow: 1;
+    padding: 1em;
+    overflow-y: auto;
+}
+
+@media only screen and (max-width: 1280px) {
+    #projectImagesAndInfo {
+        flex-direction: column;
+        flex-grow: unset;
+    }
+
+    #projectImagesAndInfo {
+        height: unset;
+    }
+
+    #projectInfo {
+        height: 13em;
+    }
+
+    #projectImageCarrousel {
+        height: 13em;
+        width: unset;
+    }
+}

_site/assets/stylesheets/search.css

@@ -0,0 +1,18 @@
+.searchItemImage {
+    height: 1em;
+}
+
+.searchItemTagHolder {
+    display: flex;
+    padding-top: .2em;
+    gap: .4em;
+}
+
+.searchItemTagHolder div {
+    border: thin solid greenyellow;
+    padding: .1em .2em .1em .2em;
+}
+
+.searchItemDescription {
+    margin-bottom: 0px;
+}

_site/assets/stylesheets/styles.css

@@ -0,0 +1,272 @@
+:root {
+    --text-color: white;
+    --accent-color: greenyellow;
+    --accent-secondary: green;
+    --box-gap: 2rem;
+    --accent-background: rgb(0, 30, 0);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    scrollbar-color: var(--accent-color) var(--accent-background);
+}
+
+@font-face {
+    font-family: Minecraft;
+    src: url("/assets/MinecraftRegular-Bmg3.otf") format("opentype");
+}
+
+body {
+    font-family: Minecraft, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
+    background-color: black;
+    color:white;
+    font-size : clamp(1.2rem, .2vw, 2rem);
+}
+
+header {
+    display: flex;
+    text-align: center;
+}
+
+aside {
+    width: min-content;
+    user-select: none;
+}
+
+a {
+    text-decoration: none;
+    color: var(--accent-color);
+}
+
+main {
+    outline: 2px solid gray;
+    padding: 1em;
+    background-color: black;
+    height: fit-content;
+    border-radius: 0 0 4px 4px;
+    width: 100%;
+}
+
+/* main:last-child {
+    margin-bottom: 0px;
+    padding-bottom: 0px;
+} */
+
+button {
+    padding: 10px;
+    border: medium solid var(--accent-color);
+    background: linear-gradient(var(--accent-color), var(--accent-secondary));
+    border-radius: 2px;
+    color: white;
+}
+
+code {
+    background-color: darkslategray;
+    color: var(--accent-color);
+    padding-left: .2em;
+    padding-right: .2em;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    border-radius: 2px;
+    display: inline-block;
+}
+
+input, select {
+    padding: .4em;
+    background-color: black;
+    color: white;
+    border: medium solid var(--accent-color);
+}
+
+p, ul {
+    padding-bottom: .6em;
+}
+
+img {
+    image-rendering: pixelated;
+}
+
+hr {
+    margin-bottom: 1em;
+}
+
+#linksBox {
+    padding: 2em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width: 100%;
+    background-color: black;
+    outline: 2px solid var(--accent-color);
+    border-radius: 0 0 4px 4px;
+    height: fit-content;
+    gap: 1em;
+    background-color: rgb(0, 30, 0);
+}
+
+#headerLinks a {
+    margin-top: auto;
+    margin-bottom: auto;
+    padding: 0;
+    padding-left: 0;
+}
+
+#everythingHelper {
+    max-width: 80%;
+    margin: auto;
+    transform: .2s;
+    display: flex;
+    gap: var(--box-gap);
+}
+
+#headerLinks {
+    padding: 0;
+    text-align: left;
+    width: 100%;
+}
+
+#headerLinksAndTitle {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+}
+
+#logoTitle {
+    display: flex;
+    flex-direction: column;
+    gap: .5em;
+}
+
+#title {
+    margin: auto;
+    text-align: center;
+}
+
+#logo {
+    height: 8em;
+}
+
+#featured {
+    display: flex;
+    flex-direction: column;
+}
+
+#featuredHelper {
+    display: flex;
+    flex-direction: column;
+}
+
+
+.featuredProject {
+    gap: 1em;
+    display: flex;
+    transition: .2s;
+    font-size: smaller;
+    padding: 4px;
+    overflow: hidden;
+}
+
+.featuredProjectName {
+    margin-top: auto;
+    padding: 0;
+}
+
+.featuredProjectSubtitle {
+overflow: hidden;
+  width: 100%;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical
+}
+
+.featuredProjectSubtitle {
+    padding-bottom: 0px;
+}
+
+.featuredProject img {
+    height: 5em;
+    border: medium solid var(--accent-color);
+}
+
+.featuredProject p {
+    margin-right: auto;
+    margin-left: auto;
+    text-overflow:clip;
+}
+
+#featured h2 {
+    font-size: medium;
+    font-weight: 100;
+    margin-bottom: 10px;
+}
+
+#featuredHelper {
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+li {
+    margin-left: 20px;
+    list-style-type: "> ";
+    margin-bottom: .4em;
+}
+
+h1, h2, h3 {
+    margin-bottom: .4em;
+}
+
+.errorQuote {
+    color: gray;
+}
+
+.dimText {
+    opacity: .6;
+}
+
+.rainbowText {
+    background: linear-gradient(to right, var(--text-color), var(--accent-color), var(--accent-secondary));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation: rainbow_animation 6s ease-in-out infinite;
+    background-size: 400% 100%;
+}
+
+@keyframes rainbow_animation {
+    0%,100% {
+        background-position: 0 0;
+    }
+
+    50% {
+        background-position: 100% 0;
+    }
+}
+
+@media only screen and (max-width: 1280px) {
+    #everythingHelper {
+        flex-direction: column;
+    }
+
+    aside {
+        width: 100%;
+    }
+
+    #projectTitle {
+        font-size: larger;
+    }
+
+    #headerLinksAndTitle {
+        flex-direction: row;
+    }
+
+    #headerLinks {
+        margin-left: 2em;
+    }
+
+}
+
+@media only screen and (max-width: 300px) {
+
+}