Skip to content

Commit 9cd706c

Browse files
koculukoculu
committed
Reduce custom styles of landing samples.
1 parent 386e124 commit 9cd706c

5 files changed

Lines changed: 70 additions & 81 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ Markdown for your content. TypeScript for your components, styles, and behavior.
1212
[![CI](https://github.com/PureStackStudio/PureStack/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/PureStackStudio/PureStack/actions/workflows/ci.yml)
1313
[![TypeScript](https://img.shields.io/badge/TypeScript-7-3178c6?style=flat-square&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
1414
[![License: MIT](https://img.shields.io/badge/License-MIT-a855f7?style=flat-square)](LICENSE)
15+
[![Join Discord](https://img.shields.io/badge/Discord-Join-5865F2?logo=discord&logoColor=white)](https://discord.gg/xvPDTc27VD)
1516

1617
**[Explore the docs](https://purestack.studio/guides/)** ·
1718
**[Browse components](https://purestack.studio/components/)** ·

‎frontend/docs/componentGuide.ts‎

Lines changed: 12 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export function registerComponentGuideStyles() {
7676
registerComponentDirectoryStyles(root, palette)
7777
registerLandingGalleryStyles(root)
7878
registerLandingIntroductionStyles(root)
79-
registerLandingFeatureStyles(root, palette)
79+
registerLandingFeatureStyles(root)
8080
registerLandingWorkflowStyles(root, palette)
8181
})
8282
}
@@ -589,84 +589,42 @@ function registerLandingIntroductionStyles(root: Style) {
589589
.flexShrink('0')
590590
}
591591

592-
function registerLandingFeatureStyles(root: Style, palette: ThemePalette) {
593-
const neutral = palette.semanticTone.neutral
594-
595-
root
596-
.select('.landing-section-demo__feature')
597-
.height('100%')
598-
.padding('1.25rem')
599-
.boxShadow('none')
592+
function registerLandingFeatureStyles(root: Style) {
593+
root.select('.landing-section-demo__feature').padding('1.25rem')
600594

601595
root
602596
.select('.landing-section-alignment-gallery')
603597
.gridTemplateColumns('minmax(0, 1fr)')
604598

605-
root
606-
.select('.landing-section-demo__feature > .panel__body')
607-
.display('flex')
608-
.flexDirection('column')
609-
.alignItems('flex-start')
610-
.gap('0.875rem')
611-
612599
root
613600
.select('.landing-section-demo__feature h3')
614601
.margin('0.25rem 0 0')
615-
.fontSize('1.0625rem')
616602
.fontWeight('650')
617603
.lineHeight('1.35')
618604

619605
root
620606
.select('.landing-section-demo__feature p')
621-
.margin('0')
622607
.fontSize('0.9375rem')
623608
.lineHeight('1.65')
624-
.color(neutral.text.subtle)
625609
}
626610

627611
function registerLandingWorkflowStyles(root: Style, palette: ThemePalette) {
628-
const neutral = palette.semanticTone.neutral
612+
root.select('.landing-section-demo__workflow').padding('1.5rem')
629613

630-
root
631-
.select('.landing-section-demo__workflow')
632-
.padding('1.5rem')
633-
.boxShadow(palette.effect.softShadow)
614+
root.select('.landing-section-demo__workflow > .panel__body').gap('1.25rem')
634615

635-
root
636-
.select('.landing-section-demo__workflow > .panel__body')
637-
.display('grid')
638-
.gap('1.25rem')
616+
root.select('.landing-section-demo__step > div').gap('0.25rem')
639617

640-
root
641-
.select('.landing-section-demo__workflow .text-eyebrow')
642-
.margin('0')
643-
.fontSize('0.625rem')
644-
645-
root
646-
.select('.landing-section-demo__step')
647-
.display('flex')
648-
.alignItems('center')
649-
.gap('0.875rem')
650-
651-
root
652-
.select('.landing-section-demo__step > div')
653-
.display('grid')
654-
.gap('0.25rem')
655-
656-
root
657-
.select('.landing-section-demo__step strong')
658-
.fontSize('0.9375rem')
659-
.fontWeight('600')
618+
root.select('.landing-section-demo__step strong').fontSize('0.9375rem')
660619

661620
root
662621
.select('.landing-section-demo__step span, .landing-section-demo__note')
663-
.margin('0')
664622
.fontSize('0.8125rem')
665-
.lineHeight('1.5')
666-
.color(neutral.text.subtle)
667623

668624
root
669-
.select('.landing-section-demo__note')
670-
.paddingTop('1rem')
671-
.borderTop(`1px solid ${neutral.border.subtle}`)
625+
.select('.landing-section-demo__step span')
626+
.lineHeight('1.5')
627+
.color(palette.semanticTone.neutral.text.subtle)
628+
629+
root.select('.landing-section-demo__note').paddingTop('1rem')
672630
}

‎frontend/purestack.studio/components/landing/landing-section/_content-section.mdx‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,30 @@
44
tone="neutral"
55
variant="surfaceAlt"
66
>
7-
<Panel class="landing-section-demo__feature" variant="surface">
7+
<Panel
8+
class="landing-section-demo__feature h-full box-shadow-none"
9+
bodyClass="d-flex flex-column align-flex-start gap-4"
10+
variant="surface"
11+
>
812
<IconFrame name="lucide:layers" tone="accent" variant="surface"/>
9-
<h3 class="tracking-tight text-balance">Start with good foundations</h3>
10-
<p>Reusable components give every page a familiar structure.</p>
13+
<h3 class="tracking-tight text-balance fs-h5">
14+
Start with good foundations
15+
</h3>
16+
<p class="m-0 text-subtle">
17+
Reusable components give every page a familiar structure.
18+
</p>
1119
</Panel>
12-
<Panel class="landing-section-demo__feature" variant="surface">
20+
<Panel
21+
class="landing-section-demo__feature h-full box-shadow-none"
22+
bodyClass="d-flex flex-column align-flex-start gap-4"
23+
variant="surface"
24+
>
1325
<IconFrame name="lucide:sparkles" tone="secondary" variant="surface"/>
14-
<h3 class="tracking-tight text-balance">Finish with your own details</h3>
15-
<p>Your content and ideas give the experience its character.</p>
26+
<h3 class="tracking-tight text-balance fs-h5">
27+
Finish with your own details
28+
</h3>
29+
<p class="m-0 text-subtle">
30+
Your content and ideas give the experience its character.
31+
</p>
1632
</Panel>
1733
</LandingSection>

‎frontend/purestack.studio/components/landing/landing-section/_feature-grid.mdx‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,37 @@
88
tone="neutral"
99
variant="surface"
1010
>
11-
<Panel class="landing-section-demo__feature" variant="surfaceAlt">
11+
<Panel
12+
class="landing-section-demo__feature h-full box-shadow-none"
13+
bodyClass="d-flex flex-column align-flex-start gap-4"
14+
variant="surfaceAlt"
15+
>
1216
<IconFrame name="lucide:layers" tone="accent" variant="surface"/>
13-
<h3 class="tracking-tight text-balance">Content with structure</h3>
14-
<p>
17+
<h3 class="tracking-tight text-balance fs-h5">Content with structure</h3>
18+
<p class="m-0 text-subtle">
1519
Give your ideas a home with pages that are easy to write and maintain.
1620
</p>
1721
</Panel>
18-
<Panel class="landing-section-demo__feature" variant="surfaceAlt">
22+
<Panel
23+
class="landing-section-demo__feature h-full box-shadow-none"
24+
bodyClass="d-flex flex-column align-flex-start gap-4"
25+
variant="surfaceAlt"
26+
>
1927
<IconFrame name="lucide:palette" tone="secondary" variant="surface"/>
20-
<h3 class="tracking-tight text-balance">A consistent design</h3>
21-
<p>
28+
<h3 class="tracking-tight text-balance fs-h5">A consistent design</h3>
29+
<p class="m-0 text-subtle">
2230
Make every detail feel connected, from the first heading to the final
2331
link.
2432
</p>
2533
</Panel>
26-
<Panel class="landing-section-demo__feature" variant="surfaceAlt">
34+
<Panel
35+
class="landing-section-demo__feature h-full box-shadow-none"
36+
bodyClass="d-flex flex-column align-flex-start gap-4"
37+
variant="surfaceAlt"
38+
>
2739
<IconFrame name="lucide:mouse-pointer-2" tone="info" variant="surface"/>
28-
<h3 class="tracking-tight text-balance">Room to make it yours</h3>
29-
<p>
40+
<h3 class="tracking-tight text-balance fs-h5">Room to make it yours</h3>
41+
<p class="m-0 text-subtle">
3042
Add the interactions your visitors need, exactly where they need them.
3143
</p>
3244
</Panel>

‎frontend/purestack.studio/components/landing/landing-section/_split-section.mdx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,45 +19,47 @@
1919
</BtnLink>
2020
</template>
2121
<Panel
22-
class="landing-section-demo__workflow"
22+
class="landing-section-demo__workflow box-shadow-soft"
23+
bodyClass="d-grid"
2324
tone="neutral"
2425
variant="surface"
2526
>
2627
<Flex justify="between" align="center" wrap="true">
27-
<span class="text-eyebrow tracking-wide">YOUR NEXT RELEASE</span>
28+
<span class="text-eyebrow tracking-wide m-0 fs-xxs"
29+
>YOUR NEXT RELEASE</span>
2830
<Badge tone="success">Ready to build</Badge>
2931
</Flex>
30-
<div class="landing-section-demo__step">
32+
<div class="landing-section-demo__step d-flex align-center gap-4">
3133
<IconFrame
3234
name="lucide:check"
3335
tone="success"
3436
variant="surface"
3537
size="sm"/>
36-
<div>
37-
<strong>Tell your story</strong><span>Start with the content that matters.</span>
38+
<div class="d-grid">
39+
<strong class="fw-600">Tell your story</strong><span>Start with the content that matters.</span>
3840
</div>
3941
</div>
40-
<div class="landing-section-demo__step">
42+
<div class="landing-section-demo__step d-flex align-center gap-4">
4143
<IconFrame
4244
name="lucide:check"
4345
tone="success"
4446
variant="surface"
4547
size="sm"/>
46-
<div>
47-
<strong>Find your rhythm</strong><span>Compose sections that work together.</span>
48+
<div class="d-grid">
49+
<strong class="fw-600">Find your rhythm</strong><span>Compose sections that work together.</span>
4850
</div>
4951
</div>
50-
<div class="landing-section-demo__step">
52+
<div class="landing-section-demo__step d-flex align-center gap-4">
5153
<IconFrame
5254
name="lucide:check"
5355
tone="success"
5456
variant="surface"
5557
size="sm"/>
56-
<div>
57-
<strong>Make it your own</strong><span>Refine the details and share your work.</span>
58+
<div class="d-grid">
59+
<strong class="fw-600">Make it your own</strong><span>Refine the details and share your work.</span>
5860
</div>
5961
</div>
60-
<p class="landing-section-demo__note">
62+
<p class="landing-section-demo__note m-0 lh-5 text-subtle bt-1 b-subtle">
6163
Three steps. One shared foundation.
6264
</p>
6365
</Panel>

0 commit comments

Comments
 (0)