From 879a6237b186768356f99caf992f0d25d5ec8612 Mon Sep 17 00:00:00 2001
From: Minteck <contact@minteck.org>
Date: Sun, 5 Dec 2021 16:38:49 +0100
Subject: Commit

---
 styles.css | 519 ++++++++++++++++++++++++++++++++++---------------------------
 1 file changed, 287 insertions(+), 232 deletions(-)

(limited to 'styles.css')

diff --git a/styles.css b/styles.css
index efd78c4..d0c8861 100644
--- a/styles.css
+++ b/styles.css
@@ -1,233 +1,288 @@
-/* Dark Theme */
-@import "dark.css";
-
-/* Globals */
-* {
-    font-family: sans-serif;
-}
-
-html, body {
-    margin: 0;
-    padding: 0;
-}
-
-#copyright {
-    float: right;
-    vertical-align: middle;
-    display: inline-block;
-    position: fixed;
-    top: 8px;
-    opacity: .5;
-    right: 32px;
-}
-
-/* Loader */
-#loading {
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    z-index: 999999;
-    background: #222;
-    color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-
-}
-
-.progress {
-    position: fixed;
-    left: 35%;
-    top: 65%;
-    height: 5px;
-    z-index: 99999999;
-    background-color: rgba(255, 255, 255, .25);
-    right: 35%;
-    border-radius: 1000px;
-}
-
-.bar {
-    background-color: rgba(255, 255, 255, .25);
-    width: 0%;
-    height: 5px;
-    border-radius: 1000px;
-}
-
-.percent {
-    position: absolute;
-    display: inline-block;
-    top: 3px;
-    left: 48%;
-}
-
-/* Tabs */
-#tabs {
-    background: whitesmoke;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-    width: 100vw;
-}
-
-#tabs img {
-    width: 36px;
-    vertical-align: middle;
-    filter: invert(0);
-    transition: width 200ms, filter 200ms;
-}
-
-#tabs .tab {
-    border-bottom: 1px solid;
-    border-bottom-color: transparent;
-    text-align: center;
-    margin: 8px 8px 0;
-    padding-bottom: 8px;
-    cursor: pointer;
-    height: 48px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: border-bottom-color 200ms;
-}
-
-#tabs .tab.tab-active img {
-    width: 48px;
-}
-
-#tabs .tab.tab-active {
-    border-bottom-color: black;
-}
-
-#panes, .pane {
-    position: fixed;
-    top: 98px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
-
-.pane {
-    display: none;
-}
-
-/* IFrame */
-.loader {
-    background: rgba(255, 255, 255, .75);
-    top: 98px;
-    bottom: 0;
-    position: fixed;
-    left: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 999999;
-    cursor: wait;
-}
-
-.loader img {
-    height: 96px;
-    width: 96px;
-}
-
-.frame {
-    border: none;
-    width: 100%;
-    height: 100%;
-}
-
-/* Home */
-.home-grid {
-    display: grid;
-    grid-template-columns: 96px 1fr;
-    grid-column-gap: 10px;
-}
-
-.home-grid > * {
-    display: flex;
-    align-items: center;
-}
-
-/* Bootstrap Fixes */
-.dropdown-item {
-    cursor: pointer;
-}
-
-.list-group {
-    margin-bottom: 10px !important;
-}
-
-/* Responsiveness */
-@media (max-width: 550px) {
-    #copyright {
-        display: none;
-    }
-}
-
-#explore {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    position: fixed;
-    inset: 0;
-}
-
-#explore-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-}
-
-#explore-grid.admin {
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-}
-
-@media (max-width: 800px) {
-    #explore-grid {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-    }
-
-    #explore-grid.admin {
-        grid-template-columns: 1fr 1fr 1fr;
-    }
-}
-
-.explore-btn {
-    color: white;
-    border-radius: 5px;
-    padding: 10px;
-    text-decoration: none;
-}
-
-.explore-btn:hover {
-    background: rgba(255, 255, 255, .25);
-    box-shadow: 1px 5px 12px rgba(255, 255, 255, .25);
-}
-
-.explore-btn:active, .explore-btn:focus {
-    background: rgba(255, 255, 255, .5);
-    box-shadow: 1px 5px 12px rgba(255, 255, 255, .5);
-}
-
-@media (prefers-color-scheme: light) {
-    .explore-btn {
-        color: black;
-    }
-
-    .explore-btn:hover {
-        background: rgba(0, 0, 0, 0.25);
-        box-shadow: 1px 5px 12px rgba(0, 0, 0, 0.25);
-    }
-
-    .explore-btn:active, .explore-btn:focus {
-        background: rgba(0, 0, 0, .5);
-        box-shadow: 1px 5px 12px rgba(0, 0, 0, .5);
-    }
-
-    #data-loader-img {
-        filter: none !important;
-    }
+/* Dark Theme */
+@import "dark.css";
+
+@font-face {
+    font-family: "Nunito";
+    src: url("/fonts/Nunito-VariableFont_wght.ttf");
+    font-weight: 125 950;
+    font-stretch: 75% 125%;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Nunito";
+    src: url("/fonts/Nunito-Italic-VariableFont_wght.ttf");
+    font-weight: 125 950;
+    font-stretch: 75% 125%;
+    font-style: italic;
+}
+
+* {
+    font-family: "Nunito", sans-serif !important;
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+}
+
+#copyright {
+    float: right;
+    vertical-align: middle;
+    display: inline-block;
+    position: fixed;
+    top: 8px;
+    opacity: .5;
+    right: 32px;
+}
+
+#user {
+    float: right;
+    vertical-align: middle;
+    display: inline-block;
+    position: fixed;
+    top: 5px;
+    right: 32px;
+}
+
+/* Loader */
+#loading {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 999999;
+    background: #222;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+}
+
+.progress {
+    position: fixed;
+    left: 35%;
+    top: 65%;
+    height: 5px;
+    z-index: 99999999;
+    background-color: rgba(255, 255, 255, .25);
+    right: 35%;
+    border-radius: 1000px;
+}
+
+.bar {
+    background-color: rgba(255, 255, 255, .25);
+    width: 0%;
+    height: 5px;
+    border-radius: 1000px;
+}
+
+.percent {
+    position: absolute;
+    display: inline-block;
+    top: 3px;
+    left: 48%;
+}
+
+/* Tabs */
+#tabs {
+    background: whitesmoke;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    width: 100vw;
+}
+
+#tabs img {
+    width: 36px;
+    vertical-align: middle;
+    filter: invert(0);
+    transition: width 200ms, filter 200ms;
+}
+
+#tabs .tab {
+    border-bottom: 1px solid;
+    border-bottom-color: transparent;
+    text-align: center;
+    margin: 8px 8px 0;
+    padding-bottom: 8px;
+    cursor: pointer;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: border-bottom-color 200ms;
+}
+
+#tabs .tab.tab-active img {
+    width: 48px;
+}
+
+#tabs .tab.tab-active {
+    border-bottom-color: black;
+}
+
+#panes, .pane {
+    position: fixed;
+    top: 98px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.pane {
+    display: none;
+}
+
+/* IFrame */
+.loader {
+    background: rgba(255, 255, 255, .75);
+    top: 98px;
+    bottom: 0;
+    position: fixed;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 999999;
+    cursor: wait;
+}
+
+.loader img {
+    height: 96px;
+    width: 96px;
+}
+
+.frame {
+    border: none;
+    width: 100%;
+    height: 100%;
+}
+
+/* Home */
+.home-grid {
+    display: grid;
+    grid-template-columns: 96px 1fr;
+    grid-column-gap: 10px;
+}
+
+.home-grid > * {
+    display: flex;
+    align-items: center;
+}
+
+/* Bootstrap Fixes */
+.dropdown-item {
+    cursor: pointer;
+}
+
+.list-group {
+    margin-bottom: 10px !important;
+}
+
+/* Responsiveness */
+@media (max-width: 550px) {
+    #copyright {
+        display: none;
+    }
+}
+
+#explore {
+    text-align: center;
+    height: max-content;
+    margin-top: 32px;
+    padding-top: 25vh;
+    padding-bottom: 5vh;
+    background-color: rgba(0, 0, 0, .5);
+}
+
+#explore-outer {
+    background-image: url("/intro.jpg");
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+#explore-grid {
+    margin-left: auto;
+    margin-right: auto;
+    width: max-content;
+    display: grid;
+    grid-template-columns: 120px 120px 120px 120px 120px 120px 120px 120px 120px;
+}
+
+#explore-grid.admin {
+    grid-template-columns: 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px;
+}
+
+@media (max-width: 800px) {
+    .explore-description {
+        display: none !important;
+    }
+
+    #explore-grid {
+        display: grid;
+        grid-template-columns: 120px 120px;
+    }
+
+    #explore-grid.admin {
+        grid-template-columns: 120px 120px 120px;
+    }
+}
+
+.explore-btn {
+    color: white;
+    border-radius: 5px;
+    padding: 5px;
+    text-align: left;
+    display: block;
+    text-decoration: none;
+    border: 1px solid transparent;
+}
+
+.explore-btn:hover {
+    background: rgba(255, 255, 255, .25);
+    border: 1px solid gray;
+    backdrop-filter: blur(5px);
+}
+
+.explore-btn:active, .explore-btn:focus {
+    background: rgba(255, 255, 255, .5);
+    border: 1px solid white;
+    backdrop-filter: blur(5px);
+}
+
+.explore-btn {
+    color: white !important;
+    text-decoration: none !important;
+}
+
+.explore-btn:hover {
+    background: rgba(0, 0, 0, 0.25);
+    box-shadow: 1px 5px 12px rgba(0, 0, 0, 0.25);
+}
+
+.explore-btn:active, .explore-btn:focus {
+    background: rgba(0, 0, 0, .5);
+    box-shadow: 1px 5px 12px rgba(0, 0, 0, .5);
+}
+
+@media (prefers-color-scheme: light) {
+    #data-loader-img {
+        filter: none !important;
+    }
+}
+
+.explore-description {
+    color: white;
+    opacity: 0;
+    display: inline-block;
+    margin-left: 5px;
+}
+
+.explore-btn:hover .explore-description, .explore-btn:focus .explore-description, .explore-btn:active .explore-description {
+    opacity: .5 !important;
 }
\ No newline at end of file
-- 
cgit