From 2c8e31c2711f322c19a6cc37ae6a57c4d2050450 Mon Sep 17 00:00:00 2001 From: Riku Rouvila Date: Sat, 24 Jan 2015 01:56:12 +0200 Subject: [PATCH] new layout --- src/jade/index.jade | 28 +++++----- src/styles/_button.styl | 9 ++++ src/styles/_input.styl | 32 ++++++++++++ src/styles/style.styl | 113 +++++++++------------------------------- 4 files changed, 80 insertions(+), 102 deletions(-) create mode 100644 src/styles/_button.styl create mode 100644 src/styles/_input.styl 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