add fade effect

src/jade/index.jade

@@ -6,6 +6,8 @@ html
     meta(name='description', content='Koodiklinikka on suomalainen Slack-yhteisö ohjelmistoalan harrastajille ja ammattilaisille.')
     meta(name='keywords', content='ohjelmointi,frontend,open source,devaus,suomi,javascript,clojure,go,java,node.js,io.js,angular.js,web')
     meta(charset='utf-8')
+    meta(name='viewport', content='width=device-width, initial-scale=1')
+    meta(name='apple-mobile-web-app-capable', content='yes')
     script(src='//use.typekit.net/scb5xny.js')
     script.
       try{Typekit.load();}catch(e){};
@@ -14,23 +16,25 @@ html
     .jumbo
       div
         h1 <a target="_blank" href="https://slack.com/">Slack</a>-yhteisö kaikille ohjelmoinnista ja ohjelmistoalasta kiinnostuneille harrastajille ja ammattilaisille.
+
     section
-
-      .form-container
-        #invite-form
-          h3 Tule mukaan
-        p.
-          Etsitkö tiimikavereita projektiisi? Kiinnostaako koodaaminen, mutta et tiedä mistä lähtisi liikkeelle?
-          Onko koodissasi bugi joka ei pitkän googlettamisen jälkeen ole vieläkään ratkennut?
-          Koodiklinikka on <a target="_blank" href="https://slack.com/">Slack</a>-yhteisö kaikille avoin softakehitykseen keskittynyt yhteisö.
-
+      .row
+        .form-container
+          #invite-form
+            h3 Tule mukaan
+          p.
+            Etsitkö tiimikavereita projektiisi? Kiinnostaako koodaaminen, mutta et tiedä mistä lähtisi liikkeelle?
+            Onko koodissasi bugi joka ei pitkän googlettamisen jälkeen ole vieläkään ratkennut?
+            Koodiklinikka on <a target="_blank" href="https://slack.com/">Slack</a>-yhteisö kaikille avoin softakehitykseen keskittynyt yhteisö.
 
     footer
-
       a(href='https://koodiklinikka.slack.com')
         i.fa.fa-slack
 
       a(href='https://github.com/koodiklinikka/koodiklinikka.fi')
         i.fa.fa-github
 
+    .fader
+
+
     script(src='js/bundle.js')

src/styles/style.styl

@@ -15,7 +15,7 @@ body, html
 h1, h2, h3
   margin 0
   margin-bottom 0.5em
-  text-shadow 1px 1px 0 rgba(255, 255, 255, 0.2)
+  text-shadow 1px 1px 0 rgba(255, 255, 255, 0.15)
 
 a
   color linkColor
@@ -23,14 +23,10 @@ a
   &:hover
     text-decoration underline
 
-section
-  max-width 800px
-  margin auto
-  padding 2em 0
-
 .jumbo
   width 100%
-  height 90%
+  height 100%
+  padding-bottom 200px
   background url('../images/jumbo.jpg')
   background-size cover
   display table
@@ -44,6 +40,17 @@ section
       max-width 800px
       margin auto
 
+section
+  background #fff
+
+.jumbo + section
+  margin-top -200px
+
+.row
+  max-width 800px
+  padding 2em 0
+  margin auto
+
 .invite-form
   position relative
   .btn
@@ -89,6 +96,7 @@ section
 
 .form-container
   margin auto
+  margin-top 1em
   padding 0 2em
   box-sizing border-box
   p
@@ -98,8 +106,18 @@ section
 footer
   font-size 1.5em
   padding 0.5em
+  background textColor
+
   i
     margin 0 0.30em
     font-size 1.5em
-    color textColor
+    color #fff
 
+.fader
+  position fixed
+  bottom 0
+  left 0
+  width 100%
+  height 50px
+  background linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 99%,rgba(0,0,0,0.2) 100%)
+  pointer-events none