mirror of
https://github.com/ipdb/website.git
synced 2024-11-22 01:26:52 +01:00
lots of spacing tweaks
This commit is contained in:
parent
da88c56b0e
commit
0d77b3a3d3
GPG Key ID:
606EEEF3C479A91F
@ -1,4 +1,4 @@
|
||||
$edge-height: $spacer * 5;
|
||||
$edge-height: $spacer * 4;
|
||||
|
||||
.header {
|
||||
background: $brand-05;
|
||||
|
||||
@ -1,8 +1,35 @@
|
||||
$edge-height-sm: $spacer * 2;
|
||||
$edge-height: $spacer * 4;
|
||||
|
||||
.hero {
|
||||
background: $brand-03;
|
||||
background: $brand-07;
|
||||
padding-top: $spacer * 2;
|
||||
padding-bottom: $spacer * 2;
|
||||
min-height: 100vh;
|
||||
min-height: calc(100vh - #{$edge-height-sm});
|
||||
margin-bottom: $edge-height-sm;
|
||||
position: relative;
|
||||
|
||||
@media ($screen-sm) {
|
||||
min-height: calc(100vh - #{$edge-height});
|
||||
margin-bottom: $edge-height;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: $edge-height-sm;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
background: #b3d0da;
|
||||
bottom: -($edge-height-sm);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 20%, 0% 100%);
|
||||
|
||||
@media ($screen-sm) {
|
||||
height: $edge-height;
|
||||
bottom: -($edge-height);
|
||||
}
|
||||
}
|
||||
|
||||
&,
|
||||
.hero__title,
|
||||
@ -11,11 +38,28 @@
|
||||
}
|
||||
|
||||
.menu--main {
|
||||
background: transparent;
|
||||
background: $brand-03;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: $edge-height-sm;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
background: $brand-03;
|
||||
bottom: -($edge-height-sm);
|
||||
clip-path: polygon(100% 0, 0 0, 0 100%);
|
||||
|
||||
@media ($screen-sm) {
|
||||
height: $edge-height;
|
||||
bottom: -($edge-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu__link {
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
// Color modifiers
|
||||
//
|
||||
.logo--white {
|
||||
color: #fff;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.logo--dark {
|
||||
|
||||
@ -34,7 +34,11 @@
|
||||
|
||||
.section__title {
|
||||
font-size: $font-size-h1;
|
||||
margin-bottom: $spacer;
|
||||
|
||||
@media ($screen-sm) {
|
||||
margin-bottom: $spacer / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.section__description {
|
||||
@ -46,33 +50,47 @@
|
||||
//
|
||||
// Section modifiers
|
||||
//
|
||||
$edge-height: $spacer * 5;
|
||||
$edge-height-sm: $spacer * 2;
|
||||
$edge-height: $spacer * 4;
|
||||
|
||||
.section--background {
|
||||
background: $brand-05;
|
||||
position: relative;
|
||||
margin-top: $edge-height-sm;
|
||||
margin-bottom: $edge-height-sm;
|
||||
|
||||
@media ($screen-sm) {
|
||||
margin-top: $edge-height;
|
||||
margin-bottom: $edge-height;
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: $edge-height;
|
||||
height: $edge-height-sm;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
background: $brand-05;
|
||||
|
||||
@media ($screen-sm) {
|
||||
height: $edge-height;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: -($edge-height);
|
||||
top: -($edge-height-sm);
|
||||
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: auto;
|
||||
bottom: -($edge-height);
|
||||
bottom: -($edge-height-sm);
|
||||
clip-path: polygon(100% 0, 0 0, 0 100%);
|
||||
|
||||
@media ($screen-sm) {
|
||||
bottom: -($edge-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
@import 'variables';
|
||||
|
||||
.feature {
|
||||
padding-top: $spacer;
|
||||
padding-bottom: $spacer;
|
||||
|
||||
&:first-child {
|
||||
padding-top: $spacer * 2;
|
||||
padding-bottom: $spacer * 2;
|
||||
min-height: 235px;
|
||||
}
|
||||
}
|
||||
|
||||
.feature__image {
|
||||
@ -28,3 +31,17 @@
|
||||
font-size: $font-size-h3;
|
||||
margin-bottom: $spacer / 2;
|
||||
}
|
||||
|
||||
.actions {
|
||||
text-align: center;
|
||||
margin-top: $spacer * 2;
|
||||
|
||||
.button:last-child {
|
||||
margin-left: $spacer * 2;
|
||||
}
|
||||
}
|
||||
|
||||
.connect__title {
|
||||
font-size: $font-size-h3;
|
||||
margin-bottom: $spacer / 2;
|
||||
}
|
||||
|
||||
@ -1 +1,11 @@
|
||||
@import 'variables';
|
||||
|
||||
.page--styleguide {
|
||||
.logo {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
.logo--white {
|
||||
background: $brand-03;
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,11 +23,27 @@ css: page-front
|
||||
<section class="section section--intro">
|
||||
<div class="row">
|
||||
<header class="section__header">
|
||||
<div class="grid grid--full grid-small--half grid-medium--columns grid--center grid--gutters">
|
||||
<div class="grid__col grid__col--4">
|
||||
<h1 class="section__title">{{ content.intro.title }}</h1>
|
||||
<p class="section__description">{{ content.intro.description }}</p>
|
||||
</div>
|
||||
<div class="grid__col grid__col--2">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="grid grid--full grid-small--columns grid--center grid--gutters">
|
||||
<div class="grid__col grid__col--4">
|
||||
{{ content.intro.text | markdownify }}
|
||||
</div>
|
||||
<div class="grid__col grid__col--2">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="features">
|
||||
{% for feature in content.intro.features %}
|
||||
@ -51,8 +67,10 @@ css: page-front
|
||||
{% endfor %}
|
||||
</section>
|
||||
|
||||
<footer class="actions">
|
||||
<a class="hero__action button button--primary" href="{{ site.signup.link }}">{{ site.signup.button }}</a>
|
||||
<a href="" class="button button--text">Read IPDB Documentation</a>
|
||||
</footer>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -60,8 +78,15 @@ css: page-front
|
||||
<section class="section section--background section--foundation">
|
||||
<div class="row">
|
||||
<header class="section__header">
|
||||
<div class="grid grid--full grid-small--half grid-medium--columns grid--center grid--gutters">
|
||||
<div class="grid__col grid__col--4">
|
||||
<h1 class="section__title">{{ content.foundation.title }}</h1>
|
||||
<p class="section__description">{{ content.foundation.description }}</p>
|
||||
</div>
|
||||
<div class="grid__col grid__col--2">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
<div class="row">
|
||||
@ -105,11 +130,14 @@ css: page-front
|
||||
<p class="section__description">{{ content.connect.description }}</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid--full grid-small--half grid--gutters">
|
||||
<div class="grid__col">
|
||||
<div class="connect connect--blog">
|
||||
<h2 class="connect__title">{{ content.connect.blog_title }}</h2>
|
||||
<a href="https://blog.ipdb.io" class="button button--text">IPDB Blog</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="grid__col">
|
||||
<div class="connect connect--newsletter">
|
||||
<h2 class="connect__title">{{ content.connect.newsletter_title }}</h2>
|
||||
</div>
|
||||
@ -118,4 +146,7 @@ css: page-front
|
||||
<h2 class="connect__title">{{ content.connect.social_title }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -12,6 +12,15 @@ narrow: true
|
||||
|
||||
# Typography
|
||||
|
||||
IPDB is a planetary-scale blockchain database built on [BigchainDB](https://www.bigchaindb.com). It’s a ready-to-use public network with a focus on **strong governance**. It shares _all the features_ of BigchainDB to make developers’ lives easier.
|
||||
|
||||
* Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
|
||||
* Est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
|
||||
* Maecenas sed diam eget risus varius blandit sit amet non magna.
|
||||
|
||||
1. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
|
||||
2. Est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
|
||||
3. Maecenas sed diam eget risus varius blandit sit amet non magna.
|
||||
|
||||
# Heading 1
|
||||
|
||||
@ -25,13 +34,6 @@ narrow: true
|
||||
|
||||
###### Heading 6
|
||||
|
||||
* Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
|
||||
* Est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
|
||||
* Maecenas sed diam eget risus varius blandit sit amet non magna.
|
||||
|
||||
1. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
|
||||
2. Est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
|
||||
3. Maecenas sed diam eget risus varius blandit sit amet non magna.
|
||||
|
||||
# Logo
|
||||
|
||||
@ -104,9 +106,16 @@ Logo can be used with a base class and modifier classes for size & color:
|
||||
<label class="form-label" for="comment">Autogrowing textarea</label>
|
||||
</div>
|
||||
<p class="form-group text-dimmed mini">
|
||||
Fields marked with an <span class="required">*</span> are required.
|
||||
Fields marked with an <span class="required"></span> are required.
|
||||
</p>
|
||||
<div class="form-group">
|
||||
<input class="btn btn-primary" type="submit" value="Submit">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
## Section header
|
||||
|
||||
<header class="section__header">
|
||||
<h1 class="section__title">A planetary-scale blockchain database</h1>
|
||||
<p class="section__description">IPDB relies on caretakers to run the BigchainDB nodes that store and validate transactions. The IPDB Caretakers are the members of the IPDB Foundation.</p>
|
||||
</header>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user