implement new blue header bar

assets/stylesheets/footer.css

@@ -7,7 +7,7 @@
     flex-wrap: wrap;
     min-height: 80px;
 
-    border-bottom: 2px solid var(--color-bg-separator);
+    border-bottom: 1px solid var(--color-bg-separator);
 
     & > * {
       display: flex;

assets/stylesheets/header.css

@@ -1,20 +1,59 @@
 @block header {
-  display: flex;
+  margin-bottom: var(--grid-gutter);
-  flex-wrap: wrap;
-
-  margin: var(--grid-gutter) 0;
-  padding-bottom: var(--grid-gutter);
-
-  border-bottom: 2px solid var(--color-bg-separator);
 
   @media (--breakpoint-desktop) {
     flex-wrap: nowrap;
   }
 
+  @element upper-wrapper {
+    background: var(--color-palette-blue-dark);
+    padding: calc(var(--grid-gutter) / 2) 0;
+    color: var(--color-text-dark-bg);
+  }
+
+  @element upper {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+
+    font-size: 0.8em;
+
+    @media (--breakpoint-desktop) {
+      justify-content: space-between;
+    }
+  }
+
+  @element lower-wrapper {
+  }
+
+  @element lower {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: var(--grid-gutter) 0 calc(var(--grid-gutter) / 4);
+    border-bottom: 1px solid var(--color-bg-separator);
+  }
+
+  @element title {
+    display: flex;
+    align-items: center;
+    font-family: var(--font-regular);
+    letter-spacing: 3px;
+    text-transform: uppercase;
+
+    & img {
+      display: inline-block;
+      width: 24px;
+      height: auto;
+      margin-right: calc(var(--grid-gutter) / 2);
+    }
+  }
+
   @element logo {
     display: flex;
     flex: 0 0 100%;
-    align-items: center;
+    justify-content: center;
 
     @media (--breakpoint-desktop) {
       flex: 0 0 200px;
@@ -27,53 +66,58 @@
     }
   }
 
-  @element navarea {
+  @element controls {
     display: flex;
     flex: 0 0 100%;
     flex-direction: column;
     justify-content: space-around;
 
     @media (--breakpoint-desktop) {
-      flex: 1 0 auto;
+      flex: 0 0 auto;
-      min-height: 90px;
     }
-  }
 
-  @element navarea {
     & form {
       display: flex;
       flex-wrap: wrap;
+      justify-content: center;
 
       @media (--breakpoint-desktop) {
         justify-content: flex-end;
       }
 
-      & > * {
+      & .group {
         flex: 0 0 auto;
-      }
+        display: flex;
-
+        padding: 0 calc(var(--grid-gutter) / 2);
-      & fieldset {
-        padding: 0.2em 1em;
         margin: 0;
+
         border: none;
-        background: var(--color-bg-grey);
+        background: var(--color-palette-blue-medium);
-        color: var(--color-text-grey);
         border-radius: var(--border-radius);
-        font-size: 0.8em;
+        color: inherit;
 
-        & + fieldset {
+        & + .group {
           margin-left: var(--grid-gutter)
         }
 
-        & label + select {
-          margin-left: 0.5em;
-        }
-
         & select,
         & label {
+          flex: 0 0 auto;
           display: inline-block;
           margin-top: 0;
           margin-bottom: 0;
+
+          color: inherit;
+          font-weight: normal;
+          font-family: var(--font-light);
+          font-size: 0.8em;
+
+          background: transparent;
+          border: none;
+        }
+
+        & select {
+          margin-top: 2px;
         }
       }
     }

assets/stylesheets/variables.css

@@ -11,9 +11,12 @@
   --font-light: 'robotomedium', Helvetica, sans-serif;
 
   --color-palette-blue: #5c9fef;
+  --color-palette-blue-medium: #3c80cf;
+  --color-palette-blue-dark: #3072be;
 
   --color-text-default: #2a303a;
   --color-text-grey: #8091a5;
+  --color-text-dark-bg: #fff;
 
   --color-link-content: var(--color-palette-blue);
 

public/stylesheets/style.css

@@ -1103,16 +1103,7 @@ body {
 }
 
 .header {
-  display: -webkit-box;
+  margin-bottom: 22px;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-
-  margin: 22px 0;
-  padding-bottom: 22px;
-
-  border-bottom: 2px solid #e5ebed;
 }
 
 @media (min-width: 700px) {
@@ -1123,6 +1114,71 @@ body {
   }
 }
 
+.header__upper-wrapper {
+    background: #3072be;
+    padding: 11px 0;
+    color: #fff;
+}
+
+.header__upper {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+
+    font-size: 0.8em;
+}
+
+@media (min-width: 700px) {
+
+  .header__upper {
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+  }
+}
+
+.header__lower-wrapper {}
+
+.header__lower {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    padding: 22px 0 5.5px;
+    border-bottom: 1px solid #e5ebed;
+}
+
+.header__title {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    font-family: 'roboto', Helvetica, sans-serif;
+    letter-spacing: 3px;
+    text-transform: uppercase;
+}
+
+.header__title img {
+  display: inline-block;
+  width: 24px;
+  height: auto;
+  margin-right: 11px;
+}
+
 .header__logo {
     display: -webkit-box;
     display: -ms-flexbox;
@@ -1130,9 +1186,9 @@ body {
     -webkit-box-flex: 0;
         -ms-flex: 0 0 100%;
             flex: 0 0 100%;
-    -webkit-box-align: center;
+    -webkit-box-pack: center;
-        -ms-flex-align: center;
+        -ms-flex-pack: center;
-            align-items: center;
+            justify-content: center;
 }
 
 @media (min-width: 700px) {
@@ -1150,7 +1206,7 @@ body {
   max-width: 169px;
 }
 
-.header__navarea {
+.header__controls {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -1167,60 +1223,70 @@ body {
 
 @media (min-width: 700px) {
 
-  .header__navarea {
+  .header__controls {
-    -webkit-box-flex: 1;
+    -webkit-box-flex: 0;
-        -ms-flex: 1 0 auto;
+        -ms-flex: 0 0 auto;
-            flex: 1 0 auto;
+            flex: 0 0 auto;
-    min-height: 90px;
   }
 }
 
-.header__navarea form {
+.header__controls form {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
 }
 
 @media (min-width: 700px) {
 
-  .header__navarea form {
+  .header__controls form {
     -webkit-box-pack: end;
         -ms-flex-pack: end;
             justify-content: flex-end;
   }
 }
 
-.header__navarea form > * {
+.header__controls form .group {
   -webkit-box-flex: 0;
       -ms-flex: 0 0 auto;
           flex: 0 0 auto;
-}
+  display: -webkit-box;
-
+  display: -ms-flexbox;
-.header__navarea form fieldset {
+  display: flex;
-  padding: 0.2em 1em;
+  padding: 0 11px;
   margin: 0;
   border: none;
-  background: #f7f9fa;
+  background: #3c80cf;
-  color: #8091a5;
   border-radius: 3px;
-  font-size: 0.8em;
+  color: inherit;
 }
 
-.header__navarea form fieldset + fieldset {
+.header__controls form .group + .group {
   margin-left: 22px;
 }
 
-.header__navarea form fieldset label + select {
+.header__controls form .group select,
-  margin-left: 0.5em;
+        .header__controls form .group label {
-}
+  -webkit-box-flex: 0;
-
+      -ms-flex: 0 0 auto;
-.header__navarea form fieldset select,
+          flex: 0 0 auto;
-        .header__navarea form fieldset label {
   display: inline-block;
   margin-top: 0;
   margin-bottom: 0;
+  color: inherit;
+  font-weight: normal;
+  font-family: 'robotomedium', Helvetica, sans-serif;
+  font-size: 0.8em;
+  background: transparent;
+  border: none;
+}
+
+.header__controls form .group select {
+  margin-top: 2px;
 }
 
 .footer {
@@ -1236,7 +1302,7 @@ body {
         flex-wrap: wrap;
     min-height: 80px;
 
-    border-bottom: 2px solid #e5ebed;
+    border-bottom: 1px solid #e5ebed;
 }
 
 .footer__upper > * {

views/layout.pug

@@ -6,24 +6,31 @@ html
   body
     #main
       #main__header
-        .wrapper
+        header.header
-          header.header
+          .header__upper-wrapper
-            section.header__logo
+            .header__upper.wrapper
-              a.header__logo-link(href='#')
+              .header__title
-                img(src='/images/logo.svg' alt='Contentful Example App')
+                img(src='/images/icon-info.svg')
-            section.header__navarea
+                span Example Application
-              section.header__controls
+              div Malin is still thinking about this part
+              .header__controls
                 form(action="" method="get")
-                  fieldset
+                  .group
                     label(for='api') API type:
                     select(name='api' onChange='this.form.submit()')
                       option(value='cda' selected=query.api === 'cda') Delivery API
                       option(value='cpa' selected=query.api === 'cpa') Preview API
-                  fieldset
+                  .group
-                    label(for='locale') Language:
+                    label(for='locale') Locale:
                     select(name='locale' onChange='this.form.submit()')
                       option(value='en-US' selected=query.locale === 'en-US') English
                       option(value='de-DE' selected=query.locale === 'de-DE') German
+          .header__lower-wrapper
+            .header__lower.wrapper
+              .header__logo
+                a.header__logo-link(href='/')
+                  img(src='/images/logo.svg' alt='Contentful Example App')
+
               nav.header__navigation.main-navigation
                 ul
                   li