audacity/audacity.github.io
1
0
Fork 0
mirror of https://github.com/audacity/audacity.github.io.git synced 2026-06-13 03:38:11 -05:00
Code Issues 9 Packages Projects Releases Wiki Activity

Improve blog listing responsiveness

Browse Source
This commit is contained in:
Dilson's Pickles
2023-02-28 12:24:59 +00:00
parent 5206ef5f6a
commit 56c17d5cfa
3 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/card/BlogListingCard.astro
View File

@@ -12,10 +12,10 @@ const { title, description, href, thumbnail, author, date } =
---
<a href={href} class="">
<img href={href} class="h-72 rounded w-full object-cover" src={thumbnail} />
<div class="flex mt-3 gap-2 items-center">
<p class="">{author}</p>-<p class="">{date}</p>
<img href={href} class="h-48 md:h-72 rounded w-full object-cover" src={thumbnail} />
<div class="sm:flex mt-3 gap-2 items-center">
<p class="">{author}</p><p class="">{date}</p>
</div>
<h3 href={href} class="hover:text-blue-700 hover:underline font-bold text-gray-800 text-lg mt-2">{title}</h3>
<p class="mt-2">{description.slice(0, 200)}</p>
<p class="mt-2">{description.slice(0, 200)}...</p>
</a>

6
src/components/homepage/BlogPosts.astro
View File

@@ -14,8 +14,8 @@ const posts = await Astro.glob<Frontmatter>("../../pages/posts/*.md");
---
<section class="bg-gray-50">
<div class="mx-auto max-w-6xl px-3 lg:px-0 pt-24 pb-32 space-y-12">
<div class="flex justify-between items-center">
<div class="mx-auto max-w-4xl xl:max-w-6xl px-3 lg:px-0 pt-12 pb-16 md:pt-24 md:pb-32">
<div class="flex flex-col md:flex-row md:justify-between md:items-center">
<h2 class="text-2xl xl:text-3xl font-bold text-gray-900">
Latest blog posts
</h2>
@@ -33,7 +33,7 @@ const posts = await Astro.glob<Frontmatter>("../../pages/posts/*.md");
></a
>
</div>
<div class="grid grid-cols-2 gap-12">
<div class="grid sm:grid-cols-2 gap-12 xl:gap-24 mt-6 md:mt-12">
{
posts
.slice(0, 2)

4
src/pages/blog.astro
View File

@@ -16,8 +16,8 @@ const posts = await Astro.glob<Frontmatter>("./posts/*.md");
---
<PageLayout title="Blog">
<main class="mt-8">
<div class="grid md:grid-cols-2 gap-8">
<main class="mt-8 xl:mt-16">
<div class="grid md:grid-cols-2 gap-12 xl:gap-16">
{
posts
.sort(