alexlebens/site-profile
1
0
Fork 0
Code Issues 1 Pull Requests Actions Activity

feat: add additional layout for small screens

Browse Source
This commit is contained in:
Alex Lebens
2026-02-26 15:46:59 -06:00
parent 6dd2209e21
commit 890dbdf313
1 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/sections/CategorySection.astro
View File

@@ -51,11 +51,12 @@ const categories = (await directus.request(readItems('categories')))
.map((c, index) => { .map((c, index) => {
const posts = postMap.get(c.slug); const posts = postMap.get(c.slug);
const pattern = layoutPattern[index % layoutPattern.length]; const pattern = layoutPattern[index % layoutPattern.length];
const smColSpan = Math.min(pattern.col, 2); const smColSpan = Math.min(pattern.col, 1);
const mdColSpan = Math.min(pattern.col, 4); const mdColSpan = Math.min(pattern.col, 2);
const lgColSpan = Math.min(pattern.col, 4);
const rowSpan = pattern.row; const rowSpan = pattern.row;
const rowSpanClass = rowSpan > 1 ? `row-span-${rowSpan}` : 'row-span-1'; const rowSpanClass = rowSpan > 1 ? `row-span-${rowSpan}` : 'row-span-1';
const gridItemClass = `col-span-${smColSpan} md:col-span-${mdColSpan} ${rowSpanClass}`; const gridItemClass = `col-span-${smColSpan} md:col-span-${mdColSpan} lg:col-span-${lgColSpan} ${rowSpanClass}`;
return { return {
...c, ...c,
posts, posts,
@@ -63,6 +64,7 @@ const categories = (await directus.request(readItems('categories')))
layoutPattern: { layoutPattern: {
smCol: smColSpan, smCol: smColSpan,
mdCol: mdColSpan, mdCol: mdColSpan,
lgCol: lgColSpan,
row: rowSpan, row: rowSpan,
index, index,
}, },
@@ -71,7 +73,7 @@ const categories = (await directus.request(readItems('categories')))
--- ---
<section class="mx-auto px-4 py-10 sm:px-6 lg:px-8 lg:py-14 lg:pt-10 2xl:max-w-full"> <section class="mx-auto px-4 py-10 sm:px-6 lg:px-8 lg:py-14 lg:pt-10 2xl:max-w-full">
<div class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 gap-4"> <div class="grid grid-flow-row-dense grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{categories.map((category) => { {categories.map((category) => {
return ( return (
<div <div
@@ -82,6 +84,8 @@ const categories = (await directus.request(readItems('categories')))
slug={category.slug} slug={category.slug}
title={category.title} title={category.title}
description={category.description} description={category.description}
logoLight={category.logoLight}
logoDark={category.logoDark}
count={postMap.get(category.slug)?.length ?? 0} count={postMap.get(category.slug)?.length ?? 0}
publishDate={timeago(postMap.get(category.slug)?.[0]?.published_date)} publishDate={timeago(postMap.get(category.slug)?.[0]?.published_date)}
/> />