Skip to content

Commit d5276c9

Browse files
benfacebenface
committed
Revert class order change (issue with my local setup)
1 parent f917db1 commit d5276c9

File tree

15 files changed

+135
-135
lines changed

15 files changed

+135
-135
lines changed

‎website/src/HomePage.tsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,21 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
2222
return (
2323
<>
2424
<div className="graph-docs-not-markdown grid grid-cols-subgrid">
25-
<div className="xs:h-90 pointer-events-none absolute inset-x-0 flex h-70 justify-center">
25+
<div className="absolute inset-x-0 flex h-70 justify-center pointer-events-none xs:h-90">
2626
<img
2727
alt=""
2828
src={`${process.env.BASE_PATH}/img/home-bg.svg`}
29-
className="xs:-top-2 xs:left-0 left-16 h-full max-w-none"
29+
className="left-16 h-full max-w-none xs:-top-2 xs:left-0"
3030
/>
3131
</div>
3232
<div className="col-[container] py-28">
3333
<div className="flex flex-col items-start gap-4 lg:flex-row">
3434
<div className="flex-1 lg:mb-0 lg:max-w-84">
3535
<h1 className="text-heading-xlarge text-white">{t('index.hero.title')}</h1>
36-
<p className="text-16 mt-2">{t('index.hero.description')}</p>
36+
<p className="mt-2 text-16">{t('index.hero.description')}</p>
3737
</div>
3838
<div className="flex w-full flex-1 justify-end lg:w-auto">
39-
<div className="rounded-8 border-space-1600 bg-space-1800 w-full overflow-clip border lg:w-auto">
39+
<div className="w-full overflow-clip rounded-8 border border-space-1600 bg-space-1800 lg:w-auto">
4040
<div className="relative grid grid-cols-4 gap-px">
4141
{[
4242
'mainnet',
@@ -59,10 +59,10 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
5959
.map((id) => supportedNetworks.find((network) => network.id === id))
6060
.filter((network): network is typeof network & {} => Boolean(network))
6161
.map((network) => (
62-
<div key={network.id} className="-mr-px -mb-px">
62+
<div key={network.id} className="-mb-px -mr-px">
6363
<ButtonOrLink
6464
href={`/supported-networks/${network.id}`}
65-
className="border-space-1600 hover:bg-space-1600 flex items-center justify-center border-r border-b px-8 py-5 transition"
65+
className="flex items-center justify-center border-b border-r border-space-1600 px-8 py-5 transition hover:bg-space-1600"
6666
>
6767
<NetworkIcon
6868
network={network}
@@ -78,7 +78,7 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
7878
))}
7979
<ExperimentalLink
8080
href="/supported-networks"
81-
className="text-14 absolute right-0 bottom-0 flex h-[64px] w-[calc(100%-1px)] items-center justify-center backdrop-blur-md sm:w-[calc(50%-1px)]"
81+
className="absolute bottom-0 right-0 flex h-[64px] w-[calc(100%-1px)] items-center justify-center text-14 backdrop-blur-md sm:w-[calc(50%-1px)]"
8282
>
8383
{t('index.supportedNetworks.seeAllNetworks', [
8484
supportedNetworks.filter((network) => network.networkType === NetworkType.Mainnet).length,
@@ -90,7 +90,7 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
9090
</div>
9191
</div>
9292
</div>
93-
<div className="nested-[p:empty]:hidden col-[container]">
93+
<div className="col-[container] nested-[p:empty]:hidden">
9494
<section>
9595
<Heading.H2 id="products" className="mt-0">
9696
{t('index.products.title')}
@@ -107,7 +107,7 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
107107
</ExperimentalLink>
108108
}
109109
icon={
110-
<div className="rounded-4 flex size-8 items-center justify-center bg-purple-500 text-white">
110+
<div className="flex size-8 items-center justify-center rounded-4 bg-purple-500 text-white">
111111
<Subgraph size={4} />
112112
</div>
113113
}
@@ -122,7 +122,7 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
122122
</ExperimentalLink>
123123
}
124124
icon={
125-
<div className="rounded-4 bg-pink flex size-8 items-center justify-center text-white">
125+
<div className="flex size-8 items-center justify-center rounded-4 bg-pink text-white">
126126
<Substreams size={4} />
127127
</div>
128128
}
@@ -137,7 +137,7 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
137137
<ExperimentalLink href="/token-api/quick-start/">{t('index.products.tokenApi.cta')}</ExperimentalLink>
138138
}
139139
icon={
140-
<div className="rounded-4 bg-space-1400 flex size-8 items-center justify-center text-white">
140+
<div className="flex size-8 items-center justify-center rounded-4 bg-space-1400 text-white">
141141
<APIToken size={4} />
142142
</div>
143143
}
@@ -151,7 +151,7 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
151151
</ExperimentalLink>
152152
}
153153
icon={
154-
<div className="rounded-4 bg-space-1400 flex size-8 items-center justify-center text-white">
154+
<div className="flex size-8 items-center justify-center rounded-4 bg-space-1400 text-white">
155155
<GraphNode size={4} />
156156
</div>
157157
}
@@ -165,7 +165,7 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
165165
</ExperimentalLink>
166166
}
167167
icon={
168-
<div className="rounded-4 bg-space-1400 flex size-8 items-center justify-center text-white">
168+
<div className="flex size-8 items-center justify-center rounded-4 bg-space-1400 text-white">
169169
<Firehose size={4} />
170170
</div>
171171
}
@@ -188,8 +188,8 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
188188
</ExperimentalLink>,
189189
])}
190190
</p>
191-
<div className="graph-docs-not-markdown rounded-8 border-space-1500 mt-8 overflow-clip border">
192-
<ul className="grid-cols-auto-fill-16 text-space-500 grid gap-px">
191+
<div className="graph-docs-not-markdown mt-8 overflow-clip rounded-8 border border-space-1500">
192+
<ul className="grid grid-cols-auto-fill-16 gap-px text-space-500">
193193
{supportedNetworks
194194
// TODO: Don't filter out testnets that don't have a mainnet
195195
.filter((network) => network.networkType === NetworkType.Mainnet)
@@ -202,13 +202,13 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
202202
// Filter out networks that don't have a proper monochrome logo
203203
.filter((network) => network.id !== 'zora')
204204
.map((network) => (
205-
<li key={network.id} className="-mr-px -mb-px">
205+
<li key={network.id} className="-mb-px -mr-px">
206206
<Tooltip content={network.shortName}>
207207
<ButtonOrLink
208208
href={`/supported-networks/${network.id}`}
209209
className={`
210-
border-space-1500 hover:bg-space-1600 flex aspect-square items-center justify-center border-r border-b -outline-offset-1
211-
transition
210+
flex aspect-square items-center justify-center border-b border-r border-space-1500 -outline-offset-1 transition
211+
hover:bg-space-1600
212212
`}
213213
>
214214
<NetworkIcon network={network} size={6} />
@@ -289,7 +289,7 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
289289
href="https://www.youtube.com/@GraphProtocol"
290290
target="_blank"
291291
iconBefore={<SocialYouTube alt="" />}
292-
className="text-14 text-space-200 top-[-3px]"
292+
className="top-[-3px] text-14 text-space-200"
293293
>
294294
<span className="max-lg:hidden">{t('index.videos.watchOnYouTube')}</span>
295295
<span className="lg:hidden">YouTube</span>

‎website/src/components/Callout.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,12 @@ export const Callout = ({
4343
<div
4444
data-variant={variant}
4545
className={classNames([
46-
`text-body-small rounded-8 data-[variant=important]:border-solar-500/50 data-[variant=info]:border-galactic-500/50 data-[variant=important]:bg-solar-500/10 data-[variant=info]:bg-galactic-500/10
47-
--:my-8
48-
--:last:mb-0
49-
-:is-[li>*]:my-4
50-
flex
51-
gap-2 border p-3`,
46+
`text-body-small flex gap-2 rounded-8 border p-3
47+
data-[variant=important]:border-solar-500/50
48+
data-[variant=info]:border-galactic-500/50
49+
data-[variant=important]:bg-solar-500/10
50+
data-[variant=info]:bg-galactic-500/10
51+
--:my-8 --:last:mb-0 -:is-[li>*]:my-4`,
5252
className,
5353
])}
5454
{...(props as ComponentProps<'div'>)}
@@ -62,10 +62,10 @@ export const Callout = ({
6262
</div>
6363
<div
6464
className={`
65+
flex-1
6566
-:first:*:text-white
6667
mdx-[:is(p,ul,ol):not(:last-child,:is(ul,ol)_*)]:mb-2
6768
mdx-[ul,ol]:gap-1
68-
flex-1
6969
`}
7070
>
7171
{typeof title === 'string' ? <p>{title}</p> : title}

‎website/src/components/Card.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -52,31 +52,31 @@ export const Card = ({
5252
className={classNames([
5353
`text-body-xsmall
5454
[--gds-card-bg-hover:theme(colors.space-1600)]
55+
[--gds-card-bg:transparent]
5556
[--gds-card-border-hover:theme(colors.space-1400)]
56-
[--gds-card-border:theme(colors.space-1500)]
57-
[--gds-card-bg:transparent]`,
57+
[--gds-card-border:theme(colors.space-1500)]`,
5858
className,
5959
])}
6060
{...props}
6161
>
62-
<div className="xs:flex-row flex h-full flex-col gap-6">
62+
<div className="flex h-full flex-col gap-6 xs:flex-row">
6363
{videoThumbnailSrc ? (
64-
<div className="peer max-xs:mb-0 xs:me-0 xs:w-1/2 xs:max-w-64 xs:self-center -m-4 aspect-video">
65-
<img src={videoThumbnailSrc} alt="" className="rounded-6 size-full object-cover" />
64+
<div className="peer -m-4 aspect-video max-xs:mb-0 xs:me-0 xs:w-1/2 xs:max-w-64 xs:self-center">
65+
<img src={videoThumbnailSrc} alt="" className="size-full rounded-6 object-cover" />
6666
</div>
6767
) : null}
68-
<div className="xs:peer-[:has(img)]:self-center flex flex-1 flex-col gap-6">
68+
<div className="flex flex-1 flex-col gap-6 xs:peer-[:has(img)]:self-center">
6969
{icon && iconPosition === 'top' ? (
70-
<div className="nested-icon:default-size-6 shrink-0 grow-[9999]">{icon}</div>
70+
<div className="shrink-0 grow-[9999] nested-icon:default-size-6">{icon}</div>
7171
) : null}
7272
<div className="flex grow gap-4">
73-
{icon && iconPosition === 'side' ? <div className="nested-icon:default-size-6 shrink-0">{icon}</div> : null}
73+
{icon && iconPosition === 'side' ? <div className="shrink-0 nested-icon:default-size-6">{icon}</div> : null}
7474
<div className="flex flex-col gap-2">
7575
{slotAboveTitle ? <div className="mb-1">{slotAboveTitle}</div> : null}
76-
<h3 className="text-body-small-tight text-space-200 -my-0.5 font-medium">{title}</h3>
77-
{description ? <p className="text-space-700 -mb-1">{description}</p> : null}
76+
<h3 className="text-body-small-tight -my-0.5 text-space-200 font-medium">{title}</h3>
77+
{description ? <p className="-mb-1 text-space-700">{description}</p> : null}
7878
{slotBelowDescription ? <div className="mt-1">{slotBelowDescription}</div> : null}
79-
{cta ? <div className="text-body-xsmall-tight mt-1 -mb-0.5">{cta}</div> : null}
79+
{cta ? <div className="text-body-xsmall-tight -mb-0.5 mt-1">{cta}</div> : null}
8080
</div>
8181
</div>
8282
</div>

‎website/src/components/Image.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ export const Image = ({ src, alt, className, ...props }: ImageProps) => {
88
return (
99
<figure
1010
className={classNames([
11-
'graph-docs-not-markdown rounded-8 bg-space-1600 --:my-8 --:last:mb-0 -:is-[li>*]:my-4 p-2',
11+
'graph-docs-not-markdown rounded-8 bg-space-1600 p-2 --:my-8 --:last:mb-0 -:is-[li>*]:my-4',
1212
className,
1313
])}
1414
>
15-
<img src={src} alt="" className="rounded-4 bg-space-1800 w-full" {...props} />
16-
{alt ? <figcaption className="text-body-xsmall text-space-700 mt-2 px-1 text-center">{alt}</figcaption> : null}
15+
<img src={src} alt="" className="w-full rounded-4 bg-space-1800" {...props} />
16+
{alt ? <figcaption className="text-body-xsmall mt-2 px-1 text-center text-space-700">{alt}</figcaption> : null}
1717
</figure>
1818
)
1919
}

0 commit comments

Comments
 (0)