style header

assets/stylesheets/global/header.css

@@ -8,7 +8,7 @@
   @element upper-wrapper {
     background: var(--color-palette-blue-dark);
     padding: calc(var(--grid-gutter) / 2) 0;
-    color: var(--color-text-dark-bg);
+    color: var(--color-header-upper-text-secondary);
   }
 
   @element upper {
@@ -24,6 +24,42 @@
     }
   }
 
+  @element upper-first {
+    display: flex;
+
+    @media (--breakpoint-desktop) {
+      & div + div {
+        margin-left: var(--grid-gutter);
+      }
+    }
+  }
+
+  @element upper-second {
+    display: flex;
+
+    @media (--breakpoint-desktop) {
+      & div + div {
+        margin-left: var(--grid-gutter);
+      }
+    }
+  }
+
+  @element upper-link {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  @element upper-copy {
+    display: inline-flex;
+  }
+
+  @element upper-icon {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    margin-right: calc(var(--grid-gutter) / 4);
+  }
+
   @element lower-wrapper {
   }
 
@@ -41,6 +77,7 @@
     font-family: var(--font-regular);
     letter-spacing: 3px;
     text-transform: uppercase;
+    color: var(--color-header-upper-text-primary);
 
     & img {
       display: inline-block;
@@ -71,6 +108,7 @@
     flex: 0 0 100%;
     flex-direction: column;
     justify-content: space-around;
+    color: var(--color-header-upper-text-primary);
 
     @media (--breakpoint-desktop) {
       flex: 0 0 auto;

assets/stylesheets/layout/layout-centered.css

@@ -1,4 +1,5 @@
 @block layout-centered {
+  box-sizing: border-box;
   width: 100%;
   max-width: var(--content-max-width);
   margin: 0 auto;
@@ -6,6 +7,7 @@
 }
 
 @block layout-centered-small {
+  box-sizing: border-box;
   width: 100%;
   max-width: calc(var(--content-max-width) - 360px);
   margin: 0 auto;

assets/stylesheets/variables.css

@@ -44,6 +44,9 @@
   --color-input-bg: #fff;
   --color-input-border: #d3dce0;
 
+  --color-header-upper-text-primary: #fff;
+  --color-header-upper-text-secondary: #abc6e5;
+
   --layout-sidebar-sidebar-width: 228px;
   --layout-sidebar-content-width: 732px;
 

public/images/icon-github.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33">
+  <path fill="#abc6e5" fill-rule="evenodd" d="M16.608.455C7.614.455.32 7.748.32 16.745c0 7.197 4.667 13.302 11.14 15.456.815.15 1.112-.352 1.112-.784 0-.386-.014-1.41-.022-2.77-4.53.984-5.487-2.184-5.487-2.184-.74-1.882-1.81-2.383-1.81-2.383-1.478-1.01.113-.99.113-.99C7 23.203 7.86 24.767 7.86 24.767c1.454 2.49 3.814 1.77 4.742 1.353.148-1.05.57-1.77 1.034-2.176-3.617-.41-7.42-1.81-7.42-8.05 0-1.78.635-3.234 1.677-4.372-.168-.412-.727-2.07.16-4.31 0 0 1.367-.44 4.48 1.67 1.298-.363 2.692-.543 4.077-.55 1.384.007 2.777.187 4.078.55 3.11-2.11 4.475-1.67 4.475-1.67.89 2.24.33 3.898.163 4.31C26.37 12.66 27 14.115 27 15.892c0 6.26-3.81 7.636-7.437 8.04.584.502 1.105 1.496 1.105 3.016 0 2.177-.02 3.934-.02 4.468 0 .436.294.943 1.12.784 6.468-2.16 11.13-8.26 11.13-15.455 0-8.997-7.293-16.29-16.29-16.29"/>
+</svg>

public/stylesheets/style.css

@@ -828,6 +828,8 @@ input[type="reset"]:focus,
 }
 
 .layout-centered {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   width: 100%;
   max-width: 980px;
   margin: 0 auto;
@@ -835,6 +837,8 @@ input[type="reset"]:focus,
 }
 
 .layout-centered-small {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   width: 100%;
   max-width: 620px;
   margin: 0 auto;
@@ -948,7 +952,7 @@ display: flex;
 .header__upper-wrapper {
     background: #3072be;
     padding: 11px 0;
-    color: #fff;
+    color: #abc6e5;
 }
 
 .header__upper {
@@ -976,6 +980,54 @@ display: flex;
   }
 }
 
+.header__upper-first {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+
+@media (min-width: 700px) {
+
+  .header__upper-first div + div {
+    margin-left: 22px;
+  }
+}
+
+.header__upper-second {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+
+@media (min-width: 700px) {
+
+  .header__upper-second div + div {
+    margin-left: 22px;
+  }
+}
+
+.header__upper-link {
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+}
+
+.header__upper-copy {
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+}
+
+.header__upper-icon {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    margin-right: 5.5px;
+}
+
 .header__lower-wrapper {}
 
 .header__lower {
@@ -1001,6 +1053,7 @@ display: flex;
     font-family: 'roboto', Helvetica, sans-serif;
     letter-spacing: 3px;
     text-transform: uppercase;
+    color: #fff;
 }
 
 .header__title img {
@@ -1050,6 +1103,7 @@ display: flex;
             flex-direction: column;
     -ms-flex-pack: distribute;
         justify-content: space-around;
+    color: #fff;
 }
 
 @media (min-width: 700px) {

views/layout.pug

@@ -9,10 +9,18 @@ html
         header.header
           .header__upper-wrapper
             .header__upper.layout-centered
+              .header__upper-first
                 .header__title
                   img(src='/images/icon-info.svg')
                   span Example Application
-              div Malin is still thinking about this part
+                .header__upper-copy
+                  a(href='#todo' target='_blank' rel='noopener') What is this?
+              .header__upper-second
+                .header__upper-copy
+                  a.header__upper-link(href='https://github.com/contentful/example-contentful-university-js' target='_blank' rel='noopener')
+                    img.header__upper-icon(src='/images/icon-github.svg')
+                    | View on Github
+
                 .header__controls
                   form(action="" method="get")
                     .group
@@ -69,13 +77,13 @@ html
                 img.footer__disclaimer-logo(src='/images/contentful-logo.svg')
                 p.footer__disclaimer-text
                   | This website and the materials found on it are for demo purposes using Contentful. You can use this to preview the content created on your Contentful account. 
-                  a(href='#todo') View on Github
+                  a(href='https://github.com/contentful/example-contentful-university-js' target='_blank' rel='noopener') View on Github
                   | .
               .footer__social
                 p
-                  a(href='https://www.facebook.com/contentful/' target='_blank')
+                  a(href='https://www.facebook.com/contentful/' target='_blank' rel='noopener')
                     img(src='/images/icon-facebook.svg' alt='Our Facebook profile')
-                  a(href='https://twitter.com/contentful' target='_blank')
+                  a(href='https://twitter.com/contentful' target='_blank' rel='noopener')
                     img(src='/images/icon-twitter.svg' alt='Our Twitter profile')
   script(src='/scripts/highlight.pack.js')
   script hljs.initHighlightingOnLoad();