Skip to content

Commit 5ece414

Browse files
hasparushasparus
committed
Improve styles
1 parent 7bd2850 commit 5ece414

File tree

6 files changed

+124
-26
lines changed

6 files changed

+124
-26
lines changed

‎src/app/conf/2025/_data.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,11 @@ async function getSpeakers(): Promise<SchedSpeaker[]> {
6161
about: stripHtml(user.about).result,
6262
}
6363
})
64+
.sort((a, b) => {
65+
if (a.avatar && !b.avatar) return -1
66+
if (!a.avatar && b.avatar) return 1
67+
return 0
68+
})
6469

6570
return result
6671
}

‎src/app/conf/2025/components/speaker-card.module.css

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
.stripes {
2+
mask-image: radial-gradient(
3+
ellipse at top left,
4+
hsl(var(--color-pri-base)) 0%,
5+
hsl(var(--color-pri-base)) 5%,
6+
transparent 40%,
7+
transparent,
8+
transparent 85%,
9+
black 100%
10+
);
11+
}
12+
13+
.speakerCard:nth-child(7n + 1) .stripes {
14+
mask-image: linear-gradient(
15+
120deg,
16+
hsl(var(--color-pri-base)) 0%,
17+
hsl(var(--color-pri-base)) 8%,
18+
transparent 35%,
19+
transparent
20+
);
21+
}
22+
23+
.speakerCard:nth-child(7n + 2) .stripes {
24+
mask-image: linear-gradient(
25+
80deg,
26+
hsl(var(--color-pri-base)) 0%,
27+
hsl(var(--color-pri-base)) 5%,
28+
transparent 40%,
29+
transparent
30+
);
31+
}
32+
33+
.speakerCard:nth-child(7n + 3) .stripes {
34+
mask-image: radial-gradient(
35+
circle at bottom right,
36+
hsl(var(--color-pri-base)) 0%,
37+
hsl(var(--color-pri-base)) 10%,
38+
transparent 40%,
39+
transparent
40+
);
41+
}
42+
43+
.speakerCard:nth-child(7n + 4) .stripes {
44+
mask-image: linear-gradient(
45+
-40deg,
46+
hsl(var(--color-pri-base)) 0%,
47+
hsl(var(--color-pri-base)) 5%,
48+
transparent 40%,
49+
transparent
50+
);
51+
}
52+
53+
.speakerCard:nth-child(7n + 5) .stripes {
54+
mask-image: radial-gradient(
55+
circle at top left,
56+
transparent 0%,
57+
transparent 65%,
58+
black 90%
59+
);
60+
}
61+
62+
.speakerCard:nth-child(7n + 6) .stripes {
63+
mask-image: radial-gradient(
64+
ellipse at bottom left,
65+
hsl(var(--color-pri-base)) 0%,
66+
hsl(var(--color-pri-base)) 6%,
67+
transparent 45%,
68+
transparent,
69+
transparent 90%,
70+
black 100%
71+
);
72+
}
73+
74+
.stripes {
75+
--end-color: hsl(var(--color-sec-light));
76+
}
77+
78+
.speakerCard:nth-child(3n + 1) .stripes {
79+
--end-color: hsl(var(--color-sec-base));
80+
}
81+
82+
.speakerCard:nth-child(3n + 2) .stripes {
83+
--end-color: hsl(var(--color-sec-darker));
84+
}

‎src/app/conf/2025/components/speaker-card.tsx

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import { SchedSpeaker } from "../../2023/types"
99
import { StripesDecoration } from "../../_design-system/stripes-decoration"
1010
import { SocialIcon, SocialIconType } from "../../_design-system/social-icon"
1111

12+
import styles from "./speaker-card.module.css"
13+
1214
export interface SpeakerCardProps extends React.HTMLAttributes<HTMLDivElement> {
1315
tags?: string[]
1416
isReturning?: boolean
@@ -30,6 +32,7 @@ export function SpeakerCard({
3032
<article
3133
className={clsx(
3234
"group relative overflow-hidden border border-neu-200 bg-neu-0 @container dark:border-neu-100",
35+
styles.speakerCard,
3336
className,
3437
)}
3538
{...props}
@@ -38,23 +41,33 @@ export function SpeakerCard({
3841
{showSocials && (
3942
<SpeakerLinks speaker={speaker} className="absolute right-6 top-6" />
4043
)}
41-
{speaker.avatar && (
42-
<div className="relative aspect-square shrink-0 overflow-hidden">
43-
<div className="absolute inset-0 z-[1] bg-sec-light mix-blend-multiply" />
44+
45+
<div className="relative aspect-square shrink-0 overflow-hidden @[420px]:basis-[176px]">
46+
<div className="absolute inset-0 z-[1] bg-sec-light mix-blend-multiply" />
47+
{speaker.avatar ? (
4448
<Image
4549
src={speaker.avatar}
4650
alt=""
4751
width={176}
4852
height={176}
4953
className="size-full object-cover saturate-[.1] transition-transform"
5054
/>
51-
<Stripes mask="radial-gradient(ellipse at top left, hsl(var(--color-pri-base)) 0%, hsl(var(--color-pri-base)) 5%, transparent 40%, transparent, transparent 85%, black 100%)" />
52-
</div>
53-
)}
55+
) : (
56+
<div
57+
className="size-full"
58+
style={{
59+
backgroundImage:
60+
"linear-gradient(163deg, #759236 0%, hsl(var(--color-sec-lighter)) 100%)",
61+
}}
62+
/>
63+
)}
64+
<Stripes />
65+
</div>
66+
5467
<div className="flex flex-1 flex-col gap-2">
5568
<div className="flex flex-col gap-1">
5669
<h3 className="typography-body-lg">{speaker.name}</h3>
57-
<p className="typography-body-sm text-neu-800">
70+
<p className="text-neu-800 typography-body-sm">
5871
{[
5972
speaker.position,
6073
speaker.company === "-" ? "" : speaker.company,
@@ -64,7 +77,7 @@ export function SpeakerCard({
6477
</p>
6578
</div>
6679
{speaker.about && (
67-
<p className="typography-body-sm line-clamp-3 text-neu-800">
80+
<p className="line-clamp-3 text-neu-800 typography-body-sm">
6881
{speaker.about}
6982
</p>
7083
)}
@@ -124,17 +137,16 @@ function SpeakerLinks({
124137
)
125138
}
126139

127-
function Stripes({ mask }: { mask?: string }) {
140+
function Stripes() {
128141
return (
129142
<div
130143
role="presentation"
131-
className="pointer-events-none absolute inset-0 inset-y-[-20px]"
132-
style={{
133-
maskImage: mask,
134-
WebkitMaskImage: mask,
135-
}}
144+
className={clsx(
145+
"pointer-events-none absolute inset-0 inset-y-[-20px]",
146+
styles.stripes,
147+
)}
136148
>
137-
<StripesDecoration oddClassName="absolute inset-0 bg-gradient-to-b from-sec-dark to-sec-light" />
149+
<StripesDecoration oddClassName="absolute inset-0 bg-gradient-to-b from-sec-dark to-[var(--end-color)]" />
138150
</div>
139151
)
140152
}

‎src/app/conf/2025/components/top-minds/index.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,6 @@ import { HTMLAttributes } from "react"
33
import Image from "next-image-export-optimizer"
44
import type { StaticImageData } from "next/image"
55

6-
import TwitterIcon from "@/icons/twitter.svg"
7-
import LinkedInIcon from "@/icons/linkedin-filled.svg"
8-
96
import { Button } from "@/app/conf/_design-system/button"
107
import { BECOME_A_SPEAKER_LINK } from "../../links"
118
import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
@@ -80,7 +77,7 @@ export default function TopMindsSection({
8077
{...rest}
8178
>
8279
<div className="flex grid-cols-2 flex-wrap [@media(444px<width<743px)]:grid [@media(width<=444px)]:flex-col [@media(width<=743px)]:justify-center [@media(width>=970px)]:*:border-b-0">
83-
<h3 className="typography-h2 mr-auto flex w-full grow text-pretty pb-6 pr-6 [@media(width>857px)]:basis-0">
80+
<h3 className="mr-auto flex w-full grow text-pretty pb-6 pr-6 typography-h2 [@media(width>857px)]:basis-0">
8481
Meet the top industry minds
8582
</h3>
8683
<TopMindCard
@@ -163,7 +160,7 @@ function TopMindCard({
163160
<div className="flex flex-1 items-stretch border-t border-sec-dark">
164161
<div className="flex grow flex-col justify-center gap-1 p-3 sm:h-[80px]">
165162
<h4 className="typography-body-md">{name}</h4>
166-
<p className="typography-body-xs text-neu-700">{title}</p>
163+
<p className="text-neu-700 typography-body-xs">{title}</p>
167164
</div>
168165
<div className="flex border-l border-sec-dark max-sm:divide-x sm:flex-col sm:items-center sm:divide-y sm:border-l">
169166
{SocialIconType.all.map(type => {

‎src/app/conf/2025/schedule/[id]/page.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -90,22 +90,22 @@ export default function SessionPage({ params }: SessionProps) {
9090
)}
9191

9292
<div className="mt-8 flex gap-4 px-2 pb-8 max-lg:flex-col sm:px-3 lg:mt-16 lg:gap-8 xl:pb-16">
93-
<h3 className="typography-h2 min-w-[320px]">
93+
<h3 className="min-w-[320px] typography-h2">
9494
Session description
9595
</h3>
9696
<p className="typography-body-lg">{event.description}</p>
9797
</div>
9898

9999
<Hr />
100100

101-
<h3 className="typography-h2 my-8 max-w-[408px] px-2 sm:px-3 lg:my-16">
101+
<h3 className="my-8 max-w-[408px] px-2 typography-h2 sm:px-3 lg:my-16">
102102
Session speakers
103103
</h3>
104104
<SessionSpeakers event={event} className="-mx-px -mb-px" />
105105

106106
<Hr />
107107

108-
<h3 className="typography-h2 my-8 px-2 sm:px-3 lg:my-16">
108+
<h3 className="my-8 px-2 typography-h2 sm:px-3 lg:my-16">
109109
Session resources
110110
</h3>
111111
<section>
@@ -206,9 +206,9 @@ function SessionHeader({
206206
</React.Fragment>
207207
))}
208208
</p>
209-
<h1 className="typography-h2 mb-6 mt-3">{eventTitle}</h1>
209+
<h1 className="mb-6 mt-3 typography-h2">{eventTitle}</h1>
210210
<div className="flex flex-wrap items-center justify-between gap-2">
211-
<div className="typography-body-md flex flex-col gap-4 md:flex-row md:gap-6">
211+
<div className="flex flex-col gap-4 typography-body-md md:flex-row md:gap-6">
212212
<div className="flex items-center gap-2">
213213
<CalendarIcon className="size-5 text-sec-darker dark:text-sec-light/90 sm:size-6" />
214214
<time dateTime="2025-09-08">September 08</time>

‎src/app/conf/2025/schedule/_components/schedule-session-card.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export function ScheduleSessionCard({
2121
}: {
2222
session: ScheduleSession
2323
showEventType: boolean | undefined
24-
year: "2025" | "2024"
24+
year: `202${number}`
2525
eventsColors: Record<string, string>
2626
}) {
2727
const eventType = session.event_type.endsWith("s")

0 commit comments

Comments
 (0)