diff --git a/src/jade/index.jade b/src/jade/index.jade
index aa2fb73..55a49f1 100644
--- a/src/jade/index.jade
+++ b/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 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 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 Slack-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')
diff --git a/src/styles/style.styl b/src/styles/style.styl
index 3282b9f..19be6a2 100644
--- a/src/styles/style.styl
+++ b/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