Optimize files and semantics

(major buff)
kubgus · Sep 3, 2024 · 3c076f1 · 3c076f1
1 parent febb96c
commit 3c076f1
Show file tree

Hide file tree

Showing 11 changed files with 198 additions and 238 deletions.
diff --git a/src/components/hero.astro b/src/components/hero.astro
diff --git a/src/components/picker.astro b/src/components/picker.astro
diff --git a/src/components/portrait-container.astro b/src/components/portrait-container.astro
diff --git a/src/data/projects.js b/src/data/projects.js
@@ -81,7 +81,7 @@ export default [
         github: "https://github.com/kubgus/stratus-cli",
     },
     {
-        title: "untitled-game-engine",
+        title: "untitled game engine",
         description: "SDL2 game engine made with C++.",
         github: "https://github.com/kubgus/untitled-game-engine",
     },

diff --git a/src/layouts/blog-navbar.astro b/src/layouts/blog-navbar.astro
@@ -1,5 +1,5 @@
 ---
-import FixedNavbarLayout from "./fixed-navbar.astro";
+import NavbarLayout from "./navbar.astro";
 
 import "../styles/default-padding.css";
 import "../styles/article.css";
@@ -10,20 +10,18 @@ const title = `${frontmatter.title} | ${frontmatter.author}` || "Jakub Gustafik"
 const dateString = new Date(frontmatter.date).toLocaleString("en-US", { month: "long", day: "numeric", year: "numeric" });
 ---
 
-<FixedNavbarLayout title={title}>
-<main>
-    <section class="article-header">
+<NavbarLayout title={title} meta={[]} fixed={true}>
+    <header>
         <h1>{frontmatter.title}</h1>
         <p id="article-description">{frontmatter.description}</p>
         <div id="article-info" class="faded">
             <p>{dateString}</p>
             <p>|</p>
             <p>{frontmatter.author}</p>
         </div>
-    </section>
+    </header>
     <slot />
-</main>
-</FixedNavbarLayout>
+</NavbarLayout>
 
 <style>
     main {
@@ -42,13 +40,13 @@ const dateString = new Date(frontmatter.date).toLocaleString("en-US", { month: "
         }
     }
 
-    .article-header {
+   header {
         border-bottom: 1px solid var(--secondary-background-dark);
 
         padding-bottom: 2.5rem;
     }
 
-    .article-header h1 {
+    header h1 {
         font-size: 3rem;
         font-weight: 600;
     }

diff --git a/src/layouts/core.astro b/src/layouts/core.astro
@@ -38,11 +38,11 @@ const { title, meta } = Astro.props || {
         --complementary-accent-dark-3: #54bc70
     }
 
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
+    * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+    }
 
     ::selection {
         background-color: var(--primary-accent-dark);

diff --git a/src/layouts/fixed-navbar.astro b/src/layouts/fixed-navbar.astro
diff --git a/src/layouts/navbar.astro b/src/layouts/navbar.astro
@@ -1,5 +1,6 @@
 ---
 import CoreLayout from "../layouts/core.astro";
+
 import ContactBar from "../components/contact-bar.astro";
 
 const { title, meta } = Astro.props || {
@@ -10,6 +11,32 @@ const { title, meta } = Astro.props || {
 const { fixed } = Astro.props;
 ---
 
+<CoreLayout title={title} meta={meta}>
+<header class={fixed ? "scrolled" : ""}>
+    <figure><a href="/" class="implied">Jakub Gustafik</a></figure>
+    <ContactBar />
+</header>
+
+<slot />
+</CoreLayout>
+
+<script define:vars={{ fixed }} is:inline>
+    if (!fixed) {
+        const header = document.querySelector("header");
+
+        const updateHeader = () => {
+            if (window.scrollY > 200) {
+                header?.classList.add("scrolled");
+            } else {
+                header?.classList.remove("scrolled");
+            }
+        }
+
+        updateHeader();
+        document.addEventListener("scroll", updateHeader);
+    }
+</script>
+
 <style>
     header {
         position: fixed;
@@ -62,13 +89,3 @@ const { fixed } = Astro.props;
         font-size: 1rem;
     }
 </style>
-
-<CoreLayout title={title} meta={meta}>
-    <header class={fixed ? "scrolled" : ""}>
-        <figure><a href="/" class="implied">Jakub Gustafik</a></figure>
-        <nav>
-            <ContactBar />
-        </nav>
-    </header>
-    <slot />
-</CoreLayout>
diff --git a/src/layouts/retracting-navbar.astro b/src/layouts/retracting-navbar.astro