timmypidashev/web
1
0
Fork 0
mirror of https://github.com/timmypidashev/web.git synced 2026-04-14 11:03:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make the header responsive

Browse Source
This commit is contained in:
Timothy Pidashev
2024-03-19 11:26:56 -07:00
parent 2acb40c90c
commit 9720e6faf4
1 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/web/src/components/header.jsx
View File

@@ -53,7 +53,13 @@ function Header() {
onClick={() => setActiveTab(tab.id)} onClick={() => setActiveTab(tab.id)}
className={`${ className={`${
activeTab === tab.id ? "" : "" activeTab === tab.id ? "" : ""
} relative rounded-full px-3 py-1.5 text-sm text-light-foreground dark:text-dark-foreground transition-all focus-visible:outline-2`} }
flex justify-center relative rounded-full
lg:px-6 md:px-5 sm:px-4 lg:py-1.5 md:py-1.5 sm:py-1.5
lg:mr-8 md:mr-4 sm:mr-2 lg:mb-1 md:mb-1 sm:mb-1
lg:text-4xl md:text-3xl sm:text-2xl font-bold text-light-foreground dark:text-dark-foreground
transition-all focus-visible:outline-2
`}
style={{ style={{
WebkitTapHighlightColor: "transparent", WebkitTapHighlightColor: "transparent",
}} }}
@@ -66,7 +72,7 @@ function Header() {
{activeTab === tab.id && ( {activeTab === tab.id && (
<motion.div <motion.div
layoutId="underline" layoutId="underline"
className={`absolute inset-x-0 bottom-0 h-1 ${tabColors[tab.color]}`} className={`absolute inset-x-0 lg:bottom-0.5 md:bottom-0.5 sm:bottom-0.5 lg:h-1.5 md:h-1.5 sm:h-1 ${tabColors[tab.color]}`}
style={{ marginLeft: "0.75em", marginRight: "0.75em", borderRadius: 9999 }} style={{ marginLeft: "0.75em", marginRight: "0.75em", borderRadius: 9999 }}
transition={{ type: "spring", bounce: 0.2, duration: 0.6 }} transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
/> />