michael_dileo/Keyboard-Vagabond-Web
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix styling of headers and nav bar

Browse Source
This commit is contained in:
Michael DiLeo
2026-06-09 15:07:50 +09:00
parent a7f8da3ff1
commit 9e1ca62515
7 changed files with 212 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/site-styles/style.css
+87 -87
View File
@@ -2,6 +2,7 @@
position: relative;
width: 100%;
overflow: hidden;
margin-bottom: 0;
}
.banner-container picture {
@@ -24,108 +25,69 @@
display: block;
}
.banner-title,
.banner-subtitle {
position: static;
width: 100%;
max-width: none;
margin-left: auto;
margin-right: auto;
padding-left: var(--pico-spacing);
padding-right: var(--pico-spacing);
box-sizing: border-box;
text-shadow: none;
}
.banner-title {
position: absolute;
top: var(--pico-spacing);
left: var(--pico-spacing);
right: var(--pico-spacing);
color: white; /* Keep white for banner overlay readability */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
margin: 0;
margin-top: var(--pico-spacing);
margin-bottom: 0;
color: var(--pico-h1-color);
font-family: var(--pico-font-family);
font-size: 2.5rem;
font-size: 1.8rem;
font-weight: 700;
z-index: 10;
}
.banner-subtitle {
position: absolute;
bottom: var(--pico-typography-spacing-vertical);
left: var(--pico-spacing);
right: var(--pico-spacing);
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
margin: 0;
margin-top: 0;
margin-bottom: var(--pico-spacing);
color: var(--pico-muted-color);
font-family: var(--pico-font-family);
font-size: var(--pico-font-size);
font-weight: var(--pico-font-weight);
z-index: 10;
}
/* Responsive positioning to match Pico container */
@media (min-width: 576px) {
.banner-title {
left: 50%;
right: auto;
transform: translateX(-50%);
max-width: 510px;
width: 100%;
}
}
@media (min-width: 768px) {
.banner-title {
max-width: 700px;
}
}
@media (min-width: 1024px) {
.banner-title {
max-width: 950px;
}
}
@media (min-width: 1280px) {
.banner-title {
max-width: 1200px;
}
}
@media (min-width: 1536px) {
.banner-title {
max-width: 1450px;
}
}
@media (max-width: 768px) {
.banner-title {
font-size: 1.8rem;
top: calc(var(--pico-typography-spacing-vertical) * 0.5);
/* left: 50%; */
right: auto;
/* transform: translateX(-50%); */
}
}
@media (min-width: 576px) {
.banner-title,
.banner-subtitle {
left: 50%;
right: auto;
transform: translateX(-50%);
max-width: 510px;
width: 100%;
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 768px) {
.banner-title,
.banner-subtitle {
max-width: 700px;
}
}
@media (min-width: 1024px) {
.banner-title,
.banner-subtitle {
max-width: 950px;
}
}
@media (min-width: 1280px) {
.banner-title,
.banner-subtitle {
max-width: 1200px;
}
}
@media (min-width: 1536px) {
.banner-title,
.banner-subtitle {
max-width: 1450px;
}
@@ -235,17 +197,19 @@
color: #2d5016 !important;
} */
/* Theme toggle button styling */
/* Theme toggle button styling — match nav link height */
#theme-toggle {
margin: 0;
padding: calc(var(--pico-spacing) * 0.5);
margin: calc(var(--pico-nav-link-spacing-vertical) * -1) calc(var(--pico-nav-link-spacing-horizontal) * -1);
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
min-height: auto;
height: auto;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--pico-border-radius);
font-size: 1.2rem;
transition: all 0.2s ease;
font-size: inherit;
line-height: var(--pico-line-height);
transition: transform 0.2s ease;
}
#theme-toggle:hover {
@@ -268,6 +232,10 @@
display: flex;
}
.nav-pages-dropdown {
display: none;
}
/* Mobile breakpoint - hide desktop nav and show mobile nav */
@media (max-width: 767px) {
.desktop-nav {
@@ -277,6 +245,15 @@
.mobile-nav {
display: flex;
flex: 0 0 auto;
gap: calc(var(--pico-spacing) * 0.5);
}
.nav-page-link {
display: none;
}
.nav-pages-dropdown {
display: inline-block;
}
/* Arrange mobile nav items horizontally */
@@ -304,12 +281,19 @@
margin: 0;
}
.mobile-nav .dropdown {
.mobile-nav li,
.nav-pages-dropdown {
position: relative;
}
.mobile-nav .dropdown,
.nav-pages-dropdown .dropdown {
width: auto;
min-width: 120px;
min-width: auto;
}
.mobile-nav .dropdown summary {
.mobile-nav .dropdown summary,
.nav-pages-dropdown .dropdown summary {
margin: 0;
padding: calc(var(--pico-spacing) * 0.5) var(--pico-spacing);
border-radius: var(--pico-border-radius);
@@ -317,16 +301,18 @@
user-select: none;
}
.mobile-nav .dropdown[open] summary {
.mobile-nav .dropdown[open] summary,
.nav-pages-dropdown .dropdown[open] summary {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.mobile-nav .dropdown ul {
.mobile-nav .dropdown ul,
.nav-pages-dropdown .dropdown ul {
position: absolute;
top: 100%;
left: 0;
right: 0;
width: auto;
min-width: 100%;
background: var(--pico-background-color);
border: 1px solid var(--pico-muted-border-color);
border-top: none;
@@ -336,18 +322,32 @@
margin: 0;
padding: 0;
list-style: none;
white-space: nowrap;
}
.mobile-nav .dropdown ul {
left: 0;
right: auto;
}
.nav-pages-dropdown .dropdown ul {
left: auto;
right: 0;
}
.mobile-nav .dropdown ul li {
.mobile-nav .dropdown ul li,
.nav-pages-dropdown .dropdown ul li {
margin: 0;
border-bottom: 1px solid var(--pico-muted-border-color);
}
.mobile-nav .dropdown ul li:last-child {
.mobile-nav .dropdown ul li:last-child,
.nav-pages-dropdown .dropdown ul li:last-child {
border-bottom: none;
}
.mobile-nav .dropdown ul li a {
.mobile-nav .dropdown ul li a,
.nav-pages-dropdown .dropdown ul li a {
display: block;
padding: calc(var(--pico-spacing) * 0.75) var(--pico-spacing);
text-decoration: none;
@@ -355,15 +355,11 @@
transition: background-color 0.2s ease;
}
.mobile-nav .dropdown ul li a:hover {
.mobile-nav .dropdown ul li a:hover,
.nav-pages-dropdown .dropdown ul li a:hover {
background-color: var(--pico-muted-color);
opacity: 0.1;
}
/* Ensure proper positioning context */
.mobile-nav li {
position: relative;
}
}
/* Services Summary Styling */
@@ -501,6 +497,10 @@ header nav {
align-items: flex-start;
flex-wrap: wrap;
}
header nav > ul {
align-items: flex-start;
}
.main-nav {
order: 1;