yass

src/components/ui/Box.astro

@@ -1,20 +1,20 @@
 ---
 interface Props {
-  title?: string;
-  description?: string;
-  icon?: string;
+	title?: string;
+	description?: string;
+	icon?: string;
 }
 
 const { title, description, icon } = Astro.props;
 ---
 
 <div
-  class="border-3 border-light-pu dark:border-dark-pu px-4 py-3 mt-5 w-fit"
+	class="border-3 border-light-pu dark:border-dark-pu px-4 py-3 mt-5 w-fit rounded-br-3xl rounded-tl-3xl"
 >
-  <span class="mb-1">
-    {icon && <i class={`fa-lg mr-1 ${icon}`} />}
-    {title && <span class="text-lg font-bold">{title}</span>}
-    {description && <span class="text-sm text-gray-500">{description}</span>}
-  </span>
-  <slot />
+	<span class="mb-1">
+		{icon && <i class={`fa-lg mr-1 ${icon}`} />}
+		{title && <span class="text-lg font-bold">{title}</span>}
+		{description && <span class="text-sm text-gray-500">{description}</span>}
+	</span>
+	<slot />
 </div>

src/components/ui/Navigation.astro

@@ -5,6 +5,11 @@ const headerLinks = [
     href: "/about",
     icon: "fa-solid fa-user", // font awesome css class
   },
+  {
+    label: "/now",
+    href: "/now",
+    icon: "fa-solid fa-calendar-days"
+  },
   {
     label: "Projects",
     href: "/projects",
@@ -24,12 +29,7 @@ const headerLinks = [
     label: "Contact",
     href: "/contact",
     icon: "fa-solid fa-envelope",
-  },
-  {
-    label: "More",
-    href: "/more",
-    icon: "fa-solid fa-ellipsis",
-  },
+  }, 
 ];
 ---
 

src/components/ui/Prose.astro

@@ -0,0 +1,7 @@
+---
+
+---
+
+<div class="prose dark:prose-invert prose-p:text-light-tx dark:prose-p:text-dark-tx prose-h3:mt-1 prose-a:decoration-dotted prose-a:underline-offset-4 prose-a:decoration-2 prose-a:underline prose-a:decoration-light-pu dark:prose-a:decoration-dark-pu">
+    <slot />
+</div>