style: active page transitions, fonts and all change

package.json

@@ -11,7 +11,9 @@
   "dependencies": {
     "@astrojs/svelte": "^4.0.2",
     "@astrojs/tailwind": "^5.0.0",
+    "@fontsource/atkinson-hyperlegible": "^5.0.12",
     "@fontsource/caveat-brush": "^5.0.8",
+    "@fontsource/inter": "^5.0.8",
     "@fontsource/jolly-lodger": "^5.0.8",
     "@fontsource/lato": "^5.0.12",
     "@fontsource/raleway": "^5.0.8",

src/components/Navbar.astro

@@ -128,12 +128,12 @@ function activeLink(href: string) {
           menus.map((menu) => (
             <li>
               <a
-                id="swup"
                 href={menu.href}
+                aria-current={activeLink(menu.href) ? "page" : ""}
                 class:list={[
                   "flex items-center gap-[0.375rem] p-[0.375rem] rounded-md spacing-x-2 transition-colors duration-300 group",
                   {
-                    "bg-accent font-semibold text-primary": activeLink(
+                    "font-semibold text-primary": activeLink(
                       menu.href
                     ),
                     "hover:bg-accent-light": menu.href !== Astro.url.pathname,
@@ -164,7 +164,7 @@ function activeLink(href: string) {
       <ul class="flex flex-col gap-[0.375rem]">
         {
           settings.map(({ icon, name, component }) => (
-            <li class="flex items-center justify-between">
+            <li class="flex items-center justify-between" >
               {component == "listbox" && (
                 <ThemeToggler client:load>
                   <Icon name={icon} slot="icon" class="w-6" />
@@ -205,7 +205,8 @@ function activeLink(href: string) {
   </nav>
   <!-- Footer -->
   <footer class="flex flex-col gap-4">
-    <Status />
+    <div transition:persist="status"><Status /></div>
+
     <ul class="flex items-center justify-center gap-4">
       {
         social.map((s) => (
@@ -279,6 +280,28 @@ function activeLink(href: string) {
 </nav>
 
 <style>
+  a[aria-current="page"] {
+    position: relative;
+    color: white;
+    isolation: isolate;
+    z-index: 2;
+    font-weight: 600;
+  }
+
+  a[aria-current="page"] svg{
+    fill: var(--color-accent);
+  }
+
+  a[aria-current="page"]::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    outline: 2px solid var(--color-accent);
+    z-index: -6;
+    @apply rounded-md;
+    view-transition-name: active-page;
+  }
+
   .mobile-nav {
     border-radius: 0.375rem;
     background-color: hsl(var(--color-primary-light));

src/layouts/Main.astro

@@ -5,6 +5,8 @@ import "@fontsource/rancho";
 
 import "@fontsource/raleway";
 import "@fontsource/jolly-lodger";
+import "@fontsource/atkinson-hyperlegible";
+import "@fontsource/inter";
 import "../styles/globals.css";
 interface Props {
     title: string;

src/pages/index.astro

@@ -32,8 +32,8 @@ const icons = [
 
 		<!-- Featured Posts -->
 		<section id="featured-posts" class="space-y-4">
-			<h1 class="font-heading text-2xl font-bold">
-				<span class="text-accent font-stylized text-4xl font-normal"
+			<h1 class="font-heading text-2xl font-semibold">
+				<span class="text-accent text-4xl"
 					>Featured</span
 				>
 				Posts
@@ -49,8 +49,8 @@ const icons = [
 
 		<!-- Featured Snippets -->
 		<section id="featured-snippets" class="space-y-4">
-			<h1 class="font-heading text-2xl font-bold">
-				<span class="text-accent font-stylized text-4xl font-normal"
+			<h1 class="font-heading text-2xl font-semibold">
+				<span class="text-accent text-4xl"
 					>Featured</span
 				>
 				Snippets
@@ -65,8 +65,8 @@ const icons = [
 
 		<!-- Things I know.  -->
 		<section id="things-i-know" class="space-y-4">
-			<h1 class="font-heading text-2xl font-bold">
-				<span class="text-accent font-stylized text-4xl font-normal"
+			<h1 class="font-heading text-2xl font-semibold">
+				<span class="text-accent text-4xl"
 					>Things</span
 				>
 				I know

src/styles/globals.css

@@ -2,7 +2,7 @@
 
 @layer base {
     html {
-        font-family: Lato, system-ui, sans-serif;
+        font-family: "Inter", system-ui, sans-serif;
     }
 
     :root,
@@ -14,7 +14,6 @@
         --color-accent: theme(colors.sky.500);
         --color-accent-light: theme(colors.sky.400);
         --color-accent-lighter: theme(colors.sky.300);
-        --font-stylized: 'Rancho';
     }
 
     [data-theme="halloween"] {
@@ -25,7 +24,6 @@
         --color-accent: theme(colors.orange.500);
         --color-accent-light: theme(colors.orange.400);
         --color-accent-lighter: theme(colors.orange.300);
-        --font-stylized: 'Jolly Lodger';
     }
 
     [data-type="react"] {

tailwind.config.cjs

@@ -5,7 +5,7 @@ module.exports = {
 		extend: {
 			fontFamily: {
 				"stylized": 'var(--font-stylized)',
-				"heading": "Raleway"
+				"heading": "Atkinson Hyperlegible"
 			},
 			colors: {
 				"primary": {