feat: add posts structure

index.css

@@ -83,7 +83,6 @@ footer {
 .main {
   flex: 1;
   display: flex;
-  align-items: center;
 }
 
 .header-links a,
@@ -93,6 +92,8 @@ footer {
 
 ul {
   list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
 a {
@@ -100,27 +101,31 @@ a {
   text-decoration: none;
 }
 
+.content {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.posts,
+.topics {
+  padding: 0 40px;
+  align-self: center;
+}
+
 .topics {
   font-size: 3em;
+}
+
+.posts {
+  font-size: 2em;
+  text-align: right;
   flex: 1;
-  justify-content: space-between;
 }
 
 .post {
-  font-size: 2em;
-}
-
-.software a:hover {
-  color: #0073e6;
-}
-.economics a:hover {
-  color: #009975;
-}
-.trading a:hover {
-  color: #d50032;
-}
-.algorithms a:hover {
-  color: #6a0dad;
+  font-style: italic;
+  margin-bottom: 25px;
 }
 
 .topic a {
@@ -138,17 +143,16 @@ a {
   display: block;
   margin-top: 4px;
   background: currentColor;
+  width: 0;
+  right: 100%;
+  position: absolute;
   transition:
     width 0.5s ease,
     right 0.5s ease;
 }
 
-.topic a:hover::after {
+.topic a:hover::after,
+.topic a.active::after {
   width: 100%;
   right: 0;
 }
-
-.topic a:not(:hover)::after {
-  width: 0;
-  right: 100%;
-}

index.html

@@ -22,21 +22,23 @@
       </div>
     </header>
     <main class="main">
-      <ul class="topics">
-        <li class="topic software">
-          <a href="/software" onclick="typechars(event)">Software</a>
-        </li>
-        <li class="topic economics">
-          <a href="/economics" onclick="typechars(event)">Economics</a>
-        </li>
-        <li class="topic trading">
-          <a href="/trading" onclick="typechars(event)">Trading</a>
-        </li>
-        <li class="topic algorithms">
-          <a href="/algorithms" onclick="typechars(event)">Algorithms</a>
-        </li>
-      </ul>
-      <div class="posts" id="posts"></div>
+      <div class="content">
+        <ul class="topics">
+          <li class="topic software">
+            <a href="/software" onclick="typechars(event)">Software</a>
+          </li>
+          <li class="topic economics">
+            <a href="/economics" onclick="typechars(event)">Economics</a>
+          </li>
+          <li class="topic trading">
+            <a href="/trading" onclick="typechars(event)">Trading</a>
+          </li>
+          <li class="topic algorithms">
+            <a href="/algorithms" onclick="typechars(event)">Algorithms</a>
+          </li>
+        </ul>
+        <div class="posts" id="posts"></div>
+      </div>
     </main>
     <footer>
       <div class="footer-links">

scripts/index.js

@@ -1,8 +1,18 @@
 const postMapping = new Map([
-  ["Software", ["Post 1", "Post 2", "Post 3"]],
-  ["Economics", ["Economy 1", "Economy 2"]],
-  ["Trading", ["Trade Secrets", "Market Trends"]],
-  ["Algorithms", ["Algorithm Challenges", "Data Structures 101"]],
+  [
+    "Software",
+    [
+      "from github pages to aws",
+      "designing this website",
+      "working in the terminal",
+    ],
+  ],
+  [
+    "Economics",
+    ["romer-solow model", "the short run", "to invest or not to invest"],
+  ],
+  ["Trading", ["InteractiveBrokers TWS", "valuation"]],
+  ["Algorithms", ["two pointers", "convex hull"]],
 ]);
 
 // TODO: ensure handling multiple clicks
@@ -43,3 +53,48 @@ function typechars(e) {
 window.addEventListener("beforeunload", () => {
   document.querySelector(".prompt").innerHTML = "barrett@ruth:~$ ";
 });
+
+function applyColor(topic) {
+  switch (topic.parentElement.className.split(" ")[1]) {
+    case "software":
+      topic.style.color = "#0073e6";
+      break;
+    case "economics":
+      topic.style.color = "#009975";
+      break;
+    case "trading":
+      topic.style.color = "#d50032";
+      break;
+    case "algorithms":
+      topic.style.color = "#6a0dad";
+      break;
+  }
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+  const topics = document.querySelectorAll(".topic a");
+
+  topics.forEach((topic) => {
+    topic.addEventListener("mouseenter", () => {
+      applyColor(topic);
+    });
+
+    topic.addEventListener("mouseleave", () => {
+      if (!topic.classList.contains("active")) {
+        topic.style.color = "";
+      }
+    });
+
+    topic.addEventListener("click", (e) => {
+      e.preventDefault();
+
+      topics.forEach((t) => {
+        t.classList.remove("active");
+        t.style.color = "";
+      });
+
+      topic.classList.add("active");
+      applyColor(topic);
+    });
+  });
+});