Merge pull request #8 from koodiklinikka/new-header

Add re-designed header

src/jade/index.jade

@@ -35,13 +35,13 @@ html
   body
     .site
       .container
-        .jumbo
-          #logo
-          video(autoplay, loop, poster='images/poster.jpg')
+        .header
+          video(autoplay, loop, poster='images/poster.jpg', class='header__video-bg')
             source(src='videos/jumbo.mp4', type='video/mp4')
-
-          .jumbo__container
-            h1 <a target="_blank" href="https://slack.com/">Slack</a>-yhteisö kaikille ohjelmoinnista ja ohjelmistoalasta kiinnostuneille harrastajille ja ammattilaisille.
+          .header__container
+            .header__headline
+              .header__logo
+              h1.header__title <a target="_blank" href="https://slack.com/">Slack</a>-yhteisö kaikille ohjelmoinnista ja ohjelmistoalasta kiinnostuneille harrastajille ja&nbsp;ammattilaisille.
 
         .content
           section

src/styles/_header.styl

@@ -0,0 +1,81 @@
+.header
+  height 400px
+  overflow hidden
+  position relative
+  width 100%
+  transform translateZ(0)
+
+  @media screen and (max-width: 1030px)
+    height 300px
+
+.header__container
+  background #3E7394
+  background linear-gradient(120deg, rgba(#085078, 0.8) 10%, rgba(#85D8CE, 0.7) 90%)
+  display table
+  height 100%
+  text-align center
+  vertical-align middle
+  width 100%
+
+.header__headline
+  display table-cell
+  padding 0 1em
+  vertical-align middle
+
+.header__logo
+  background url('../images/logo.png')
+  background-size contain
+  display inline-block
+  height 180px
+  margin-right 2em
+  vertical-align middle
+  width 180px
+
+  @media screen and (max-width: 1030px)
+    height 120px
+    margin-right 1.5em
+    width 120px
+
+  @media screen and (max-width: 810px)
+    height 80px
+    margin 0 0 1.5em
+    width 80px
+
+.header__title
+  color #fff
+  display inline-block
+  font-size 3em
+  letter-spacing -1px
+  line-height 1.1
+  margin auto
+  max-width 780px
+  text-align left
+  text-shadow 0 2px 0 rgba(#000, 0.1)
+  vertical-align middle
+
+  @media screen and (max-width: 1030px)
+    font-size 2em
+    max-width 640px
+
+  @media screen and (max-width: 810px)
+    display block
+    font-size 1.6em
+    max-width 440px
+    text-align center
+
+  @media screen and (max-width: 410px)
+    font-size 1.4em
+
+  a
+    color inherit
+    text-decoration underline
+
+.header__video-bg
+  height 100%
+  position absolute
+  bottom 0
+  z-index -2
+
+  @media (min-aspect-ratio: 1/2)
+    width 100%
+    height auto

src/styles/style.styl

@@ -5,6 +5,7 @@ footerHeight = 50px
 
 @require '_input'
 @require '_button'
+@require '_header'
 
 body, html
   margin 0
@@ -41,53 +42,6 @@ a
   min-height 100vh
   padding-bottom footerHeight
 
-.jumbo
-  width 100%
-  height 50vh
-  min-height 300px
-  position relative
-  overflow hidden
-  display table
-
-  .jumbo__container
-    display table-cell
-    vertical-align middle
-    text-align center
-    padding 0 1em
-
-    h1
-      max-width 800px
-      margin auto
-      @media screen and (max-width: 600px), screen and (max-height: 580px)
-        font-size 1.5em
-        margin-top 1em
-
-video
-  height 100%
-  position absolute
-  bottom 0
-  z-index -2
-  left 50%
-  transform translateX(-50%)
-
-  @media (min-aspect-ratio: 1/2)
-    width 100%
-    height auto
-
-
-#logo
-  width 80px
-  height 80px
-  position absolute
-  top 1em
-  left 1em
-  background url('../images/logo.png')
-  background-size 100% 100%
-  z-index 2
-  @media screen and (max-width: 600px), screen and (max-height: 580px)
-    width 60px
-    height 60px
-
 section
   background #fff
   padding 2em 0