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

feat: hide cards on small screens
Some checks failed
test-build / guarddog (push) Successful in 19s
Details
renovate / renovate (push) Successful in 50s
Details
test-build / build (push) Failing after 1m38s
Details

Browse Source
This commit is contained in:
Alex Lebens
2026-03-10 23:30:23 -05:00
parent f030da549e
commit e2f5bbbe9c
2 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/cards/WeatherCard.astro
View File

@@ -10,7 +10,7 @@ const { dayName, label, icon, temp } = Astro.props;
--- ---
<div class="smooth-reveal-2 group flex flex-col"> <div class="smooth-reveal-2 group flex flex-col">
<div class="card-base w-32 md:w-40"> <div class="card-base w-40">
<div class="p-5 text-center"> <div class="p-5 text-center">
<span class="card-text-description block font-bold text-xs uppercase tracking-widest"> <span class="card-text-description block font-bold text-xs uppercase tracking-widest">
{dayName} {dayName}

16
src/components/sections/WeatherSection.astro
View File

@@ -24,13 +24,15 @@ const { forecastDays, error } = await getFiveDayForecast(latitude, longitude, ti
</div> </div>
) : ( ) : (
<div class="flex flex-wrap justify-center gap-4 lg:gap-6"> <div class="flex flex-wrap justify-center gap-4 lg:gap-6">
{forecastDays.map((forecastDay) => ( {forecastDays.map((forecastDay, index) => (
<WeatherCard <div class={index === 3 ? "hidden min-[800px]:block" : index >= 4 ? "hidden min-[1100px]:block" : ""}>
dayName={forecastDay.dayName} <WeatherCard
label={forecastDay.label} dayName={forecastDay.dayName}
icon={forecastDay.icon} label={forecastDay.label}
temp={forecastDay.temp} icon={forecastDay.icon}
/> temp={forecastDay.temp}
/>
</div>
))} ))}
</div> </div>
)} )}