ipdb
/
website
mirror of https://github.com/ipdb/website.git
1
0
Fork 0
Code Releases Activity

styling

This commit is contained in:
Matthias Kretschmann 2017-12-18 21:58:01 +01:00
parent 626bc8dfc5
commit 5c952e69d7
Signed by: m
GPG Key ID: 606EEEF3C479A91F
5 changed files with 17 additions and 298 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
_src/_assets/scss/_hero.scss
View File

@ -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 {

1
_src/_assets/scss/_typography.scss
View File

@ -132,7 +132,6 @@ ol {
.lead {
color: $brand-03;
font-size: $font-size-large;
}

283
_src/_assets/scss/page-front.scss
View File

@ -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;
}
}
//

9
_src/_data/content-front.yml
View File

@ -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.

12
_src/index.html
View File

@ -64,25 +64,21 @@ redirect_from:
</header>
<section class="section section--farewell">
<section class="section section--farewell section--background" id="farewell">
<div class="row row--narrow">
<header class="section__header">
<h1 class="section__title">{{ content.farewell.title }}</h1>
<p class="section__description">{{ content.farewell.description }}</p>
</header>
{{ content.farewell.text | markdownify }}
<div class="lead">
{{ content.farewell.text | markdownify }}
</div>
</div>
</section>
<section class="section section--connect">
<div class="row">
<header class="section__header">
<h1 class="section__title">{{ content.connect.blog_title }}</h1>
</header>
<div class="connect connect--blog">
<div class="articles">
<div class="grid grid--full grid-small--half grid-medium--fourth grid--gutters">