diff --git a/src/jade/index.jade b/src/jade/index.jade
index 8c2c68b..aa2fb73 100644
--- a/src/jade/index.jade
+++ b/src/jade/index.jade
@@ -11,28 +11,26 @@ html
try{Typekit.load();}catch(e){};
body
- .container
- .jumbo-container
- .jumbo
+ .jumbo
+ div
+ h1 Slack-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 Slack-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 Slack-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')
diff --git a/src/styles/_button.styl b/src/styles/_button.styl
new file mode 100644
index 0000000..7520b39
--- /dev/null
+++ b/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
diff --git a/src/styles/_input.styl b/src/styles/_input.styl
new file mode 100644
index 0000000..ca7ba85
--- /dev/null
+++ b/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)
diff --git a/src/styles/style.styl b/src/styles/style.styl
index 121157e..3282b9f 100644
--- a/src/styles/style.styl
+++ b/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