publis

assets/css/publications.css

@@ -2,52 +2,27 @@
 /* Colors */
 /* Global Media Queries */
 /* Direction */
+
 .pagePublications {
-  display:block;
-  padding-top: 30px;
+  padding-top: 40px;
 }
 @media (min-width:  768px) {
   .pagePublications {
-    padding-top: 60px;
+    padding-top: 70px;
   }
 }
-.wrap {
-  max-width: 1260px;
+.pagePublications > .wrap {
+  position: relative;
   margin: 0 auto;
-  padding: 0 25px;
+  padding: 0 25px 0 95px;
   z-index: 2;
 }
-.publicationWrap > .publicationMenu > .pageTitle {
-  text-align: center;
-  display: block;
-  margin: 25px 0;
-  width: 100%;
-}
-.publicationWrap > .publicationMenu ,
-.publicationWrap > .publicationZone {
-  display: block;
-}
-
-@media(min-width: 768px) {
-  .publicationWrap {
-    display: flex;
-  }
-  .publicationWrap > .publicationMenu {
-    margin: 0 auto auto 0;
-    overflow: auto;
-  }
-  .publicationWrap > .publicationMenu > nav {
-    position: fixed;
-  }
-  .publicationWrap > .publicationZone {
-    width: 80%;
-    padding-left: 25px;
-  }
-  .publicationWrap > .publicationZone > h1:first {
-    margin-top: 0;
-  }
-  .publicationWrap > .publicationMenu > .pageTitle {
-    padding: 0;
+/* 1260 + navigation margins (25*2) + 70px*/
+@media (min-width: 1380px) {
+  .pagePublications > .wrap {
+    max-width: 1260px;
+    margin: 0 auto;
+    padding: 0 25px;
   }
 }
 
@@ -72,30 +47,31 @@ summary {
 	color: black !important;
 }
 .menu-button {
+  display: block;
   text-align: center;
   background: none;
-	cursor: pointer;
-	transition: border-bottom 1s ease-in-out;
-	-webkit-transition: border-bottom 1s ease-in-out; 
-}
-.menu-button[attr="end"] {
-  display: none;
+  cursor: pointer;
+  border-right: 4px solid #f7931c;
+  border-left: 4px solid #f7931c;
+  padding: 10px;
 }
-.nav-check:checked ~ .menu-button[attr="end"] {
-  margin-top: 0;
-  display: block;
+.nav-check:checked ~ .menu-button {
+  border-left: none;
 }
 .nav-check {
   display: none;
 }
 .navigation {
-  overflow: hidden;
-  height: 0;
-  transition: 0 0.5s ease-in-out;
+  display: block;
+  overflow-y: auto;
+  overflow-x: visible;
+  height: 100%;
+  width: 0;
+  padding: 0 ;
 }
 .navigation li,
 .navigation ul {
-  text-align: center;
+  text-align: left;
   margin-left: 0;
   padding-left: 0;
 }
@@ -114,54 +90,32 @@ summary {
   color: #484848;
 }
 .navigation a:hover {
-  color: #f7931c;
+  text-decoration: underline;
 }
 .nav-check:checked ~ .navigation {
-  height: 100%;
-  transition: 500px 0.5s ease-in-out;
-}
-@media(min-width: 768px){
-  .navigation {
-    height: 100%;
-  }
-  .navigation li,
-  .navigation ul {
-    margin-top: 0;
-    text-align: left;
-  }
-}
-
-label h2 {
-  margin: 0 auto;
-  padding-bottom: 0;
+  padding: 30px 15px 0 25px ;
+  width: 100%;
+  min-width: 230px;
 }
-label h2:before,
-label h2:after {
-  content: '↓';
+label:after {
+  content: '>';
+  font-weight: bolder;
   display: inline-block;
-  /* customize below */
-  font-size: 1em;
-  padding-right: 0.6em;
-  padding-left: 0.6em;
-  width: 1.6em;
-  line-height: 1.6em;
+  position: relative;
+  top: 50%;
+  font-size: 1.4em;
   text-align: center;
-  border-radius: 50%;
   color: #f7931c;
 }
-.nav-check:checked ~ label h2:before,
-.nav-check:checked ~ label h2:after {
-  content: '↑';
+.nav-check:checked ~ label:after {
+  content: '<';
+  left: unset;
+}
+.sideMenu {
+  position: fixed;
+  height: 100vh;
+  display: inline-flex;
+  padding-top: 65px;
+  background: white;
+  z-index: 3;
 }
-
-@media(min-width: 768px){
-  label h2:before,
-  label h2:after,
-  .nav-check:checked ~ label h2:before,
-  .nav-check:checked ~ label h2:after,
-  label h2 {
-    content: '';
-    overflow: hidden;
-    height: 0;
-  }
-}
\ No newline at end of file