My landing page, written in Astro hayden.moe
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: styling tweaks

+43 -10
+1 -1
src/app/components/footer.tsx
··· 2 2 const today = new Date(); 3 3 4 4 return ( 5 - <p className="text-muted px-4 py-2"> 5 + <p className="text-base-03 px-4 py-2"> 6 6 Copyright (c) Hayden Young {today.getFullYear()}. 7 7 </p> 8 8 )
+1 -1
src/app/components/header.tsx
··· 1 1 export const Header = () => ( 2 - <nav className="border-b border-muted justify-left divide-x divide-muted [&>a]:py-1 [&>a]:px-4 fixed w-full bg-black flex items-center"> 2 + <nav className="h-10 border-b border-muted justify-left divide-x divide-muted [&>a]:py-1 [&>a]:px-4 fixed w-full bg-black flex items-center"> 3 3 <a href="/" className="flex items-center gap-2 text-[var(--base0A)]"> 4 4 <span>hayden@web ~</span> 5 5 <div className="w-[10px] h-[21px] animate-blink bg-pink"></div>
+1 -1
src/app/root.tsx
··· 49 49 <div className="flex flex-col flex-grow"> 50 50 <Header /> 51 51 52 - <main className="mt-20 flex flex-col gap-3 px-5 flex-grow"> 52 + <main className="mt-10 flex flex-col gap-3 px-5 pt-5 flex-grow"> 53 53 {children} 54 54 </main> 55 55
+3 -4
src/app/routes/posts.$rkey.tsx
··· 1 1 import { LoaderFunctionArgs, MetaFunction } from 'react-router'; 2 2 import { useLoaderData } from 'react-router'; 3 3 import { getPost } from 'src/atproto/getPost'; 4 - import { WhtwndBlogEntryView } from 'src/types'; 5 4 import { FormattedDate } from '../components/formatted-date'; 6 5 import Markdown from 'react-markdown'; 7 6 ··· 54 53 55 54 return ( 56 55 <> 57 - <header className="-mx-5 px-5 border-b border-muted pb-5"> 58 - <h1 className="font-bold">{post.title}</h1> 56 + <header className="-mx-5 px-5"> 57 + <h1 className="font-bold before-hash-1">{post.title}</h1> 59 58 <span className="text-[var(--base03)]"> 60 59 <FormattedDate date={new Date(Date.parse(post.createdAt))} /> 61 60 </span> 62 61 </header> 63 62 64 - <Markdown className="prose max-w-5xl py-5"> 63 + <Markdown className="prose max-w-5xl pb-5"> 65 64 {post.content} 66 65 </Markdown> 67 66 </>
+2 -2
src/app/routes/posts._index.tsx
··· 28 28 29 29 return ( 30 30 <div className="-mx-5 flex flex-col"> 31 - <header className="flex flex-col border-b border-muted pb-5 px-5"> 32 - <h1 className="font-bold">Posts</h1> 31 + <header className="flex flex-col px-5"> 32 + <h1 className="font-bold before-hash-1">Posts</h1> 33 33 <p className="text-[var(--base03)]"> 34 34 Showing {posts.length} posts of {posts.length}. 35 35 </p>
+15
src/app/tailwind.css
··· 29 29 .rendering-pixelated { 30 30 image-rendering: pixelated; 31 31 } 32 + 33 + .before-hash-1::before { 34 + content: "# " / ""; 35 + color: var(--base03); 36 + } 37 + 38 + .before-hash-2::before { 39 + content: "## " / ""; 40 + color: var(--base03); 41 + } 42 + 43 + .before-hash-3::before { 44 + content: "### " / ""; 45 + color: var(--base03); 46 + } 32 47 } 33 48 34 49 hr {
+20 -1
tailwind.config.ts
··· 18 18 19 19 colors: { 20 20 black: "var(--base00)", 21 - white: "var(--base05)", 21 + white: "var(--base04)", 22 22 gray: "var(--base02)", 23 23 muted: "var(--base02)", 24 24 pink: "var(--base0A)", 25 25 blue: "var(--base0F)", 26 + 27 + base: { 28 + '00': 'var(--base00)', 29 + '01': 'var(--base01)', 30 + '02': 'var(--base02)', 31 + '03': 'var(--base03)', 32 + '04': 'var(--base04)', 33 + '05': 'var(--base05)', 34 + '06': 'var(--base06)', 35 + '07': 'var(--base07)', 36 + '08': 'var(--base08)', 37 + '09': 'var(--base09)', 38 + '0A': 'var(--base0A)', 39 + '0B': 'var(--base0B)', 40 + '0C': 'var(--base0C)', 41 + '0D': 'var(--base0D)', 42 + '0E': 'var(--base0E)', 43 + '0F': 'var(--base0F)', 44 + }, 26 45 }, 27 46 28 47 animation: {