mirror of
https://github.com/ipdb/website.git
synced 2024-11-25 02:40:04 +01:00
styling
This commit is contained in:
parent
626bc8dfc5
commit
5c952e69d7
GPG Key ID:
606EEEF3C479A91F
@ -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 {
|
||||
|
||||
@ -132,7 +132,6 @@ ol {
|
||||
|
||||
|
||||
.lead {
|
||||
color: $brand-03;
|
||||
font-size: $font-size-large;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
<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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user