Correct css styles and paths

rmfisher26 · rmfisher26 · commit b7a0f8f51407 · 2026-03-03T17:18:03.000-06:00
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -4,7 +4,7 @@ import mdx from '@astrojs/mdx';
 export default defineConfig({
   integrations: [mdx()],
   site: 'https://rmfisher26.github.io',
-  base: '/guppyfisher',
+  base: process.env.GITHUB_ACTIONS ? '/guppyfisher' : '/',
   markdown: {
     shikiConfig: {
       theme: 'catppuccin-mocha',
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,16 +1,17 @@
 ---
+const base = import.meta.env.BASE_URL;
 const currentPath = Astro.url.pathname;
 ---
 <header>
-  <a href="/" class="site-logo">
+  <a href={base} class="site-logo">
     <span class="logo-fish">🐟</span>
     GuppyFisher
   </a>
   <nav>
-    <a href="/" class={currentPath === '/' ? 'active' : ''}>Posts</a>
-    <a href="/series" class={currentPath.startsWith('/series') ? 'active' : ''}>Deep Dives</a>
-    <a href="/series" class={currentPath.startsWith('/series') ? 'active' : ''}>Series</a>
-    <a href="/about" class={currentPath === '/about' ? 'active' : ''}>About</a>
+    <a href={base} class={currentPath === base || currentPath === base.slice(0,-1) ? 'active' : ''}>Posts</a>
+    <a href={`${base}/series`} class={currentPath.startsWith(`${base}/series`) ? 'active' : ''}>Deep Dives</a>
+    <a href={`${base}/series`} class={currentPath.startsWith(`${base}/series`) ? 'active' : ''}>Series</a>
+    <a href={`${base}/about`} class={currentPath === `${base}/about` ? 'active' : ''}>About</a>
   </nav>
   <div class="header-right">
     <span class="tag-badge">Learning in Public</span>
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
@@ -1,5 +1,6 @@
 ---
 import Footer from '../components/Footer.astro';
+import '../styles/global.css';
 
 interface Props {
   title: string;
@@ -16,7 +17,6 @@ const { title, description = 'Learning Guppylang compiler internals in public.'
   <meta name="description" content={description} />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=JetBrains+Mono:ital,wght@0,400;0,600;1,400&family=Lora:ital,wght@0,400;1,400;1,600&display=swap" />
-  <link rel="stylesheet" href="/styles/global.css" />
 </head>
 <body>
   <slot />
diff --git a/src/layouts/PostLayout.astro b/src/layouts/PostLayout.astro
@@ -25,7 +25,7 @@ const formattedDate = new Date(frontmatter.pubDate).toLocaleDateString('en-US',
   <Header />
 
   <div class="back-link">
-    <a href="/">← All posts</a>
+    <a href={import.meta.env.BASE_URL}>← All posts</a>
   </div>
 
   <article>
@@ -61,7 +61,7 @@ const formattedDate = new Date(frontmatter.pubDate).toLocaleDateString('en-US',
     </div>
 
     <footer class="post-footer">
-      <a href="/" class="back-btn">← Back to all posts</a>
+      <a href={import.meta.env.BASE_URL} class="back-btn">← Back to all posts</a>
     </footer>
   </article>
 </Base>
