standardebooks/web
1
0
Fork 0
mirror of https://github.com/standardebooks/web.git synced 2025-07-07 15:20:32 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adjust header nav item centering in responsive modes

Browse source
This commit is contained in:
Alex Cabal 2020-12-21 21:52:05 -06:00
parent d9a1a8affd
commit a7f0df16ea
1 changed files with 26 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

41
www/css/core.css
View file

@ -2068,12 +2068,22 @@ main.ebooks nav ol li.highlighted:nth-last-child(2)::after{
} }
body > header ul{ body > header ul{
display: grid; display: flex;
grid-template-columns: 1fr 1fr; flex-wrap: wrap;
justify-content: center;
margin: 1rem; margin: 1rem;
margin-bottom: 0; margin-bottom: 0;
} }
body > header ul li:nth-child(2){
display: contents;
}
body > header ul li:nth-child(2)::after{
content: "";
width: 100%;
}
body > header ul li{ body > header ul li{
margin: 0; margin: 0;
} }
@ -2081,10 +2091,6 @@ main.ebooks nav ol li.highlighted:nth-last-child(2)::after{
body > header ul li:nth-child(odd)::before{ body > header ul li:nth-child(odd)::before{
display: none; display: none;
} }
body > header ul li:nth-child(2n){
justify-self: start;
}
} }
@media(max-width: 500px){ @media(max-width: 500px){
@ -2237,25 +2243,30 @@ main.ebooks nav ol li.highlighted:nth-last-child(2)::after{
form[action="/ebooks"] button{ form[action="/ebooks"] button{
grid-row: 6; grid-row: 6;
} }
}
@media(max-width: 380px){
body > header ul li:nth-child(2n)::after{
display: none;
}
body > header ul{ body > header ul{
grid-template-columns: 1fr; flex-direction: column;
justify-content: center;
grid-gap: calc(1rem - 5px); /* subtract invisible 5px bottom border */
} }
body > header ul li::before{ body > header ul li::before{
display: none; display: none;
} }
body > header ul li, body > header ul li + li{
body > header ul li:nth-child(2n){ margin-top: 1rem;
text-align: center;
justify-self: center;
} }
body > header ul li,
body > header ul li:nth-child(2n){
height: 1rem;
text-align: center;
display: block;
}
} }
@supports not(hyphens: auto){ @supports not(hyphens: auto){