diff --git a/css/common.css b/css/common.css
new file mode 100644
index 000000000..1c6aab259
--- /dev/null
+++ b/css/common.css
@@ -0,0 +1,198 @@
+/* common variables */
+:root{
+ --quacs-yellow: #f5b53f;
+ --quacs-midtone: #f5cc81;
+ --quacs-white: #f5e3c2;
+ --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;
+
+ --pink: #f53faa;
+ --red: #f53f6a;
+ --green: #3ff57f;
+ --blue: #3f6ef5;
+
+ font-size: calc(1vmin + 12px);
+}
+
+body{
+ background-color: var(--deep-purple);
+ overflow-x:hidden;
+ margin: 0;
+ font-size: 0.9rem; /* default font-size. works well for small-ish thing */
+}
+
+::selection{
+ background: var(--mid-light-purple);
+}
+
+.hidden{
+ visibility: hidden;
+ margin: 0;
+ height: 0vw;
+}
+
+svg {
+ overflow: visible;
+}
+
+span {
+ display: contents;
+}
+
+/* TEXT */
+h1, h1 a {
+ color: var(--quacs-yellow);
+ 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(--quacs-white);
+ font-family: "proxima-nova";
+ font-size: 1.2rem;
+ margin-bottom: 0;
+ margin-top: 0;
+}
+
+p a, p svg{
+ color: var(--quacs-midtone);
+ fill: var(--quacs-midtone);
+ height: 4vmin;
+ vertical-align: bottom;
+}
+
+p svg {
+ display: inline-block;
+}
+
+p a:hover, p a:hover svg {
+ color: var(--quacs-yellow);
+ fill: var(--quacs-yellow);
+}
+
+/* HEADER */
+#qlog-header{
+ border-bottom: 0.2vmin solid var(--quacs-yellow);
+ 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(--quacs-white);
+ border-radius: 100vw;
+ border: none;
+ outline:none;
+ font-family: "proxima-nova";
+ color: var(--mid-dark-purple);
+ caret-color: var(--mid-dark-purple);
+}
+
+input[type="text"]::selection{
+ background: var(--quacs-yellow);
+}
+
+
+/*
+d88888b .d88b. d8b db d888888b .d8888.
+88' .8P Y8. 888o 88 `~~88~~' 88' YP
+88ooo 88 88 88V8o 88 88 `8bo.
+88~~~ 88 88 88 V8o88 88 `Y8b.
+88 `8b d8' 88 V888 88 db 8D
+YP `Y88P' VP V8P YP `8888Y'
+ */
+
+@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");
+}
diff --git a/css/coursedisplay.css b/css/coursedisplay.css
new file mode 100644
index 000000000..029a870a1
--- /dev/null
+++ b/css/coursedisplay.css
@@ -0,0 +1,476 @@
+.term ::selection{
+ background: var(--quacs-yellow);
+}
+
+#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;
+}
+
+
+#cname{
+ font-size: 3.75rem;
+ left: 0vw;
+}
+
+#ccode{
+ color: var(--quacs-midtone);
+ font-family: "proxima-nova";
+ 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(--deep-purple);
+ font-family: "proxima-nova";
+ position: relative;
+ left: 0vw;
+ background: var(--quacs-midtone);
+ 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;
+ font-family: "proxima-nova";
+ color: var(--quacs-white);
+ margin-right: 0.5vmin;
+}
+
+.rel-info-courses{
+ margin-top: 0.7vmin;
+ position: relative;
+ font-size: 1rem;
+}
+
+.course-pill{
+ color: var(--deep-purple);
+ font-family: "proxima-nova";
+
+ position: relative;
+ left: 0vw;
+ background: var(--quacs-yellow);
+ 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(--quacs-midtone);
+}
+
+#prereq-classes{
+ display: flex;
+ align-items: center;
+ width: fit-content;
+ flex-wrap: wrap;
+ flex-basis: content;
+}
+
+.pr-or-con{
+ background: var(--blue);
+ 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(--quacs-white);
+ font-family: "proxima-nova";
+ font-size: 1.3rem;
+ font-weight: 700;
+ margin-bottom: 0.5vmin;
+ text-align: center;
+}
+
+.pr-or{
+ background: var(--deep-purple);
+ 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(--quacs-white);
+ background: var(--red);
+ padding: 1vmin;
+ color: var(--quacs-white);
+ font-family: "proxima-nova";
+ 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(--red);
+ color: var(--quacs-white);
+ font-family: "proxima-nova";
+ 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(--pink);
+ color: var(--quacs-white);
+ font-family: "proxima-nova";
+ 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(--quacs-midtone);
+ font-family: 'proxima-nova';
+}
+
+.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(--green);
+}
+#no-code-icon svg{
+ fill: var(--red);
+}
+#diff-code-icon svg{
+ fill: var(--quacs-yellow);
+}
+#nil-code-icon svg{
+ fill: var(--mid-light-purple);
+}
+
+#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(--quacs-midtone);
+ 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(--deep-purple);
+ font-family: "proxima-nova";
+ 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(--quacs-yellow);
+}
+
+.view-option-label {
+ cursor: pointer;
+ transition: color .1s;
+ font-family: "proxima-nova";
+ color: var(--quacs-midtone);
+}
+
+.view-icon-selected svg {
+ fill: var(--quacs-yellow);
+}
+
+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;
+ font-weight: 600;
+ color: var(--deep-purple);
+}
+
+.term-course-info{
+ text-align: center;
+ margin-left: 0.1rem;
+ margin-right: 0.1rem;
+ height: 100%;
+}
+
+
+.term li{
+ /* iffy on how these should go, */
+ /* word-break: break-word; */
+ /* hyphens: auto; */
+ 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;
+}
+
+.course-capacity-meter {
+ font-family: monospace;
+ font-size: 0.3rem;
+}
+
+.season-label{
+ color: var(--quacs-midtone);
+ font-family: "proxima-nova";
+ font-size: 1.4rem;
+}
+
+.midsum-label{
+ color: var(--quacs-white);
+ font-family: "proxima-nova";
+ white-space: break-spaces;
+}
+
+.year{
+ color: var(--quacs-midtone);
+ font-family: "proxima-nova";
+ text-align: left;
+ width: 6vmin;
+}
+
+.offered {
+ background-color: var(--green);
+}
+.offered-diff-code {
+ background-color: var(--quacs-yellow);
+}
+.not-offered {
+ background-color: var(--red);
+ height: 2rem;
+}
+.unscheduled {
+ background-color: var(--mid-light-purple);
+}
+
+
+
+@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);
+ }
+}
diff --git a/favicon/android-chrome-192x192.png b/favicon/android-chrome-192x192.png
new file mode 100644
index 000000000..3eb4db3aa
Binary files /dev/null and b/favicon/android-chrome-192x192.png differ
diff --git a/favicon/android-chrome-512x512.png b/favicon/android-chrome-512x512.png
new file mode 100644
index 000000000..8e54b261a
Binary files /dev/null and b/favicon/android-chrome-512x512.png differ
diff --git a/favicon/apple-touch-icon.png b/favicon/apple-touch-icon.png
new file mode 100644
index 000000000..6d40e13d8
Binary files /dev/null and b/favicon/apple-touch-icon.png differ
diff --git a/favicon/favicon-16x16.png b/favicon/favicon-16x16.png
new file mode 100644
index 000000000..2795bae8e
Binary files /dev/null and b/favicon/favicon-16x16.png differ
diff --git a/favicon/favicon-32x32.png b/favicon/favicon-32x32.png
new file mode 100644
index 000000000..b08e959e6
Binary files /dev/null and b/favicon/favicon-32x32.png differ
diff --git a/favicon/favicon.ico b/favicon/favicon.ico
new file mode 100644
index 000000000..9a92fa6e6
Binary files /dev/null and b/favicon/favicon.ico differ
diff --git a/favicon/quatalogIcon.png b/favicon/quatalogIcon.png
new file mode 100644
index 000000000..9c313e64e
Binary files /dev/null and b/favicon/quatalogIcon.png differ
diff --git a/favicon/site.webmanifest b/favicon/site.webmanifest
new file mode 100644
index 000000000..901bd0c6f
--- /dev/null
+++ 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"
+}
\ No newline at end of file
diff --git a/fonts/Proxima-Nova-Black.otf b/fonts/Proxima-Nova-Black.otf
new file mode 100644
index 000000000..2dca49412
Binary files /dev/null and b/fonts/Proxima-Nova-Black.otf differ
diff --git a/fonts/Proxima-Nova-Bold.otf b/fonts/Proxima-Nova-Bold.otf
new file mode 100644
index 000000000..1ea77534a
Binary files /dev/null and b/fonts/Proxima-Nova-Bold.otf differ
diff --git a/fonts/Proxima-Nova-Extrabold.otf b/fonts/Proxima-Nova-Extrabold.otf
new file mode 100644
index 000000000..9f6755f41
Binary files /dev/null and b/fonts/Proxima-Nova-Extrabold.otf differ
diff --git a/fonts/Proxima-Nova-Regular.otf b/fonts/Proxima-Nova-Regular.otf
new file mode 100644
index 000000000..018b6f831
Binary files /dev/null and b/fonts/Proxima-Nova-Regular.otf differ
diff --git a/fonts/Proxima-Nova-Thin.otf b/fonts/Proxima-Nova-Thin.otf
new file mode 100644
index 000000000..87218e518
Binary files /dev/null and b/fonts/Proxima-Nova-Thin.otf differ
diff --git a/fonts/rivalsans-black.otf b/fonts/rivalsans-black.otf
new file mode 100644
index 000000000..02827b1fe
Binary files /dev/null and b/fonts/rivalsans-black.otf differ
diff --git a/fonts/rivalsans-bold.otf b/fonts/rivalsans-bold.otf
new file mode 100644
index 000000000..a3fdfe8b1
Binary files /dev/null and b/fonts/rivalsans-bold.otf differ
diff --git a/fonts/rivalsans-extrabold.otf b/fonts/rivalsans-extrabold.otf
new file mode 100644
index 000000000..3808530f8
Binary files /dev/null and b/fonts/rivalsans-extrabold.otf differ
diff --git a/fonts/rivalsans-regular.otf b/fonts/rivalsans-regular.otf
new file mode 100644
index 000000000..5ec64b3c8
Binary files /dev/null and b/fonts/rivalsans-regular.otf differ
diff --git a/icons.svg b/icons.svg
new file mode 100644
index 000000000..92fe680e6
--- /dev/null
+++ b/icons.svg
@@ -0,0 +1,81 @@
+
diff --git a/images/quatalogHWordmark.svg b/images/quatalogHWordmark.svg
new file mode 100644
index 000000000..4d5db0ca1
--- /dev/null
+++ b/images/quatalogHWordmark.svg
@@ -0,0 +1,58 @@
+
diff --git a/images/quatalogIcon.svg b/images/quatalogIcon.svg
new file mode 100644
index 000000000..ef4ac6eac
--- /dev/null
+++ b/images/quatalogIcon.svg
@@ -0,0 +1,48 @@
+
diff --git a/images/quatalogMinecraftIcon.png b/images/quatalogMinecraftIcon.png
new file mode 100644
index 000000000..3d1600317
Binary files /dev/null and b/images/quatalogMinecraftIcon.png differ
diff --git a/images/quatalogMinecraftIcon.png.orig b/images/quatalogMinecraftIcon.png.orig
new file mode 100644
index 000000000..3d1600317
Binary files /dev/null and b/images/quatalogMinecraftIcon.png.orig differ
diff --git a/images/quatalogVWordmark.svg b/images/quatalogVWordmark.svg
new file mode 100644
index 000000000..2e81eb824
--- /dev/null
+++ b/images/quatalogVWordmark.svg
@@ -0,0 +1,58 @@
+
diff --git a/images/quatalogVWordmarkBacking.png b/images/quatalogVWordmarkBacking.png
new file mode 100644
index 000000000..31f616ad9
Binary files /dev/null and b/images/quatalogVWordmarkBacking.png differ