From 012245eaa93f37f975c596d93b0049a603dbd582 Mon Sep 17 00:00:00 2001 From: Chad Whitacre Date: Wed, 12 Mar 2014 15:15:59 -0400 Subject: [PATCH] Reset styles to match @thefoxis' initial sketch The point of this repo is to take the PNG that @thefoxis posted at: https://github.com/gittip/building.gittip.com/issues/16#issuecomment-37030463 And to iterate on it in code. This commit makes the page look pretty nearly like that initial sketch. I left off the "New / Top / Top" section because I want to move away from that entirely, and I didn't bother to make it absolutely pixel-perfect because it was a sketch in the first place. --- scss/playground.scss | 81 +++++++++++++++++++++++--------------- www/assets/gittip.svg | 27 ++++++------- www/assets/heart-coin.svg | 12 ++++++ www/favicon.ico | Bin 1150 -> 5430 bytes www/index.spt | 8 ++-- 5 files changed, 79 insertions(+), 49 deletions(-) create mode 100644 www/assets/heart-coin.svg diff --git a/scss/playground.scss b/scss/playground.scss index ca8f60a..06bdd6f 100644 --- a/scss/playground.scss +++ b/scss/playground.scss @@ -1,17 +1,20 @@ -$green: #2A8F79; -$brown: #614C3E; +$green: #339966; +$brown: #AB4926; $white: #FFFFFF; $gold: #FFC300; $gray: #515151; $light-gray: #D7D7D7; +$font: "Whitney SSm A", "Whitney SSm B", serif; + body { - font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", serif; + font-family: $font; font-weight: 200; + font-size: 16px; + line-height: 100%; } section { - padding: 20px; } a { @@ -25,8 +28,9 @@ button { color: $green; border-radius: 4px; background: white; - font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", serif; + font-family: $font; font-size: 16px; + font-weight: 500; padding: 9px 20px; margin: 0; @@ -45,33 +49,39 @@ button { display: block; max-width: 1000px; margin: 0 auto; + line-height: 100px; } li { - float: left; + display: inline; list-style: none; padding-right: 30px; - line-height: 48px; + font-size: 14px; color: $gray; - img { - height: 48px; - display: inline; - } - a { color: $gray; + letter-spacing: -1px; + } + + &:first-child a { + font-size: 27px; + font-weight: 700; + color: black; + background: url("/assets/heart-coin.svg") left center no-repeat; + background-size: 27px; + padding-left: 32px; + padding-right: 30px; } &:last-child { float: right; - padding-right: 100px; } } } .splash { - background: url("/assets/texture.jpg") no-repeat center; + ackground: url("/assets/texture.jpg") no-repeat center; clear: both; text-align: center; padding-top: 100px; @@ -81,50 +91,57 @@ button { border-style: solid none; .every-week { - font-size: 48px; + font-size: 42px; margin-bottom: 48px; - } - - .inspiring { - font-size: 24px; + letter-spacing: -1px; } button { font-size: 30px; border-radius: 6px; border-width: 3px; - padding: 14px 24px; + padding: 14px 28px; + letter-spacing: -1px; - &.receive { + &.give { border-color: $brown; background: $brown; - color: $gold; + color: $white; + cursor: pointer; &:hover { - background: $gold; + background: $white; color: $brown; + cursor: pointer; } } - &.give { - background: $green; - color: $white; - cursor: pointer; - margin-left: 30px; + &.receive { + border-color: $green; + background: $white; + color: $green; + margin-left: 20px; &:hover { - background: $white; - color: $green; - cursor: pointer; + background: $green; + color: $white; } } } } .stats { - padding: 10px; + padding: 15px; text-align: center; border-bottom: 1px solid $light-gray; + font-size: 16px; + color: $gray; + + .star { + font-size: 22px; + position: relative; + bottom: -1px; + } } diff --git a/www/assets/gittip.svg b/www/assets/gittip.svg index ea33e24..d7b930e 100644 --- a/www/assets/gittip.svg +++ b/www/assets/gittip.svg @@ -2,20 +2,19 @@
    -
    • +
  • Gittip
  • About
  • FAQ
  • Blog
    • @@ -33,11 +33,13 @@
    Give money to inspiring people every week
    - +
    - ✭ 2,700 users exchanging $12,200 per week. + ✭ + 2,700 users exchanging $12,200 per week. See the stats ▹