platypush/platypush-home
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Finalized responsive navigation menu

Browse source
This commit is contained in:
fabio-eiq 2021-02-05 16:20:07 +01:00
parent 98d1bd5538
commit 686611a04c
1 changed files with 42 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
www/css/application.css
View file

@ -120,6 +120,7 @@ main section {
width: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
}
main section:nth-child(even) {
@ -132,10 +133,20 @@ main section .title {
padding: 1em 0;
}
main section .left,
main section .right {
@media screen and (max-width: 799px) {
main section .left,
main section .right {
width: calc(100% - 2em);
padding: .5em 1em;
}
}
@media screen and (min-width: 800px) {
main section .left,
main section .right {
width: calc(50% - 2em);
padding: 1em;
}
}
main section img {
@ -158,11 +169,36 @@ main section img {
#mobile-menu.visible {
width: 10em;
height: calc(100% - .1em);
position: absolute;
top: .1em;
position: fixed;
top: 2.75em;
right: 0;
display: flex;
flex-direction: column;
background: white;
box-shadow: 0 3px 3px 3px #bbb;
}
#mobile-menu .item {
height: 2.5em;
display: flex;
font-family: 'Poppins', sans-serif;
font-weight: 300;
box-shadow: 2px 2px 1px -1px #bbb;
}
#mobile-menu .item:hover {
background: #d8ffe8;
}
#mobile-menu .item a {
width: calc(100% - 1em);
height: calc(100% - 1em);
padding: .5em;
color: initial;
text-decoration: none;
}
#mobile-menu .item a:hover {
opacity: .6;
}