Hambueger Menü
This commit is contained in:
@@ -275,10 +275,9 @@ $landingPreview = [
|
||||
.site-nav__link.active{background:rgba(var(--brand-rgb),.10);color:var(--brand);border-color:rgba(var(--brand-rgb),.18)}
|
||||
.site-mobile{display:none;position:relative}
|
||||
.site-mobile[open]{z-index:20}
|
||||
.site-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;padding:12px 14px;border-radius:16px;border:1px solid rgba(var(--brand-rgb),.12);background:#fff;color:var(--brand);font-weight:700}
|
||||
.site-toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:12px 14px;border-radius:16px;border:1px solid rgba(var(--brand-rgb),.12);background:#fff;color:var(--brand);font-weight:700}
|
||||
.site-toggle::-webkit-details-marker{display:none}
|
||||
.site-toggle::after{content:"";width:11px;height:11px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s ease}
|
||||
.site-mobile[open] .site-toggle::after{transform:rotate(225deg)}
|
||||
.site-toggle::before{content:"";display:block;width:18px;height:2px;border-radius:999px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
|
||||
.site-panel{position:absolute;right:0;top:calc(100% + 12px);width:min(320px,calc(100vw - 32px));padding:14px;border-radius:18px;border:1px solid var(--line);background:#fffdf9;box-shadow:var(--shadow)}
|
||||
.site-stack{display:grid;gap:10px}
|
||||
.site-stack .site-nav__link{justify-content:flex-start;background:rgba(255,255,255,.78);border-color:rgba(37,24,15,.08);color:var(--ink)}
|
||||
@@ -323,7 +322,7 @@ $landingPreview = [
|
||||
.marketing-mobile[open]{z-index:40}
|
||||
.marketing-mobile__toggle{display:inline-flex;align-items:center;justify-content:center;gap:10px;list-style:none;cursor:pointer;min-width:38px;min-height:38px;padding:.24rem .46rem;border-radius:8px;border:1px solid rgba(201,214,255,.14);background:rgba(255,255,255,.04);color:#f4f7ff}
|
||||
.marketing-mobile__toggle::-webkit-details-marker{display:none}
|
||||
.marketing-mobile__toggle::before{content:"";width:16px;height:10px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;box-shadow:inset 0 -4px 0 0 currentColor}
|
||||
.marketing-mobile__toggle::before{content:"";display:block;width:16px;height:2px;border-radius:999px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
|
||||
.marketing-mobile__panel{position:absolute;right:0;top:calc(100% + 10px);width:min(280px,calc(100vw - 24px));padding:14px;border-radius:16px;border:1px solid rgba(163,183,255,.14);background:rgba(8,10,18,.96);box-shadow:0 18px 36px rgba(1,5,13,.45)}
|
||||
.marketing-mobile__stack{display:grid;gap:8px}
|
||||
.marketing-mobile__stack .marketing-nav__link{justify-content:flex-start;padding:.55rem .7rem;background:rgba(255,255,255,.04);border-color:rgba(201,214,255,.1)}
|
||||
@@ -485,7 +484,7 @@ $landingPreview = [
|
||||
<?php endif; ?>
|
||||
|
||||
<details class="site-mobile">
|
||||
<summary class="site-toggle">Menue</summary>
|
||||
<summary class="site-toggle">Menü</summary>
|
||||
<div class="site-panel">
|
||||
<nav class="site-stack" aria-label="Mobile Navigation">
|
||||
<?php foreach ($primaryNavItems as $item): ?>
|
||||
|
||||
@@ -295,11 +295,12 @@
|
||||
|
||||
.mobile-nav__toggle::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 12px;
|
||||
border-top: 2px solid currentColor;
|
||||
border-bottom: 2px solid currentColor;
|
||||
box-shadow: inset 0 -4px 0 0 currentColor;
|
||||
height: 2px;
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
|
||||
}
|
||||
|
||||
.mobile-nav__panel {
|
||||
@@ -768,11 +769,12 @@
|
||||
|
||||
.marketing-mobile__toggle::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 10px;
|
||||
border-top: 2px solid currentColor;
|
||||
border-bottom: 2px solid currentColor;
|
||||
box-shadow: inset 0 -4px 0 0 currentColor;
|
||||
height: 2px;
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
|
||||
}
|
||||
|
||||
.marketing-mobile__panel {
|
||||
|
||||
@@ -101,9 +101,8 @@
|
||||
.site-mobile{display:none;position:relative}
|
||||
.site-mobile[open]{z-index:20}
|
||||
.site-toggle{
|
||||
display:flex;
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap:12px;
|
||||
cursor:pointer;
|
||||
list-style:none;
|
||||
@@ -115,16 +114,15 @@
|
||||
font-weight:700;
|
||||
}
|
||||
.site-toggle::-webkit-details-marker{display:none}
|
||||
.site-toggle::after{
|
||||
.site-toggle::before{
|
||||
content:"";
|
||||
width:11px;
|
||||
height:11px;
|
||||
border-right:2px solid currentColor;
|
||||
border-bottom:2px solid currentColor;
|
||||
transform:rotate(45deg);
|
||||
transition:transform .2s ease;
|
||||
display:block;
|
||||
width:18px;
|
||||
height:2px;
|
||||
border-radius:999px;
|
||||
background:currentColor;
|
||||
box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;
|
||||
}
|
||||
.site-mobile[open] .site-toggle::after{transform:rotate(225deg)}
|
||||
.site-panel{
|
||||
position:absolute;
|
||||
right:0;
|
||||
@@ -272,7 +270,7 @@
|
||||
<form method="post" action="/logout/"><button type="submit" class="button button--ghost">Abmelden</button></form>
|
||||
|
||||
<details class="site-mobile">
|
||||
<summary class="site-toggle">Menue</summary>
|
||||
<summary class="site-toggle">Menü</summary>
|
||||
<div class="site-panel">
|
||||
<nav class="site-stack" aria-label="Mobiles Tenant-Menü">
|
||||
<?php foreach ($tenantNavItems as $item): ?>
|
||||
|
||||
@@ -91,9 +91,8 @@
|
||||
.site-mobile{display:none;position:relative}
|
||||
.site-mobile[open]{z-index:20}
|
||||
.site-toggle{
|
||||
display:flex;
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap:12px;
|
||||
cursor:pointer;
|
||||
list-style:none;
|
||||
@@ -105,16 +104,15 @@
|
||||
font-weight:700;
|
||||
}
|
||||
.site-toggle::-webkit-details-marker{display:none}
|
||||
.site-toggle::after{
|
||||
.site-toggle::before{
|
||||
content:"";
|
||||
width:11px;
|
||||
height:11px;
|
||||
border-right:2px solid currentColor;
|
||||
border-bottom:2px solid currentColor;
|
||||
transform:rotate(45deg);
|
||||
transition:transform .2s ease;
|
||||
display:block;
|
||||
width:18px;
|
||||
height:2px;
|
||||
border-radius:999px;
|
||||
background:currentColor;
|
||||
box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;
|
||||
}
|
||||
.site-mobile[open] .site-toggle::after{transform:rotate(225deg)}
|
||||
.site-panel{
|
||||
position:absolute;
|
||||
right:0;
|
||||
@@ -242,7 +240,7 @@
|
||||
<form method="post" action="/logout/"><button type="submit" class="button button--ghost">Abmelden</button></form>
|
||||
|
||||
<details class="site-mobile">
|
||||
<summary class="site-toggle">Menue</summary>
|
||||
<summary class="site-toggle">Menü</summary>
|
||||
<div class="site-panel">
|
||||
<nav class="site-stack" aria-label="Mobiles Tenant-Menü">
|
||||
<?php foreach ($tenantNavItems as $item): ?>
|
||||
|
||||
Reference in New Issue
Block a user