cry/wa2k.com
1
0
Fork 0
forked from UniverseBow/wa2k.com-Website
Code Pull requests Activity

navigation bar finished

Browse source
This commit is contained in:
UniverseBow 2026-03-15 12:40:12 -07:00
parent 63a3fda67c
commit b22976bf85
2 changed files with 70 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

47
www/style.css
View file

@ -10,7 +10,7 @@ body {
}
.banner {
width: 70%;
width: 99%;
max-height: 280px;
overflow: hidden;
margin: 5px 5px 10px 5px; /* 5px on top/left/right, 10px on bottom */
@ -128,8 +128,8 @@ p {
inset 1px 1px 0 rgba(255, 255, 255, 0.45),
inset -1px -1px 0 rgba(0, 0, 0, 0.10);
overflow: hidden;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ── Pill expands and corners soften when open ── */
@ -137,7 +137,7 @@ p {
border-radius: 22px;
width: 200px;
}
/* ── The always-visible top bar: logo + chevron ── */
.nav-pill-bar {
display: flex;
@ -148,14 +148,14 @@ p {
cursor: pointer;
user-select: none;
}
.nav-logo {
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.88);
letter-spacing: 0.06em;
}
/* ── Chevron rotates 180° when open ── */
.nav-chevron {
width: 16px;
@ -163,45 +163,56 @@ p {
flex-shrink: 0;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-pill.open .nav-chevron {
transform: rotate(180deg);
}
/* ── Dropdown — hidden by default, slides down when open ── */
.nav-dropdown {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.2s ease;
/* Opening: wait for width to finish first, then drop down */
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.22s,
opacity 0.25s ease 0.22s;
}
.nav-pill.open .nav-dropdown {
max-height: 300px;
opacity: 1;
}
/* Closing: dropdown collapses immediately (no delay), width waits after */
.nav-pill:not(.open) .nav-dropdown {
transition: max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.15s ease;
}
/* Width/radius collapse waits for dropdown to finish */
.nav-pill:not(.open) {
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
.nav-divider {
height: 1px;
background: rgba(255, 255, 255, 0.12);
margin: 0 14px;
}
.nav-link {
display: block;
padding: 11px 18px;
font-size: 14px;
font-weight: 300;
text-align: center;
color: rgba(2, 2, 5, 1);
color: rgba(255, 255, 255, 0.70);
text-decoration: none;
transition: color 0.15s ease,
background 0.15s ease;
}
.nav-link:hover {
color: rgba(255, 255, 255, 0.95);
background: rgba(255, 255, 255, 0.06);
}
}