thomasabishop/systems-obscure
thomasabishop/systems-obscure
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: tweaks

Browse source
This commit is contained in:
Thomas Bishop 2025-07-31 16:44:15 +01:00
parent 43eec03edd
commit a9440d6844
6 changed files with 232 additions and 213 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Header.tsx
View file

@ -65,7 +65,7 @@ const Menu = () => {
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">
<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">
<Button variant="ghost" asChild>

4
src/containers/PostListing.tsx
View file

@ -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-[1.3rem] font-semibold border-b pb-2">
{title}
</h2>
</div>
@ -44,7 +44,7 @@ const PostListing = ({ posts, title, showAllButton }) => {
))}
</div>
{showAllButton && (
<Button asChild variant="" className="w-full mt-4">
<Button asChild variant="secondary" className="w-full mt-4">
<Link to="/posts/page/1">View all</Link>
</Button>
)}

14
src/pages/about.tsx
View file

@ -28,17 +28,17 @@ const AboutPage = () => {
, Bletchley Park.
</figcaption>
</figure>
<p className="leading-[1.5] [&:not(:first-child)]:mt-6">
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
I'm a self-taught software engineer based on the south coast of England.
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.{" "}
</p>
<p className="leading-[1.5] [&:not(:first-child)]:mt-6">
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
I completed a degree in Philosophy at the University of Warwick (2009)
and hold a Postgraduate Certificate of Education (2011).
</p>
<p className="leading-[1.5] [&:not(:first-child)]:mt-6">
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
Currently I work for{" "}
<a
href="https://en.wikipedia.org/wiki/ITV_(TV_network)"
@ -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"
className="underline decoration-1 hover:text-primary/80 underline-offset-2 font-medium"
>
BBC
</a>{" "}
@ -69,7 +69,7 @@ const AboutPage = () => {
teacher.{" "}
</p>
<p className="leading-[1.5] [&:not(:first-child)]:mt-6">
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
Some things I like:
<ul className="pt-2">
<li className="mb-1">🐶 Staffies and other bull-breeds</li>
@ -78,7 +78,7 @@ const AboutPage = () => {
</ul>
</p>
<p className="leading-[1.5] [&:not(:first-child)]:mt-6">
<p className="leading-[1.6] [&: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>
@ -92,7 +92,7 @@ const AboutPage = () => {
</ul>
</p>
<p className="leading-[1.5] [&:not(:first-child)]:mt-6">
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
I self-host my own Git forge at{" "}
<a
href="https://forgejo.systemsobscure.net/thomasabishop"

24
src/pages/home.tsx
View file

@ -9,14 +9,25 @@ const HomePage = () => {
const { posts } = usePosts()
return (
<MainTemplate>
<div className="mb-7 border border-foreground py-7 px-6 bg-sidebar">
<h1 className="scroll-m-20 text-left text-2xl font-semibold">
Another software engineer with a blog
</h1>
<p className="leading-[1.7] [&:not(:first-child)]:mt-5">
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>
</div>
{/*
<Card className="mb-8 rounded-none">
<CardHeader>
<h1 className="scroll-m-20 text-left text-3xl font-semibold">
Another software engineer with a blog
<h1 className="scroll-m-20 text-left text-2xl font-semibold">
Another software engineer with a blog!
</h1>
</CardHeader>
<CardContent>
<p className="leading-[1.5] [&:not(:first-child)]:mt-6">
<p className="leading-[1.7] [&:not(:first-child)]:mt-7">
I'm a self-taught software engineer currently working at ITV,
previously at the BBC. This blog is a technical scrapbook and
digital garden.
@ -28,6 +39,13 @@ const HomePage = () => {
</Button>
</CardFooter>
</Card>
<Button asChild>
<Link to="/about">About</Link>
</Button>
*/}
<PostListing
title="Recent posts"

7
src/pages/posts.tsx
View file

@ -26,13 +26,14 @@ const PostsPage = () => {
const navigate = useNavigate()
const { posts } = usePosts()
const postsPerPage = 10
const postsPerPage = 8
const currentPage = Number(page) || 1
const totalPages = Math.ceil(posts.length / postsPerPage)
useEffect(() => {
if (currentPage < 1 || currentPage > totalPages) {
// Only redirect if we have posts and the page is definitively invalid
if (totalPages > 0 && (currentPage < 1 || currentPage > totalPages)) {
navigate(`/posts/page/1`, { replace: true })
}
}, [currentPage, totalPages, navigate])
@ -65,7 +66,7 @@ const PostsPage = () => {
All posts
</h2>
</div>
<div className="min-h-[calc(100vh-200px)] flex flex-col">
<div className="flex flex-col">
<div className="grid grid-cols-1 md:grid-cols-1 gap-3 flex-grow">
{currentPosts.map((post) => (
<Link

10
src/templates/BlogTemplate.tsx
View file

@ -37,10 +37,10 @@ const BlogTemplate = () => {
</div>
<div
className="
[&>h2]:text-xl [&>h2]:border-b [&>h2]:pb-2 [&>h2]:font-semibold [&>h2]:first:mt-0 [&>h2:not(:first-child)]:mt-8
[&>h2]:text-xl [&>h2]:font-semibold [&>h2]:first:mt-0 [&>h2:not(:first-child)]:mt-8
[&>h3]:text-xl [&>h3]:sm:text-1xl [&>h3]:font-semibold [&>h3:not(:first-child)]:mt-5
[&>h4]:text-lg [&>h4]:sm:text-xl [&>h4]:font-semibold [&>h4:not(:first-child)]:mt-4
[&>p]:leading-7 [&>p:not(:first-child)]:mt-6
[&>p]:leading-7 [&>p:not(:first-child)]:mt-4
[&>p+:is(h1,h2,h3,h4,h5,h6)]:mt-6
[&>blockquote]:mt-4 [&>blockquote]:border-l-2 [&>blockquote]:pl-6 [&>blockquote]:text-muted-foreground [&>blockquote]:text-sm
[&>ul]:my-4 [&>ul]:ml-6 [&>ul]:list-disc [&>ul>li]:mt-2
@ -57,10 +57,10 @@ const BlogTemplate = () => {
[&>p+pre]:mt-6
[&>pre+p]:mt-6
[&>ul+pre]:mt-6
[&>li]:leading-[1.5]
[&>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.5]
[&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-muted-foreground
[&>p]:mt-6 [&>p]:leading-[1.6]
[&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-muted-foreground [&_a]:font-medium
[&>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