Skip to content

Commit 0a9ea6e

Browse files
committed
style: enhance CustomHeader responsiveness and update global CSS variable
- Adjusted the CustomHeader component to improve element visibility on different screen sizes, ensuring a better user experience. - Added a new CSS variable for navigation height in global styles to support layout consistency.
1 parent 8381c1b commit 0a9ea6e

File tree

2 files changed

+13
-7
lines changed

2 files changed

+13
-7
lines changed

src/components/ui/CustomHeader.astro

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,19 @@ import ThemeSelect from "@astrojs/starlight/components/ThemeSelect.astro";
55
---
66

77
<nav class="flex items-center justify-between">
8-
<h1 class="font-[Geist] text-xl flex items-center">
9-
<span class="hidden md:block">tutorials.</span>
10-
<span class="text-[#02BCFF] hidden md:block">angular.</span>
11-
<span class="hidden md:block">courses</span>
8+
<h1 class="font-[Geist] text-base md:text-xl flex items-center">
9+
<span class="">tutorials.</span>
10+
<span class="text-[#02BCFF]">angular.</span>
11+
<span class="">courses</span>
1212
</h1>
1313
<Search />
1414
<div class="flex items-center gap-6">
1515
<div class="flex items-center gap-4">
1616
<SocialIcons />
1717
</div>
18-
<hr class="h-4 w-px bg-gray-400 dark:bg-gray-500" />
19-
<ThemeSelect />
20-
</div>
18+
<hr class="hidden md:block h-4 w-px bg-gray-400 dark:bg-gray-500" />
19+
<div class="hidden md:block">
20+
<ThemeSelect />
21+
</div>
22+
</div>
2123
</nav>

src/styles/global.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,10 @@ main .content-panel {
3737
padding-block-end: 0 !important;
3838
}
3939

40+
html {
41+
--sl-nav-height: 4rem;
42+
}
43+
4044
@theme {
4145
/*
4246
Configure your Tailwind theme that will be used by Starlight.

0 commit comments

Comments
 (0)