Remove link to transfer guides

2024-11-19 13:23:07 +00:00 · 2024-05-15 20:10:37 +00:00 · 2024-05-15 20:10:37 +00:00 · 71dc004083
commit 71dc004083
38 changed files with 1510 additions and 0 deletions
--- a/.github/workflows/merge.yml
+++ b/.github/workflows/merge.yml
@ -0,0 +1,33 @@
+name: Merge main into static-generated
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  merge-branches:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - name: Checkout main
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+      - name: Checkout static-generated
+        uses: actions/checkout@v4
+        with:
+          ref: static-generated
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Merge branches manually
+        run: |
+          git config --global user.name "Quatalog Updater"
+          git config --global user.email "github_actions@quatalog.com"
+
+          git checkout main
+          git checkout --orphan new-static-generated
+          git commit -m '${{ github.event.head_commit.message }}'
+          git merge static-generated --strategy-option ours --allow-unrelated-histories
+          
+          git push -u -f origin HEAD:static-generated
--- a/21
+++ b/21
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 quatalog
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@ -0,0 +1,2 @@
+# quatalog
+A tool to show when an RPI course has been offered in the past, using quacs-data.
--- a/coursedisplay.html
+++ b/coursedisplay.html
@ -0,0 +1,22 @@
+<html>
+        <head>
+                <script>
+const params = window
+	.location
+	.search
+	.slice(1)
+	.split("&")
+	.map(p => p.split("="))
+	.reduce((obj,[key,value]) =>
+		({ ...obj, [key]: decodeURIComponent(value) }),
+		{}
+	);
+const course = params["course"];
+if(course != undefined) {
+        window.location.replace("courses/"+(params["course"]));
+} else {
+        window.location.replace(".");
+}
+                </script>
+        </head>
+</html>
--- a/css/common.css
+++ b/css/common.css
@ -0,0 +1,194 @@
+/* common variables */
+:root{
+    --quacs-yellow: #f5b53f;
+    --quacs-midtone: #f5cc81;
+    --quacs-white: #f5e3c2;
+    --quacs-whiter: #fAf1e0;
+    --quacs-whitest: #fdf8f0;
+
+    --deepest-purple: #12121a;
+    --deeper-purple: #191823;
+    --deep-purple: #201f2c;
+    --mid-dark-purple: #2c2b3d;
+    --mid-purple: #37364d;
+    --mid-light-purple: #494766;
+    --light-purple: #5c5980;
+
+    --white: #ffffff;
+    --pink: #f53faa;
+    --red: #f53f6a;
+    --green: #3ff57f;
+    --blue: #3f6ef5;
+
+    font-size: calc(1vmin + 12px);
+}
+
+* {
+    font-family: "proxima-nova";
+    /* font-family: "IBM Plex Sans"; */
+}
+
+body {
+    background-color: var(--background-color);
+    overflow-x:hidden;
+    margin: 0;
+    font-size: 0.9rem; /* default font-size. works well for small-ish thing */
+}
+
+::selection{
+    background: var(--selection-color);
+}
+
+.hidden{
+    visibility: hidden;
+    margin: 0;
+    height: 0vw;
+}
+
+svg {
+    overflow: visible;
+}
+
+/* TEXT */
+h1, h1 a {
+    color: var(--h-text-color);
+    font-family: "proxima-nova";
+    font-weight: 900;
+    margin-top: 0vmin;
+    margin-bottom: 0vmin;
+    padding-bottom: 0;
+    display: block;
+    position: relative;
+    font-size: 2.25rem;
+}
+
+h2 {
+    font-size: 1.4rem;
+    margin-top: 1vmin;
+    margin-bottom: 0;
+}
+
+p {
+    color: var(--p-text-color);
+    font-family: "proxima-nova";
+    font-size: 1.2rem;
+    margin-bottom: 0;
+    margin-top: 0;
+}
+
+p a, p svg {
+    color: var(--link-text-color);
+    fill: var(--link-text-color);
+    max-height: 4vmin;
+    width: 4vmin;
+    vertical-align: bottom;
+}
+
+p svg {
+    display: inline-block;
+}
+
+p a:hover, p a:hover svg {
+    color: var(--link-hover-color);
+    fill: var(--link-hover-color);
+}
+
+/* HEADER */
+#qlog-header {
+    border-bottom: 0.2vmin solid var(--header-color);
+    width: 100%;
+    min-height: 5.25vmin;
+    left: 0;
+    top: 0;
+    position: relative;
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#qlog-wordmark svg {
+    height: 4.5vmin;
+    aspect-ratio: 454/100;
+    left: 0;
+    top: 0;
+    position: relative;
+    margin: 1vmin;
+    margin-bottom: 0.75vmin;
+    margin-left: 2vmin;
+}
+
+.header-search {
+    position: relative;
+    right: 1vmin;
+    width: 12rem;
+    height: 1.8rem;
+    font-size: 1.1rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+input[type="text"] {
+    background: var(--input-background-color);
+    border-radius: 100vw;
+    border: none;
+    outline:none;
+    font-family: "proxima-nova";
+    color: var(--input-text-color);
+    caret-color: var(--input-text-color);
+}
+
+input[type="text"]::selection{
+    background: var(--input-selection-color);
+}
+
+/* fonts */
+
+@font-face{
+    font-family: "rivalsans";
+    src: url("../fonts/rivalsans-regular.otf");
+}
+@font-face{
+    font-family: "rivalsans";
+    src: url("../fonts/rivalsans-bold.otf");
+    font-weight: 700;
+}
+@font-face{
+    font-family: "rivalsans";
+    src: url("../fonts/rivalsans-extrabold.otf");
+    font-weight: 800;
+}
+@font-face{
+    font-family: "rivalsans";
+    src: url("../fonts/rivalsans-black.otf");
+    font-weight: 900;
+}
+
+@font-face {
+    font-family: "proxima-nova";
+    src: url("../fonts/Proxima-Nova-Black.otf");
+    font-weight: 900;
+}
+
+@font-face {
+    font-family: "proxima-nova";
+    src: url("../fonts/Proxima-Nova-Bold.otf");
+    font-weight: 700;
+}
+
+@font-face {
+    font-family: "proxima-nova";
+    src: url("../fonts/Proxima-Nova-Extrabold.otf");
+    font-weight: 800;
+}
+
+@font-face {
+    font-family: "proxima-nova";
+    src: url("../fonts/Proxima-Nova-Thin.otf");
+    font-weight: 200;
+}
+
+@font-face {
+    font-family: "proxima-nova";
+    src: url("../fonts/Proxima-Nova-Regular.otf");
+}
--- a/css/coursedisplay.css
+++ b/css/coursedisplay.css
@ -0,0 +1,471 @@
+.term ::selection{
+    background: var(--table-selection-color);
+}
+
+#cd-flex{
+    display: flex;
+    position: relative;
+    flex-direction: row;
+    margin-right: 1vw;
+    margin-top: 1vmin;
+    justify-content: space-between;
+}
+
+#course-info-container{
+    position:relative;
+    width: 47vw;
+    left: 2vmin;
+    height: 90vmin;
+    margin-bottom: 7vmin;
+}
+
+
+#name {
+    font-size: 3.75rem;
+    left: 0vw;
+}
+
+#code {
+    color: var(--course-code-color);
+    font-size: 1.8rem;
+    font-weight: 900;
+    position: relative;
+    left: 0vw;
+    margin-bottom: 1vmin;
+}
+
+#cattrs-container{
+    position: relative;
+    left: 0vw;
+    margin-bottom: 1vmin;
+    margin-top: 2vmin;
+}
+
+.attr-pill{
+    color: var(--pill-text-color);
+    position: relative;
+    left: 0vw;
+    background: var(--pill-default-color);
+    border-radius: 2vmin;
+    padding: 0.5vmin 1.5vmin;
+    margin-right: 0.5vmin;
+    font-weight: 700;
+    display: inline-block;
+    margin-bottom: 0.5vmin;
+}
+
+.rel-info-container{
+    margin-bottom: 1.25vmin;
+}
+
+.rel-info-title{
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--info-title-color);
+    margin-right: 0.5vmin;
+}
+
+.rel-info-courses{
+    margin-top: 0.7vmin;
+    position: relative;
+    font-size: 1rem;
+}
+
+.course-pill{
+    color: var(--pill-text-color);
+    
+    position: relative;
+    left: 0vw;
+    background: var(--course-pill-color);
+    border-radius: 2vmin;
+    padding: 0.5vmin 1.5vmin;
+    font-weight: 700;
+    display: inline-block;
+    margin-right: 0.5vmin;
+    margin-bottom: 0.5vmin;
+    text-decoration: none;
+    transition-property: background;
+    transition-duration: 100ms;
+    width: fit-content;
+}
+
+.course-pill:hover{
+    background: var(--course-pill-hover-color);
+}
+
+#prereq-classes{
+    display: flex;
+    align-items: center;
+    width: fit-content;
+    flex-wrap: wrap;
+    flex-basis: content;
+}
+
+.pr-or-con{
+    background: var(--or-block-color);
+    display:grid;
+    grid-auto-flow: row;
+    height: fit-content;
+    width: fit-content;
+    padding: 0.5vmin;
+    display: inline-block;
+    border-radius: 2vmin;
+    margin-bottom: 0.75vw;
+}
+
+.pr-or-title{
+    color: var(--or-text-color);
+    font-size: 1.3rem;
+    font-weight: 700;
+    margin-bottom: 0.5vmin;
+    text-align: center;
+}
+
+.pr-or{
+    background: var(--or-block-bg-color);
+    padding: 1vmin;
+    border-radius: 1.5vmin;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    height: max-content;
+    width: fit-content;
+}
+
+.pr-or .course-pill{
+    margin-right: 0.25vmin;
+    margin-left: 0.25vmin;
+    margin-bottom: 0.25vmin;
+    margin-top: 0.25vmin
+}
+
+.pr-and{
+    display: inline;
+    margin-left: 0.75vmin;
+    margin-right: 0.75vmin;
+    color: var(--and-text-color);
+    background: var(--and-block-color);
+    padding: 1vmin;
+    font-size: 1.2rem;
+    font-weight: 700;
+    width: min-content;
+    height: min-content;
+    border-radius: 0.75vmin;
+    margin-bottom: 0.75vw;
+}
+
+.none-rect{
+    background: var(--none-block-color);
+    color: var(--none-text-color);
+    font-size: 2vmin;
+    position: relative;
+    left: 0vw;
+    border-radius: 0.5vmin;
+    padding: 0.5vmin 1.5vmin;
+    margin-right: 0.5vmin;
+    font-weight: 700;
+    display: inline-block;
+    margin-bottom: 0.5vmin;
+}
+
+.unknown-rect{
+    background: var(--unknown-block-color);
+    color: var(--unknown-text-color);
+    font-size: 2vmin;
+    position: relative;
+    left: 0vw;
+    border-radius: 0.5vmin;
+    padding: 0.5vmin 1.5vmin;
+    margin-right: 0.5vmin;
+    font-weight: 700;
+    display: inline-block;
+    margin-bottom: 0.5vmin;
+}
+
+#past-container{
+    position: relative;
+    width: 47.5vw;
+    justify-content: right;
+}
+
+#past-title{
+    right: 0vmin;
+    text-align: right;
+    width: 100%;
+    white-space: nowrap;
+}
+
+#opt-container{
+    left: 6.875vmin;
+    /* right: 0; */
+    width: calc(47.5vw - 6.9vmin);
+    height: fit-content;
+    position: relative;
+    display: grid;
+    grid-template-columns: 50% 48%;
+    justify-content: space-between;
+    margin-bottom: 1vmin;
+}
+
+#key-panel{
+    /* background: var(--blue); */
+    width: 100%;
+    display:flex;
+    /* left: 6vmin; */
+    left: 0;
+    position: relative;
+    flex-direction: column;
+    justify-content: space-between;
+    align-content: center;
+    /* text-align: right; */
+}
+
+.key-code{
+    color: var(--key-text-color);
+}
+
+.code-icon svg {
+    width: 0.9rem;
+    max-height: 0.9rem;
+    text-align: justify!important;
+    vertical-align: bottom;
+    display: inline-block;
+    padding-bottom: 0.5vmin;
+    padding-right: 0vmin;
+    overflow: visible;
+}
+
+#yes-code-icon svg {
+    fill: var(--yes-color);
+}
+#no-code-icon svg {
+    fill: var(--no-color);
+}
+#diff-code-icon svg {
+    fill: var(--diff-code-color);
+}
+#nil-code-icon svg {
+    fill: var(--nil-color);
+}
+
+#control-panel{
+    /* background: var(--red); */
+    width: 100%;
+    display:flex;
+    flex-direction: column;
+}
+
+.view-icon svg{
+    width: 0.9rem;
+    max-height: 0.9rem;
+    text-align: justify!important;
+    vertical-align: bottom;
+    display: inline-block;
+    padding-bottom: 0.5vmin;
+    padding-right: 0vmin;
+    overflow: visible;
+    fill: var(--view-select-color);
+    transition: fill .1s;
+}
+
+#years-table{
+    /* margin-top: 1vmin; */
+    position: relative;
+    left: 0vw;
+    width: 100%;
+    border-spacing: 0.25vmin;
+    /* padding-left: 0.25vmin;
+    padding-right: 0.25vmin; */
+    border-width: 0;
+}
+
+.term{
+    color: var(--term-text-color);
+    font-size: 1.5vmin;
+    width: min-content;
+    /* word-break: break-all; */
+}
+
+/*
+handle our hidings here
+*/
+
+.term {
+    background-size: 5vmin 5vmin;
+    height: 5vmin;
+    background-origin: content-box;
+    background-position: center;
+    background-repeat: no-repeat;
+    padding: 1vmin;
+}
+
+input[type="radio"] {
+    display: none;
+}
+
+.view-icon-selected, .view-icon-unselected {
+    display: none;
+}
+
+input[value="simple"]:checked ~ div #simple-view-icon .view-icon-selected,
+input[value="simple"]:not(:checked) ~ div #simple-view-icon .view-icon-unselected,
+input[value="detailed"]:checked ~ div #detail-view-icon .view-icon-selected,
+input[value="detailed"]:not(:checked) ~ div #detail-view-icon .view-icon-unselected {
+    display: inline-block;
+}
+
+input[value="simple"]:checked ~ div #simple-view-label,
+input[value="detailed"]:checked ~ div #detail-view-label {
+    color: var(--view-select-color-selected);
+}
+
+.view-option-label {
+    cursor: pointer;
+    transition: color .1s;
+    color: var(--view-select-color);
+}
+
+.view-icon-selected svg {
+    fill: var(--view-select-color-selected);
+}
+
+input[value="simple"]:checked ~ table .not-offered {
+    background-image: url(../icons.svg#circle-no-view);
+}
+
+input[value="simple"]:checked ~ table .offered {
+    background-image: url(../icons.svg#circle-check-view);
+}
+
+input[value="simple"]:checked ~ table .offered-diff-code {
+    background-image: url(../icons.svg#circle-question-view);
+}
+
+input[value="simple"]:checked ~ table .unscheduled {
+    background-image: url(../icons.svg#circle-empty-view);
+}
+
+input[value="detailed"]:checked ~ table .detail-view-container {
+    display: flex;
+}
+
+.detail-view-container{
+    display: none;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 1vmin;
+    padding-top: 1vmin;
+    font-size: 1rem;
+}
+
+.term-course-info {
+    font-weight: bold;
+}
+
+.course-capacity {
+    font-style: italic;
+}
+
+.term-course-info{
+    text-align: center;
+    margin-left: 0.1rem;
+    margin-right: 0.1rem;
+    height: 100%;
+}
+
+.term-course-info a:link {
+    color: var(--table-link-color);
+}
+
+.term-course-info a:visited {
+    color: var(--table-link-color);
+}
+
+.term-course-info a:hover {
+    color: var(--table-link-hover-color);
+}
+
+.term-course-info a:active {
+    color: var(--table-link-selected-color);
+}
+
+.term li{
+    width: fit-content;
+    list-style-position: inside;
+    padding-left: 0.5vmin;
+    padding-right: 0.5vmin;
+    margin-bottom: 0.2vmin;
+    font-weight: 500;
+}
+
+.term ul{
+    padding-left: 0.5vmin;
+    padding-right: 1vmin;
+    width: fit-content;
+    margin-top: 0.15rem;
+    margin-bottom: 0.15rem;
+}
+
+.season-label{
+    color: var(--season-label-color);
+    font-size: 1.4rem;
+}
+
+.midsum-label{
+    color: var(--mid-summer-label-color);
+    white-space: break-spaces;
+}
+
+.year{
+    color: var(--year-label-color);
+    text-align: left;
+    width: 6vmin;
+}
+
+.offered {
+    background-color: var(--yes-color);
+}
+.offered-diff-code {
+    background-color: var(--diff-code-color);
+}
+.not-offered {
+    background-color: var(--no-color);
+    height: 2rem;
+}
+.unscheduled {
+    background-color: var(--nil-color);
+}
+
+@media (max-aspect-ratio: 5/4), (orientation: portrait){
+    #cd-flex{
+        flex-direction: column;
+        align-items: center;
+        margin-right: 1vw;
+        margin-left: 1vw;
+        padding-bottom: 3vmin;
+    }
+
+    #course-info-container{
+        position:relative;
+        width: 90vw;
+        margin-bottom: 1vmin;
+        height: max-content;
+    }
+
+    #past-container{
+        position: relative;
+        width: 95vw;
+        justify-content: center;
+    }
+
+    #past-title{
+        text-align: center;
+    }
+
+    #opt-container{
+        width: calc(90vw - 6.9vmin);
+    }
+}
--- a/css/home.css
+++ b/css/home.css
@ -0,0 +1,45 @@
+#home-title {
+    left: 30vw;
+    aspect-ratio: 337/181;
+    position: relative;
+    margin-top: 10vmin;
+    width: 40vw;
+}
+
+.home-search {
+    /* min-height: 3vmin; */
+    top: 0vmin;
+    position: relative;
+    font-size: 2rem;
+    margin: 10vmin auto;
+    margin-top: 5vmin;
+    width: 50vmin;
+    display: block;
+    padding: 1.6vmin;
+    padding-left: 1.8rem;
+    padding-right: 1.8rem;
+}
+
+#home-footer { 
+    text-align: center;
+}
+
+#home-footer a {
+    text-decoration: none;
+    border-bottom: solid;
+    border-width: 0.05rem;
+    vertical-align: center;
+}
+
+#github-icon {
+    height: 1.2rem;
+    margin-bottom: 0.1rem;
+}
+
+
+@media (max-aspect-ratio: 5/4), (orientation: portrait) {
+    #home-title {
+        left: 12.5vw;
+        width: 75vw;
+    }
+}
--- a/css/search.css
+++ b/css/search.css
@ -0,0 +1,161 @@
+:root {
+    --entry-width: 70vw;
+    --hover-expand-width: 0.5vw;
+    --transition-time: 0.1s;
+}
+
+#searchTitle {
+    font-size: 2rem;
+    position: relative;
+    display: block;
+    width: 100vw;
+    height: fit-content;
+    left: 0vw;
+    text-align: center;
+    margin-top: 2.5vmin;
+    color: var(--search-title-color);
+    font-weight: 500;
+}
+
+#searchTerm {
+    color: var(--search-term-color);
+}
+
+#searchResultsContainer {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    margin-top: 2vmin;
+}
+
+#searchResultsContainer tr {
+    width: var(--entry-width);
+    background: var(--search-entry-bg-color);
+    margin-bottom: 2vmin;
+    margin-left: var(--hover-expand-width);
+    margin-right: var(--hover-expand-width);
+    color: var(--search-entry-text-color);
+    border-radius: 0.5rem;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    transition-property: all;
+    transition-duration: var(--transition-time);
+}
+
+#searchResultsContainer a {
+    text-decoration: none;
+}
+
+#searchResultsContainer tr:hover {
+    background: var(--search-entry-bg-hover-color);
+    margin-left: 0;
+    margin-right: 0;
+    width: calc(var(--entry-width) + 2*var(--hover-expand-width));
+    border-radius: calc(2vmin + 0.5vw);
+}
+
+#searchResultsContainer tr:hover p,
+#searchResultsContainer tr:hover div {
+    margin-left: var(--hover-expand-width);
+    margin-right: var(--hover-expand-width);
+}
+
+#searchResultsContainer tr p,
+#searchResultsContainer tr div {
+    transition-property: all;
+    transition-duration: var(--transition-time);
+}
+
+#searchResultsContainer tr h3 {
+    margin: 0;
+    padding: 1vmin;
+    padding-left: 1.5vmin;
+    font-size: 1.25rem;
+    color: var(--search-entry-title-color);
+    border-bottom: solid;
+    border-bottom-width: 0.2vmin;
+}
+
+#searchResultsContainer tr h3 div {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    align-items: baseline;
+}
+
+.pill {
+    background: var(--pill-default-color);
+    color: var(--pill-text-color);
+    display: flex;
+    font-size: 1rem;
+    font-weight: 400;
+    padding-left: 1.5vmin;
+    padding-right: 1.5vmin;
+    border-radius: 3vmin;
+    margin-bottom: 0.25vmin;
+    margin-top: 0.25vmin;
+    margin-right: 1vmin;
+}
+
+.pill svg {
+    display: inline-block;
+    align-self: center;
+    width: 1rem;
+    max-height: 1rem;
+    padding-left: 0.5vmin;
+    fill: var(--pill-svg-color);
+}
+
+.CI-pill {
+    background: var(--ci-pill-color);
+}
+
+.WI-pill {
+    background: var(--wi-pill-color);
+}
+
+.PDII-pill {
+    background: var(--pdii-pill-color);
+}
+
+.HInq-pill {
+    background: var(--hinq-pill-color);
+}
+
+.courseName {
+    color: var(--course-name-color);
+    font-size: 1.45rem;
+}
+
+.courseCode {
+    color: var(--course-code-color);
+    font-weight: 400;
+    font-size: 1rem;
+}
+
+#searchResultsContainer p {
+    padding: 1.5vmin;
+    font-size: 1rem;
+}
+
+#searchResultsContainer h3 span {
+    margin-right: 0.5vw;
+}
+
+#searchResultsContainer h3:hover p {
+    padding-left: calc(1.5vmin + var(--hover-expand-width));
+    padding-right: calc(1.5vmin + var(--hover-expand-width));
+}
+
+@media (orientation: portrait) {
+    #searchResultsContainer tr {
+        width: 90vw;
+    }
+    #searchResultsContainer tr:hover {
+        width: 91vw;
+    }
+}
--- a/css/themes.css
+++ b/css/themes.css
@ -0,0 +1,80 @@
+:root {
+    --background-color: var(--deep-purple);
+    --selection-color: var(--mid-light-purple);
+    --h-text-color: var(--quacs-yellow);
+    --p-text-color: var(--quacs-white);
+    --link-text-color: var(--quacs-midtone);
+    --link-hover-color: var(--quacs-yellow);
+    --header-color: var(--quacs-yellow);
+    --input-background-color: var(--quacs-white);
+    --input-text-color: var(--mid-dark-purple);
+    --input-selection-color: var(--quacs-yellow);
+    --search-title-color: var(--quacs-yellow);
+    --search-term-color: var(--quacs-midtone);
+    --search-entry-title-color: var(--quacs-midtone);
+    --search-entry-text-color: var(--quacs-white);
+    --search-entry-bg-color: var(--mid-dark-purple);
+    --search-entry-bg-hover-color: var(--mid-purple);
+    --pill-default-color: var(--quacs-yellow);
+    --pill-text-color: var(--deep-purple);
+    --pill-svg-color: var(--deep-purple);
+    --ci-pill-color: var(--green);
+    --wi-pill-color: var(--pill-default-color);
+    --course-pill-color: var(--pill-default-color);
+    --course-pill-hover-color: var(--quacs-midtone);
+    --pdii-pill-color: var(--red);
+    --hinq-pill-color: var(--pink);
+    --table-selection-color: var(--quacs-yellow);
+    --info-title-color: var(--quacs-white);
+    --course-name-color: var(--h-text-color);
+    --course-code-color: var(--quacs-midtone);
+    --or-block-color: var(--blue);
+    --or-block-bg-color: var(--background-color);
+    --or-text-color: var(--quacs-white);
+    --and-block-color: var(--red);
+    --and-text-color: var(--or-text-color);
+    --none-block-color: var(--red);
+    --none-text-color: var(--or-text-color);
+    --unknown-block-color: var(--pink);
+    --unknown-text-color: var(--or-text-color);
+    --key-text-color: var(--quacs-midtone);
+    --yes-color: var(--green);
+    --no-color: var(--red);
+    --diff-code-color: var(--quacs-yellow);
+    --nil-color: var(--mid-light-purple);
+    --view-select-color: var(--key-text-color);
+    --term-text-color: var(--deep-purple);
+    --view-select-color-selected: var(--quacs-yellow);
+    --season-label-color: var(--quacs-midtone);
+    --year-label-color: var(--quacs-midtone);
+    --mid-summer-label-color: var(--quacs-white);
+    --table-link-color: var(--mid-light-purple);
+    --table-link-hover-color: var(--light-purple);
+    --table-link-selected-color: var(--light-purple);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --background-color: var(--white);
+        --selection-color: var(--quacs-yellow);
+        --h-text-color: var(--mid-purple);
+        --p-text-color: var(--deep-purple);
+        --search-title-color: var(--mid-light-purple);
+        --search-term-color: var(--light-purple);
+        --search-entry-text-color: var(--deep-purple);
+        --search-entry-title-color: var(--mid-purple);
+        --search-entry-bg-color: var(--quacs-whitest);
+        --search-entry-bg-hover-color: var(--quacs-whiter);
+        --course-code-color: var(--mid-light-purple);
+        --or-text-color: var(--white);
+        --key-text-color: var(--mid-light-purple);
+        --view-select-color-selected: var(--deep-purple);
+        --season-label-color: var(--deep-purple);
+        --year-label-color: var(--mid-purple);
+        --mid-summer-label-color: var(--mid-purple);
+        --info-title-color: var(--deep-purple);
+    }
+    /*#qlog-wordmark {
+        display: none;
+    }*/
+}
--- a/favicon/android-chrome-192x192.png
+++ b/favicon/android-chrome-192x192.png
--- a/favicon/android-chrome-512x512.png
+++ b/favicon/android-chrome-512x512.png
--- a/favicon/apple-touch-icon.png
+++ b/favicon/apple-touch-icon.png
--- a/favicon/favicon-16x16.png
+++ b/favicon/favicon-16x16.png
--- a/favicon/favicon-32x32.png
+++ b/favicon/favicon-32x32.png
--- a/favicon/favicon.ico
+++ b/favicon/favicon.ico
--- a/favicon/quatalogIcon.png
+++ b/favicon/quatalogIcon.png
--- a/favicon/site.webmanifest
+++ b/favicon/site.webmanifest
@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
--- a/fonts/Proxima-Nova-Black.otf
+++ b/fonts/Proxima-Nova-Black.otf
--- a/fonts/Proxima-Nova-Bold.otf
+++ b/fonts/Proxima-Nova-Bold.otf
--- a/fonts/Proxima-Nova-Extrabold.otf
+++ b/fonts/Proxima-Nova-Extrabold.otf
--- a/fonts/Proxima-Nova-Regular.otf
+++ b/fonts/Proxima-Nova-Regular.otf
--- a/fonts/Proxima-Nova-Thin.otf
+++ b/fonts/Proxima-Nova-Thin.otf
--- a/fonts/rivalsans-black.otf
+++ b/fonts/rivalsans-black.otf
--- a/fonts/rivalsans-bold.otf
+++ b/fonts/rivalsans-bold.otf
--- a/fonts/rivalsans-extrabold.otf
+++ b/fonts/rivalsans-extrabold.otf
--- a/fonts/rivalsans-regular.otf
+++ b/fonts/rivalsans-regular.otf
--- a/icons.svg
+++ b/icons.svg
@ -0,0 +1,86 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <style>
+        #circle-no,
+	#circle-check,
+	#circle-empty,
+	#circle-question {
+            fill: #2c2b3d;
+	}
+    </style>
+    <symbol id="message" viewBox="0 0 640 512">
+        <path d="M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2 0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.3-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9l0 0 0 0-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z"/>
+    </symbol>
+    <symbol id="pencil" viewBox="0 0 512 512">
+        <path d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"/>
+    </symbol>
+    <symbol id="magnifying" viewBox="0 0 512 512">
+        <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352c79.5 0 144-64.5 144-144s-64.5-144-144-144S64 128.5 64 208s64.5 144 144 144z"/>
+    </symbol>
+    <symbol id="briefcase" viewBox="0 0 512 512">
+        <path d="M184 48H328c4.4 0 8 3.6 8 8V96H176V56c0-4.4 3.6-8 8-8zm-56 8V96H64C28.7 96 0 124.7 0 160v96H192 320 512V160c0-35.3-28.7-64-64-64H384V56c0-30.9-25.1-56-56-56H184c-30.9 0-56 25.1-56 56zM512 288H320v32c0 17.7-14.3 32-32 32H224c-17.7 0-32-14.3-32-32V288H0V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V288z"/>
+    </symbol>
+    <symbol id="laptop" viewBox="0 0 640 512">
+        <path d="M128 32C92.7 32 64 60.7 64 96V352h64V96H512V352h64V96c0-35.3-28.7-64-64-64H128zM19.2 384C8.6 384 0 392.6 0 403.2C0 445.6 34.4 480 76.8 480H563.2c42.4 0 76.8-34.4 76.8-76.8c0-10.6-8.6-19.2-19.2-19.2H19.2z"/>
+    </symbol>
+    <symbol id="house-laptop" viewBox="0 0 640 512">
+        <path d="M218.3 8.5c12.3-11.3 31.2-11.3 43.4 0l208 192c6.7 6.2 10.3 14.8 10.3 23.5H336c-19.1 0-36.3 8.4-48 21.7V208c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h64V416H112c-26.5 0-48-21.5-48-48V256H32c-13.2 0-25-8.1-29.8-20.3s-1.6-26.2 8.1-35.2l208-192zM352 304V448H544V304H352zm-48-16c0-17.7 14.3-32 32-32H560c17.7 0 32 14.3 32 32V448h32c8.8 0 16 7.2 16 16c0 26.5-21.5 48-48 48H544 352 304c-26.5 0-48-21.5-48-48c0-8.8 7.2-16 16-16h32V288z"/>
+    </symbol>
+    <symbol id="skull" viewBox="0 0 512 512">
+        <path d="M416 398.9c58.5-41.1 96-104.1 96-174.9C512 100.3 397.4 0 256 0S0 100.3 0 224c0 70.7 37.5 133.8 96 174.9c0 .4 0 .7 0 1.1v64c0 26.5 21.5 48 48 48h48V464c0-8.8 7.2-16 16-16s16 7.2 16 16v48h64V464c0-8.8 7.2-16 16-16s16 7.2 16 16v48h48c26.5 0 48-21.5 48-48V400c0-.4 0-.7 0-1.1zM224 256c0 35.3-28.7 64-64 64s-64-28.7-64-64s28.7-64 64-64s64 28.7 64 64zm128 64c-35.3 0-64-28.7-64-64s28.7-64 64-64s64 28.7 64 64s-28.7 64-64 64z"/>
+    </symbol>
+    <symbol id="amogus" viewBox="0 0 261.1819 331.5457">
+        <path d="M354.8419,155.6564H344.3814a88.2754,88.2754,0,0,0-85.1231-64.9293h0a88.2421,88.2421,0,0,0-88.242,88.2422v7.2568h0a45.1069,45.1069,0,0,0-45.1069,45.1069v15.761a45.1069,45.1069,0,0,0,45.1069,45.107h0v.2909q0,3.5648.2813,7.06a26.32,26.32,0,0,0-.2813,3.823v91.78a26.1187,26.1187,0,0,0,26.1187,26.1188h0a26.1187,26.1187,0,0,0,26.1187-26.1188v-22.08a87.9243,87.9243,0,0,0,36.0046,7.6593h0a87.924,87.924,0,0,0,36.0046-7.6593v22.08a26.1188,26.1188,0,0,0,26.1188,26.1188h0A26.1187,26.1187,0,0,0,347.5,395.1541v-91.78a26.32,26.32,0,0,0-.2813-3.823q.2766-3.4938.2813-7.06V218.1544h7.3415a31.2489,31.2489,0,0,0,31.249-31.249h0A31.249,31.249,0,0,0,354.8419,155.6564Zm23.8884,31.249a28.17,28.17,0,0,1-28.17,28.17H272.2349a28.17,28.17,0,0,1-28.17-28.17h0a28.17,28.17,0,0,1,28.17-28.17h78.3259a28.17,28.17,0,0,1,28.17,28.17Z" transform="translate(-125.4091 -90.2271)" style="fill: #231f20;stroke: #fff;stroke-miterlimit: 10"/>
+    </symbol>
+    <symbol id="cubes" viewBox="0 0 576 512">
+        <path d="M290.8 48.6l78.4 29.7L288 109.5 206.8 78.3l78.4-29.7c1.8-.7 3.8-.7 5.7 0zM136 92.5V204.7c-1.3 .4-2.6 .8-3.9 1.3l-96 36.4C14.4 250.6 0 271.5 0 294.7V413.9c0 22.2 13.1 42.3 33.5 51.3l96 42.2c14.4 6.3 30.7 6.3 45.1 0L288 457.5l113.5 49.9c14.4 6.3 30.7 6.3 45.1 0l96-42.2c20.3-8.9 33.5-29.1 33.5-51.3V294.7c0-23.3-14.4-44.1-36.1-52.4l-96-36.4c-1.3-.5-2.6-.9-3.9-1.3V92.5c0-23.3-14.4-44.1-36.1-52.4l-96-36.4c-12.8-4.8-26.9-4.8-39.7 0l-96 36.4C150.4 48.4 136 69.3 136 92.5zM392 210.6l-82.4 31.2V152.6L392 121v89.6zM154.8 250.9l78.4 29.7L152 311.7 70.8 280.6l78.4-29.7c1.8-.7 3.8-.7 5.7 0zm18.8 204.4V354.8L256 323.2v95.9l-82.4 36.2zM421.2 250.9c1.8-.7 3.8-.7 5.7 0l78.4 29.7L424 311.7l-81.2-31.1 78.4-29.7zM523.2 421.2l-77.6 34.1V354.8L528 323.2v90.7c0 3.2-1.9 6-4.8 7.3z"/>
+    </symbol>
+    <symbol id="circle-check" viewBox="0 0 512 512">
+        <path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/>
+    </symbol>
+    <symbol id="circle-no" viewBox="0 0 512 512">
+        <path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"/>
+    </symbol>
+    <symbol id="circle-question" viewBox="0 0 512 512">
+        <path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32z"/>
+    </symbol>
+    <symbol id="circle-empty" viewBox="0 0 512 512">
+        <path d="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"/>
+    </symbol>
+    <symbol id="circle-dot" viewBox="0 0 512 512">
+        <path d="M160 256C160 202.1 202.1 160 256 160C309 160 352 202.1 352 256C352 309 309 352 256 352C202.1 352 160 309 160 256zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"/>
+    </symbol>
+    <symbol id="github-icon" viewBox="0 0 480 512">
+        <path d="M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z"/>
+    </symbol>
+
+    <view id="message-view" viewBox="0 0 640 512"/>
+    <view id="pencil-view" viewBox="0 512 512 512"/>
+    <view id="magnifying-view" viewBox="0 1024 512 512"/>
+    <view id="briefcase-view" viewBox="0 1536 512 512"/>
+    <view id="laptop-view" viewBox="0 2048 640 512"/>
+    <view id="house-laptop-view" viewBox="0 2560 640 512"/>
+    <view id="skull-view" viewBox="0 3072 512 512"/>
+    <view id="amogus-view" viewBox="0 3584 261.1819 331.5457"/>
+    <view id="cubes-view" viewBox="0 4096 576 512"/>
+    <view id="circle-check-view" viewBox="0 4608 512 512"/>
+    <view id="circle-no-view" viewBox="0 5120 512 512"/>
+    <view id="circle-question-view" viewBox="0 5632 512 512"/>
+    <view id="circle-empty-view" viewBox="0 6144 512 512"/>
+    <view id="circle-dot-view" viewBox="0 6656 512 512"/>
+    <view id="github-icon" viewBox="0 7168 480 512"/>
+    <use href="#message" x="0" y="0" width="640" height="512"/>
+    <use href="#pencil" x="0" y="512" width="512" height="512"/>
+    <use href="#magnifying" x="0" y="1024" width="512" height="512"/>
+    <use href="#briefcase" x="0" y="1536" width="512" height="512"/>
+    <use href="#laptop" x="0" y="2048" width="640" height="512"/>
+    <use href="#house-laptop" x="0" y="2560" width="640" height="512"/>
+    <use href="#skull" x="0" y="3072" width="512" height="512"/>
+    <use href="#amogus" viewBox="0 3584 261.1819 331.5457"/>
+    <use href="#cubes" x="0" y="4096" width="576" height="512"/>
+    <use href="#circle-check" x="0" y="4608" width="512" height="512"/>
+    <use href="#circle-no" x="0" y="5120" width="512" height="512"/>
+    <use href="#circle-question" x="0" y="5632" width="512" height="512"/>
+    <use href="#circle-empty" x="0" y="6144" width="512" height="512"/>
+    <use href="#circle-dot" x="0" y="6656" width="512" height="512"/>
+    <use href="#github-icon" x="0" y="7168" width="480" height="512"/>
+</svg>
--- a/images/kuzuk.png
+++ b/images/kuzuk.png
--- a/images/quatalogHWordmark.svg
+++ b/images/quatalogHWordmark.svg
@ -0,0 +1,58 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 454.2847 100">
+  <defs>
+    <symbol id="QuatalogHWordmark" data-name="QuatalogHWordmark" viewBox="0 0 454.285 100" preserveAspectRatio="xMinYMin">
+      <g>
+        <path d="M159.0254,71.5186l7.8384,9.2978L151.4951,88.27,147.96,75.2061c-.9986.0771-1.9976.1543-3.0738.1543-15.5219,0-25.8193-11.2188-25.8193-28.125,0-16.752,10.374-27.9708,25.8965-27.9708s25.8193,11.2188,25.8193,27.9708C170.7827,58.2246,166.4023,66.8311,159.0254,71.5186Zm-14.1392-9.2217c6.3013,0,10.5279-5.9942,10.5279-14.9844s-4.2266-14.9844-10.4507-14.9844c-6.3013,0-10.5279,5.9932-10.5279,14.9844S138.6621,62.2969,144.8862,62.2969Z" style="fill: #f5b53f"/>
+        <path d="M215.1265,36.5547V74.5918H202.3706L201.0645,70.52c-3.7657,2.7657-7.7613,4.8409-11.834,4.8409-5.9937,0-12.4488-3.9961-12.4488-16.5987V36.5547h14.9844V57.84c0,4.0733,1.6138,5.3028,4.5337,5.3028a9.4658,9.4658,0,0,0,3.8423-.9229V36.5547Z" style="fill: #f5b53f"/>
+        <path d="M259.2378,53.5371V74.5918h-13.294l-1.2294-4.9951A15.5816,15.5816,0,0,1,232.65,75.36c-7.1465,0-11.834-5.0723-11.834-11.2959,0-7.7618,7.3008-11.22,14.8311-11.22a57.3366,57.3366,0,0,1,8.6064.8457V52.5381c0-3.3047-2.92-5.2256-7.7607-5.2256a33.2209,33.2209,0,0,0-10.6045,1.998L223.89,39.09c3.6885-1.9209,11.2959-3.3037,16.8282-3.3037C253.0132,35.7861,259.2378,42.8555,259.2378,53.5371Zm-14.9844,10.835V59.8379a18.2229,18.2229,0,0,0-3.9189-.3838c-2.6895,0-4.0723,1.1523-4.0723,2.92,0,1.8438.9981,2.9961,3.3037,2.9961A12.8672,12.8672,0,0,0,244.2534,64.3721Z" style="fill: #f5b53f"/>
+        <path d="M296.8179,73.5156c-2.3828,1.0762-8.1455,1.8448-11.5264,1.8448-6.5322,0-15.6-2.6895-15.6-16.9053V47.082h-6.2246V36.5547h6.916l5.1484-10.4512h9.1446V36.5547H296.28V47.082H284.6763v9.836c0,4.61,1.69,6.2246,4.457,6.2246a19.18,19.18,0,0,0,5.6865-.999Z" style="fill: #f5b53f"/>
+        <path d="M338.0854,53.5371V74.5918H324.7915l-1.2295-4.9951A15.5815,15.5815,0,0,1,311.4976,75.36c-7.1465,0-11.834-5.0723-11.834-11.2959,0-7.7618,7.3008-11.22,14.831-11.22a57.338,57.338,0,0,1,8.6065.8457V52.5381c0-3.3047-2.92-5.2256-7.7608-5.2256a33.222,33.222,0,0,0-10.6045,1.998L302.7378,39.09c3.6885-1.9209,11.2959-3.3037,16.8281-3.3037C331.8608,35.7861,338.0854,42.8555,338.0854,53.5371Zm-14.9843,10.835V59.8379a18.2239,18.2239,0,0,0-3.919-.3838c-2.6894,0-4.0722,1.1523-4.0722,2.92,0,1.8438.998,2.9961,3.3037,2.9961A12.868,12.868,0,0,0,323.1011,64.3721Z" style="fill: #f5b53f"/>
+        <path d="M346.1567,20.8018l14.9854-1.5372V74.5918H346.1567Z" style="fill: #f5b53f"/>
+        <path d="M367.5972,55.6113c0-11.91,8.1455-19.8252,20.3632-19.8252,12.1417,0,20.3643,7.9151,20.3643,19.8252,0,11.834-8.2226,19.7491-20.44,19.7491C375.7427,75.36,367.5972,67.4453,367.5972,55.6113Zm25.2812,0c0-4.61-1.9971-7.6074-4.918-7.6074-2.996,0-4.9179,2.9971-4.9179,7.6074,0,4.5342,1.9219,7.5313,4.8418,7.5313C390.8813,63.1426,392.8784,60.0684,392.8784,55.6113Z" style="fill: #f5b53f"/>
+        <path d="M454.2817,78.8184c0,7.7607-8.0683,12.2949-21.747,12.2949s-22.0537-3.6885-22.0537-9.6826c0-4.0723,2.8427-6.6856,7.0693-8.0684a10.0957,10.0957,0,0,1-3.8418-7.8379l4.918-6.6855a10.9454,10.9454,0,0,1-5.7637-10.1436c0-8.1455,6.7627-12.9092,18.4424-12.9092a35.4045,35.4045,0,0,1,6.6855.6143c2.9971-3.3037,7.2237-6.7617,12.1416-7.3L453.36,39.8584a22.6945,22.6945,0,0,0-6.7627.8457,11.1407,11.1407,0,0,1,3.0742,7.9912c0,8.376-6.84,12.833-18.3662,12.833a30.7459,30.7459,0,0,1-6.2237-.5381l-.7685,1.9981c0,.999,1.46,1.3066,3.6885,1.5371l10.1435.999C448.2114,66.1387,454.2817,70.9805,454.2817,78.8184Zm-12.7558,1.0752c0-.9219-.6914-1.9209-2.6133-2.1514l-13.37-1.46c-1.23.6914-2.1514,1.5371-2.1514,2.6895,0,1.5371,4.4561,2.7666,9.6817,2.7666C438.5288,81.7383,441.5259,81.2,441.5259,79.8936ZM426.4644,48.7725c0,2.0752,1.9209,4.0722,5.0712,4.0722,2.9971,0,4.4571-1.9209,4.4571-3.7646,0-2.2285-1.69-4.1494-4.9942-4.1494C427.9243,44.9307,426.4644,46.7744,426.4644,48.7725Z" style="fill: #f5b53f"/>
+      </g>
+      <rect id="Back_Rectangle" data-name="Back Rectangle" width="100" height="100" rx="18.75" style="fill: #494766"/>
+      <g id="BR_Circle" data-name="BR Circle">
+        <circle cx="81.25" cy="81.25" r="15.625" style="fill: #201f2c"/>
+        <path d="M81.25,66.667A14.583,14.583,0,1,1,66.6665,81.25,14.6,14.6,0,0,1,81.25,66.667m0-2.0835A16.6665,16.6665,0,1,0,97.9165,81.25,16.6665,16.6665,0,0,0,81.25,64.5835Z" style="fill: #201f2c"/>
+      </g>
+      <g id="BC_Circle" data-name="BC Circle">
+        <circle cx="50" cy="81.25" r="15.625" style="fill: #f5b53f"/>
+        <path d="M50,66.667A14.583,14.583,0,1,1,35.4165,81.25,14.6,14.6,0,0,1,50,66.667m0-2.0835A16.6665,16.6665,0,1,0,66.6665,81.25,16.6665,16.6665,0,0,0,50,64.5835Z" style="fill: #201f2c"/>
+      </g>
+      <g id="BL_Circle" data-name="BL Circle">
+        <circle cx="18.75" cy="81.25" r="15.625" style="fill: #f5b53f"/>
+        <path d="M18.75,66.667A14.583,14.583,0,1,1,4.1665,81.25,14.6,14.6,0,0,1,18.75,66.667m0-2.0835A16.6665,16.6665,0,1,0,35.4165,81.25,16.6665,16.6665,0,0,0,18.75,64.5835Z" style="fill: #201f2c"/>
+      </g>
+      <g id="MR_Circle" data-name="MR Circle">
+        <circle cx="81.25" cy="50" r="15.625" style="fill: #f5b53f"/>
+        <path d="M81.25,35.417A14.583,14.583,0,1,1,66.6665,50,14.6,14.6,0,0,1,81.25,35.417m0-2.0835A16.6665,16.6665,0,1,0,97.9165,50,16.6665,16.6665,0,0,0,81.25,33.3335Z" style="fill: #201f2c"/>
+      </g>
+      <g id="MC_Circle" data-name="MC Circle">
+        <circle cx="50" cy="50" r="15.625" style="fill: #201f2c"/>
+        <path d="M50,35.417A14.583,14.583,0,1,1,35.4165,50,14.6,14.6,0,0,1,50,35.417m0-2.0835A16.6665,16.6665,0,1,0,66.6665,50,16.6665,16.6665,0,0,0,50,33.3335Z" style="fill: #201f2c"/>
+      </g>
+      <g id="ML_Circle" data-name="ML Circle">
+        <circle cx="18.75" cy="50" r="15.625" style="fill: #f5b53f"/>
+        <path d="M18.75,35.417A14.583,14.583,0,1,1,4.1665,50,14.6,14.6,0,0,1,18.75,35.417m0-2.0835A16.6665,16.6665,0,1,0,35.4165,50,16.6665,16.6665,0,0,0,18.75,33.3335Z" style="fill: #201f2c"/>
+      </g>
+      <g id="TR_Circle" data-name="TR Circle">
+        <circle cx="81.25" cy="18.75" r="15.625" style="fill: #f5b53f"/>
+        <path d="M81.25,4.167A14.583,14.583,0,1,1,66.6665,18.75,14.6,14.6,0,0,1,81.25,4.167m0-2.0835A16.6665,16.6665,0,1,0,97.9165,18.75,16.6665,16.6665,0,0,0,81.25,2.0835Z" style="fill: #201f2c"/>
+      </g>
+      <g id="TC_Circle" data-name="TC Circle">
+        <circle cx="50" cy="18.75" r="15.625" style="fill: #f5b53f"/>
+        <path d="M50,4.167A14.583,14.583,0,1,1,35.4165,18.75,14.6,14.6,0,0,1,50,4.167m0-2.0835A16.6665,16.6665,0,1,0,66.6665,18.75,16.6665,16.6665,0,0,0,50,2.0835Z" style="fill: #201f2c"/>
+      </g>
+      <g id="TL_Circle" data-name="TL Circle">
+        <circle cx="18.75" cy="18.75" r="15.625" style="fill: #f5b53f"/>
+        <path d="M18.75,4.167A14.583,14.583,0,1,1,4.1665,18.75,14.6,14.6,0,0,1,18.75,4.167m0-2.0835A16.6665,16.6665,0,1,0,35.4165,18.75,16.6665,16.6665,0,0,0,18.75,2.0835Z" style="fill: #201f2c"/>
+      </g>
+    </symbol>
+  </defs>
+  <g id="Layer_2" data-name="Layer 2">
+    <g id="hwordmark">
+      <use width="454.2847" height="100" xlink:href="#QuatalogHWordmark"/>
+    </g>
+  </g>
+</svg>
--- a/images/quatalogIcon.svg
+++ b/images/quatalogIcon.svg
@ -0,0 +1,48 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 192 192">
+  <defs>
+    <symbol id="QuatalogIcon" data-name="QuatalogIcon" viewBox="0 0 192 192">
+      <rect id="Back_Rectangle" data-name="Back Rectangle" width="192" height="192" rx="36" style="fill: #494766"/>
+      <g id="BR_Circle" data-name="BR Circle">
+        <circle cx="156" cy="156" r="30" style="fill: #201f2c"/>
+        <path d="M156,128a28,28,0,1,1-28,28,28.0314,28.0314,0,0,1,28-28m0-4a32,32,0,1,0,32,32,32,32,0,0,0-32-32Z" style="fill: #201f2c"/>
+      </g>
+      <g id="BC_Circle" data-name="BC Circle">
+        <circle cx="96" cy="156" r="30" style="fill: #f5b53f"/>
+        <path d="M96,128a28,28,0,1,1-28,28,28.0314,28.0314,0,0,1,28-28m0-4a32,32,0,1,0,32,32,32,32,0,0,0-32-32Z" style="fill: #201f2c"/>
+      </g>
+      <g id="BL_Circle" data-name="BL Circle">
+        <circle cx="36" cy="156" r="30" style="fill: #f5b53f"/>
+        <path d="M36,128A28,28,0,1,1,8,156a28.0314,28.0314,0,0,1,28-28m0-4a32,32,0,1,0,32,32,32,32,0,0,0-32-32Z" style="fill: #201f2c"/>
+      </g>
+      <g id="MR_Circle" data-name="MR Circle">
+        <circle cx="156" cy="96" r="30" style="fill: #f5b53f"/>
+        <path d="M156,68a28,28,0,1,1-28,28,28.0314,28.0314,0,0,1,28-28m0-4a32,32,0,1,0,32,32,32,32,0,0,0-32-32Z" style="fill: #201f2c"/>
+      </g>
+      <g id="MC_Circle" data-name="MC Circle">
+        <circle cx="96" cy="96" r="30" style="fill: #201f2c"/>
+        <path d="M96,68A28,28,0,1,1,68,96,28.0314,28.0314,0,0,1,96,68m0-4a32,32,0,1,0,32,32A32,32,0,0,0,96,64Z" style="fill: #201f2c"/>
+      </g>
+      <g id="ML_Circle" data-name="ML Circle">
+        <circle cx="36" cy="96" r="30" style="fill: #f5b53f"/>
+        <path d="M36,68A28,28,0,1,1,8,96,28.0314,28.0314,0,0,1,36,68m0-4A32,32,0,1,0,68,96,32,32,0,0,0,36,64Z" style="fill: #201f2c"/>
+      </g>
+      <g id="TR_Circle" data-name="TR Circle">
+        <circle cx="156" cy="36" r="30" style="fill: #f5b53f"/>
+        <path d="M156,8a28,28,0,1,1-28,28A28.0314,28.0314,0,0,1,156,8m0-4a32,32,0,1,0,32,32A32,32,0,0,0,156,4Z" style="fill: #201f2c"/>
+      </g>
+      <g id="TC_Circle" data-name="TC Circle">
+        <circle cx="96" cy="36" r="30" style="fill: #f5b53f"/>
+        <path d="M96,8A28,28,0,1,1,68,36,28.0314,28.0314,0,0,1,96,8m0-4a32,32,0,1,0,32,32A32,32,0,0,0,96,4Z" style="fill: #201f2c"/>
+      </g>
+      <g id="TL_Circle" data-name="TL Circle">
+        <circle cx="36" cy="36" r="30" style="fill: #f5b53f"/>
+        <path d="M36,8A28,28,0,1,1,8,36,28.0314,28.0314,0,0,1,36,8m0-4A32,32,0,1,0,68,36,32,32,0,0,0,36,4Z" style="fill: #201f2c"/>
+      </g>
+    </symbol>
+  </defs>
+  <g id="Layer_2" data-name="Layer 2">
+    <g id="qicon">
+      <use width="192" height="192" xlink:href="#QuatalogIcon"/>
+    </g>
+  </g>
+</svg>
--- a/images/quatalogMinecraftIcon.png
+++ b/images/quatalogMinecraftIcon.png
--- a/images/quatalogVWordmark.svg
+++ b/images/quatalogVWordmark.svg
@ -0,0 +1,58 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 337.7534 181.1735">
+  <defs>
+    <symbol id="QuatalogVWordmark" data-name="QuatalogVWordmark" viewBox="0 0 337.753 181.173" preserveAspectRatio="slice">
+      <g>
+        <path d="M42.4941,161.5778l7.8384,9.2978-15.3686,7.4531-3.5352-13.0634c-.9985.0771-1.9975.1543-3.0737.1543-15.522,0-25.8194-11.2188-25.8194-28.125,0-16.752,10.3741-27.9707,25.8965-27.9707s25.8194,11.2187,25.8194,27.9707C54.2515,148.2838,49.8711,156.89,42.4941,161.5778ZM28.355,152.3561c6.3012,0,10.5278-5.9942,10.5278-14.9844s-4.2266-14.9844-10.4507-14.9844c-6.3012,0-10.5278,5.9932-10.5278,14.9844S22.1309,152.3561,28.355,152.3561Z" style="fill: #f5b53f"/>
+        <path d="M98.5952,126.6139V164.651H85.8394l-1.3062-4.0723c-3.7656,2.7657-7.7612,4.8409-11.834,4.8409-5.9936,0-12.4487-3.9961-12.4487-16.5987v-22.207H75.2349v21.2852c0,4.0732,1.6137,5.3027,4.5337,5.3027a9.4654,9.4654,0,0,0,3.8422-.9229v-25.665Z" style="fill: #f5b53f"/>
+        <path d="M142.7065,143.5963V164.651H129.4126l-1.23-4.9951a15.5812,15.5812,0,0,1-12.0644,5.7637c-7.1465,0-11.834-5.0723-11.834-11.2959,0-7.7618,7.3007-11.22,14.831-11.22a57.3511,57.3511,0,0,1,8.6065.8457v-1.1523c0-3.3047-2.92-5.2256-7.7608-5.2256a33.2193,33.2193,0,0,0-10.6045,1.9981l-1.998-10.2207c3.6885-1.9209,11.2959-3.3038,16.8281-3.3038C136.4819,125.8453,142.7065,132.9147,142.7065,143.5963Zm-14.9843,10.835v-4.5342a18.2239,18.2239,0,0,0-3.919-.3838c-2.6894,0-4.0722,1.1524-4.0722,2.92,0,1.8438.998,2.9961,3.3037,2.9961A12.868,12.868,0,0,0,127.7222,154.4313Z" style="fill: #f5b53f"/>
+        <path d="M180.2866,163.5748c-2.3828,1.0762-8.1455,1.8448-11.5263,1.8448-6.5323,0-15.6-2.69-15.6-16.9053V137.1412H146.936V126.6139h6.9161l5.1484-10.4512h9.1445v10.4512h11.6035v10.5273H168.145v9.836c0,4.61,1.69,6.2246,4.4571,6.2246a19.18,19.18,0,0,0,5.6865-.999Z" style="fill: #f5b53f"/>
+        <path d="M221.5542,143.5963V164.651H208.26l-1.23-4.9951a15.5812,15.5812,0,0,1-12.0645,5.7637c-7.1465,0-11.834-5.0723-11.834-11.2959,0-7.7618,7.3008-11.22,14.8311-11.22a57.35,57.35,0,0,1,8.6064.8457v-1.1523c0-3.3047-2.92-5.2256-7.7607-5.2256a33.2183,33.2183,0,0,0-10.6045,1.9981l-1.9981-10.2207c3.6885-1.9209,11.2959-3.3038,16.8282-3.3038C215.33,125.8453,221.5542,132.9147,221.5542,143.5963ZM206.57,154.4313v-4.5342a18.2229,18.2229,0,0,0-3.9189-.3838c-2.69,0-4.0723,1.1524-4.0723,2.92,0,1.8438.9981,2.9961,3.3037,2.9961A12.8672,12.8672,0,0,0,206.57,154.4313Z" style="fill: #f5b53f"/>
+        <path d="M229.6255,110.861l14.9853-1.5371V164.651H229.6255Z" style="fill: #f5b53f"/>
+        <path d="M251.0659,145.6705c0-11.91,8.1455-19.8252,20.3633-19.8252,12.1416,0,20.3643,7.9151,20.3643,19.8252,0,11.834-8.2227,19.7491-20.44,19.7491C259.2114,165.42,251.0659,157.5045,251.0659,145.6705Zm25.2813,0c0-4.61-1.9971-7.6074-4.918-7.6074-2.9961,0-4.918,2.9971-4.918,7.6074,0,4.5342,1.9219,7.5313,4.8418,7.5313C274.35,153.2018,276.3472,150.1276,276.3472,145.6705Z" style="fill: #f5b53f"/>
+        <path d="M337.7505,168.8776c0,7.7607-8.0684,12.2949-21.7471,12.2949S293.95,177.484,293.95,171.49c0-4.0723,2.8428-6.6856,7.0693-8.0684a10.0957,10.0957,0,0,1-3.8418-7.8379l4.918-6.6855a10.9455,10.9455,0,0,1-5.7637-10.1436c0-8.1455,6.7627-12.9092,18.4424-12.9092a35.4064,35.4064,0,0,1,6.6856.6143c2.997-3.3037,7.2236-6.7617,12.1416-7.3l3.2275,10.7578a22.6949,22.6949,0,0,0-6.7627.8457,11.14,11.14,0,0,1,3.0742,7.9912c0,8.376-6.84,12.833-18.3662,12.833a30.7442,30.7442,0,0,1-6.2236-.5381l-.7686,1.9981c0,.999,1.46,1.3066,3.6885,1.5371l10.1436.999C331.68,156.1979,337.7505,161.04,337.7505,168.8776Zm-12.7559,1.0752c0-.9219-.6914-1.9209-2.6133-2.1514l-13.37-1.46c-1.2295.6914-2.1513,1.5372-2.1513,2.69,0,1.5371,4.456,2.7666,9.6816,2.7666C321.9976,171.7975,324.9946,171.2594,324.9946,169.9528Zm-15.0615-31.1211c0,2.0752,1.9209,4.0722,5.0713,4.0722,2.9971,0,4.457-1.9209,4.457-3.7646,0-2.2285-1.69-4.1494-4.9941-4.1494C311.3931,134.99,309.9331,136.8336,309.9331,138.8317Z" style="fill: #f5b53f"/>
+      </g>
+      <rect id="Back_Rectangle" data-name="Back Rectangle" x="120.8765" width="96" height="96" rx="18" style="fill: #494766"/>
+      <g id="BR_Circle" data-name="BR Circle">
+        <circle cx="198.8765" cy="78" r="15" style="fill: #201f2c"/>
+        <path d="M198.8765,64a14,14,0,1,1-14,14,14.0158,14.0158,0,0,1,14-14m0-2a16,16,0,1,0,16,16,16,16,0,0,0-16-16Z" style="fill: #201f2c"/>
+      </g>
+      <g id="BC_Circle" data-name="BC Circle">
+        <circle cx="168.8765" cy="78" r="15" style="fill: #f5b53f"/>
+        <path d="M168.8765,64a14,14,0,1,1-14,14,14.0158,14.0158,0,0,1,14-14m0-2a16,16,0,1,0,16,16,16,16,0,0,0-16-16Z" style="fill: #201f2c"/>
+      </g>
+      <g id="BL_Circle" data-name="BL Circle">
+        <circle cx="138.8765" cy="78" r="15" style="fill: #f5b53f"/>
+        <path d="M138.8765,64a14,14,0,1,1-14,14,14.0158,14.0158,0,0,1,14-14m0-2a16,16,0,1,0,16,16,16,16,0,0,0-16-16Z" style="fill: #201f2c"/>
+      </g>
+      <g id="MR_Circle" data-name="MR Circle">
+        <circle cx="198.8765" cy="48" r="15" style="fill: #f5b53f"/>
+        <path d="M198.8765,34a14,14,0,1,1-14,14,14.0158,14.0158,0,0,1,14-14m0-2a16,16,0,1,0,16,16,16,16,0,0,0-16-16Z" style="fill: #201f2c"/>
+      </g>
+      <g id="MC_Circle" data-name="MC Circle">
+        <circle cx="168.8765" cy="48" r="15" style="fill: #201f2c"/>
+        <path d="M168.8765,34a14,14,0,1,1-14,14,14.0158,14.0158,0,0,1,14-14m0-2a16,16,0,1,0,16,16,16,16,0,0,0-16-16Z" style="fill: #201f2c"/>
+      </g>
+      <g id="ML_Circle" data-name="ML Circle">
+        <circle cx="138.8765" cy="48" r="15" style="fill: #f5b53f"/>
+        <path d="M138.8765,34a14,14,0,1,1-14,14,14.0158,14.0158,0,0,1,14-14m0-2a16,16,0,1,0,16,16,16,16,0,0,0-16-16Z" style="fill: #201f2c"/>
+      </g>
+      <g id="TR_Circle" data-name="TR Circle">
+        <circle cx="198.8765" cy="18" r="15" style="fill: #f5b53f"/>
+        <path d="M198.8765,4a14,14,0,1,1-14,14,14.0158,14.0158,0,0,1,14-14m0-2a16,16,0,1,0,16,16,16,16,0,0,0-16-16Z" style="fill: #201f2c"/>
+      </g>
+      <g id="TC_Circle" data-name="TC Circle">
+        <circle cx="168.8765" cy="18" r="15" style="fill: #f5b53f"/>
+        <path d="M168.8765,4a14,14,0,1,1-14,14,14.0158,14.0158,0,0,1,14-14m0-2a16,16,0,1,0,16,16,16,16,0,0,0-16-16Z" style="fill: #201f2c"/>
+      </g>
+      <g id="TL_Circle" data-name="TL Circle">
+        <circle cx="138.8765" cy="18" r="15" style="fill: #f5b53f"/>
+        <path d="M138.8765,4a14,14,0,1,1-14,14,14.0158,14.0158,0,0,1,14-14m0-2a16,16,0,1,0,16,16,16,16,0,0,0-16-16Z" style="fill: #201f2c"/>
+      </g>
+    </symbol>
+  </defs>
+  <g id="Layer_2" data-name="Layer 2">
+    <g id="vwordmark">
+      <use width="337.7534" height="181.1735" xlink:href="#QuatalogVWordmark"/>
+    </g>
+  </g>
+</svg>
--- a/images/quatalogVWordmarkBacking.png
+++ b/images/quatalogVWordmarkBacking.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+        <head>
+                <title>Quatalog Home</title>
+                <link rel="shortcut icon" href="./favicon/quatalogIcon.png">
+                <link rel="icon" href="./favicon/favicon.ico">
+                <link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-touch-icon.png">
+                <link rel="icon" type="image/png" sizes="32x32" href="./favicon/favicon-32x32.png">
+                <link rel="icon" type="image/png" sizes="16x16" href="./favicon/favicon-16x16.png">
+                <link rel="manifest" href="./favicon/site.webmanifest">
+                
+                <link rel="stylesheet" href="css/common.css"/>
+                <link rel="stylesheet" href="css/home.css"/>
+                <link rel="stylesheet" href="css/themes.css"/>
+                <meta property="og:title" content="Quatalog"/>
+                <meta property="og:type" content="website"/>
+                <meta property="og:url" content="https://quatalog.com"/>
+                <meta property="og:description" content="It's like the catalog but based"/>
+                <meta property="og:image" content="https://quatalog.com/images/quatalogVWordmarkBacking.png"/>
+                <meta property="og:image:width" content="512"/>
+                <meta property="og:image:height" content="256"/>
+                <meta property="og:image:alt" content="Quatalog wordmark"/>
+
+                <script src="js/search_helper.js"></script>
+        </head>
+        <body>
+                <svg id="home-title"><use href="./images/quatalogVWordmark.svg#QuatalogVWordmark"></use></svg>
+                <form onsubmit="search_helper(event,false)">
+                        <input type="text" class="home-search" id="search" placeholder="Search...">
+                </form>
+                <p id="home-footer">
+                        Check out our <a target="_blank" href="https://github.com/quatalog/quatalog">source code <svg><use href="icons.svg#github-icon"></use></svg></a> (or yell at us about issues!)<br><br>
+                </p>
+        </body>
+</html>
--- a/js/fuse.js
+++ b/js/fuse.js
--- a/js/search.js
+++ b/js/search.js
@ -0,0 +1,80 @@
+// parses URL params
+const params = window
+	.location
+	.search
+	.slice(1)
+	.split("&")
+	.map(p => p.split("="))
+	.reduce((obj,[key,value]) =>
+		({ ...obj, [key]: decodeURIComponent(value) }),
+		{}
+	);
+
+const search_term = params["search"];
+
+const getSVG = function(name) {
+        return '<svg><use href="./icons.svg#'+name+'"></use></svg>';
+}
+
+const fuzzy_search_config = {
+        limit: 25,
+        includeScore: true,
+        ignoreLocation: true,
+        useExtendedSearch: true,
+        threshold: 0.01,
+        keys: [
+                {
+                        name: 'code',
+                        weight: 0.1
+                },
+                {
+                        name: 'description',
+                        weight: 0.1
+                },
+                {
+                        name: 'name',
+                        weight: 0.8
+                }
+        ]
+}
+
+const attr_to_icon = {
+        'CI': 'message',
+        'HInq': 'magnifying',
+        'PDII': 'briefcase',
+        'WI': 'pencil',
+        'CulmExp': 'cubes'
+}
+
+const display_search_results = function(searchable_catalog) {
+        const fuse = new Fuse(searchable_catalog,fuzzy_search_config);
+        console.log("Searching for " + search_term + "...");
+        const results = fuse.search(search_term,{limit:fuzzy_search_config.limit});
+        const table = document.getElementById("searchResultsContainer");
+        results.forEach(function(search_entry) {
+                const entry = search_entry.item;
+                const tr = table.insertRow(-1);
+                var elemInnerHtml = '<a href="courses/'
+                        + entry.code + '">'
+                        + '<h3><div><span class="courseName">'
+                        + entry.name
+                        + '</span><span class="courseCode">'
+                        + entry.code + '</span><span class="pill">'
+                        + entry.credits + "</span>";
+                if(entry.attributes)
+                entry.attributes.forEach(function(attr) {
+                        elemInnerHtml += '<span class="pill ' + attr + '-pill">' 
+                                + attr + '<svg><use href="./icons.svg#' + attr_to_icon[attr] + '"></use></svg></span>';
+                });
+                elemInnerHtml += "</div></h3><p>" + entry.description + "</p></a>" + '\n';
+                tr.innerHTML = elemInnerHtml;
+        });
+}
+
+window.onload = function() {
+        // smart quotes
+        document.getElementById("searchTerm").innerHTML = "&#8220;" + search_term + "&#8221;";
+        fetch("json/searchable_catalog.json")
+                .then(r => r.json())
+                .then(display_search_results);
+}
--- a/js/search_helper.js
+++ b/js/search_helper.js
@ -0,0 +1,47 @@
+"use strict";
+const search_helper = async function(event,from_course_page = true) {
+        event.preventDefault();
+        // "a     b   cde 12" => "a b cde 12"
+        const input = document.getElementById("search").value.split(" ").join(" ");
+
+        var course_code = false;
+        if(input.length == 8) {
+                // "abcd1345" => ["abcd","1345"] 
+                course_code = input.match(/.{1,4}/g)
+        } else if(input.replace(/ |-/g,"").length == 8) {
+                // "abcd - 1345" => ["abcd","1345"]
+                const arr = input.split(/(?:-| )+/);
+                if(arr.length == 2) course_code = arr;
+        }
+        
+        // only do this logic if the string might be a course code
+        // avoid having to fetch the courses_list if it definitely isn't one
+        if(course_code) {
+                // ["abcd","1345"] => "ABCD-1345"
+                course_code[0] = course_code[0].toUpperCase();
+                const code_str = course_code.join("-");
+
+                // check if "ABCD-1345" is a real course code
+                const course_exists = await fetch(
+                                from_course_page ? "../json/courses_list.json" : "json/courses_list.json"
+                        )
+                        .then(list => list.json())
+                        .then(list => list.includes(code_str));
+                
+                // if it is, redirect to it
+                if(course_exists) {
+                        if(from_course_page) {
+                                location.href = code_str;
+                        } else {
+                                location.href = "courses/" + code_str;
+                        }
+                        return;
+                }
+        }
+
+        if(from_course_page) {
+                location.href = "../search?search=" + encodeURIComponent(input);
+        } else {
+                location.href = "search?search=" + encodeURIComponent(input);
+        }
+}
--- a/search.html
+++ b/search.html
@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<head>
+    <title id="title">Quatalog Search</title>
+
+    <link rel="shortcut icon" href="./favicon/quatalogIcon.png">
+    <link rel="icon" href="./favicon/favicon.ico">
+    <link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="./favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="./favicon/favicon-16x16.png">
+    <link rel="manifest" href="./favicon/site.webmanifest">
+
+    <meta property="og:title" content="Quatalog"/>
+    <meta property="og:type" content="website"/>
+    <meta property="og:url" content="https://quatalog.com"/>
+    <meta property="og:description" content="Quatalog Search"/>
+    <meta property="og:image" content="https://quatalog.com/images/quatalogVWordmarkBacking.png"/>
+    <meta property="og:image:width" content="512"/>
+    <meta property="og:image:height" content="256"/>
+    <meta property="og:image:alt" content="Quatalog wordmark"/>
+
+    <script src="js/fuse.js"></script>
+    <script src="js/search.js"></script>
+    <script src="js/search_helper.js"></script>
+    <link rel="stylesheet" href="./css/common.css"/>
+    <link rel="stylesheet" href="./css/search.css"/>
+    <link rel="stylesheet" href="./css/themes.css"/>
+</head>
+<body>
+    <div id="qlog-header">
+        <a id="qlog-wordmark" href="./"><svg><use href="./images/quatalogHWordmark.svg#QuatalogHWordmark"></use></svg></a>
+        <form onsubmit="search_helper(event,false)">
+            <input type="text" id="search" class="header-search" placeholder="Search...">
+        </form>
+    </div>
+    <h1 id="searchTitle">
+        Search results for <span id="searchTerm"></span>
+    </h1>
+    <table id="searchResultsContainer">
+    </table>
+</body>