Impressum
@@ -43,11 +43,10 @@ import Logo from "./Logo.astro";
nav {
display: flex;
align-items: center;
- justify-content: space-between;
+ justify-content: flex-end;
flex: 1;
}
- .nav-left,
.nav-right {
display: flex;
align-items: center;
@@ -62,11 +61,15 @@ import Logo from "./Logo.astro";
#menu-toggle,
.menu-icon,
.menu-backdrop,
- #side-nav-logo {
+ .nav-left {
display: none;
}
@media only screen and (max-width: 800px) {
+ * {
+ font-size: 1.2rem;
+ }
+
.menu-icon {
display: block;
position: relative;
@@ -81,13 +84,18 @@ import Logo from "./Logo.astro";
pointer-events: none;
}
+ .mobile-nav {
+ display: block;
+ }
+
nav {
position: fixed;
top: 0;
left: 0;
width: 66vw;
+ min-width: 320px;
height: 100vh;
- padding: 32px;
+ padding: 32px 0 0 32px;
background: var(--primary-color);
display: flex;
@@ -97,7 +105,7 @@ import Logo from "./Logo.astro";
transform: translateX(-100%);
transition: transform 0.3s ease;
- z-index: 3;
+ z-index: 10;
a {
color: whitesmoke;
@@ -106,6 +114,7 @@ import Logo from "./Logo.astro";
.nav-left,
.nav-right {
+ display: flex;
flex-direction: column;
align-items: flex-start;
}
@@ -133,7 +142,7 @@ import Logo from "./Logo.astro";
transition:
opacity 0.3s ease,
visibility 0.3s ease;
- z-index: 2;
+ z-index: 9;
}
#menu-toggle:checked ~ .menu-backdrop {