ebby/Bluewaterblog
1
0
Fork 0
Code Issues 10 Pull requests Projects Releases Packages Wiki Activity Actions

fixed errors and made text bigger on mobile
All checks were successful
Build and Deploy Astro App / build_and_deploy (push) Successful in 49s
Details

Browse source
This commit is contained in:
Chiara 2026-08-22 18:14:39 +02:00
parent 1dcfb77157
commit f96c562155
1 changed files with 17 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
blog/src/components/Header.astro
View file

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