Add dismissible localized access banner

This commit is contained in:
Timo
2026-07-15 13:20:00 +02:00
parent 285c04e00d
commit 03121477a8
19 changed files with 62 additions and 2 deletions
+31 -1
View File
@@ -109,6 +109,7 @@ nav.nav-scrolled + .site-access-banner {
}
.site-access-banner-inner {
position: relative;
min-height: 50px;
display: flex;
align-items: center;
@@ -118,6 +119,8 @@ nav.nav-scrolled + .site-access-banner {
font-size: 0.9rem;
font-weight: 650;
text-align: center;
padding-right: 4rem;
padding-left: 4rem;
}
.site-access-banner-icon {
@@ -148,6 +151,29 @@ nav.nav-scrolled + .site-access-banner {
color: var(--text);
}
.site-access-banner-dismiss {
position: absolute;
right: 2rem;
top: 50%;
transform: translateY(-50%);
display: inline-grid;
place-items: center;
width: 2rem;
height: 2rem;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--text-muted);
cursor: pointer;
}
.site-access-banner-dismiss:hover,
.site-access-banner-dismiss:focus-visible {
background: color-mix(in oklch, var(--accent) 18%, transparent);
color: var(--text);
}
@media (max-width: 768px) {
.site-access-banner {
top: 73px;
@@ -159,7 +185,7 @@ nav.nav-scrolled + .site-access-banner {
.site-access-banner-inner {
min-height: 64px;
padding-block: 0.65rem;
padding: 0.65rem 3rem 0.65rem 1rem;
gap: 0.5rem;
flex-wrap: wrap;
font-size: 0.8rem;
@@ -170,6 +196,10 @@ nav.nav-scrolled + .site-access-banner {
height: 1.3rem;
font-size: 0.75rem;
}
.site-access-banner-dismiss {
right: 0.75rem;
}
}
* {