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 @@
}
@media (min-width: 768px) {
.pagePublications > .wrap {
padding: 0 25px 0 75px;
padding: 0 25px 0 260px;
}
}
/* 1260 + navigation margins (25*2) + 70px*/
@media (min-width: 1380px) {
@media (min-width: 1280px) {
.pagePublications > .wrap {
padding: 0 25px 0 280px;
}
}
/* 1260 + navigation margins (25*2) + navigation 210px*/
@media (min-width: 1810px) {
.pagePublications > .wrap {
max-width: 1260px;
margin: 0 auto;
......@@ -59,7 +64,12 @@ summary {
cursor: pointer;
border-right: 2px solid #f7931c;
padding: 10px;
border-radius: 16px;
}
@media(min-width: 768px){
.menu-button {
padding: 0;
border-radius: 0;
}
}
.nav-check {
display: none;
......@@ -71,6 +81,24 @@ summary {
height: 100%;
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 ul {
text-align: left;
......@@ -89,30 +117,64 @@ summary {
font-size: 18px;
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 {
color: #484848;
}
.navigation a:hover {
text-decoration: underline;
}
.nav-check:checked ~ .navigation {
padding: 30px 15px 0 25px ;
width: 100%;
min-width: 230px;
.check-zone {
height:100vh;
}
label:after {
content: '>';
.sideMenu label:after {
content: 'CATEGORIES';
font-weight: bolder;
display: inline-block;
position: relative;
top: 50%;
font-size: 1.4em;
text-align: center;
font-size: 1.1em;
writing-mode: vertical-rl;
text-orientation: sideways;
padding-right: 0.9em;
padding-top: 15px;
color: #f7931c;
}
.nav-check:checked ~ label:after {
content: '<';
left: unset;
.nav-check-deactivator {
display: none;
}
@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 {
position: fixed;
......
......@@ -37,6 +37,7 @@ css: publications
</ul>
</nav>
<label for="nav-check" class="menu-button"></label>
<div class="nav-check-deactivator"></div>
</div>
<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