Skip to content
Snippets Groups Projects
Commit 940032d2 authored by Allan Blanchard's avatar Allan Blanchard
Browse files

Publication: side menu - changes visibility

- always visible on wide screen
- named "categories" when in mobile mode
- change font size to follow the rest of website
parent 4f24739e
No related branches found
No related tags found
1 merge request!51Improve (and provide some fixes in) publications and documentation
...@@ -19,11 +19,16 @@ ...@@ -19,11 +19,16 @@
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pagePublications > .wrap { .pagePublications > .wrap {
padding: 0 25px 0 75px; padding: 0 25px 0 260px;
} }
} }
/* 1260 + navigation margins (25*2) + 70px*/ @media (min-width: 1280px) {
@media (min-width: 1380px) { .pagePublications > .wrap {
padding: 0 25px 0 280px;
}
}
/* 1260 + navigation margins (25*2) + navigation 210px*/
@media (min-width: 1810px) {
.pagePublications > .wrap { .pagePublications > .wrap {
max-width: 1260px; max-width: 1260px;
margin: 0 auto; margin: 0 auto;
...@@ -59,7 +64,12 @@ summary { ...@@ -59,7 +64,12 @@ summary {
cursor: pointer; cursor: pointer;
border-right: 2px solid #f7931c; border-right: 2px solid #f7931c;
padding: 10px; padding: 10px;
border-radius: 16px; }
@media(min-width: 768px){
.menu-button {
padding: 0;
border-radius: 0;
}
} }
.nav-check { .nav-check {
display: none; display: none;
...@@ -71,6 +81,24 @@ summary { ...@@ -71,6 +81,24 @@ summary {
height: 100%; height: 100%;
width: 0; width: 0;
} }
@media(min-width: 768px){
.navigation {
padding: 30px 15px 0 25px ;
width: 100%;
min-width: 190px;
}
}
@media(min-width: 1280px){
.navigation {
min-width: 210px;
}
}
.nav-check:checked ~ .navigation {
padding: 30px 15px 0 25px ;
width: 100%;
min-width: 210px;
}
.navigation li, .navigation li,
.navigation ul { .navigation ul {
text-align: left; text-align: left;
...@@ -89,30 +117,64 @@ summary { ...@@ -89,30 +117,64 @@ summary {
font-size: 18px; font-size: 18px;
font-weight: normal; font-weight: normal;
} }
@media(min-width:768px){
.navigation > ul {
font-size: 18px;
}
.navigation > ul > li > ul {
font-size: 16px;
}
}
@media(min-width:1280px){
.navigation > ul {
font-size: 20px;
}
.navigation > ul > li > ul {
font-size: 18px;
}
}
.navigation a { .navigation a {
color: #484848; color: #484848;
} }
.navigation a:hover { .navigation a:hover {
text-decoration: underline; text-decoration: underline;
} }
.nav-check:checked ~ .navigation { .check-zone {
padding: 30px 15px 0 25px ; height:100vh;
width: 100%;
min-width: 230px;
} }
label:after { .sideMenu label:after {
content: '>'; content: 'CATEGORIES';
font-weight: bolder; font-weight: bolder;
display: inline-block; display: inline-block;
position: relative; position: relative;
top: 50%; font-size: 1.1em;
font-size: 1.4em; writing-mode: vertical-rl;
text-align: center; text-orientation: sideways;
padding-right: 0.9em;
padding-top: 15px;
color: #f7931c; color: #f7931c;
} }
.nav-check:checked ~ label:after { .nav-check-deactivator {
content: '<'; display: none;
left: unset; }
@media(min-width:768px){
.sideMenu label:after {
display: none;
}
.nav-check-deactivator {
display: block;
position: fixed;
background: transparent;
height:100vh;
width:6px;
z-index: 4;
left: 230px;
}
}
@media(min-width:1280px){
.nav-check-deactivator {
left: 250px;
}
} }
.sideMenu { .sideMenu {
position: fixed; position: fixed;
......
...@@ -37,6 +37,7 @@ css: publications ...@@ -37,6 +37,7 @@ css: publications
</ul> </ul>
</nav> </nav>
<label for="nav-check" class="menu-button"></label> <label for="nav-check" class="menu-button"></label>
<div class="nav-check-deactivator"></div>
</div> </div>
<div id="wrapper" class="hfeed"> <div id="wrapper" class="hfeed">
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment