style: tweak border radiis and mobile

src/components/Header.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import { Button } from "@/components/ui/button"
 import { useTheme } from "@/context/ThemeProvider"
-import { MoonStar } from "lucide-react"
+import { MoonStar, MenuIcon } from "lucide-react"
 import { Link } from "react-router"
 import {
   NavigationMenu,
@@ -21,7 +21,7 @@ const Menu = () => {
       <NavigationMenuList>
         {/* Desktop menu - hidden on mobile, visible on md+ */}
         <div className="hidden md:flex md:space-x-1">
-					<NavigationMenuItem>
+          <NavigationMenuItem className="border">
             <NavigationMenuLink
               asChild
               className={navigationMenuTriggerStyle()}
@@ -29,7 +29,7 @@ const Menu = () => {
               <Link to="/posts/page/1">Posts</Link>
             </NavigationMenuLink>
           </NavigationMenuItem>
-					<NavigationMenuItem>
+          <NavigationMenuItem className="border">
             <NavigationMenuLink
               asChild
               className={navigationMenuTriggerStyle()}
@@ -40,17 +40,19 @@ const Menu = () => {
         </div>
 
         {/* Mobile dropdown - visible only on small screens */}
-				<NavigationMenuItem className="md:hidden">
+        <NavigationMenuItem className="md:hidden px-4">
-					<NavigationMenuTrigger>Menu</NavigationMenuTrigger>
+          <NavigationMenuTrigger className="border rounded-none">
+            <MenuIcon />
+          </NavigationMenuTrigger>
 
           <NavigationMenuContent>
             <NavigationMenuLink asChild>
-							<Link to="/posts/page/1" className="block px-2 py-1.5">
+              <Link to="/posts/page/1" className="block">
                 Posts
               </Link>
             </NavigationMenuLink>
             <NavigationMenuLink asChild>
-							<Link to="/about" className="block px-2 py-1.5">
+              <Link to="/about" className="block">
                 About
               </Link>
             </NavigationMenuLink>
@@ -67,27 +69,26 @@ const Header = () => {
   return (
     <header className="w-full h-12 flex items-center justify-center border-b fixed top-0 z-20 bg-sidebar">
       <div className="w-full px-0 md:px-4 flex items-center justify-between">
-				<div className="flex items-center gap-2">
+        <div className="flex items-center md:px-0 px-4">
-					<Button variant="ghost" asChild>
+          <Button
+            variant="ghost"
+            asChild
+            className="border md:border-none rounded-none"
+          >
             <Link to="/">
-							<span className="text-lg tracking-normal font-semibold">
+              <span className="text-lg font-semibold">Systems Obscure</span>
-								Systems Obscure
-							</span>
             </Link>
           </Button>
         </div>
-				<div className="flex items-center justify-between gap-2">
+        <div className="flex itemr justify-between md:gap-4">
           <Toggle
+            className="border bg-background rounded-none"
             pressed={theme === "dark"}
             onPressedChange={() =>
               setTheme(theme === "dark" ? "light" : "dark")
             }
           >
-						{/*
+            <MoonStar size={10} />
-					
-						<MoonStar />
-					*/}
-						<span className="">Dark theme</span>
           </Toggle>
           <Menu />
 

src/components/ui/navigation-menu.tsx

@@ -74,10 +74,15 @@ function NavigationMenuTrigger({
 			{...props}
 		>
 			{children}{" "}
+			{/*
+
 			<ChevronDownIcon
         className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
         aria-hidden="true"
       />
+
+
+	 */}
 		</NavigationMenuPrimitive.Trigger>
 	)
 }

src/containers/PostListing.tsx

@@ -44,7 +44,11 @@ const PostListing = ({ posts, title, showAllButton }) => {
         ))}
       </div>
       {showAllButton && (
-        <Button asChild variant="secondary" className="w-full mt-4">
+        <Button
+          asChild
+          variant="secondary"
+          className="w-full mt-4 rounded-none border-1"
+        >
           <Link to="/posts/page/1">View all</Link>
         </Button>
       )}

src/pages/about.tsx

@@ -43,7 +43,7 @@ const AboutPage = () => {
 				<a
 					href="https://en.wikipedia.org/wiki/ITV_(TV_network)"
 					target="_blank"
-          className="underline decoration-1 hover:text-primary/80 underline-offset-2"
+					className="underline decoration-1 hover:text-primary/80 underline-offset-4"
 				>
 					ITV
 				</a>{" "}
@@ -53,7 +53,7 @@ const AboutPage = () => {
 				<a
 					href="https://en.wikipedia.org/wiki/BBC"
 					target="_blank"
-          className="underline decoration-1 hover:text-primary/80 underline-offset-2 font-medium"
+					className="underline decoration-1 hover:text-primary/80 underline-offset-4"
 				>
 					BBC
 				</a>{" "}
@@ -61,7 +61,7 @@ const AboutPage = () => {
 				<a
 					href="https://www.arria.com/"
 					target="_blank"
-          className="underline decoration-1 hover:text-primary/80 underline-offset-2"
+					className="underline decoration-1 hover:text-primary/80 underline-offset-4"
 				>
 					Arria NLG
 				</a>{" "}

src/pages/home.tsx

@@ -2,43 +2,32 @@ import MainTemplate from "@/templates/MainTemplate"
 import PostListing from "@/containers/PostListing"
 import { usePosts } from "@/hooks/usePosts"
 import roundedPortrait from "../images/round-portrait.png"
-import { Card, CardHeader, CardContent, CardFooter } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Link } from "react-router"
 
 const HomePage = () => {
   const { posts } = usePosts()
   return (
     <MainTemplate>
-			<div className="mb-7 border border-foreground py-6 px-6 md:py-8 md:px-8 dark:bg-sidebar">
+      <div className="mb-7 border border-foreground py-6 px-6 md:px-8 md:pt-9 dark:bg-sidebar">
         <div className="flex flex-col items-center md:flex-row md:items-start gap-4 md:gap-8 md:flex-row-reverse">
-					{/* Image - centers on mobile, left-aligned on desktop */}
           <div className="flex-shrink-0">
             <img
               src={roundedPortrait}
               alt="Profile picture"
-							className="rounded-image w-36 h-36 md:w-38 md:h-38 object-contain"
+              className="rounded-image w-36 h-36 md:w-38 md:h-38 object-contain border-2 rounded-full"
             />
           </div>
 
-					{/* Text content */}
           <div className="text-center md:text-left flex-1">
             <h1 className="scroll-m-20 text-2xl font-semibold">
               Another software engineer with a blog
             </h1>
             <p className="leading-[1.7] mt-5">
-							I'm a self-taught software engineer currently working at ITV,
+              I'm a self-taught software engineer from London. This blog is a
-							previously at the BBC. This blog is a technical scrapbook and
+              technical scrapbook and digital garden.
-							digital garden.
             </p>
           </div>
         </div>
       </div>
-			{/*
-		 
-
-
-		*/}
 
       <PostListing
         title="Recent posts"

src/styles/syntax-highlighting.css

@@ -12,7 +12,7 @@ p code {
 
 .shiki {
 	padding: 1rem 1.2rem;
-	border-radius: var(--radius);
+	border-radius: 0;
 	overflow-x: auto;
 	margin: 1.5rem 0;
 	line-height: 1.3;

src/templates/BlogTemplate.tsx

@@ -60,7 +60,7 @@ const BlogTemplate = () => {
 							[&>li]:leading-[1.6] 
 							[&_li_code]:relative [&_li_code]:rounded [&_li_code]:bg-muted [&_li_code]:px-[0.3rem] [&_li_code]:py-[0.2rem] [&_li_code]:font-mono [&_li_code]:text-sm [&_li_code]:font-normal		
 							[&>p]:mt-6 [&>p]:leading-[1.6]
-							[&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-muted-foreground [&_a]:font-medium		
+							[&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-muted-foreground		
 							[&>figure]:w-full [&>figure]:flex [&>figure]:flex-col [&>figure]:items-center [&>figure]:justify-center [&>figure]:mb-6 [&>figure]:mx-auto
 							[&>figure>img]:w-full
 							[&>figure>figcaption]:text-sm [&>figure>figcaption]:text-muted-foreground [&>figure>figcaption]:mt-3 [&>figure>figcaption]:text-center