Blogs/blogs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use Fraunces for blog headings
Some checks are pending
Build / build (push) Waiting to run
Details

Browse source
This commit is contained in:
Neeldhara Misra 2026-06-13 22:58:45 +02:00
parent ed00280434
commit dc6fa59833
35 changed files with 217 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

2
sites/art/src/components/BaseHead.astro
View file

@ -27,7 +27,7 @@ const imageURL = new URL(finalImage, Astro.url);
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- Load Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="robots" content={`${SITE_METADATA.robots.index ? 'index' : 'noindex'}, ${SITE_METADATA.robots.follow ? 'follow' : 'nofollow'}`} />

2
sites/art/src/components/sections/blog-post.tsx
View file

@ -19,7 +19,7 @@ const BlogPost = ({
<section className="pb-8 pt-4">
<div className="container max-w-4xl">
<div className="space-y-2 text-center">
<h1 className="text-2xl font-bold tracking-tight md:text-4xl lg:text-5xl">
<h1 className="blog-post-title">
{title}
</h1>
<p className="text-muted-foreground mx-auto max-w-2xl text-lg">

4
sites/art/src/components/sections/blog-posts.tsx
View file

@ -20,7 +20,7 @@ const BlogPosts = ({
collection ? `/${collection}/${post.id}/` : `/${post.id}/`;
return (
<div className="relative py-16 md:py-28 lg:py-32">
<div className="relative py-10 md:py-16 lg:py-20">
<div className="absolute -inset-40 z-[-1] [mask-image:radial-gradient(circle_at_center,black_0%,black_20%,transparent_75%)]">
<PlusSigns className="text-foreground/[0.05] h-full w-full" />
</div>
@ -46,7 +46,7 @@ const BlogPosts = ({
<Badge variant="outline" className="mb-3 w-fit">
Featured Post
</Badge>
<h2 className="mb-3 text-2xl font-bold group-hover:underline md:text-3xl">
<h2 className="blog-card-title-featured mb-3 group-hover:underline">
{featuredPost.data.title}
</h2>
<p className="text-muted-foreground mb-4 line-clamp-3 text-base">

8
sites/art/src/pages/index.astro
View file

@ -11,11 +11,11 @@ const posts = (await getCollection(ACTIVE_BLOG_SITE.key)).sort(
---
<DefaultLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
<div class="py-16 md:py-28 lg:py-32">
<div class="py-12 md:py-20 lg:py-24">
<div class="container max-w-5xl">
<div class="mb-12">
<h1 class="text-4xl font-bold mb-4">{ACTIVE_BLOG_SITE.title}</h1>
<p class="text-xl text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
<div class="mb-10">
<h1 class="blog-page-title mb-3">{ACTIVE_BLOG_SITE.title}</h1>
<p class="text-lg text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
</div>
<BlogPosts posts={posts} client:only="react" />
</div>

25
sites/art/src/styles/global.css
View file

@ -38,6 +38,8 @@
}
@theme {
--font-fraunces:
"Fraunces", Georgia, Cambria, "Times New Roman", Times, serif;
--font-heliotrope:
"Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen;
@ -170,8 +172,13 @@
}
h1,
h2 {
@apply font-sans;
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-fraunces);
letter-spacing: 0;
}
.mini-title {
@ -262,3 +269,17 @@
@apply bg-background text-foreground;
}
}
@layer components {
.blog-page-title {
@apply text-3xl font-semibold md:text-4xl;
}
.blog-post-title {
@apply text-2xl font-semibold md:text-3xl lg:text-4xl;
}
.blog-card-title-featured {
@apply text-xl font-semibold md:text-2xl;
}
}

2
sites/poetry/src/components/BaseHead.astro
View file

@ -27,7 +27,7 @@ const imageURL = new URL(finalImage, Astro.url);
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- Load Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="robots" content={`${SITE_METADATA.robots.index ? 'index' : 'noindex'}, ${SITE_METADATA.robots.follow ? 'follow' : 'nofollow'}`} />

2
sites/poetry/src/components/sections/blog-post.tsx
View file

@ -19,7 +19,7 @@ const BlogPost = ({
<section className="pb-8 pt-4">
<div className="container max-w-4xl">
<div className="space-y-2 text-center">
<h1 className="text-2xl font-bold tracking-tight md:text-4xl lg:text-5xl">
<h1 className="blog-post-title">
{title}
</h1>
<p className="text-muted-foreground mx-auto max-w-2xl text-lg">

4
sites/poetry/src/components/sections/blog-posts.tsx
View file

@ -20,7 +20,7 @@ const BlogPosts = ({
collection ? `/${collection}/${post.id}/` : `/${post.id}/`;
return (
<div className="relative py-16 md:py-28 lg:py-32">
<div className="relative py-10 md:py-16 lg:py-20">
<div className="absolute -inset-40 z-[-1] [mask-image:radial-gradient(circle_at_center,black_0%,black_20%,transparent_75%)]">
<PlusSigns className="text-foreground/[0.05] h-full w-full" />
</div>
@ -46,7 +46,7 @@ const BlogPosts = ({
<Badge variant="outline" className="mb-3 w-fit">
Featured Post
</Badge>
<h2 className="mb-3 text-2xl font-bold group-hover:underline md:text-3xl">
<h2 className="blog-card-title-featured mb-3 group-hover:underline">
{featuredPost.data.title}
</h2>
<p className="text-muted-foreground mb-4 line-clamp-3 text-base">

8
sites/poetry/src/pages/index.astro
View file

@ -11,11 +11,11 @@ const posts = (await getCollection(ACTIVE_BLOG_SITE.key)).sort(
---
<DefaultLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
<div class="py-16 md:py-28 lg:py-32">
<div class="py-12 md:py-20 lg:py-24">
<div class="container max-w-5xl">
<div class="mb-12">
<h1 class="text-4xl font-bold mb-4">{ACTIVE_BLOG_SITE.title}</h1>
<p class="text-xl text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
<div class="mb-10">
<h1 class="blog-page-title mb-3">{ACTIVE_BLOG_SITE.title}</h1>
<p class="text-lg text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
</div>
<BlogPosts posts={posts} client:only="react" />
</div>

25
sites/poetry/src/styles/global.css
View file

@ -38,6 +38,8 @@
}
@theme {
--font-fraunces:
"Fraunces", Georgia, Cambria, "Times New Roman", Times, serif;
--font-heliotrope:
"Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen;
@ -170,8 +172,13 @@
}
h1,
h2 {
@apply font-sans;
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-fraunces);
letter-spacing: 0;
}
.mini-title {
@ -262,3 +269,17 @@
@apply bg-background text-foreground;
}
}
@layer components {
.blog-page-title {
@apply text-3xl font-semibold md:text-4xl;
}
.blog-post-title {
@apply text-2xl font-semibold md:text-3xl lg:text-4xl;
}
.blog-card-title-featured {
@apply text-xl font-semibold md:text-2xl;
}
}

2
sites/puzzles/src/components/BaseHead.astro
View file

@ -27,7 +27,7 @@ const imageURL = new URL(finalImage, Astro.url);
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- Load Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="robots" content={`${SITE_METADATA.robots.index ? 'index' : 'noindex'}, ${SITE_METADATA.robots.follow ? 'follow' : 'nofollow'}`} />

2
sites/puzzles/src/components/sections/blog-post.tsx
View file

@ -19,7 +19,7 @@ const BlogPost = ({
<section className="pb-8 pt-4">
<div className="container max-w-4xl">
<div className="space-y-2 text-center">
<h1 className="text-2xl font-bold tracking-tight md:text-4xl lg:text-5xl">
<h1 className="blog-post-title">
{title}
</h1>
<p className="text-muted-foreground mx-auto max-w-2xl text-lg">

4
sites/puzzles/src/components/sections/blog-posts.tsx
View file

@ -20,7 +20,7 @@ const BlogPosts = ({
collection ? `/${collection}/${post.id}/` : `/${post.id}/`;
return (
<div className="relative py-16 md:py-28 lg:py-32">
<div className="relative py-10 md:py-16 lg:py-20">
<div className="absolute -inset-40 z-[-1] [mask-image:radial-gradient(circle_at_center,black_0%,black_20%,transparent_75%)]">
<PlusSigns className="text-foreground/[0.05] h-full w-full" />
</div>
@ -46,7 +46,7 @@ const BlogPosts = ({
<Badge variant="outline" className="mb-3 w-fit">
Featured Post
</Badge>
<h2 className="mb-3 text-2xl font-bold group-hover:underline md:text-3xl">
<h2 className="blog-card-title-featured mb-3 group-hover:underline">
{featuredPost.data.title}
</h2>
<p className="text-muted-foreground mb-4 line-clamp-3 text-base">

8
sites/puzzles/src/pages/index.astro
View file

@ -11,11 +11,11 @@ const posts = (await getCollection(ACTIVE_BLOG_SITE.key)).sort(
---
<DefaultLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
<div class="py-16 md:py-28 lg:py-32">
<div class="py-12 md:py-20 lg:py-24">
<div class="container max-w-5xl">
<div class="mb-12">
<h1 class="text-4xl font-bold mb-4">{ACTIVE_BLOG_SITE.title}</h1>
<p class="text-xl text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
<div class="mb-10">
<h1 class="blog-page-title mb-3">{ACTIVE_BLOG_SITE.title}</h1>
<p class="text-lg text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
</div>
<BlogPosts posts={posts} client:only="react" />
</div>

25
sites/puzzles/src/styles/global.css
View file

@ -38,6 +38,8 @@
}
@theme {
--font-fraunces:
"Fraunces", Georgia, Cambria, "Times New Roman", Times, serif;
--font-heliotrope:
"Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen;
@ -170,8 +172,13 @@
}
h1,
h2 {
@apply font-sans;
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-fraunces);
letter-spacing: 0;
}
.mini-title {
@ -262,3 +269,17 @@
@apply bg-background text-foreground;
}
}
@layer components {
.blog-page-title {
@apply text-3xl font-semibold md:text-4xl;
}
.blog-post-title {
@apply text-2xl font-semibold md:text-3xl lg:text-4xl;
}
.blog-card-title-featured {
@apply text-xl font-semibold md:text-2xl;
}
}

2
sites/reflections/src/components/BaseHead.astro
View file

@ -27,7 +27,7 @@ const imageURL = new URL(finalImage, Astro.url);
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- Load Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="robots" content={`${SITE_METADATA.robots.index ? 'index' : 'noindex'}, ${SITE_METADATA.robots.follow ? 'follow' : 'nofollow'}`} />

2
sites/reflections/src/components/sections/blog-post.tsx
View file

@ -19,7 +19,7 @@ const BlogPost = ({
<section className="pb-8 pt-4">
<div className="container max-w-4xl">
<div className="space-y-2 text-center">
<h1 className="text-2xl font-bold tracking-tight md:text-4xl lg:text-5xl">
<h1 className="blog-post-title">
{title}
</h1>
<p className="text-muted-foreground mx-auto max-w-2xl text-lg">

4
sites/reflections/src/components/sections/blog-posts.tsx
View file

@ -20,7 +20,7 @@ const BlogPosts = ({
collection ? `/${collection}/${post.id}/` : `/${post.id}/`;
return (
<div className="relative py-16 md:py-28 lg:py-32">
<div className="relative py-10 md:py-16 lg:py-20">
<div className="absolute -inset-40 z-[-1] [mask-image:radial-gradient(circle_at_center,black_0%,black_20%,transparent_75%)]">
<PlusSigns className="text-foreground/[0.05] h-full w-full" />
</div>
@ -46,7 +46,7 @@ const BlogPosts = ({
<Badge variant="outline" className="mb-3 w-fit">
Featured Post
</Badge>
<h2 className="mb-3 text-2xl font-bold group-hover:underline md:text-3xl">
<h2 className="blog-card-title-featured mb-3 group-hover:underline">
{featuredPost.data.title}
</h2>
<p className="text-muted-foreground mb-4 line-clamp-3 text-base">

8
sites/reflections/src/pages/index.astro
View file

@ -11,11 +11,11 @@ const posts = (await getCollection(ACTIVE_BLOG_SITE.key)).sort(
---
<DefaultLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
<div class="py-16 md:py-28 lg:py-32">
<div class="py-12 md:py-20 lg:py-24">
<div class="container max-w-5xl">
<div class="mb-12">
<h1 class="text-4xl font-bold mb-4">{ACTIVE_BLOG_SITE.title}</h1>
<p class="text-xl text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
<div class="mb-10">
<h1 class="blog-page-title mb-3">{ACTIVE_BLOG_SITE.title}</h1>
<p class="text-lg text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
</div>
<BlogPosts posts={posts} client:only="react" />
</div>

25
sites/reflections/src/styles/global.css
View file

@ -38,6 +38,8 @@
}
@theme {
--font-fraunces:
"Fraunces", Georgia, Cambria, "Times New Roman", Times, serif;
--font-heliotrope:
"Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen;
@ -170,8 +172,13 @@
}
h1,
h2 {
@apply font-sans;
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-fraunces);
letter-spacing: 0;
}
.mini-title {
@ -262,3 +269,17 @@
@apply bg-background text-foreground;
}
}
@layer components {
.blog-page-title {
@apply text-3xl font-semibold md:text-4xl;
}
.blog-post-title {
@apply text-2xl font-semibold md:text-3xl lg:text-4xl;
}
.blog-card-title-featured {
@apply text-xl font-semibold md:text-2xl;
}
}

2
sites/research/src/components/BaseHead.astro
View file

@ -27,7 +27,7 @@ const imageURL = new URL(finalImage, Astro.url);
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- Load Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="robots" content={`${SITE_METADATA.robots.index ? 'index' : 'noindex'}, ${SITE_METADATA.robots.follow ? 'follow' : 'nofollow'}`} />

2
sites/research/src/components/sections/blog-post.tsx
View file

@ -19,7 +19,7 @@ const BlogPost = ({
<section className="pb-8 pt-4">
<div className="container max-w-4xl">
<div className="space-y-2 text-center">
<h1 className="text-2xl font-bold tracking-tight md:text-4xl lg:text-5xl">
<h1 className="blog-post-title">
{title}
</h1>
<p className="text-muted-foreground mx-auto max-w-2xl text-lg">

4
sites/research/src/components/sections/blog-posts.tsx
View file

@ -20,7 +20,7 @@ const BlogPosts = ({
collection ? `/${collection}/${post.id}/` : `/${post.id}/`;
return (
<div className="relative py-16 md:py-28 lg:py-32">
<div className="relative py-10 md:py-16 lg:py-20">
<div className="absolute -inset-40 z-[-1] [mask-image:radial-gradient(circle_at_center,black_0%,black_20%,transparent_75%)]">
<PlusSigns className="text-foreground/[0.05] h-full w-full" />
</div>
@ -46,7 +46,7 @@ const BlogPosts = ({
<Badge variant="outline" className="mb-3 w-fit">
Featured Post
</Badge>
<h2 className="mb-3 text-2xl font-bold group-hover:underline md:text-3xl">
<h2 className="blog-card-title-featured mb-3 group-hover:underline">
{featuredPost.data.title}
</h2>
<p className="text-muted-foreground mb-4 line-clamp-3 text-base">

8
sites/research/src/pages/index.astro
View file

@ -11,11 +11,11 @@ const posts = (await getCollection(ACTIVE_BLOG_SITE.key)).sort(
---
<DefaultLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
<div class="py-16 md:py-28 lg:py-32">
<div class="py-12 md:py-20 lg:py-24">
<div class="container max-w-5xl">
<div class="mb-12">
<h1 class="text-4xl font-bold mb-4">{ACTIVE_BLOG_SITE.title}</h1>
<p class="text-xl text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
<div class="mb-10">
<h1 class="blog-page-title mb-3">{ACTIVE_BLOG_SITE.title}</h1>
<p class="text-lg text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
</div>
<BlogPosts posts={posts} client:only="react" />
</div>

25
sites/research/src/styles/global.css
View file

@ -38,6 +38,8 @@
}
@theme {
--font-fraunces:
"Fraunces", Georgia, Cambria, "Times New Roman", Times, serif;
--font-heliotrope:
"Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen;
@ -170,8 +172,13 @@
}
h1,
h2 {
@apply font-sans;
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-fraunces);
letter-spacing: 0;
}
.mini-title {
@ -262,3 +269,17 @@
@apply bg-background text-foreground;
}
}
@layer components {
.blog-page-title {
@apply text-3xl font-semibold md:text-4xl;
}
.blog-post-title {
@apply text-2xl font-semibold md:text-3xl lg:text-4xl;
}
.blog-card-title-featured {
@apply text-xl font-semibold md:text-2xl;
}
}

2
sites/reviews/src/components/BaseHead.astro
View file

@ -27,7 +27,7 @@ const imageURL = new URL(finalImage, Astro.url);
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- Load Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="robots" content={`${SITE_METADATA.robots.index ? 'index' : 'noindex'}, ${SITE_METADATA.robots.follow ? 'follow' : 'nofollow'}`} />

2
sites/reviews/src/components/sections/blog-post.tsx
View file

@ -19,7 +19,7 @@ const BlogPost = ({
<section className="pb-8 pt-4">
<div className="container max-w-4xl">
<div className="space-y-2 text-center">
<h1 className="text-2xl font-bold tracking-tight md:text-4xl lg:text-5xl">
<h1 className="blog-post-title">
{title}
</h1>
<p className="text-muted-foreground mx-auto max-w-2xl text-lg">

4
sites/reviews/src/components/sections/blog-posts.tsx
View file

@ -20,7 +20,7 @@ const BlogPosts = ({
collection ? `/${collection}/${post.id}/` : `/${post.id}/`;
return (
<div className="relative py-16 md:py-28 lg:py-32">
<div className="relative py-10 md:py-16 lg:py-20">
<div className="absolute -inset-40 z-[-1] [mask-image:radial-gradient(circle_at_center,black_0%,black_20%,transparent_75%)]">
<PlusSigns className="text-foreground/[0.05] h-full w-full" />
</div>
@ -46,7 +46,7 @@ const BlogPosts = ({
<Badge variant="outline" className="mb-3 w-fit">
Featured Post
</Badge>
<h2 className="mb-3 text-2xl font-bold group-hover:underline md:text-3xl">
<h2 className="blog-card-title-featured mb-3 group-hover:underline">
{featuredPost.data.title}
</h2>
<p className="text-muted-foreground mb-4 line-clamp-3 text-base">

8
sites/reviews/src/pages/index.astro
View file

@ -11,11 +11,11 @@ const posts = (await getCollection(ACTIVE_BLOG_SITE.key)).sort(
---
<DefaultLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
<div class="py-16 md:py-28 lg:py-32">
<div class="py-12 md:py-20 lg:py-24">
<div class="container max-w-5xl">
<div class="mb-12">
<h1 class="text-4xl font-bold mb-4">{ACTIVE_BLOG_SITE.title}</h1>
<p class="text-xl text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
<div class="mb-10">
<h1 class="blog-page-title mb-3">{ACTIVE_BLOG_SITE.title}</h1>
<p class="text-lg text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
</div>
<BlogPosts posts={posts} client:only="react" />
</div>

25
sites/reviews/src/styles/global.css
View file

@ -38,6 +38,8 @@
}
@theme {
--font-fraunces:
"Fraunces", Georgia, Cambria, "Times New Roman", Times, serif;
--font-heliotrope:
"Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen;
@ -170,8 +172,13 @@
}
h1,
h2 {
@apply font-sans;
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-fraunces);
letter-spacing: 0;
}
.mini-title {
@ -262,3 +269,17 @@
@apply bg-background text-foreground;
}
}
@layer components {
.blog-page-title {
@apply text-3xl font-semibold md:text-4xl;
}
.blog-post-title {
@apply text-2xl font-semibold md:text-3xl lg:text-4xl;
}
.blog-card-title-featured {
@apply text-xl font-semibold md:text-2xl;
}
}

2
sites/vibes/src/components/BaseHead.astro
View file

@ -27,7 +27,7 @@ const imageURL = new URL(finalImage, Astro.url);
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- Load Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="robots" content={`${SITE_METADATA.robots.index ? 'index' : 'noindex'}, ${SITE_METADATA.robots.follow ? 'follow' : 'nofollow'}`} />

2
sites/vibes/src/components/sections/blog-post.tsx
View file

@ -19,7 +19,7 @@ const BlogPost = ({
<section className="pb-8 pt-4">
<div className="container max-w-4xl">
<div className="space-y-2 text-center">
<h1 className="text-2xl font-bold tracking-tight md:text-4xl lg:text-5xl">
<h1 className="blog-post-title">
{title}
</h1>
<p className="text-muted-foreground mx-auto max-w-2xl text-lg">

4
sites/vibes/src/components/sections/blog-posts.tsx
View file

@ -20,7 +20,7 @@ const BlogPosts = ({
collection ? `/${collection}/${post.id}/` : `/${post.id}/`;
return (
<div className="relative py-16 md:py-28 lg:py-32">
<div className="relative py-10 md:py-16 lg:py-20">
<div className="absolute -inset-40 z-[-1] [mask-image:radial-gradient(circle_at_center,black_0%,black_20%,transparent_75%)]">
<PlusSigns className="text-foreground/[0.05] h-full w-full" />
</div>
@ -46,7 +46,7 @@ const BlogPosts = ({
<Badge variant="outline" className="mb-3 w-fit">
Featured Post
</Badge>
<h2 className="mb-3 text-2xl font-bold group-hover:underline md:text-3xl">
<h2 className="blog-card-title-featured mb-3 group-hover:underline">
{featuredPost.data.title}
</h2>
<p className="text-muted-foreground mb-4 line-clamp-3 text-base">

8
sites/vibes/src/pages/index.astro
View file

@ -11,11 +11,11 @@ const posts = (await getCollection(ACTIVE_BLOG_SITE.key)).sort(
---
<DefaultLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
<div class="py-16 md:py-28 lg:py-32">
<div class="py-12 md:py-20 lg:py-24">
<div class="container max-w-5xl">
<div class="mb-12">
<h1 class="text-4xl font-bold mb-4">{ACTIVE_BLOG_SITE.title}</h1>
<p class="text-xl text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
<div class="mb-10">
<h1 class="blog-page-title mb-3">{ACTIVE_BLOG_SITE.title}</h1>
<p class="text-lg text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
</div>
<BlogPosts posts={posts} client:only="react" />
</div>

25
sites/vibes/src/styles/global.css
View file

@ -38,6 +38,8 @@
}
@theme {
--font-fraunces:
"Fraunces", Georgia, Cambria, "Times New Roman", Times, serif;
--font-heliotrope:
"Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen;
@ -170,8 +172,13 @@
}
h1,
h2 {
@apply font-sans;
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-fraunces);
letter-spacing: 0;
}
.mini-title {
@ -262,3 +269,17 @@
@apply bg-background text-foreground;
}
}
@layer components {
.blog-page-title {
@apply text-3xl font-semibold md:text-4xl;
}
.blog-post-title {
@apply text-2xl font-semibold md:text-3xl lg:text-4xl;
}
.blog-card-title-featured {
@apply text-xl font-semibold md:text-2xl;
}
}