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>

src/content/bio.md

@@ -0,0 +1,7 @@
+---
+---
+
+I'm a musician, student, part-time software developer and writer.
+
+I like making weird noises, websites (like this one) with [Astro](https://astro.build), and going outside whenever I'm not doing either of those things.
+

src/content/now.md

@@ -0,0 +1,14 @@
+Spending less time on the internet, or at least trying to.
+
+### 🎵 music
+
+I've been listening to a lot of Sampha, recently.
+
+In London, I picked up the [new Godspeed You! Black Emperor album, ""](https://cstrecords.com/en-gb/products/cst183) and it's one of the most hauntingly beautiful things I've listened to in a while.
+
+### 📖 reading
+
+I've been digitising my book collection into a Notion database and it's so much work but so fun. plus i can make *GRAPHS*
+
+- currently reading: This Is How You Lose The Time War by Amal El-Mohtar & Max Gladstone
+- just picked up: Yellowface by Rebecca F. Kuang

src/pages/index.astro

@@ -6,6 +6,7 @@ import Box from "~/components/ui/Box.astro";
 import CollectionList from "~/components/lists/BlogPostList.astro";
 import NoteList from "~/components/lists/NoteList.astro";
 import StyledLink from "~/components/util/StyledLink.astro";
+import {Content as Bio} from "~/content/bio.md"
 ---
 
 <Layout>
@@ -17,24 +18,8 @@ import StyledLink from "~/components/util/StyledLink.astro";
 		>
 			Hi! I'm Ivy, welcome to my website!
 		</h1>
-		<p>
-			I'm a musician, student, part-time software developer and <a
-				href="/blog"
-				class="link hover:decoration-solid">writer</a
-			>. <br />
-			I mostly work with <a
-				href="https://www.rust-lang.org/"
-				class="link hover:decoration-solid">Rust</a
-			>, <a
-				href="https://www.typescriptlang.org/"
-				class="link hover:decoration-solid">Typescript</a
-			>, and web frameworks like <a
-				href="https://astro.build/"
-				class="link hover:decoration-solid">Astro</a
-			>, and <a href="https://11ty.dev/" class="link hover:decoration-solid"
-				>Eleventy</a
-			>.
-		</p>
+		
+		<Bio />
 
 		<div class="md:flex md:flex-column gap-2">
 			<Box title="latest blog posts" description="" icon="fa-solid fa-blog">

src/pages/now.astro

@@ -0,0 +1,15 @@
+---
+import Page from "~/layouts/Page.astro";
+import { Content } from "~/content/now.md";
+import Prose from "~/components/ui/Prose.astro"
+---
+
+<Page title="/now" icon="fa-solid fa-calendar-days" date="2025-03-17">
+	<Prose>
+		<Content />
+	</Prose>
+	<p class="text-light-tx-2 dark:text-dark-tx-2 mt-2">
+		This is a <a href="https://sive.rs/nowff">/now page</a> and 
+		<a href="https://nownownow.com/about">you should make one</a>, too.
+	</p>
+</Page>

src/styles/global.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
 @theme {
     /* Disable default colors to prevent their use; feel free to re-enable as needed. */
@@ -199,4 +200,6 @@
 
 hr {
     @apply border-0 h-0.5 my-4 bg-light-pu dark:bg-dark-pu;
-} 
+} 
+
+