rubberducky/milinda-pitch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/site-header (#1)

Browse Source 
Co-authored-by: Tim Rijkse <trijkse@gmail.com>
Reviewed-on: #1
This commit was merged in pull request #1.
This commit is contained in:
rubberducky
2026-01-15 07:49:01 +00:00
parent 6816650ea5
commit 49d22484c0
17 changed files with 625 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
js/components/horizontal-scroll-nav.js
View File

@@ -59,11 +59,13 @@ class HorizontalScrollNav extends HTMLElement {
.nav-container {
display: flex;
gap: var(--spacing-sm, 0.5rem);
align-items: center;
height: 80px;
gap: 24px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
padding: 0 16px;
}
.nav-container::-webkit-scrollbar {
@@ -72,29 +74,39 @@ class HorizontalScrollNav extends HTMLElement {
.nav-pill {
flex-shrink: 0;
padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
font-size: var(--font-size-sm, 0.875rem);
height: 32px;
padding: 0;
font-family: var(--font-family-base);
font-size: var(--font-size-base, 16px);
font-weight: var(--font-weight-medium, 500);
color: var(--color-text-light, #64748b);
background-color: var(--color-background-tertiary, #f1f5f9);
line-height: var(--line-height-24, 24px);
color: #000000;
background-color: transparent;
border: none;
border-radius: var(--radius-full, 9999px);
border-radius: 0;
cursor: pointer;
transition: all var(--transition-fast, 150ms ease);
white-space: nowrap;
text-decoration: underline;
text-underline-offset: 4px;
display: flex;
align-items: center;
}
.nav-pill:hover {
background-color: var(--color-border, #e2e8f0);
color: #333333;
}
.nav-pill.active {
color: var(--color-text-inverse, #ffffff);
background-color: var(--color-primary, #2563eb);
color: #ffffff;
background-color: #951D51;
text-decoration: none;
border-radius: 9999px;
padding: 0 16px;
}
.nav-pill.active:hover {
background-color: var(--color-primary-dark, #1d4ed8);
background-color: #7a1843;
}
</style>
<nav class="nav-container" role="navigation" aria-label="Book categories">