add header video

src/jade/index.jade

@@ -35,6 +35,9 @@ html
   body
     .jumbo
       #logo
+      video(autoplay, loop, poster='images/poster.jpg')
+        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.
 

src/styles/style.styl

@@ -18,7 +18,7 @@ body, html
 h1, h2, h3
   margin 0
   margin-bottom 0.5em
-  text-shadow 1px 1px 0 rgba(255, 255, 255, 0.15)
+
 p
   margin-top 1em
   line-height 1.5em
@@ -32,24 +32,50 @@ a
 
 .jumbo
   width 100%
-  height 100%
+  height 50%
+  min-height 300px
   position relative
-  padding-bottom 200px
+  overflow hidden
-  background url('../images/jumbo.jpg')
-  background-size cover
   display table
 
+  &:after
+    position absolute
+    top 0
+    left 0
+    width 100%
+    height 100%
+    z-index -1
+    background rgba(255, 255, 255, 0.2)
+    content ''
+
   .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
+  // Keskitys
+  left 50%
+  transform translateX(-50%)
+
+  @media (min-aspect-ratio: 1/2)
+    width 100%
+    height auto
+
+
 #logo
   width 80px
   height 80px
@@ -58,6 +84,7 @@ a
   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
@@ -67,7 +94,6 @@ section
   padding 2em 0
 
 .content
-  margin-top -200px
   z-index 2
   position relative
   padding-right feedWidth
@@ -163,7 +189,8 @@ footer
   font-size 1.5em
   padding 0.5em
   background textColor
-
+  z-index 2
+  position relative
   i
     margin 0 0.30em
     font-size 1.5em