Skip to content

Commit 46584f6

Browse files
kevinjosethomaskevinjosethomas
committed
style: improve responsive design
1 parent 9f76ed5 commit 46584f6

File tree

4 files changed

+17
-21
lines changed

4 files changed

+17
-21
lines changed

‎src/components/Common/DownloadModelModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ export const DownloadModelModal: React.FC<Props> = ({
8585
}}
8686
/>
8787
<motion.div
88-
className="relative z-10 w-full max-w-[min(750px,50vw)]"
88+
className="relative z-10 w-full md:max-w-[min(750px,50vw)]"
8989
initial={{ y: 10, opacity: 0 }}
9090
animate={{ y: 0, opacity: 1 }}
9191
exit={{ y: 10, opacity: 0 }}

‎src/components/Home/AboutMaia.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ const PaperCard = ({
130130
className?: string
131131
}) => (
132132
<motion.div
133-
className={`from-white/8 to-white/4 hover:from-white/12 hover:to-white/6 group relative flex h-full flex-col rounded-lg border border-glass-border bg-gradient-to-br backdrop-blur-md transition-all duration-200 hover:border-glass-border ${featured ? '' : 'hover:scale-[1.02]'} ${className} ${featured ? 'overflow-hidden' : 'p-4 md:p-6'}`}
133+
className={`group relative flex h-full flex-col rounded-lg border border-glass-border backdrop-blur-md transition-all duration-200 hover:border-glass-border ${featured ? '' : 'hover:scale-[1.02]'} ${className} ${featured ? 'overflow-hidden' : 'p-4 md:p-6'}`}
134134
initial={{ opacity: 0, y: 20 }}
135135
whileInView={{ opacity: 1, y: 0 }}
136136
viewport={{ once: true }}
@@ -214,7 +214,7 @@ export const AboutMaia = () => {
214214
<div>
215215
<section
216216
id="main_info"
217-
className="relative flex flex-col items-center justify-center bg-transparent py-20 text-center"
217+
className="relative flex flex-col items-center justify-center bg-transparent py-10 text-center md:py-20"
218218
ref={projectRef}
219219
>
220220
<div className="flex max-w-3xl flex-col items-center justify-center px-4 md:px-0">
@@ -295,7 +295,7 @@ export const AboutMaia = () => {
295295

296296
<section
297297
id="team_info"
298-
className="relative overflow-hidden bg-transparent py-16"
298+
className="relative overflow-hidden bg-transparent py-4"
299299
ref={teamRef}
300300
>
301301
<div className="relative z-10 mx-auto my-0 flex max-w-[1200px] flex-col items-center justify-center gap-8">

‎src/components/Home/HomeHero.tsx‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ const FeatureCard: React.FC<FeatureCardProps> = ({
8787

8888
return (
8989
<CardWrapper>
90-
<div className="from-white/8 to-white/4 hover:from-white/12 hover:to-white/6 group relative flex h-full cursor-pointer select-none flex-row items-center justify-start gap-4 overflow-hidden rounded-lg border border-glass-border bg-gradient-to-br p-4 text-center backdrop-blur-md transition-all duration-300 hover:border-white/20 hover:shadow-md hover:shadow-white/5 md:min-h-[140px] md:flex-col md:items-center md:justify-center md:gap-0">
90+
<div className="group relative flex h-full cursor-pointer select-none flex-row items-center justify-start gap-4 overflow-hidden rounded-lg border border-glass-border p-3 text-center backdrop-blur-md transition-all duration-300 hover:border-white/20 hover:shadow-md hover:shadow-white/5 md:min-h-[140px] md:flex-col md:items-center md:justify-center md:gap-0 md:p-4">
9191
<div className="text-white/60 transition-colors duration-300 group-hover:text-white/90">
9292
<span className="material-symbols-outlined material-symbols-filled leading-0 text-6xl">
9393
{icon}
@@ -97,7 +97,7 @@ const FeatureCard: React.FC<FeatureCardProps> = ({
9797
<h2 className="text-lg font-bold text-white/95 transition-colors duration-300 group-hover:text-white">
9898
{title}
9999
</h2>
100-
<p className="text-xs text-white/70 transition-colors duration-300 group-hover:text-white/85">
100+
<p className="text-left text-xs text-white/70 transition-colors duration-300 group-hover:text-white/85">
101101
{description}
102102
</p>
103103
</div>
@@ -262,17 +262,15 @@ export const HomeHero: React.FC<Props> = ({ scrollHandler }: Props) => {
262262
/>
263263
</div>
264264
</div>
265-
<motion.div className="grid grid-cols-2 gap-6 px-2 md:flex md:gap-6">
266-
{activeUsers > 0 ? (
265+
<motion.div className="flex flex-wrap justify-center gap-6 px-2">
266+
{activeUsers > 0 && (
267267
<p className="text-center text-base text-white/80">
268268
<AnimatedNumber
269269
value={activeUsers}
270270
className="font-bold text-white"
271271
/>{' '}
272272
recent users
273273
</p>
274-
) : (
275-
<></>
276274
)}
277275
<p className="text-center text-base text-white/80">
278276
<AnimatedNumber
@@ -288,16 +286,14 @@ export const HomeHero: React.FC<Props> = ({ scrollHandler }: Props) => {
288286
/>{' '}
289287
puzzles solved
290288
</p>
291-
{activeUsers <= 0 ? (
289+
{activeUsers <= 0 && (
292290
<p className="text-center text-base text-white/80">
293291
<AnimatedNumber
294292
value={globalStats?.turing_games_total || 0}
295293
className="font-bold text-white"
296294
/>{' '}
297295
turing games played
298296
</p>
299-
) : (
300-
<></>
301297
)}
302298
</motion.div>
303299
</div>

‎src/components/Home/TeamMember.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const TeamMember = ({
3333
>
3434
<img
3535
src={image}
36-
className="h-32 w-32 rounded-full md:h-40 md:w-40"
36+
className="h-24 w-24 rounded-full md:h-40 md:w-40"
3737
alt={name}
3838
/>
3939
<div className="flex flex-col">
@@ -42,17 +42,17 @@ export const TeamMember = ({
4242
target="_blank"
4343
rel="noreferrer"
4444
href={website}
45-
className="text-sm font-semibold text-human-2 transition duration-200 hover:text-human-3 md:text-xl"
45+
className="text-xs font-semibold text-human-2 transition duration-200 hover:text-human-3 md:text-xl"
4646
>
4747
{name}
4848
</a>
4949
) : (
50-
<span className="text-sm text-primary md:text-xl">{name}</span>
50+
<span className="text-xs text-primary md:text-xl">{name}</span>
5151
)}
52-
<p className="text-xs text-primary md:text-base">{institution}</p>
52+
<p className="text-xxs text-primary md:text-base">{institution}</p>
5353
<div className="mt-1 flex flex-col gap-2">
54-
<p className="text-xs font-medium text-primary md:text-sm">{role}</p>
55-
<div className="flex items-center justify-center gap-1">
54+
<p className="text-xxs font-medium text-primary md:text-sm">{role}</p>
55+
<div className="flex items-center justify-center gap-2">
5656
{website && (
5757
<a
5858
target="_blank"
@@ -61,7 +61,7 @@ export const TeamMember = ({
6161
className="opacity-80 transition-opacity duration-300 hover:opacity-100"
6262
aria-label={`Visit ${name}'s website`}
6363
>
64-
<span className="material-symbols-outlined text-xl leading-8">
64+
<span className="material-symbols-outlined text-sm leading-8 md:text-xl">
6565
language
6666
</span>
6767
</a>
@@ -71,7 +71,7 @@ export const TeamMember = ({
7171
target="_blank"
7272
rel="noreferrer"
7373
href={`https://github.com/${github}`}
74-
className="opacity-80 transition-opacity duration-300 *:h-4 *:w-4 *:fill-primary hover:opacity-100"
74+
className="opacity-80 transition-opacity duration-300 *:h-3 *:w-3 *:fill-primary hover:opacity-100 *:md:h-4 *:md:w-4"
7575
aria-label={`Visit ${name}'s GitHub profile`}
7676
>
7777
{GithubIcon}

0 commit comments

Comments
 (0)