Skip to content

Commit 77e55c1

Browse files
koculukoculu
committed
Add theme toggle to frontend home
1 parent 84e8797 commit 77e55c1

4 files changed

Lines changed: 50 additions & 37 deletions

File tree

‎frontend/purestack.studio/header.mdx‎

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,36 @@
11
<header class="site-header">
22
<Flex class="container header-inner" align="center">
3-
<StudioBrand />
3+
<StudioBrand/>
44
<nav class="desktop-nav" aria-label="Main navigation">
55
<a href="#framework">Framework</a>
66
<a href="#ecosystem">Ecosystem</a>
77
<a href="/guides/">Guides</a>
88
<a href="/components/">Components</a>
99
<a href="#getting-started">Get started</a>
1010
</nav>
11-
<a
12-
class="header-source"
13-
href="https://github.com/PureStackStudio/PureStack"
14-
aria-label="PureStack GitHub repository"
15-
>
16-
<Icon name="tabler:brand-github" /><span>GitHub</span
17-
><span aria-hidden="true">↗</span>
18-
</a>
19-
<details class="mobile-menu">
20-
<summary aria-label="Toggle navigation"><Icon name="tabler:menu-2" /></summary>
21-
<nav aria-label="Mobile navigation">
22-
<a href="#framework">Framework</a>
23-
<a href="#ecosystem">Ecosystem</a>
24-
<a href="/guides/">Guides</a>
25-
<a href="/components/">Components</a>
26-
<a href="#getting-started">Get started</a>
27-
<a href="https://github.com/PureStackStudio/PureStack">GitHub ↗</a>
28-
</nav>
29-
</details>
11+
<div class="header-actions">
12+
<ThemeToggle/>
13+
<a
14+
class="header-source"
15+
href="https://github.com/PureStackStudio/PureStack"
16+
aria-label="PureStack GitHub repository"
17+
>
18+
<Icon name="tabler:brand-github"/><span>GitHub</span
19+
><span aria-hidden="true">↗</span>
20+
</a>
21+
<details class="mobile-menu">
22+
<summary aria-label="Toggle navigation">
23+
<Icon name="tabler:menu-2"/>
24+
</summary>
25+
<nav aria-label="Mobile navigation">
26+
<a href="#framework">Framework</a>
27+
<a href="#ecosystem">Ecosystem</a>
28+
<a href="/guides/">Guides</a>
29+
<a href="/components/">Components</a>
30+
<a href="#getting-started">Get started</a>
31+
<a href="https://github.com/PureStackStudio/PureStack">GitHub ↗</a>
32+
</nav>
33+
</details>
34+
</div>
3035
</Flex>
3136
</header>

‎frontend/theme/navigationStyles.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,15 @@ export function registerNavigationStyles(root: Style, palette: ThemePalette) {
1515
height: '78px',
1616
gap: '40px',
1717
})
18+
root.select('.studio .header-inner > .site-logo').css({
19+
flexShrink: '0',
20+
})
21+
root.select('.studio .header-actions').css({
22+
display: 'flex',
23+
alignItems: 'center',
24+
gap: '8px',
25+
flexShrink: '0',
26+
})
1827
root.select('.studio .desktop-nav').css({
1928
display: 'flex',
2029
alignItems: 'center',

‎frontend/theme/responsiveStyles.ts‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -63,13 +63,6 @@ export function registerResponsiveStyles(root: Style, palette: ThemePalette) {
6363
height: '68px',
6464
gap: '20px',
6565
})
66-
root.media(mediaBelow(BREAKPOINTS.md)).select('.studio .desktop-nav').css({
67-
gap: '20px',
68-
padding: '0',
69-
})
70-
root.media(mediaBelow(BREAKPOINTS.md)).select('.studio .desktop-nav a').css({
71-
fontSize: palette.font.size.sm,
72-
})
7366
root.media(mediaBelow(BREAKPOINTS.md)).select('.studio .hero h1').css({
7467
fontSize: '66px',
7568
letterSpacing: '-3px',
@@ -203,10 +196,10 @@ export function registerResponsiveStyles(root: Style, palette: ThemePalette) {
203196
height: '65px',
204197
gap: '20px',
205198
})
206-
root.media(mediaBelow(BREAKPOINTS.sm)).select('.studio .desktop-nav').css({
199+
root.media(mediaBelow(BREAKPOINTS.lg)).select('.studio .desktop-nav').css({
207200
display: 'none',
208201
})
209-
root.media(mediaBelow(BREAKPOINTS.sm)).select('.studio .header-source').css({
202+
root.media(mediaBelow(BREAKPOINTS.lg)).select('.studio .header-actions').css({
210203
marginLeft: 'auto',
211204
})
212205
root
@@ -222,11 +215,11 @@ export function registerResponsiveStyles(root: Style, palette: ThemePalette) {
222215
width: '20px',
223216
height: '20px',
224217
})
225-
root.media(mediaBelow(BREAKPOINTS.sm)).select('.studio .mobile-menu').css({
218+
root.media(mediaBelow(BREAKPOINTS.lg)).select('.studio .mobile-menu').css({
226219
display: 'block',
227220
})
228221
root
229-
.media(mediaBelow(BREAKPOINTS.sm))
222+
.media(mediaBelow(BREAKPOINTS.lg))
230223
.select('.studio .mobile-menu summary')
231224
.css({
232225
display: 'flex',
@@ -239,17 +232,17 @@ export function registerResponsiveStyles(root: Style, palette: ThemePalette) {
239232
color: tone.neutral.surfaceAlt.rest.text,
240233
})
241234
root
242-
.media(mediaBelow(BREAKPOINTS.sm))
235+
.media(mediaBelow(BREAKPOINTS.lg))
243236
.select('.studio .mobile-menu summary::-webkit-details-marker')
244237
.css({
245238
display: 'none',
246239
})
247240
root
248-
.media(mediaBelow(BREAKPOINTS.sm))
241+
.media(mediaBelow(BREAKPOINTS.lg))
249242
.select('.studio .mobile-menu nav')
250243
.css({
251244
position: 'absolute',
252-
top: '64px',
245+
top: '100%',
253246
left: '0',
254247
right: '0',
255248
display: 'flex',
@@ -260,7 +253,7 @@ export function registerResponsiveStyles(root: Style, palette: ThemePalette) {
260253
boxShadow: palette.effect.floatingShadow,
261254
})
262255
root
263-
.media(mediaBelow(BREAKPOINTS.sm))
256+
.media(mediaBelow(BREAKPOINTS.lg))
264257
.select('.studio .mobile-menu nav a')
265258
.css({
266259
padding: '12px 3px',

‎packages/ts-components/src/standard/logo/logoStyle.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,10 @@ export function registerLogoStyles() {
117117
fontWeight: '700',
118118
letterSpacing: '-0.045em',
119119
lineHeight: '1.05',
120-
overflowWrap: 'anywhere',
120+
maxWidth: '100%',
121+
whiteSpace: 'nowrap',
122+
overflow: 'hidden',
123+
textOverflow: 'ellipsis',
121124
color: brand,
122125
})
123126
styleBuilder.select('.site-logo__brand', theme).color(brand)
@@ -138,7 +141,10 @@ export function registerLogoStyles() {
138141
color: neutral.text.subtle,
139142
lineHeight: '1.4',
140143
letterSpacing: '0.06em',
141-
overflowWrap: 'anywhere',
144+
maxWidth: '100%',
145+
whiteSpace: 'nowrap',
146+
overflow: 'hidden',
147+
textOverflow: 'ellipsis',
142148
})
143149
styleBuilder
144150
.select('.site-logo[href]', theme)

0 commit comments

Comments
 (0)