themes/blue: fix mega menu

This commit is contained in:
Starbeamrainbowlabs 2020-07-28 22:21:18 +01:00
parent a497f7aea1
commit 1512be4f0f
Signed by: sbrl
GPG Key ID: 1BE5172E637709C2
1 changed files with 44 additions and 3 deletions

View File

@ -35,6 +35,12 @@ nav.bottom{
right:0;
box-shadow:inset 0 0.8rem 0.8rem -0.5rem rgba(50, 50, 50, 0.5);
}
nav.mega-menu { display: flex; flex-direction: row; padding-bottom: 0.4em; border-left: 3px solid #32329E; border-right: 3px solid #32329E; }
nav.mega-menu .category { padding: 0.3em 1em; }
nav.mega-menu strong { display: block; }
nav.mega-menu span { display: block; }
nav > span{
flex:1;
text-align:center;
@ -67,15 +73,17 @@ nav:not(.nav-more-menu) a{
position:absolute;
flex-direction:column;
top:2.6rem;
right:-0.2rem;
right: 100000px;
background-color:#1F2A7E;
border-top:3px solid #32329E;
border-bottom:3px solid #32329E;
}
input[type=checkbox]:checked ~ .nav-more-menu{
display:block;
display:flex;
right:-0.2rem;
box-shadow:0.4rem 0.4rem 1rem 0 rgba(50, 50, 50, 0.5);
}
.nav-more-menu span{
min-width:10rem;
}
@ -512,7 +520,8 @@ summary{
.similar-page-suggestions { padding: 1em 2em; background: var(--bg-page-inset); /*box-shadow: 0 0.1rem 1rem 0.3rem var(--shadow);*/ }
.similar-page-suggestions > h2 { text-align: center; }
.similar-page-suggestions-list { list-style-type: none; display: flex; flex-wrap: wrap; justify-content: space-evenly; }
.similar-page-suggestions-list { list-style-type:none;
padding: 0; display: grid; grid:auto / repeat(auto-fit, minmax(min(15em, 100%), 1fr)); justify-items: center; grid-gap: 1em; }
.comments{
padding:1em 2em;
@ -570,3 +579,35 @@ summary{
footer{
padding:2rem;
}
/* Small screen adjustments */
@media (max-width: 480px) {
body {
margin: 0;
}
nav.top, nav.bottom {
position: static;
flex-direction: column;
}
input[type=checkbox]:checked ~ .nav-more-menu {
position: static;
}
nav.mega-menu {
flex-direction: column;
}
nav.top > span:first-child {
border-top: 3px solid var(--accent-a3);
}
main:not(.printable) {
padding: 1em 1em 0.5em 1em;
}
.comments {
padding: 1em;
}
footer {
padding: 1em;
}
}