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

feat: change selected blogs to switch to card form on small screens

Browse Source
This commit is contained in:
Alex Lebens
2026-02-18 14:54:07 -06:00
parent e52d85f931
commit 44bd1e4810
5 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/cards/LargeBlogLeftCard.astro
View File

@@ -15,15 +15,15 @@ interface Props {
const { title, subTitle, url, img, imgAlt } = Astro.props;
---
<div class="smooth-reveal group">
<div class="smooth-reveal flex flex-col px-4 py-10 mx-auto">
<a
class="card-base-hidden md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 items-center gap-8 xl:gap-16 max-w-340 2xl:max-w-full px-4 sm:px-6 lg:px-8 py-10 sm:py-16 lg:py-14 mx-auto"
class="md:card-base-hidden group items-center md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 gap-8 xl:gap-16 max-w-340 2xl:max-w-full md:px-8 md:py-8"
href={url}
data-astro-prefetch
>
<div>
<Image
class="rounded-xl w-full h-full sm:max-h-80 md:max-h-90 object-cover"
class="rounded-2xl rounded-b-none md:rounded-2xl w-full h-full sm:max-h-80 md:max-h-90 object-cover"
src={getDirectusImageURL(img)}
alt={imgAlt}
draggable="false"
@@ -32,11 +32,11 @@ const { title, subTitle, url, img, imgAlt } = Astro.props;
height="420"
/>
</div>
<div>
<h2 class="card-text-header mb-4">
<div class="bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6">
<h2 class="card-text-header mb-2">
{title}
</h2>
<p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-4">
<p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-8">
{subTitle}
</p>
<div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2">