style: use semibold for headers
This commit is contained in:
parent
9ebd996a49
commit
935aceb794
5 changed files with 68 additions and 68 deletions
|
|
@ -14,7 +14,7 @@ const PostListing = ({ posts, title, showAllButton }) => {
|
|||
return (
|
||||
<>
|
||||
<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}
|
||||
</h2>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ const AboutPage = () => {
|
|||
return (
|
||||
<MainTemplate>
|
||||
<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
|
||||
</h2>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,36 +6,36 @@ 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>
|
||||
const { posts } = usePosts()
|
||||
return (
|
||||
<MainTemplate>
|
||||
<Card className="mb-8">
|
||||
<CardHeader>
|
||||
<h1 className="scroll-m-20 text-left text-3xl font-semibold">
|
||||
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)}
|
||||
showAllButton
|
||||
/>
|
||||
</MainTemplate>
|
||||
)
|
||||
<PostListing
|
||||
title="Recent posts"
|
||||
posts={posts.slice(0, 5)}
|
||||
showAllButton
|
||||
/>
|
||||
</MainTemplate>
|
||||
)
|
||||
}
|
||||
|
||||
export { HomePage }
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ const PostsPage = () => {
|
|||
return (
|
||||
<MainTemplate>
|
||||
<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
|
||||
</h2>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,37 +6,37 @@ import { convertDate } from "@/utils/convertDate"
|
|||
import { usePosts } from "@/hooks/usePosts"
|
||||
|
||||
const BlogTemplate = () => {
|
||||
const { slug } = useParams()
|
||||
const { posts } = usePosts()
|
||||
const post = posts?.find((x) => x.slug === slug)
|
||||
const { slug } = useParams()
|
||||
const { posts } = usePosts()
|
||||
const post = posts?.find((x) => x.slug === slug)
|
||||
|
||||
return (
|
||||
<MainTemplate>
|
||||
{!post ? (
|
||||
<div>Loading...</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="mb-5">
|
||||
<h2 className="text-2xl font-bold lg:text-2xl border-b pb-3">
|
||||
{post?.title}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex md:flex-row md:justify-between flex-col mb-8">
|
||||
<span className="text-muted-foreground">
|
||||
{convertDate(post?.date)}
|
||||
</span>
|
||||
<div className="flex gap-1 mt-3 md:mt-0">
|
||||
{post?.tags?.map((tag, i) => (
|
||||
<Badge asChild variant="secondary">
|
||||
<Link key={i} to={`/tags/${tag}`}>
|
||||
{tag}
|
||||
</Link>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="
|
||||
return (
|
||||
<MainTemplate>
|
||||
{!post ? (
|
||||
<div>Loading...</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="mb-5">
|
||||
<h2 className="text-2xl font-semibold lg:text-2xl border-b pb-3">
|
||||
{post?.title}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex md:flex-row md:justify-between flex-col mb-8">
|
||||
<span className="text-muted-foreground">
|
||||
{convertDate(post?.date)}
|
||||
</span>
|
||||
<div className="flex gap-1 mt-3 md:mt-0">
|
||||
{post?.tags?.map((tag, i) => (
|
||||
<Badge asChild variant="secondary">
|
||||
<Link key={i} to={`/tags/${tag}`}>
|
||||
{tag}
|
||||
</Link>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</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
|
||||
[&>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
|
||||
|
|
@ -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>a]:text-primary [&>figure>figcaption>a:hover]:text-primary/80
|
||||
"
|
||||
dangerouslySetInnerHTML={{ __html: post?.html }}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</MainTemplate>
|
||||
)
|
||||
dangerouslySetInnerHTML={{ __html: post?.html }}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</MainTemplate>
|
||||
)
|
||||
}
|
||||
|
||||
export default BlogTemplate
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue