From 5c952e69d7942fa530da3ce01dca9164bd33a584 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 18 Dec 2017 21:58:01 +0100 Subject: [PATCH] styling --- _src/_assets/scss/_hero.scss | 10 +- _src/_assets/scss/_typography.scss | 1 - _src/_assets/scss/page-front.scss | 283 +---------------------------- _src/_data/content-front.yml | 9 +- _src/index.html | 12 +- 5 files changed, 17 insertions(+), 298 deletions(-) diff --git a/_src/_assets/scss/_hero.scss b/_src/_assets/scss/_hero.scss index b528412..b5b197c 100644 --- a/_src/_assets/scss/_hero.scss +++ b/_src/_assets/scss/_hero.scss @@ -1,12 +1,11 @@ $edge-height-sm: $spacer * 2; -$edge-height: $spacer * 4; +$edge-height: $spacer * 3; .hero { background: $brand-07; - padding-top: $spacer * 2; + padding-top: $spacer * 3; padding-bottom: 0; - height: calc(100vh - #{$edge-height-sm}); - min-height: 580px; + height: calc(80vh - #{$edge-height-sm}); margin-bottom: $edge-height-sm; position: relative; display: flex; @@ -14,8 +13,9 @@ $edge-height: $spacer * 4; align-items: center; @media ($screen-sm) { - height: calc(100vh - #{$edge-height}); + height: calc(90vh - #{$edge-height}); margin-bottom: $edge-height; + min-height: 500px; } &:after { diff --git a/_src/_assets/scss/_typography.scss b/_src/_assets/scss/_typography.scss index 4c94cd1..7b883c8 100644 --- a/_src/_assets/scss/_typography.scss +++ b/_src/_assets/scss/_typography.scss @@ -132,7 +132,6 @@ ol { .lead { - color: $brand-03; font-size: $font-size-large; } diff --git a/_src/_assets/scss/page-front.scss b/_src/_assets/scss/page-front.scss index 8e7b0e8..5743015 100644 --- a/_src/_assets/scss/page-front.scss +++ b/_src/_assets/scss/page-front.scss @@ -1,287 +1,10 @@ @import 'variables'; @import 'hero'; -.section--intro { - .section__description { - margin-bottom: $spacer * 2; - } -} - -.feature { - padding-top: $spacer; - padding-bottom: $spacer; - - &:first-child { - padding-top: $spacer * 2; - } -} - -.feature__image { - margin: 0 auto; - background: $brand-05; - border-radius: $border-radius; - overflow: hidden; - max-width: 400px; - - @media ($screen-sm) { - margin: 0; - } - - img { - width: 100%; - height: auto; - max-width: 100%; - display: block; - } -} - -.feature__title { - font-size: $font-size-h4; - margin-bottom: $spacer / $line-height; -} - -.feature__list { - margin: 0; - padding: 0; - margin-top: $spacer; - - li { - display: block; - color: $brand-02; - - @media ($screen-sm) { - display: inline-block; - margin-left: $spacer * 2; - - &:first-child { - margin-left: 0; - } - } - - &:before { - content: '\2714'; - font-size: $font-size-small; - color: $brand-success; - margin-right: $spacer / 4; - } - } -} - -.connect__title { - font-size: $font-size-h3; -} - -.roadmap { - border-left: .2rem solid $brand-02; - margin-left: $spacer * 2; - padding-left: $spacer; - margin-top: $spacer * 4; - margin-bottom: $spacer * 2; - - @media ($screen-sm) { - margin-left: $spacer * 3; - padding-left: 0; - } - - @media ($screen-md) { - margin-left: 0; - border-left: 0; - border-bottom: .2rem solid $brand-02; - - .row { - display: flex; - justify-content: space-between; - } - } -} - -.roadmap__step { - position: relative; - margin-bottom: $spacer * 2; - - @media ($screen-md) { - text-align: center; - margin-bottom: 0; - padding-left: $spacer / 2; - padding-right: $spacer / 2; - } - - &:after { - content: '\2714'; - color: transparent; - text-align: center; - font-size: $font-size-mini; - line-height: 2; - width: 1.75rem; - height: 1.75rem; - border-radius: 50%; - display: inline-block; - background: $brand-05; - border: .2rem solid #fff; - position: absolute; - left: -2.95rem; - top: -.25rem; - - @media ($screen-md) { - position: relative; - left: auto; - top: auto; - bottom: -.95rem; - } - } - - &.is-complete { - &:after { - content: '\2714'; - color: $brand-03; - background: $brand-success; - } - } - - &.is-progress { - &:after { - background: $brand-07; - } - } -} - -.roadmap__net, -.roadmap__target { - margin-bottom: 0; -} - -.roadmap__target { - color: $brand-07; -} - -.roadmap__time { - color: $brand-02; - font-size: $font-size-small; - - @media ($screen-md) { - position: absolute; - left: 0; - bottom: -70%; - width: 100%; - } -} - -// -// Get started -// -.section--getstarted { - counter-reset: getstarted-steps; - - .feature__image { - background: rgba(255, 255, 255, .5); - } - - .section__actions { - border-top: 0; - padding-top: 0; - margin-top: $spacer * 2; - } -} - -.getstarted-bigchaindb, -.getstarted-tools { +.section--farewell { + margin-top: -4rem; + z-index: 2; padding-top: $spacer * 3; - margin-top: $spacer * 3; - border-top: .1rem solid darken($brand-05, 8%); - - .grid { - margin-bottom: 0; - } - - .feature__image { - background: #8e9eb0; - display: flex; - align-items: flex-end; - padding: $spacer; - padding-bottom: 0; - - svg { - margin-bottom: -.5rem; - } - } -} - -.getstarted { - color: $text-color; - counter-increment: getstarted-steps; - margin-top: $spacer * 2; - display: block; - padding-top: $spacer; - padding-bottom: $spacer; - - @media ($screen-sm) { - display: flex; - flex-wrap: wrap; - height: 100%; - margin-top: 0; - padding-left: $spacer * 2; - padding-right: $spacer * 2; - - .grid__col:first-child & { - border-right: .1rem solid darken($brand-05, 8%); - padding-left: 0; - } - - .grid__col:last-child & { - border-left: .1rem solid darken($brand-05, 8%); - padding-right: 0; - } - } -} - -.getstarted__title { - font-size: $font-size-h4; - margin-bottom: $spacer / 4; - - a & { - color: $link-color; - } - - &:before { - content: counter(getstarted-steps); - display: block; - background: rgba($brand-02, .3); - width: 1.75rem; - height: 1.75rem; - border-radius: 50%; - text-align: center; - line-height: 1.75rem; - font-size: $font-size-base; - font-weight: $font-weight-bold; - margin-bottom: $spacer / 1.5; - color: $text-color; - } -} - -.getstarted__text { - opacity: .9; -} - -// Community tools -.tool { - margin-bottom: $spacer * 2; - - &:last-child { - margin-bottom: 0; - } -} - -.tool__title { - font-size: $font-size-h5; - margin-bottom: $spacer / 4; - - .icon { - fill: inherit; - opacity: .5; - margin-left: $spacer / 2; - width: $font-size-mini; - margin-bottom: -.2rem; - } } // diff --git a/_src/_data/content-front.yml b/_src/_data/content-front.yml index e0ef77b..6695163 100644 --- a/_src/_data/content-front.yml +++ b/_src/_data/content-front.yml @@ -5,19 +5,20 @@ hero: farewell: title: "As of January 5, 2018, IPDB will be shutting down." - description: "We've thought long and hard about this decision. Our plan to be an internet-scale blockchain database for the world started in mid-2015, and those two and a half years are an eternity in blockchain time. The world has changed, and funding to maintain and operate IPDB while maintaining its core values became an insurmountable struggle." text: | + We've thought long and hard about this decision. Our plan to be an internet-scale blockchain database for the world started in mid-2015, and those two and a half years are an eternity in blockchain time. The world has changed, and funding to maintain and operate IPDB while maintaining its core values became an insurmountable struggle. + We’ve reached milestones in our short time that make us extremely proud. We built a governance model that offered transparency and legitimacy. We confronted the reality of data protection law. We will make these and other learnings available to you in the form of blog posts, reports, or contributions to other projects over the coming months. We want to thank everyone who has contributed to IPDB, especially our caretakers and board members. IPDB would not have made it this far without your guidance and expertise. We also want to thank the people who have been using the IPDB Test Network over the past six months. We’ve been driven by the dreams of what you’ll build. - The IPDB Test Network will continue to run until January 5, 2017, at which point it will be shut down. All accounts and data will be erased. + The IPDB Test Network will continue to run until January 5, 2018, at which point it will be shut down. All accounts and data will be erased. - BigchainDB will be starting its own test network running the same BigchainDB software that powered IPDB. If you want to continue building on the BigchainDB protocol, you can sign up today. + [BigchainDB](https://www.bigchaindb.com) will be starting its own test network running the same BigchainDB software that powered IPDB. If you want to continue building on the BigchainDB protocol, you can [sign up today](https://testnet.bigchaindb.com). - Thank you for being part of this journey with us. + **Thank you for being part of this journey with us.** See you on the internet. diff --git a/_src/index.html b/_src/index.html index 71adceb..40d8f9d 100644 --- a/_src/index.html +++ b/_src/index.html @@ -64,25 +64,21 @@ redirect_from: -
+

{{ content.farewell.title }}

-

{{ content.farewell.description }}

- {{ content.farewell.text | markdownify }} +
+ {{ content.farewell.text | markdownify }} +
- -
-

{{ content.connect.blog_title }}

-
-