add ngVikings promotion

resize header text on small displays

src/index.jade

@@ -3,16 +3,22 @@ extends templates/head
 block title
   | Koodiklinikka
 
-block header_content
-  video(autoplay, loop, poster='images/poster.jpg', class='header__video-bg')
-    source(src='videos/jumbo.mp4', type='video/mp4')
-  .header__container
-    .header__nav
-      a(href='/') etusivu
-      a(href='/yhdistys.html') yhdistys
-    .header__headline
-      .header__logo
-      h1.header__title Yhteisö kaikille ohjelmoinnista ja ohjelmistoalasta kiinnostuneille harrastajille ja ammattilaisille.
+block header
+  .header.header--promo
+    .header__container
+      .header__nav
+        a(href='/') etusivu
+        a(href='/yhdistys.html') yhdistys
+      .header__headline
+        .header__logo
+        h1.header__title 
+          |Koodiklinikka yhteistyössä 1. - 2. maaliskuuta 2018 Helsingissä järjestettävän 
+          |<a href="https://ngvikings.org/">ngVikings</a>-tapahtuman kanssa!<br />
+          
+          .promo 
+            | Varaa paikkasi tapahtumaan
+            |<a href="https://ti.to/ngvikings/2018/discount/koodiklinikka" target="_blank">tästä!</a>
+        
 
 block content
   .content.with-feed

src/styles/_header.styl

@@ -17,14 +17,18 @@ headerHeight = 400px
      display none
 
 .header__container
-  background #3E7394
-  background linear-gradient(120deg, rgba(#085078, 0.8) 10%, rgba(#85D8CE, 0.7) 90%)
+  background linear-gradient(120deg, rgba(5, 164, 255, 0.55) 10%, rgba(5, 86, 117, 0.47) 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__nav
   position absolute
   right 60px
@@ -62,29 +66,14 @@ headerHeight = 400px
         position absolute
         text-shadow none
 
-.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
+  height 70px  
+  width 70px
+  position absolute
+  top 1em
+  left 1em
 
 .header__title
   color #fff
@@ -115,6 +104,26 @@ headerHeight = 400px
     color inherit
     text-decoration underline
 
+.header--promo
+  background-image url('https://ngvikings.org/images/backgrounds/home.jpg')
+.header--promo .header__container
+  background linear-gradient(180deg, rgba(5, 164, 255, 0.28) 10%, rgba(0, 0, 0, 0.5) 90%)
+  
+.header--promo .header__title
+  font-size 2.5em
+  @media screen and (max-width: 1030px)
+    font-size 2em
+  @media screen and (max-width: 810px)
+    text-align left
+    max-width 640px
+    padding-top 2em
+  @media screen and (max-width: 530px)
+    font-size 1.75em
+
+.header--promo .promo
+  color #ffcc00
+  font-size 0.75em
+  margin-top 0.5em
 .header__video-bg
   height 100%
   position absolute

src/templates/head.jade

@@ -42,9 +42,7 @@ html
   body
     .site
       .container
-        .header
-          block header_content
-
+        block header
         block content
 
       footer

src/yhdistys.jade

@@ -3,16 +3,17 @@ extends templates/head
 block title
   | Yhdistys
 
-block header_content
-  .header__container
-    .header__nav
-      a(href='/') etusivu
-      a(href='/yhdistys.html') yhdistys
-    .header__headline
-      .header__logo
-      h1.header__title Koodiklinikka ry
-  .header__members
-    #members
+block header
+  .header
+    .header__container
+      .header__nav
+        a(href='/') etusivu
+        a(href='/yhdistys.html') yhdistys
+      .header__headline
+        .header__logo
+        h1.header__title Koodiklinikka ry
+    .header__members
+      #members
 
 block content
   .content