bigchaindb/site
1
0
Fork 0
mirror of https://github.com/bigchaindb/site.git synced 2025-02-14 21:10:28 +01:00
Code Releases Activity

branding cleanup & tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2016-01-30 13:34:11 +01:00
parent e01603e284
commit 9bbbbb7d9e
14 changed files with 84 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,11 +16,12 @@
cursor: pointer;
user-select: none;
border: none;
box-shadow: none;
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius);
&:hover,
&:focus {
box-shadow: 0 1px 3px rgba($brand-main-blue-dark, .15);
box-shadow: 0 1px 4px rgba($brand-main-blue-dark, .4);
transform: translateY(-1px);
}
@ -29,7 +30,7 @@
background-image: none;
outline: 0;
transform: translateY(0);
box-shadow: 0 1px 3px rgba($brand-main-blue-dark, .05);
box-shadow: 0 1px 2px rgba($brand-main-blue-dark, .3);
}
&.disabled,
&:disabled {
@ -37,6 +38,13 @@
opacity: 0.65;
box-shadow: none;
}
.icon {
width: $font-size-base;
height: $font-size-base;
margin-right: .25rem;
margin-bottom: -1px;
}
}
// Future-proof disabling of clicks on `<a>` elements
@ -67,25 +75,6 @@ fieldset[disabled] a.btn {
@include button-variant($btn-danger-color, $btn-danger-bg);
}
// Remove all backgrounds
.btn-primary-outline {
@include button-outline-variant($btn-primary-bg);
}
.btn-secondary-outline {
@include button-outline-variant($btn-secondary);
}
.btn-info-outline {
@include button-outline-variant($btn-info-bg);
}
.btn-success-outline {
@include button-outline-variant($btn-success-bg);
}
.btn-warning-outline {
@include button-outline-variant($btn-warning-bg);
}
.btn-danger-outline {
@include button-outline-variant($btn-danger-bg);
}
//
// Link buttons
@ -108,26 +97,42 @@ fieldset[disabled] a.btn {
&:active {
border-color: transparent;
box-shadow: none;
background: none;
}
&:disabled {
}
}
//
// Button Sizes
//
.btn-lg {
// line-height: ensure even-numbered height of button next to large input
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
.icon {
width: $font-size-lg;
height: $font-size-lg;
}
}
.btn-sm {
// line-height: ensure proper height of button next to small input
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
.icon {
width: $font-size-sm;
height: $font-size-sm;
}
}
.btn-xs {
// line-height: ensure proper height of button next to small input
@include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-xs, $line-height-xs, $btn-border-radius-xs);
.icon {
width: $font-size-xs;
height: $font-size-xs;
}
}
//

8
_src/_assets/styles/bigchain/_forms.scss
View File

@ -48,6 +48,10 @@
&:disabled {
cursor: disabled;
}
.background--photo & {
border-bottom-color: rgba(#fff, .5);
}
}
@ -67,6 +71,10 @@
font-size: $font-size-base;
line-height: $line-height;
color: $input-color-placeholder;
.background--photo & {
color: rgba(#fff, .5);
}
}
.form-control {

11
_src/_assets/styles/bigchain/_menus.scss
View File

@ -19,6 +19,7 @@
display: inline-block;
padding: $spacer;
text-transform: uppercase;
box-shadow: none;
@media ($screen-md) {
padding: ($spacer * 1.5) $spacer;
@ -41,6 +42,7 @@
&:hover,
&:focus,
&.active {
background: transparent;
// show link line
&:after { transform: scale(1); }
}
@ -49,6 +51,7 @@
.menu__logo {
display: block;
margin-top: $spacer;
box-shadow: none;
@media ($screen-md) {
display: inline-block;
@ -61,9 +64,11 @@
opacity: .8;
}
&:hover svg,
&:focus svg {
opacity: 1;
&:hover,
&:focus {
background: transparent;
svg { opacity: 1; }
}
}

29
_src/_assets/styles/bigchain/_mixins/_buttons.scss
View File

@ -2,7 +2,7 @@
// Button variants
//
@mixin button-variant($color, $background) {
$active-background: darken($background, 5%);
$active-background: lighten($background, 5%);
color: $color !important;
background: $background;
@ -13,7 +13,7 @@
}
&:active {
color: $color !important;
background: darken($background, 10%);
background: darken($background, 2%);
transition: none;
}
&.disabled,
@ -22,31 +22,8 @@
background-color: $background;
}
}
}
@mixin button-outline-variant($color) {
color: $color;
background-image: none;
background-color: transparent;
border: 1px solid $color;
&:hover,
&:focus {
background-color: $color;
border-color: $color;
color: #fff;
}
&:active {
background-color: darken($color, 10%);
border-color: darken($color, 10%);
}
&.disabled,
&:disabled {
&:focus {
border-color: lighten($color, 20%);
}
}
.icon { fill: $color; }
}
// Button sizes

9
_src/_assets/styles/bigchain/_team.scss
View File

@ -43,8 +43,15 @@
.team__social__link {
display: inline-block;
margin: 0 ($spacer / 4);
box-shadow: none;
&,
&:hover,
&:focus {
background: transparent;
}
.icon {
fill: rgba($link-color, .4);
fill: $brand-primary;
}
}

2
_src/_assets/styles/bigchain/_typography.scss
View File

@ -55,10 +55,12 @@ a {
@extend .transition;
color: $link-color;
text-decoration: none;
box-shadow: inset 0 -2px 0 $brand-primary;
&:hover,
&:focus {
color: $link-hover-color;
background: $link-hover-bg;
}
&:active {}

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

@ -10,7 +10,7 @@
$brand-main-blue: #074354 !default;
$brand-main-blue-light: #BFE6EC !default;
$brand-main-blue-dark: #101A25 !default;
$brand-main-violet: #D98FD9 !default;
$brand-main-violet: #d37cd3 !default;
$brand-main-gray: #70859B !default;
$gray-darker: darken($brand-main-gray, 25%) !default;
@ -24,7 +24,7 @@ $brand-primary: $brand-main-violet !default;
$brand-success: #388250 !default;
$brand-info: #3E91CE !default;
$brand-warning: #8E8E24 !default;
$brand-danger: #8F3B39 !default;
$brand-danger: #c9726a !default;
//
@ -69,8 +69,9 @@ $headings-color: $brand-main-blue-light !default;
$body-bg: $gray-dark !default;
$text-color: $gray-lightest !default;
$link-color: $brand-primary !default;
$link-hover-color: lighten($link-color, 15%) !default;
$link-color: inherit !default;
$link-hover-color: #fff !default;
$link-hover-bg: rgba($brand-primary, .8) !default;
//
@ -90,8 +91,8 @@ $screen-lg: 'min-width: #{$screen-lg-min}';
//
$spacer: 1rem !default;
$line-height-lg: (4 / 3) !default;
$line-height-sm: 1.5 !default;
$line-height-xs: 1.5 !default;
$line-height-sm: 1.3 !default;
$line-height-xs: 1.2 !default;
$border-radius: .15rem !default;
$border-radius-lg: .2rem !default;
@ -128,33 +129,26 @@ $pre-scrollable-max-height: 340px !default;
$btn-font-family: $font-family-avenir;
$btn-font-weight: $font-weight-normal !default;
$btn-padding-x: 1.5rem !default;
$btn-padding-y: .375rem !default;
$btn-padding-x: 2rem !default;
$btn-padding-y: .5rem !default;
$btn-primary-color: #fff !default;
$btn-primary-bg: $link-color !default;
$btn-primary-border: $link-color !default;
$btn-primary-bg: $brand-primary !default;
$btn-secondary-color: $gray-dark !default;
$btn-secondary-bg: $gray-lightest !default;
$btn-secondary: $gray-light !default;
$btn-secondary-color: #fff !default;
$btn-secondary-bg: $brand-main-gray !default;
$btn-info-color: #fff !default;
$btn-info-bg: $brand-info !default;
$btn-info-border: $btn-info-bg !default;
$btn-success-color: #fff !default;
$btn-success-bg: $brand-success !default;
$btn-success-border: $btn-success-bg !default;
$btn-warning-color: #fff !default;
$btn-warning-bg: $brand-warning !default;
$btn-warning-border: $btn-warning-bg !default;
$btn-danger-color: #fff !default;
$btn-danger-bg: $brand-danger !default;
$btn-danger-border: $btn-danger-bg !default;
$btn-link-disabled-color: $gray-light !default;
@ -162,10 +156,10 @@ $btn-padding-x-xs: .75rem !default;
$btn-padding-y-xs: .15rem !default;
$btn-padding-x-sm: 1.25rem !default;
$btn-padding-y-sm: .25rem !default;
$btn-padding-y-sm: .4rem !default;
$btn-padding-x-lg: 1.75rem !default;
$btn-padding-y-lg: .75rem !default;
$btn-padding-x-lg: 3rem !default;
$btn-padding-y-lg: 1rem !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius !default;

9
_src/_assets/styles/page-community.scss
View File

@ -5,8 +5,8 @@
//
.page-community {
.header {
background: url('../img/photo2.jpg') no-repeat center top;
background-size: cover;
background-image: url('../img/photo2.jpg');
background-position: center top;
}
}
@ -17,11 +17,6 @@
.section-community {
.grid h1 { @extend .h3; }
.icon--social {
width: 2rem;
height: 2rem;
}
}
.section-conduct {

20
_src/_assets/styles/page-front.scss
View File

@ -21,25 +21,7 @@
}
.section-whitepaper {
a {
@extend .transition;
display: block;
text-align: center;
&:hover,
&:focus {
transform: scale(1.05);
}
}
.icon {
stroke: $link-color;
stroke-width: 2;
display: block;
margin: auto;
margin-bottom: $spacer;
}
@extend .text-center;
}

2
_src/_data/colors.yml
View File

@ -6,7 +6,7 @@ primary:
- name: brand-main-blue
hex: 275B82
- name: brand-main-violet
hex: D98FD9
hex: d37cd3
- name: brand-main-blue-dark
hex: 101A25
- name: brand-main-blue-light

10
_src/community.html
View File

@ -14,17 +14,17 @@ title: Community
<div class="grid__col">
<h1 class="">Google Group</h1>
<p>Participate in our Google Group</p>
<a href="https://groups.google.com/forum/#!forum/bigchain" class="btn btn-primary-outline btn-sm">Bigchain Google Group</a>
<a href="https://groups.google.com/forum/#!forum/bigchain" class="btn btn-primary btn-sm">Bigchain Google Group</a>
</div>
<div class="grid__col">
<h1>Social</h1>
<p>Follow us for the latest updates</p>
<p>
<a href="https://twitter.com/{{ site.twitter }}">
<svg class="icon icon--social icon--twitter" aria-labelledby="title">
<title>Twitter</title>
<a href="https://twitter.com/{{ site.twitter }}" class="btn btn-primary btn-sm">
<svg class="icon icon--social icon--twitter">
<use xlink:href="/assets/img/sprite.svg#twitter"></use>
</svg>
Twitter
</a>
</p>
</div>
@ -40,7 +40,7 @@ title: Community
</header>
<p>
<a href="https://github.com/ascribe/bigchain/blob/master/CODE_OF_CONDUCT.md" class="btn btn-primary btn-sm">Read Code of Conduct</a>
<a href="https://github.com/ascribe/bigchain/blob/master/CODE_OF_CONDUCT.md" class="btn btn-secondary btn-sm">Read Code of Conduct</a>
</p>
</div>
</section>

6
_src/features.html
View File

@ -52,8 +52,8 @@ title: Features
<span class="difference__text">Open source, public version for the world and a private one for specific industry use cases.</span>
</p>
<p>
For more insight, read our whitepaper.
<p class="text-center">
For more insight, read our <a href="/whitepaper/">whitepaper</a>.
</p>
</div>
</section>
@ -63,7 +63,7 @@ title: Features
<div class="row">
<header class="section-header">
<h1 class="section-title">Timeline.</h1>
<p class="section-description">Private beta is shipping now. Contact us more information. Public Bigchain will be released soon</p>
<p class="section-description">Private beta is shipping now. <a href="/contact/">Contact us</a> for more information. Public Bigchain will be released soon</p>
</header>
<figure class="timeline grid grid--full grid-small--fit grid--gutters">

2
_src/index.html
View File

@ -84,7 +84,7 @@ tagline: 'Meet Bigchain, the world’s most scalable blockchain'
<h1 class="section-title">Whitepaper</h1>
</header>
<a href="/whitepaper/">
<a class="btn btn-primary" href="/whitepaper/">
<svg class="icon">
<use xlink:href="/assets/img/sprite.svg#icon-documents"></use>
</svg>

18
_src/styleguide.md
View File

@ -150,24 +150,6 @@ Donec *ullamcorper nulla* non metus auctor fringilla. Duis mollis, est non commo
<a class="btn btn-secondary btn-lg">Button</a>
```
<a class="btn btn-primary-outline">Button</a> <a class="btn btn-primary-outline btn-xs">Button</a> <a class="btn btn-primary-outline btn-sm">Button</a> <a class="btn btn-primary-outline btn-lg">Button</a>
```html
<a class="btn btn-primary-outline">Button</a>
<a class="btn btn-primary-outline btn-xs">Button</a>
<a class="btn btn-primary-outline btn-sm">Button</a>
<a class="btn btn-primary-outline btn-lg">Button</a>
```
<a class="btn btn-secondary-outline">Button</a> <a class="btn btn-secondary-outline btn-xs">Button</a> <a class="btn btn-secondary-outline btn-sm">Button</a> <a class="btn btn-secondary-outline btn-lg">Button</a>
```html
<a class="btn btn-secondary-outline">Button</a>
<a class="btn btn-secondary-outline btn-xs">Button</a>
<a class="btn btn-secondary-outline btn-sm">Button</a>
<a class="btn btn-secondary-outline btn-lg">Button</a>
```
<a class="btn btn-link">Button</a> <a class="btn btn-link btn-xs">Button</a> <a class="btn btn-link btn-sm">Button</a> <a class="btn btn-link btn-lg">Button</a>
```html