bigchaindb
/
site
mirror of https://github.com/bigchaindb/site.git
1
0
Fork 0
Code Releases Activity

more balanced visual hierarchy of section title, description, content

This commit is contained in:
Matthias Kretschmann 2015-12-21 14:34:02 +01:00
parent 2cf0d87807
commit 0c17bb9741
5 changed files with 46 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
_src/_assets/styles/bigchain/_buttons.scss
View File

@ -5,6 +5,7 @@
//
.btn {
@extend .transition;
display: inline-block;
font-family: $btn-font-family;
font-weight: $btn-font-weight;
@ -15,8 +16,8 @@
cursor: pointer;
user-select: none;
border: 1px solid transparent;
@include button-size($btn-padding-y, $btn-padding-x, $font-size-sm, $line-height, $btn-border-radius);
transition: all .2s ease-in-out;
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius);
min-width: 10rem;
&,
&:active,

4
_src/_assets/styles/bigchain/_grid.scss
View File

@ -38,8 +38,8 @@
.row {
max-width: 50em;
margin: auto;
padding-left: $gutter-space;
padding-right: $gutter-space;
padding-left: ($gutter-space / 2);
padding-right: ($gutter-space / 2);
}

17
_src/_assets/styles/bigchain/_sections.scss
View File

@ -40,24 +40,29 @@
margin-top: 0;
margin-bottom: ($spacer * 2);
@media ($screen-sm) {
font-size: $font-size-h2;
}
// the bottom line
&:after {
content: "";
height: 2px;
width: 5rem;
display: block;
margin: ($spacer * 2) auto 0 auto;
background: lighten($brand-main-gray, 30%);
}
@media ($screen-sm) {
font-size: $font-size-h2;
background: $gray-lighter;
}
}
.section-description {
color: $text-color;
color: $headings-color;
margin-bottom: 0;
@media ($screen-sm) {
font-size: $font-size-lg;
}
+ .section-description {
margin-top: $spacer;
}

12
_src/_assets/styles/bigchain/_variables.scss
View File

@ -16,11 +16,11 @@ $brand-main-gray: #70859B !default;
$brand-main-brown: #B56D00 !default;
$brand-main-light: #FFFFFF !default;
$gray-dark: #373a3c !default;
$gray-dark: darken($brand-main-gray, 20%) !default;
$gray: $brand-main-gray !default;
$gray-light: #818a91 !default;
$gray-lighter: #eceeef !default;
$gray-lightest: #f7f7f9 !default;
$gray-light: lighten($brand-main-gray, 20%) !default;
$gray-lighter: lighten($brand-main-gray, 30%) !default;
$gray-lightest: lighten($brand-main-gray, 40%) !default;
$brand-primary: $brand-main-blue !default;
$brand-success: #388250 !default;
@ -68,7 +68,7 @@ $headings-color: $brand-main-gray !default;
// Scaffolding
//
$body-bg: #fff !default;
$text-color: $brand-main-blue-dark !default;
$text-color: $gray-dark !default;
$link-color: $brand-main-brown !default;
$link-hover-color: darken($link-color, 15%) !default;
@ -166,7 +166,7 @@ $input-bg: rgba(255,255,255,.1) !default;
$input-bg-disabled: $gray-lighter !default;
$input-color: $gray !default;
$input-border-color: #ccc !default;
$input-border-color: $gray-lighter !default;
$input-border-focus: #66afe9 !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default;

47
_src/index.html
View File

@ -26,28 +26,28 @@ front_page: true
<div class="row">
<header class="section-header">
<h1 class="section-title">Key Features</h1>
<p class="section-description">Something like a value proposition also would fit here, just something to explain what exactly Bigchain is, what I can do with it and so on.</p>
</header>
<div class="section-description">
<div class="grid grid--full grid-small--fit grid--gutters">
<p class="grid__col">
<svg class="icon">
<use xlink:href="/assets/img/sprite.svg#icon-graph"></use>
</svg>
100,000 transactions per second and climbing
</p>
<p class="grid__col">
<svg class="icon">
<use xlink:href="/assets/img/sprite.svg#icon-servers"></use>
</svg>
Petabyte Capacity
</p>
<p class="grid__col">
<svg class="icon">
<use xlink:href="/assets/img/sprite.svg#icon-tree"></use>
</svg>
Open Source
</p>
</div>
<div class="grid grid--full grid-small--fit grid--gutters">
<p class="grid__col">
<svg class="icon">
<use xlink:href="/assets/img/sprite.svg#icon-graph"></use>
</svg>
100,000 transactions per second and climbing
</p>
<p class="grid__col">
<svg class="icon">
<use xlink:href="/assets/img/sprite.svg#icon-servers"></use>
</svg>
Petabyte Capacity
</p>
<p class="grid__col">
<svg class="icon">
<use xlink:href="/assets/img/sprite.svg#icon-tree"></use>
</svg>
Open Source
</p>
</div>
</div>
</section>
@ -56,12 +56,13 @@ front_page: true
<div class="row">
<header class="section-header">
<h1 class="section-title">Whitepaper</h1>
<p class="section-description">Coming soon</p>
<p class="section-description">Create excitement by saying here what the whitepaper will contain and why visitors would want it.<p>
</header>
<svg class="icon">
<use xlink:href="/assets/img/sprite.svg#icon-documents"></use>
</svg>
<p class="text-center">Coming soon</p>
</div>
</section>