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

assets/css/publications.css

@@ -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;

html/publications.html

@@ -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">