refactor: style tweaks

refactor: make default theme 'light'
feat: add site title
2025-07-13 14:27:48 +01:00 · 2025-07-13 14:27:34 +01:00 · 2025-07-13 14:26:58 +01:00 · 2025-07-13 14:26:08 +01:00 · 2025-07-13 14:25:43 +01:00
10 changed files with 301 additions and 249 deletions
--- a/index.html
+++ b/index.html
@ -5,7 +5,7 @@
 	<meta charset="UTF-8" />
 	<link rel="icon" type="image/svg+xml" href="/vite.svg" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	<title>Vite + React + TS</title>
+	<title>Systems Obscure</title>
 </head>

 <body>
--- a/scripts/generate-post-index.js
+++ b/scripts/generate-post-index.js
@ -13,7 +13,7 @@ const renderer = {
 }

 const highlighter = await createHighlighter({
-	themes: ["github-dark-dimmed"],
+	themes: ["dark-plus"],
 	langs: [
 		"javascript",
 		"typescript",
@ -47,7 +47,7 @@ const posts = files.map((file) => {
 		(match, lang, code) => {
 			return highlighter.codeToHtml(code.trim(), {
 				lang: lang || "text",
-				theme: "github-dark-dimmed",
+				theme: "dark-plus",
 				transformers: [transformerColorizedBrackets()],
 			})
 		}
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@ -42,14 +42,15 @@ const Menu = () => {
 				{/* Mobile dropdown - visible only on small screens */}
 				<NavigationMenuItem className="md:hidden">
 					<NavigationMenuTrigger>Menu</NavigationMenuTrigger>
+
 					<NavigationMenuContent>
 						<NavigationMenuLink asChild>
-							<Link href="/docs" className="block px-2 py-1.5">
+							<Link to="/posts/page/1" className="block px-2 py-1.5">
 								Posts
 							</Link>
 						</NavigationMenuLink>
 						<NavigationMenuLink asChild>
-							<Link href="/docs" className="block px-2 py-1.5">
+							<Link to="/about" className="block px-2 py-1.5">
 								About
 							</Link>
 						</NavigationMenuLink>
@ -65,7 +66,7 @@ const Header = () => {
 	const { theme, setTheme } = useTheme()
 	return (
 		<header className="w-full h-12 flex items-center justify-center border-b fixed top-0 z-20 bg-background">
-			<div className="w-full px-2 md:px-4 flex items-center justify-between">
+			<div className="w-full px-0 md:px-4 flex items-center justify-between">
 				<div className="flex items-center gap-2">
 					<Button variant="ghost" asChild>
 						<Link to="/">
@ -76,16 +77,19 @@ const Header = () => {
 					</Button>
 				</div>
 				<div className="flex items-center justify-between gap-2">
-					<Menu />
 					<Toggle
 						pressed={theme === "dark"}
 						onPressedChange={() =>
 							setTheme(theme === "dark" ? "light" : "dark")
 						}
 					>
+						{/*
+					
 						<MoonStar />
-						<span className="hidden sm:block">Dark theme</span>
+					*/}
+						<span className="">Dark theme</span>
 					</Toggle>
+					<Menu />

 					{/*
          <div className="hidden md:block">
--- a/src/containers/PostListing.tsx
+++ b/src/containers/PostListing.tsx
@ -14,7 +14,7 @@ const PostListing = ({ posts, title, showAllButton }) => {
 	return (
 		<>
 			<div className="mb-5 ">
-        <h2 className="scroll-m-20 text-2xl font-semibold lg:text-2xl border-b pb-3">
+				<h2 className="scroll-m-20 text-2xl font-bold lg:text-2xl border-b pb-3">
 					{title}
 				</h2>
 			</div>
@ -29,7 +29,7 @@ const PostListing = ({ posts, title, showAllButton }) => {
 							key={post.slug}
 							className="flex flex-col h-full  hover:bg-primary/5 py-4 px-0"
 						>
-              <CardHeader className="">
+							<CardHeader className="px-4 md:px-6">
 								<CardTitle className="leading-snug font-semibold ">
 									{post.title}
 								</CardTitle>
@ -44,7 +44,7 @@ const PostListing = ({ posts, title, showAllButton }) => {
 				))}
 			</div>
 			{showAllButton && (
-        <Button asChild variant="secondary" className="w-full mt-4">
+				<Button asChild variant="" className="w-full mt-4">
 					<Link to="/posts/page/1">View all</Link>
 				</Button>
 			)}
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@ -5,7 +5,7 @@ const AboutPage = () => {
  return (
    <MainTemplate>
      <div className="mb-5 ">
-				<h2 className="scroll-m-20 text-2xl font-semibold lg:text-2xl border-b pb-3">
+        <h2 className="scroll-m-20 text-2xl font-bold lg:text-2xl border-b pb-3">
          About
        </h2>
      </div>
@ -29,14 +29,19 @@ const AboutPage = () => {
        </figcaption>
      </figure>
      <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
-				Another software engineer with a blog!{" "}
+        Husband. Dad. Christian.
      </p>

      <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
-				I am a self-taught engineer from London. This blog is a technical
+        No, not really. I am a Londoner living on the south coast of the UK. I
+        am a self-taught software engineer and this blog is my technical
        scrapbook. I document the details of my technical life so I can have a
-				record of progress when I look back. Doing this publicly motivates me to
-				take care with my writing and to be as clear as possible.{" "}
+        record of progress when I look back.{" "}
+      </p>
+
+      <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
+        I completed a degree in Philosophy at the University of Warwick and hold
+        a Postgraduate Certificate of Education.
      </p>
      <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
        Currently I work for{" "}
@ -65,12 +70,32 @@ const AboutPage = () => {
        >
          Arria NLG
        </a>{" "}
-				and in several web developer roles.{" "}
+        and in several web developer roles. Before software I was a
+        teacher.{" "}
      </p>

-			<h3 className="mt-5 mb-0 scroll-m-20 text-xl font-semibold tracking-tight">
-				Code
-			</h3>
+      <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
+        Some things I like:
+        <ul className="pt-2">
+          <li className="mb-1">🐶 Staffies and bull-breeds</li>
+          <li className="mb-1">🎼 Classical music (Haydn, Mozart, JSB)</li>
+          <li className="mb-1">🛸 Science fiction </li>
+        </ul>
+      </p>
+
+      <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
+        Some things I'm interested in:
+        <ul className="pt-2">
+          <li className="mb-1">🧑‍💻 Self-hosting and digital resiliance</li>
+          <li className="mb-1">🖳 The history of computing and networks</li>
+          <li className="mb-1">🇮🇪 Irish history and culture</li>
+          <li className="mb-1">☸️ Buddhism</li>
+          {/*
+
+					<li className="mb-1">📡 Civil communications infrastructure</li>
+					*/}
+        </ul>
+      </p>

      <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
        I self-host my own Git forge at{" "}
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@ -1,11 +1,34 @@
 import MainTemplate from "@/templates/MainTemplate"
 import PostListing from "@/containers/PostListing"
 import { usePosts } from "@/hooks/usePosts"
+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>
+			<Card className="mb-8">
+				<CardHeader>
+					<h1 className="scroll-m-20 text-left text-3xl font-bold  text-balance">
+						Another software engineer with a blog 🥱
+					</h1>
+				</CardHeader>
+				<CardContent>
+					<p className="leading-[1.5] [&:not(:first-child)]:mt-6">
+						I'm a self-taught software engineer currently working at ITV,
+						previously at the BBC. This blog is a technical scrapbook and
+						digital garden.
+					</p>
+				</CardContent>
+				<CardFooter>
+					<Button asChild>
+						<Link to="/about">About</Link>
+					</Button>
+				</CardFooter>
+			</Card>
+
 			<PostListing
 				title="Recent posts"
 				posts={posts.slice(0, 5)}
--- a/src/pages/posts.tsx
+++ b/src/pages/posts.tsx
@ -61,7 +61,7 @@ const PostsPage = () => {
 	return (
 		<MainTemplate>
 			<div className="mb-5 ">
-        <h2 className="scroll-m-20 text-2xl font-semibold lg:text-2xl border-b pb-3">
+				<h2 className="scroll-m-20 text-2xl font-bold lg:text-2xl border-b pb-3">
 					All posts
 				</h2>
 			</div>
@ -84,7 +84,7 @@ const PostsPage = () => {
 									<CardDescription className="text-sm text-muted-foreground">
 										<div className="flex justify-between gap-2">
 											<span className="text-sm">{convertDate(post.date)}</span>
-                      <div>
+											<div className="hidden md:block">
 												{post.tags.map((tag, i) => (
 													<Badge
 														className="ml-2 cursor-pointer"
--- a/src/styles/syntax-highlighting.css
+++ b/src/styles/syntax-highlighting.css
@ -15,7 +15,7 @@ p code {
 	border-radius: var(--radius);
 	overflow-x: auto;
 	margin: 1.5rem 0;
-	/* line-height: 1.3; */
+	line-height: 1.3;
 	/* counter-reset: line; */
 	font-family: var(--font-monospaced) !important;
 	font-size: 14px !important;
--- a/src/templates/BlogTemplate.tsx
+++ b/src/templates/BlogTemplate.tsx
@ -17,7 +17,7 @@ const BlogTemplate = () => {
      ) : (
        <>
          <div className="mb-5">
-            <h2 className="text-2xl font-semibold lg:text-2xl border-b pb-3">
+            <h2 className="text-2xl font-bold lg:text-2xl border-b pb-3">
              {post?.title}
            </h2>
          </div>
--- a/src/templates/MainTemplate.tsx
+++ b/src/templates/MainTemplate.tsx
@ -5,7 +5,7 @@ import { useTheme } from "@/context/ThemeProvider"

 const MainTemplate = (props) => {
 	return (
-		<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+		<ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
 			<MainContent>{props.children}</MainContent>
 		</ThemeProvider>
 	)
@ -22,7 +22,7 @@ const MainContent = ({ children }) => {
 		<div className={classes}>
 			<Header />
 			<main className="flex-1 w-full px-2 md:px-4 flex justify-center pt-16">
-				<div className="w-full max-w-3xl lg:max-w-3xl xl:max-w-3xl px-4 py-3">
+				<div className="w-full max-w-3xl lg:max-w-3xl xl:max-w-3xl px-2 md:px-4 md:py-3 py-0">
 					{children}
 				</div>
 			</main>
Author	SHA1	Message	Date
thomasabishop	9a62f7bd1b	refactor: style tweaks All checks were successful Deploy Blog / deploy (push) Successful in 1m8s Details	2025-07-13 14:27:48 +01:00
thomasabishop	987dff1dce	refactor: make default theme 'light'	2025-07-13 14:27:34 +01:00
thomasabishop	5e4649d03f	feat: add site title	2025-07-13 14:26:58 +01:00
thomasabishop	73a5211f4e	fix: mobile menu	2025-07-13 14:26:08 +01:00
thomasabishop	a5bccdf490	style: use Dark+ syntax theme	2025-07-13 14:25:43 +01:00