navigational bar

featuring a really bad div class name pun
chromonym · Nov 20, 2023 · a6bef6f · a6bef6f
1 parent 070518e
commit a6bef6f
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -13,14 +13,22 @@
     <title>xxos site</title>
 </head>
 <body>
+    <div id="mobileNav" class="gBox" onclick="openMenu()">Ξ</div>
     <header class="gBox">
-        <div id="logo"></div>
+        <a href="/" style="margin-right: auto;"><div id="logo"></div></a>
+        <div class="ider"></div>
+        <a class="button" href="/">Home</a>
+        <div class="ider"></div>
+        <a class="button" href="links">Links</a>
+        <div class="ider"></div>
+        <select name="theme" id="theme" class="button">
+            <option value="dark">Dark mode</option>
+            <option value="light">Light mode</option>
+            <option value="gradient">𝑔𝓇𝒶𝒹𝒾𝑒𝓃𝓉</option>
+        </select>
     </header>
-    <div class="gBox">
-        <h1><small>The</small>XXOs’ webbed site</h1>
-        <p>This is just a placeholder site with a bunch of links at the moment. I'll get to making it a proper website (and look nice) some time in the future.</p>
-        <button id="themeChanger">Change theme</button>
-    </div>
+    <h1><small>The</small>XXOs’ webbed site</h1>
+    <p>This is just a placeholder site with a bunch of links at the moment. I'll get to making it a proper website (and look nice) some time in the future.</p><br/>
     <div class="gBox">
         <h3>Incomplete projects (that have a website):</h3>
         <ul>

diff --git a/links.html b/links.html
@@ -13,14 +13,24 @@
     <title>xxos site ∫ links</title>
 </head>
 <body>
+    <div id="mobileNav" class="gBox" onclick="openMenu()">Ξ</div>
     <header class="gBox">
-        <div id="logo"></div>
+        <a href="/" style="margin-right: auto;"><div id="logo"></div></a>
+        <div class="ider"></div>
+        <a class="button" href="/">Home</a>
+        <div class="ider"></div>
+        <a class="button" href="links">Links</a>
+        <div class="ider"></div>
+        <select name="theme" id="theme" class="button">
+            <option value="dark">Dark mode</option>
+            <option value="light">Light mode</option>
+            <option value="gradient">𝑔𝓇𝒶𝒹𝒾𝑒𝓃𝓉</option>
+        </select>
     </header>
     <div id="line"></div>
     <div id="linkContainer">
         <div class="gBox linkBox" style="min-width: 10em;">
             <h1 style="margin-bottom: 0px;">Links</h1>
-            <button id="themeChanger" title="this website uses cookies to save your theme">Change theme</button>
         </div>
         <div class="gBox linkBox">
             <a href="https://discord.com/users/648765051297202195" target="_blank" class="sLink discord">Discord (@xxos)</a>

diff --git a/script.js b/script.js
@@ -15,36 +15,42 @@ function getCookie(cname) {
     return "";
 }
 
+function openMenu() {
+    document.getElementsByTagName("header")[0].classList.toggle("open");
+}
+
 var theme = "dark";
+var opened = false;
 
 window.onload = function () {
     let thm = getCookie("theme");
     if (thm == "light") {
         document.getElementById('theme_css').href = "./themes/light.css";
+        document.getElementById("theme").value = "light";
         theme = "light";
     } else if (thm == "gradient") {
         console.log("a");
         document.getElementById('theme_css').href = "./themes/gradient.css";
+        document.getElementById("theme").value = "gradient";
         theme = "gradient";
     } else {
         console.log("a");
         document.getElementById('theme_css').href = "./themes/dark.css";
+        document.getElementById("theme").value = "dark";
         theme = "dark";
     }
 };
 
-document.getElementById('themeChanger').onclick = function () {
-    if (theme == "dark") {
+document.getElementById('theme').onchange = function () {
+    theme = document.getElementById("theme").value;
+    if (theme == "light") {
         document.getElementById('theme_css').href = "./themes/light.css";
-        theme = "light";
         document.cookie = "theme=light; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/;";
-    } else if (theme == "light") {
+    } else if (theme == "gradient") {
         document.getElementById('theme_css').href = "./themes/gradient.css";
-        theme = "gradient";
         document.cookie = "theme=gradient; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/;";
-    } else if (theme == "gradient") {
+    } else if (theme == "dark") {
         document.getElementById('theme_css').href = "./themes/dark.css";
-        theme = "dark";
         document.cookie = "theme=dark; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/;";
     }
 }
diff --git a/style.css b/style.css
@@ -57,6 +57,48 @@ header.gBox {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     border-top: none;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    height: auto;
+    justify-content: space-between;
+    padding: 0;
+}
+div.ider {
+    background: var(--gradient);
+    background-attachment: fixed;
+    width: 2px;
+    height: 40px;
+    display: block;
+}
+#mobileNav {
+    right: 0;
+    top: 0;
+    position: absolute;
+    border-right: hidden;
+    border-top: none;
+    border-bottom-right-radius: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    cursor: pointer;
+    display: none;
+    width: 10px;
+    height: 10px;
+    text-align: center;
+    font-family: 'Tomorrow', sans-serif;
+}
+a.button, select.button {
+    text-decoration: none;
+    color: var(--headers);
+    padding: 20px;
+    background: transparent;
+    border: transparent;
+    font-family: 'Inter', sans-serif;
+    font-size: 1em;
+    cursor: pointer;
+}
+select.button > option {
+    background: var(--bg);
 }
 
 .linkBox {
@@ -124,7 +166,39 @@ a.sLink:hover {
     height: 40px;
     -webkit-mask-image: url(imgs/cq-mask.svg);
     mask-image: url(imgs/cq-mask.svg);
+    margin-left: 10px;
 }
 #logo:hover {
     background: var(--gradient);
+}
+
+@media (max-width: 800px) {
+    body {
+        padding-top: 30px;
+        margin-top: 8px;
+        overflow-x: hidden;
+    }
+    header.gBox {
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+        flex-direction: column;
+        border-top: solid 5px transparent;
+        display: none;
+        height: 100vw;
+    }
+    #logo:hover {
+        background-attachment: fixed;
+    }
+    #mobileNav {
+        display: block;
+    }
+    header.gBox.open {
+        display: block;
+    }
+    div.ider {
+        display: none;
+    }
+    .button {
+        width: 100%;
+    }
 }
diff --git a/themes/gradient.css b/themes/gradient.css
@@ -2,5 +2,5 @@
     --bg: linear-gradient(180deg, #ff9200 0%, #ffb624 25%, #fff953 50%, #6dffab 75%, #00ffff 100%);
     --text: #1a1b23;
     --headers: black;
-    --gradient: #1a1b23;
+    --gradient: linear-gradient(0deg, #ff9200 0%, #ffb624 25%, #ada929 50%, #6dffab 75%, #00ffff 100%);
 }