header et menu v0

web/themes/custom/popsu/css/styles.css

@@ -1162,34 +1162,98 @@ main h2 {
 a {
   color: inherit; }
 
-.close-block, .open-block {
-  background: red;
-  cursor: pointer; }
+iframe {
+  display: none; }
+
+/*pages*/
+#header-top {
+  height: 3rem; }
 
 .header_top_left_container {
-  height: 3rem; }
-  .header_top_left_container #block-identitedusite {
+  height: 100%; }
+  .header_top_left_container > div:first-child {
     height: 100%; }
-    .header_top_left_container #block-identitedusite a[rel~='home'] {
-      height: 100%;
-      display: block;
-      color: transparent;
-      background: left/contain no-repeat url(../images/popsu-home-logo.png); }
+  .header_top_left_container a[rel~='home'] {
+    height: 100%;
+    display: block;
+    color: transparent;
+    background: left/contain no-repeat url(../images/popsu-home-logo.png); }
 
 .header_top_middle_container {
-  background: red; }
+  height: 100%; }
+  .header_top_middle_container .views-element-container {
+    height: 100%; }
+    .header_top_middle_container .views-element-container > div:first-child {
+      height: 100%; }
+      .header_top_middle_container .views-element-container > div:first-child > div:first-child {
+        height: 100%;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        align-items: center; }
   .header_top_middle_container .views-row {
+    text-align: center;
     display: inline-block;
     width: auto; }
+    .header_top_middle_container .views-row a {
+      text-transform: uppercase;
+      text-decoration: none;
+      font-weight: 600; }
+    .header_top_middle_container .views-row .views-field-title {
+      display: inline-block;
+      width: auto;
+      padding: .2rem .5rem; }
+  .header_top_middle_container .popsu-node-3 .views-field-title {
+    color: blue; }
+    .header_top_middle_container .popsu-node-3 .views-field-title:hover {
+      background: blue;
+      color: white; }
+  .header_top_middle_container .popsu-node-5 .views-field-title {
+    color: wheat; }
+    .header_top_middle_container .popsu-node-5 .views-field-title:hover {
+      background: wheat;
+      color: white; }
+  .header_top_middle_container .popsu-node-7 .views-field-title {
+    color: red; }
+    .header_top_middle_container .popsu-node-7 .views-field-title:hover {
+      background: red;
+      color: white; }
+
+.close-block, .open-block {
+  cursor: pointer; }
+  .close-block span, .open-block span {
+    display: block;
+    width: 33px;
+    height: 2px;
+    position: relative;
+    background: black;
+    border-radius: 3px;
+    z-index: 1; }
+
+.close-block {
+  padding-top: 1rem; }
+  .close-block span {
+    transform-origin: center; }
+  .close-block > div > span:first-child {
+    transform: translateY(57%) rotate(45deg); }
+  .close-block > div > span:nth-child(2) {
+    transform: rotate(-45deg); }
+
+.open-block {
+  height: 100%;
+  display: grid;
+  align-items: center; }
+  .open-block span {
+    margin-bottom: 5px;
+    transform-origin: 4px 0px; }
 
 #header-top-right .header_top_right_container {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  background: #a1a1a1;
+  background: white;
   display: none;
-  grid-template-columns: 5% 30% 30% 30% 5%;
+  grid-template-columns: 10% 25% 25% 30% 10%;
   padding: 1rem 0;
   z-index: 100;
   line-height: 2; }
@@ -1205,21 +1269,12 @@ a {
     margin-bottom: .3rem; }
   #header-top-right .header_top_right_container .is-active {
     font-weight: 800; }
-  #header-top-right .header_top_right_container #block-views-block-programmes-block-2-2 .views-row {
+  #header-top-right .header_top_right_container #block-views-block-programmes-block-2 .views-row {
     width: 100%; }
 
 footer * {
   word-wrap: break-word; }
 
-iframe {
-  display: none; }
-
-/*pages*/
-#header-top-right {
-  background: yellow; }
-  #header-top-right .views-row {
-    display: inline-block; }
-
 .about {
   background: lightblue;
   text-align: center; }