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

style: use semibold for headers

Browse source
This commit is contained in:
Thomas Bishop 2025-07-20 18:47:32 +01:00
parent 9ebd996a49
commit 935aceb794
5 changed files with 68 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/containers/PostListing.tsx
View file

@ -14,7 +14,7 @@ const PostListing = ({ posts, title, showAllButton }) => {
return ( return (
<> <>
<div className="mb-5 "> <div className="mb-5 ">
<h2 className="scroll-m-20 text-2xl font-bold lg:text-2xl border-b pb-3"> <h2 className="scroll-m-20 text-2xl font-semibold lg:text-2xl border-b pb-3">
{title} {title}
</h2> </h2>
</div> </div>

2
src/pages/about.tsx
View file

@ -5,7 +5,7 @@ const AboutPage = () => {
return ( return (
<MainTemplate> <MainTemplate>
<div className="mb-5 "> <div className="mb-5 ">
<h2 className="scroll-m-20 text-2xl font-bold lg:text-2xl border-b pb-3"> <h2 className="scroll-m-20 text-2xl font-semibold lg:text-2xl border-b pb-3">
About About
</h2> </h2>
</div> </div>

58
src/pages/home.tsx
View file

@ -6,36 +6,36 @@ import { Button } from "@/components/ui/button"
import { Link } from "react-router" import { Link } from "react-router"
const HomePage = () => { const HomePage = () => {
const { posts } = usePosts() const { posts } = usePosts()
return ( return (
<MainTemplate> <MainTemplate>
<Card className="mb-8"> <Card className="mb-8">
<CardHeader> <CardHeader>
<h1 className="scroll-m-20 text-left text-3xl font-bold text-balance"> <h1 className="scroll-m-20 text-left text-3xl font-semibold">
Another software engineer with a blog Another software engineer with a blog
</h1> </h1>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="leading-[1.5] [&:not(:first-child)]:mt-6"> <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
I'm a self-taught software engineer currently working at ITV, I'm a self-taught software engineer currently working at ITV,
previously at the BBC. This blog is a technical scrapbook and previously at the BBC. This blog is a technical scrapbook and
digital garden. digital garden.
</p> </p>
</CardContent> </CardContent>
<CardFooter> <CardFooter>
<Button asChild> <Button asChild>
<Link to="/about">About</Link> <Link to="/about">About</Link>
</Button> </Button>
</CardFooter> </CardFooter>
</Card> </Card>
<PostListing <PostListing
title="Recent posts" title="Recent posts"
posts={posts.slice(0, 5)} posts={posts.slice(0, 5)}
showAllButton showAllButton
/> />
</MainTemplate> </MainTemplate>
) )
} }
export { HomePage } export { HomePage }

2
src/pages/posts.tsx
View file

@ -61,7 +61,7 @@ const PostsPage = () => {
return ( return (
<MainTemplate> <MainTemplate>
<div className="mb-5 "> <div className="mb-5 ">
<h2 className="scroll-m-20 text-2xl font-bold lg:text-2xl border-b pb-3"> <h2 className="scroll-m-20 text-2xl font-semibold lg:text-2xl border-b pb-3">
All posts All posts
</h2> </h2>
</div> </div>

72
src/templates/BlogTemplate.tsx
View file

@ -6,37 +6,37 @@ import { convertDate } from "@/utils/convertDate"
import { usePosts } from "@/hooks/usePosts" import { usePosts } from "@/hooks/usePosts"
const BlogTemplate = () => { const BlogTemplate = () => {
const { slug } = useParams() const { slug } = useParams()
const { posts } = usePosts() const { posts } = usePosts()
const post = posts?.find((x) => x.slug === slug) const post = posts?.find((x) => x.slug === slug)
return ( return (
<MainTemplate> <MainTemplate>
{!post ? ( {!post ? (
<div>Loading...</div> <div>Loading...</div>
) : ( ) : (
<> <>
<div className="mb-5"> <div className="mb-5">
<h2 className="text-2xl font-bold lg:text-2xl border-b pb-3"> <h2 className="text-2xl font-semibold lg:text-2xl border-b pb-3">
{post?.title} {post?.title}
</h2> </h2>
</div> </div>
<div className="flex md:flex-row md:justify-between flex-col mb-8"> <div className="flex md:flex-row md:justify-between flex-col mb-8">
<span className="text-muted-foreground"> <span className="text-muted-foreground">
{convertDate(post?.date)} {convertDate(post?.date)}
</span> </span>
<div className="flex gap-1 mt-3 md:mt-0"> <div className="flex gap-1 mt-3 md:mt-0">
{post?.tags?.map((tag, i) => ( {post?.tags?.map((tag, i) => (
<Badge asChild variant="secondary"> <Badge asChild variant="secondary">
<Link key={i} to={`/tags/${tag}`}> <Link key={i} to={`/tags/${tag}`}>
{tag} {tag}
</Link> </Link>
</Badge> </Badge>
))} ))}
</div> </div>
</div> </div>
<div <div
className=" 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]:border-b [&>h2]:pb-2 [&>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 [&>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 [&>h4]:text-lg [&>h4]:sm:text-xl [&>h4]:font-semibold [&>h4:not(:first-child)]:mt-4
@ -66,12 +66,12 @@ const BlogTemplate = () => {
[&>figure>figcaption]:text-sm [&>figure>figcaption]:text-muted-foreground [&>figure>figcaption]:mt-3 [&>figure>figcaption]:text-center [&>figure>figcaption]:text-sm [&>figure>figcaption]:text-muted-foreground [&>figure>figcaption]:mt-3 [&>figure>figcaption]:text-center
[&>figure>figcaption>a]:text-primary [&>figure>figcaption>a:hover]:text-primary/80 [&>figure>figcaption>a]:text-primary [&>figure>figcaption>a:hover]:text-primary/80
" "
dangerouslySetInnerHTML={{ __html: post?.html }} dangerouslySetInnerHTML={{ __html: post?.html }}
/> />
</> </>
)} )}
</MainTemplate> </MainTemplate>
) )
} }
export default BlogTemplate export default BlogTemplate