Make web header bigger on desktop

This commit is contained in:
Robin Whittleton 2021-07-27 21:02:02 +02:00 committed by Alex Cabal
parent 3b53b4b991
commit 1a7f055852

View file

@ -4,7 +4,7 @@ body{
font-family: Georgia, serif; font-family: Georgia, serif;
font-size: 18px; font-size: 18px;
padding: 0 3em; padding: 0 3em;
margin: 6em auto 3em; margin: 8em auto 3em;
max-width: 55ch; max-width: 55ch;
} }
@ -18,15 +18,10 @@ body > header{
box-shadow: 0 0 3px #ccc; box-shadow: 0 0 3px #ccc;
} }
@media(max-width: 96ch){
body > header{
position: fixed;
}
}
body > header ul{ body > header ul{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0.5em 1em; padding: 0.5em 1em;
@ -34,10 +29,21 @@ body > header ul{
body > header li:first-child > a{ body > header li:first-child > a{
display: block; display: block;
width: 90px; width: 180px;
height: 21px; height: 42px;
background: no-repeat center/100% url(/images/logo-full.svg); background: no-repeat center/100% url(/images/logo-full.svg);
text-indent: -999em; font-size: 0;
}
@media(max-width: 96ch){
body > header{
position: fixed;
}
body > header li:first-child > a{
width: 90px;
height: 21px;
}
} }
body > nav, body > nav,