mguilbert/matheoguilbert.fr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix responsive design and ensure consistency of elements

Browse Source
This commit is contained in:
Mathéo GUILBERT
2026-04-16 14:58:07 +02:00
parent fc2b481bd4
commit b717abb7de
8 changed files with 20 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ui/FeatureColumn.tsx
+2 -2
View File
@@ -6,10 +6,10 @@ type props = {
export const FeatureColumn = ({ imagePath, title, text }: props) => {
return (
<div className="flex flex-col items-center justify-start max-w-150 h-auto gap-7">
<div className="flex flex-col items-center justify-start max-w-100 h-auto gap-7">
<img className="w-33.75 h-33.75" src={imagePath} alt={`icon illustrating the text ${title}`} />
<div className="font-serif text-brand-brown text-center leading-[1.05] text-balance text-[clamp(2rem,5vw,30px)]">{title}</div>
<div className="font-sans text-base text-center w-3/5">{text}</div>
<div className="font-sans text-base text-center">{text}</div>
</div>
);
};
components/ui/ProjectCard.tsx
+10 -12
View File
@@ -11,10 +11,10 @@ type props = {
export const ProjectCard = ({ project, locale, isTheLast = false }: props) => {
return (
<div className="w-full pb-12">
<div className="w-full h-px bg-brand-brown/20" />
<div className="w-full pb-8">
<div className="w-full h-px bg-brand-brown/20 mb-8" />
<Link href={`/${locale}/works/${project.slug}`} className="group block">
<Link href={`/${locale}/works/${project.slug}`} className="group block pointer-cursor">
<div className="flex flex-col gap-4 lg:flex-row lg:justify-between lg:items-center lg:gap-14 relative">
{/* Date label */}
@@ -23,14 +23,12 @@ export const ProjectCard = ({ project, locale, isTheLast = false }: props) => {
</div>
{/* Left image */}
<div className="w-full lg:w-3/5 h-92.5 bg-gray-600 overflow-hidden">
{project.preview1 ? (
<img
src={project.preview1}
alt={project.title}
className="w-full h-full object-cover transition duration-500 group-hover:scale-[1.02]"
/>
) : null}
<div className="w-full rounded-[10px] lg:w-3/5 h-92.5 bg-gray-600 overflow-hidden">
<img
src={project.cover}
alt={project.title}
className="w-full h-full object-cover transition duration-500 group-hover:scale-[1.02]"
/>
</div>
{/* Right content */}
@@ -57,7 +55,7 @@ export const ProjectCard = ({ project, locale, isTheLast = false }: props) => {
</div>
</Link>
{isTheLast && <div className="w-full h-px mt-12 bg-brand-brown/20" />}
{isTheLast && <div className="w-full h-px mt-8 bg-brand-brown/20" />}
</div>
);
};