Webmaster/ieeeucsd-org
3
1
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

attempt #2

Browse source
This commit is contained in:
chark1es 2025-03-08 14:33:45 -08:00
parent 6dc95b67f9
commit c5eb1784bf
2 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/projects/AP.astro
View file

@ -49,6 +49,8 @@ import ProjectSection from "./ProjectSection.astro";
.project-section-container { .project-section-container {
width: 100%; width: 100%;
margin-left: -5%; margin-left: -5%;
margin-right: -5%;
padding: 0 5%;
} }
} }
</style> </style>

12
src/components/projects/ProjectSection.astro
View file

@ -7,7 +7,7 @@ import { Image } from "astro:assets";
--- ---
<div <div
class="md:flex md:gap-[1.5vw] md:h-[30vw] md:w-auto w-[70vw] mt-[20%] md:mt-0 ml-[5%] md:ml-0" class="flex flex-col md:flex-row md:gap-[1.5vw] md:h-[30vw] w-full md:w-auto mt-[20%] md:mt-0 md:ml-0"
> >
{ {
Object.entries(annualProjects).map(([title, project], index) => ( Object.entries(annualProjects).map(([title, project], index) => (
@ -26,7 +26,7 @@ import { Image } from "astro:assets";
class="opacity-70 w-full md:h-full h-[30vw] object-cover rounded-[1.5vw] aspect-[2/3] transition-transform duration-500 ease-in-out md:group-hover:scale-110 my-[2vw] md:my-0" class="opacity-70 w-full md:h-full h-[30vw] object-cover rounded-[1.5vw] aspect-[2/3] transition-transform duration-500 ease-in-out md:group-hover:scale-110 my-[2vw] md:my-0"
/> />
<div class="absolute flex items-end bottom-0 left-0 px-[5%] pb-[5%] md:pt-[17%] bg-gradient-to-b from-transparent to-black via-black rounded-b-[1.5vw] text-white z-10 w-full transition-transform duration-300 md:[.expanded_&]:pb-[5%]"> <div class="absolute flex items-end bottom-0 left-0 px-[5%] pb-[5%] md:pt-[17%] bg-gradient-to-b from-transparent to-black via-black rounded-b-[1.5vw] text-white z-10 w-full transition-transform duration-300 md:[.expanded_&]:pb-[5%]">
<div class="md:w-full w-[70vw]"> <div class="w-full">
<p class="py-[1.5%] px-[8%] w-fit border-[0.1vw] border-white rounded-full text-nowrap md:text-[1.2vw] text-[2vw] font-light mb-[5%]"> <p class="py-[1.5%] px-[8%] w-fit border-[0.1vw] border-white rounded-full text-nowrap md:text-[1.2vw] text-[2vw] font-light mb-[5%]">
{title} {title}
</p> </p>
@ -91,11 +91,17 @@ import { Image } from "astro:assets";
} }
} }
/* Fix for iOS Safari */ /* Fix for iOS Safari and mobile devices */
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
.project-card { .project-card {
width: 100%; width: 100%;
margin-bottom: 5vw; margin-bottom: 5vw;
height: auto;
}
.project-card img {
height: 60vw;
object-fit: cover;
} }
} }
</style> </style>