more content

src/jade/index.jade

@@ -1,16 +1,21 @@
 doctype html
 html
   head
-    title koodiklinikka
+    title Koodiklinikka
     link(rel='stylesheet', href='css/style.css')
   body
-    .jumbo
-      .form-container
-        p.
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-          Sed posuere interdum sem. Sed augue orci, lacinia eu tincidunt.
-          Mauris varius diam vitae arcu. <br /> Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt.
-        form#invite.invite-form
-          input.input(type='text', name='email', placeholder='Email')
-          button.btn.btn__submit(type='submit', title='Lähetä') ⏎
+    .container
+      .jumbo
+        #logo
+        .form-container
+          p.
+            Onko koodissasi bugi joka ei pitkän googlettamisen jälkeen ole vieläkään ratkennut?<br />
+            Kiinnostaako koodaaminen, mutta et tiedä mistä lähtisi liikkeelle? Etsitkö tiimikavereita projektiisi?<br />
+            <br />
+            Koodiklinikka on <a target="_blank" href="https://slack.com/">Slack</a>-yhteisö kaikille ohjelmoinnista ja ohjelmistoalasta kiinnostuneille suomalaisille.
+          form#invite.invite-form
+            input.input(type='text', name='email', placeholder='Email')
+            button.btn.btn__submit(type='submit', title='Lähetä') ⏎
+      .footer
+        a(href='https://koodiklinikka.slack.com') koodiklinikka.slack.com
     script(src='js/bundle.js')

src/stylus/style.styl

@@ -2,10 +2,16 @@
 
 body, html
   margin 0
-  font 14px 'Open Sans', sans-serif
+  font 16px 'Open Sans', sans-serif
   height 100%
   width 100%
-  font-weight 300
+  font-weight 400
+  color #333
+
+.container
+  width 100%
+  height 100%
+  box-sizing border-box
 
 .jumbo
   width 100%
@@ -56,11 +62,11 @@ body, html
 .invite-form
   margin auto
   position relative
-
+  max-width 500px
   .btn
     width 40px
     height 32px
-    background #1a99aa
+    background #3090de
     padding 0
     position absolute
     right 8px
@@ -68,14 +74,44 @@ body, html
     margin-top -15px
     border-bottom 2px solid #117280
     color rgba(255, 255, 255, 0.5)
-
-  p
-    text-align center
-    margin-bottom 2em
+    &:active
+      border-bottom 0
 
 .form-container
-  max-width 500px
+  width 100%
+  padding 0 2em
+  box-sizing border-box
+  max-width 800px
   position absolute
   top 50%
   left 50%
   transform translateY(-50%) translateX(-50%)
+  p
+    text-align center
+    margin-bottom 2em
+a
+  color #2080CF
+  text-decoration none
+  &:hover
+    text-decoration underline
+
+#logo
+  width 80px
+  height 80px
+  background url('../images/logo-js.png')
+  background-size 100% 100%
+  border 5px solid #fff
+  border-radius 50%
+  margin auto
+  position absolute
+  top 1.5em
+  left 1.5em
+  box-shadow 1px 1px 3px rgba(0, 0, 0, 0.1)
+
+.footer
+  font-size 0.8em
+  height 40px
+  line-height 40px
+  padding 0 1em
+  position absolute
+  bottom 0