current page line

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "window.autoDetectColorScheme": false
+}

package.json

@@ -10,6 +10,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^4.1.2"
+    "astro": "^4.1.3"
   }
-}
+}

src/components/Footer.astro

@@ -1,19 +1,25 @@
 <style>
-    div, p {
-        display: flex;
-        justify-content: center;
-    }
     p {
         margin: 0;
         font-weight: bold;
+        width: 100%;
     }
     footer {
         padding: 0.5rem;
         background-color: #71578e50;
         backdrop-filter: blur(10px);
     }
+    .frame {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+    }
 </style>
 
 <footer>
-    <p>made with the power of :3</p>
+    <div class="frame">
+        <p style="text-align: start">made with astro</p>
+        <p style="text-align: center">powered by the power of :3</p>
+        <p style="text-align: end">part of the orbithub network</p>
+    </div>
 </footer>

src/components/Header.astro

@@ -22,11 +22,20 @@ import HeaderButton from './buttons/HeaderButton.astro';
     }
 </style>
 
+<script>
+    const curPage = window.location.pathname
+    const selector = 'a[href="'+curPage+'"].headerButton'
+    document.querySelectorAll(selector).forEach(function(ele, idx) {
+        ele.classList.add('currentPage');
+    });
+</script>
+
 <header>
     <nav>
         <img class="logo" src="/melogo.svg" height=45px />
-        <HeaderButton location="/" text="home" />
-        <HeaderButton location="/links/" text="my links" />
-        <HeaderButton location="/thoughts/" text="thoughts" />
+        <HeaderButton location="/" text="home" class="homeBtn" />
+        <HeaderButton location="/links/" text="my links" class="linksBtn" />
+        <HeaderButton location="/thoughts/" text="thoughts" class="thoughtsBtn" />
+        <HeaderButton location="/gallery/" text="gallery" class="galleryBtn" />
     </nav>
 </header>

src/components/buttons/HeaderButton.astro

@@ -35,6 +35,20 @@ const { location, text } = Astro.props;
         transition: 0.1s;
         background: linear-gradient(180deg, #e0bb65 0%, var(--page-bg) 100%);
     }
+    .currentPage::after {
+        content: "";
+        background: #cbabee;
+        border-radius: 50px;
+        width: 2rem;
+        height: 0.3rem;
+        position: absolute;
+        bottom: -0.2rem;
+    }
+    .currentPage:hover::after {
+        width: 3rem;
+        transition: all .4s;
+    }
+
 </style>
 
-<a href={location}>{text}</a>
+<a class="headerButton" href={location}>{text}</a>

src/pages/gallery.astro

@@ -0,0 +1,9 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+const pageTitle = "gallery";
+---
+
+<BaseLayout pageTitle={pageTitle}>
+	<h2>this will have photos soon</h2>
+    <h3>maybe...</h3>
+</BaseLayout>

src/pages/index.astro

@@ -3,8 +3,11 @@ import BaseLayout from "../layouts/BaseLayout.astro";
 const pageTitle = "home";
 ---
 
+<!-- <script type="module" src="https://unpkg.com/@fluentui/web-components">
+</script> -->
+
 <BaseLayout pageTitle={pageTitle}>
 	<h2>hey all, rin here</h2>
     <h3>minorly stupid and majorly silly</h3>
-	<p>this is a home page for something cool to come</p>
+	<p>im doing trolling here soon</p>
 </BaseLayout>