cleaner links navi

iguannalin · Nov 26, 2024 · 3efb58d · 3efb58d
1 parent 20689cc
commit 3efb58d
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 32 deletions.
diff --git a/index.css b/index.css
@@ -111,16 +111,38 @@ h6 {
 .name {
   text-align: left;
   margin: 0 0;
-  font-size: 32px;
-  line-height: 25px;
+  font-size: 31px;
+  line-height: 24px;
   max-width: 110px;
-  font-weight: 200;
+  font-weight: 100;
 }
 
 .name a {
   text-decoration: none;
 }
 
+div#select {
+  flex-flow: row;
+  display: flex;
+  flex: 3;
+  justify-content: space-around;
+}
+
+div#select button {
+  border: none;
+  background-color: transparent;
+  font-family: "Varela Round", sans-serif;
+  font-size: var(--default-font);
+  line-height: var(--default-line-height);
+  color: var(--default-link);
+  text-shadow: 1px 1px 6px #00e78c;
+}
+
+div#select button:hover {
+  text-shadow: 1px 1px 12px #00e78c;
+  cursor: pointer;
+}
+
 #greeting {
   display: flex;
   justify-content: center;

diff --git a/index.html b/index.html
@@ -41,15 +41,11 @@
     <div id="top">
       <h1 class="name"><a href="https://annaylin.com">anna y lin</a></h1>
       <label for="select">select the page you would like to visit:</label>
-      <select id="select">
-        <optgroup label="select">
-          <option id="d" selected value="center">
-            <script>for (let i = 0; i < Math.max(7, d.parentElement.parentElement.clientWidth / 40); i++) d.innerHTML += `~._.~`</script>
-          </option>
-          <option>about</option>
-          <option>projects</option>
-        </optgroup>
-      </select>
+      <div id="select">
+        <button>home</button>
+        <button>about</button>
+        <button>projects</button>
+      </div>
     </div>
     <div id="left">
       <h1 class="name"><a href="https://annaylin.com">anna y lin</a></h1>

diff --git a/index.js b/index.js
@@ -3,7 +3,7 @@ window.addEventListener("load", () => {
   const left = document.getElementById("left");
   const center = document.getElementById("center");
   const right = document.getElementById("right");
-  const select = document.getElementById("select");
+  const tabButtons = Array.from(document.querySelectorAll("#select > button"));
   const table = document.getElementById("projects-table");
   const greeting = document.getElementById("greeting");
   const oopsies = document.getElementById("oops");
@@ -74,7 +74,6 @@ window.addEventListener("load", () => {
     if (currentElement.id === "filmotography") switchFilmView({target: {title: "yosemite"}});
     if (currentElement.id === "tableware") switchFilmView({target: {title: "tableware"}});
     if (currentElement.id === "reveries") switchFilmView({target: {title: "reveries"}});
-    if (currentElement === center) select.value = "center";
   }
 
   function loadProjects(projects, label) {
@@ -103,13 +102,12 @@ window.addEventListener("load", () => {
     if (document.getElementById(selected)) {
       let subelement = document.getElementById(selected);
       location.hash = selected;
-      select.value = selected;
       switchView(subelement, true);
     }
   }
 
   function onSelect(e) {
-    const selected = e.target.value;
+    const selected = e.target.innerText;
     let elem;
     switch (selected) {
       case "projects":
@@ -141,7 +139,9 @@ window.addEventListener("load", () => {
   loadProjects(analogProjects, "analog");
   loadProjects([], "digital");
 
-  select.onchange = (e) => onSelect(e);
+  tabButtons.forEach((elem) => {
+    elem.onclick = (e) => onSelect(e);
+  });
   oopsies.onclick = oops;
 
   radioButtons.forEach((button) => {

diff --git a/portfolio/index.css b/portfolio/index.css
@@ -1,5 +1,4 @@
 @import url("https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap");
-@import url('https://fonts.googleapis.com/css2?family=Junge&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Varela+Round&display=swap');
 
 body {
   font-family: "Nanum Myeongjo", "Times New Roman", serif;
@@ -52,3 +51,7 @@ h6 {
 span > span > img {
   max-width: 425px;
 }
+
+div#select button {
+  font-family: "Times New Roman", serif;
+}
diff --git a/portfolio/index.html b/portfolio/index.html
@@ -45,15 +45,11 @@
       <h1 class="name"><a href="https://annaylin.com/portfolio">anna y
         lin</a></h1>
       <label for="select">select the page you would like to visit:</label>
-      <select id="select">
-        <optgroup label="select">
-          <option id="d" selected value="center">
-            <script>for (let i = 0; i < Math.max(7, d.parentElement.parentElement.clientWidth / 10); i++) d.innerHTML += `*-`</script>
-          </option>
-          <option>work</option>
-          <option>about</option>
-        </optgroup>
-      </select>
+      <div id="select">
+        <button>home</button>
+        <button>work</button>
+        <button>about</button>
+      </div>
     </div>
     <div id="left">
       <h1 class="name"><a href="https://annaylin.com/portfolio/">anna y

diff --git a/portfolio/index.js b/portfolio/index.js
@@ -3,7 +3,7 @@ window.addEventListener("load", () => {
   const left = document.getElementById("left");
   const center = document.getElementById("center");
   const right = document.getElementById("right");
-  const select = document.getElementById("select");
+  const tabButtons = Array.from(document.querySelectorAll("#select > button"));
   const table = document.getElementById("work-table");
   const greeting = document.getElementById("greeting");
   const isSmallScreen = getComputedStyle(top).display !== "none";
@@ -37,7 +37,6 @@ window.addEventListener("load", () => {
       previousElement = currentElement;
     }
     greeting.style.display = currentElement === center ? "flex" : "none";
-    if (currentElement === center) select.value = "center";
   }
 
   function loadProjects(projects, label) {
@@ -67,13 +66,12 @@ window.addEventListener("load", () => {
     if (document.getElementById(selected)) {
       let subelement = document.getElementById(selected);
       location.hash = selected;
-      select.value = selected;
       switchView(subelement, true);
     }
   }
 
   function onSelect(e) {
-    const selected = e.target.value;
+    const selected = e.target.innerText;
     let elem;
     switch (selected) {
       case "work":
@@ -95,7 +93,9 @@ window.addEventListener("load", () => {
   loadProjects(work.slice(6, 7), titles[3]);
   loadProjects(work.slice(7, 8), titles[4]);
 
-  select.onchange = (e) => onSelect(e);
+  tabButtons.forEach((elem) => {
+    elem.onclick = (e) => onSelect(e);
+  });
 
   let dotIndex = 0;
   const dotMax = 150;