new layout

src/jade/index.jade

@@ -11,28 +11,26 @@ html
       try{Typekit.load();}catch(e){};
 
   body
-    .container
-      .jumbo-container
-        .jumbo
+    .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?<br />
-          <br />
-          Koodiklinikka on <a target="_blank" href="https://slack.com/">Slack</a>-yhteisö kaikille ohjelmoinnista ja ohjelmistoalasta kiinnostuneille harrastajille ja ammattilaisille.
+          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ö.
 
-        #invite-form
-          h3 Liity mukaan
 
-      .footer
+    footer
 
-        a(href='https://koodiklinikka.slack.com')
-          i.fa.fa-slack
-
-        a(href='https://github.com/koodiklinikka/koodiklinikka.fi')
-          i.fa.fa-github
+      a(href='https://koodiklinikka.slack.com')
+        i.fa.fa-slack
 
       a(href='https://github.com/koodiklinikka/koodiklinikka.fi')
-        img(style='position: absolute; top: 0; right: 0; border: 0;', src='https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67', alt='Fork me on GitHub', data-canonical-src='https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png')
+        i.fa.fa-github
 
     script(src='js/bundle.js')

src/styles/_button.styl

@@ -0,0 +1,9 @@
+.btn
+  border-radius 3px
+  border 0
+  padding 1em
+  font-size 14px
+  outline 0
+  cursor pointer
+  &:disabled
+    opacity 0.6

src/styles/_input.styl

@@ -0,0 +1,32 @@
+.input
+  width 100%
+  height 45px
+  padding 1em
+  box-sizing border-box
+  font-size inherit
+  border 2px solid rgba(0, 0, 0, 0.3)
+  border-radius 5px
+  background transparent
+  color rgba(0, 0, 0, 0.5)
+  outline 0
+  &:focus
+    border 2px solid rgba(0, 0, 0, 0.4)
+    color rgba(0, 0, 0, 0.6)
+
+.input::-webkit-input-placeholder
+  color rgba(0, 0, 0, 0.3)
+
+.input:-moz-placeholder
+  color rgba(0, 0, 0, 0.3)
+  opacity  1
+
+.input::-moz-placeholder
+  color rgba(0, 0, 0, 0.3)
+  opacity 1
+
+.input:-ms-input-placeholder
+  color rgba(0, 0, 0, 0.3)
+
+.input.has-error
+  border-color rgba(226, 33, 112, 0.6)
+  color rgb(226, 33, 112)

src/styles/style.styl

@@ -1,3 +1,5 @@
+@require '_input'
+@require '_button'
 linkColor = #3090de
 textColor = #444
 
@@ -15,80 +17,32 @@ h1, h2, h3
   margin-bottom 0.5em
   text-shadow 1px 1px 0 rgba(255, 255, 255, 0.2)
 
-.container
-  width 100%
-  height 100%
-  box-sizing border-box
+a
+  color linkColor
+  text-decoration none
+  &:hover
+    text-decoration underline
 
-@keyframes blur
-  0%
-    filter blur(0px)
-  100%
-    filter blur(3px)
-
-.jumbo-container
-  width 100%
-  height 100%
-  position relative
-  overflow hidden
+section
+  max-width 800px
+  margin auto
+  padding 2em 0
 
 .jumbo
-  position absolute
-  top -10px
-  bottom -10px
-  left -10px
-  right -10px
+  width 100%
+  height 90%
   background url('../images/jumbo.jpg')
   background-size cover
-  animation blur 10s
-  filter blur(3px)
+  display table
 
-.input
-  width 100%
-  height 45px
-  padding 1em
-  box-sizing border-box
-  font-size inherit
-  border 2px solid rgba(0, 0, 0, 0.3)
-  border-radius 5px
-  background transparent
-  color rgba(0, 0, 0, 0.5)
-  outline 0
-  &:focus
-    border 2px solid rgba(0, 0, 0, 0.4)
-    color rgba(0, 0, 0, 0.6)
-
-.input::-webkit-input-placeholder
-  color rgba(0, 0, 0, 0.3)
-
-.input:-moz-placeholder
-  color rgba(0, 0, 0, 0.3)
-  opacity  1
-
-.input::-moz-placeholder
-  color rgba(0, 0, 0, 0.3)
-  opacity 1
-
-.input:-ms-input-placeholder
-  color rgba(0, 0, 0, 0.3)
-
-.input.has-error
-  border-color rgba(226, 33, 112, 0.6)
-  color rgb(226, 33, 112)
-
-.btn
-  border-radius 3px
-  border 0
-  padding 1em
-  font-size 14px
-  outline 0
-  cursor pointer
-  &:disabled
-    opacity 0.6
-
-#invite-form
-  max-width 500px
-  margin auto
+  div
+    display table-cell
+    vertical-align middle
+    text-align center
+    padding 0 1em
+    h1
+      max-width 800px
+      margin auto
 
 .invite-form
   position relative
@@ -134,33 +88,18 @@ h1, h2, h3
     background rgb(226, 33, 112)
 
 .form-container
-  width 100%
+  margin auto
   padding 0 2em
   box-sizing border-box
-  max-width 700px
-  position absolute
-  top 50%
-  left 50%
-  transform translateY(-50%) translateX(-50%)
   p
     text-align center
-    margin-bottom 2em
     line-height 1.7em
-a
-  color linkColor
-  text-decoration none
-  &:hover
-    text-decoration underline
 
-.footer
-  font-size 1em
+footer
+  font-size 1.5em
   padding 0.5em
-  position absolute
-  bottom 0
   i
-    margin 0 5px
+    margin 0 0.30em
     font-size 1.5em
     color textColor
-    &:hover
-      color #fff