mirror of
https://github.com/bigchaindb/site.git
synced 2024-11-22 01:36:55 +01:00
dev tweaks
- start linting scss based on Airbnb style guide - add includePaths to css & js tasks
This commit is contained in:
parent
31fce530a3
commit
6ede38abfc
GPG Key ID:
BD3C1F3EDD7831FC
45
.scss-lint.yml
Normal file
45
.scss-lint.yml
Normal file
@ -0,0 +1,45 @@
|
||||
#
|
||||
# https://github.com/airbnb/css/blob/master/.scss-lint.yml
|
||||
#
|
||||
severity: error
|
||||
|
||||
linters:
|
||||
|
||||
BorderZero:
|
||||
enabled: true
|
||||
convention: zero
|
||||
|
||||
BemDepth:
|
||||
enabled: true
|
||||
|
||||
DeclarationOrder:
|
||||
enabled: false
|
||||
|
||||
ExtendDirective:
|
||||
enabled: true
|
||||
|
||||
LeadingZero:
|
||||
enabled: false
|
||||
|
||||
NameFormat:
|
||||
enabled: true
|
||||
|
||||
PrivateNamingConvention:
|
||||
enabled: true
|
||||
prefix: _
|
||||
|
||||
PropertySortOrder:
|
||||
enabled: false
|
||||
|
||||
QualifyingElement:
|
||||
enabled: false
|
||||
|
||||
SelectorFormat:
|
||||
enabled: true
|
||||
convention: hyphenated_BEM
|
||||
class_convention: ^(?!js-).*
|
||||
class_convention_explanation: should not be written in the form js-*
|
||||
|
||||
Indentation:
|
||||
enabled: true
|
||||
width: 4
|
||||
12
README.md
12
README.md
@ -107,3 +107,15 @@ gulp build --production
|
||||
# deploy contents of /_dist to live
|
||||
gulp deploy --live
|
||||
```
|
||||
|
||||
## Coding conventions
|
||||
|
||||
### (S)CSS
|
||||
|
||||
Follows [Airbnb CSS / Sass Styleguide](https://github.com/airbnb/css). Lint with [scss-lint](https://github.com/brigade/scss-lint).
|
||||
|
||||
Rule exceptions:
|
||||
|
||||
- indentation: 4 spaces
|
||||
- use single quotes
|
||||
- allow single line rule sets
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
|
||||
//=include ../../../node_modules/svg4everybody/dist/svg4everybody.js
|
||||
//=include ../../../node_modules/jquery/dist/jquery.js
|
||||
//=include svg4everybody/dist/svg4everybody.js
|
||||
//=include jquery/dist/jquery.js
|
||||
|
||||
//=include bigchain/analytics.js
|
||||
//=include bigchain/forms.js
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
|
||||
//=include ../../../../node_modules/parsleyjs/dist/parsley.js
|
||||
//=include parsleyjs/dist/parsley.js
|
||||
|
||||
var Forms = (function(w, d, $) {
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
|
||||
//=include ../vendor/jquery.ajaxchimp.js
|
||||
//=include vendor/jquery.ajaxchimp.js
|
||||
|
||||
var Newsletter = (function(w, d, $) {
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
|
||||
//=include ../../../../node_modules/is-in-viewport/lib/isInViewport.js
|
||||
//=include is-in-viewport/lib/isInViewport.js
|
||||
|
||||
var Testimonials = (function(w, d, $) {
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
|
||||
//=include ../../../node_modules/is-in-viewport/lib/isInViewport.js
|
||||
//=include is-in-viewport/lib/isInViewport.js
|
||||
//=include bigchain/testimonials.js
|
||||
|
||||
jQuery(function($) {
|
||||
|
||||
@ -4,16 +4,16 @@
|
||||
background-image: url('/assets/img/fail-cat.gif');
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
@extend .color-overlay;
|
||||
@include color-overlay;
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: none;
|
||||
|
||||
&:before { display: none; }
|
||||
&::before { display: none; }
|
||||
}
|
||||
|
||||
.header__title {
|
||||
@ -21,12 +21,12 @@
|
||||
padding-bottom: 0;
|
||||
|
||||
// the bottom line
|
||||
&:after {
|
||||
content: "";
|
||||
&::after {
|
||||
content: '';
|
||||
height: 1px;
|
||||
width: 5rem;
|
||||
display: block;
|
||||
margin: ($spacer * 2) auto 0 auto;
|
||||
margin: ($spacer * 2) auto 0;
|
||||
background: $brand-main-gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid__col {
|
||||
@media ($screen-sm) {
|
||||
flex-basis: 48%;
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
}
|
||||
|
||||
.section-community {
|
||||
@extend .text-center;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
// make room for wrigely
|
||||
padding-bottom: 200px;
|
||||
@ -31,7 +31,7 @@
|
||||
.social-link {
|
||||
&,
|
||||
.icon {
|
||||
@extend .transition;
|
||||
@include transition;
|
||||
}
|
||||
|
||||
box-shadow: none;
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
//
|
||||
|
||||
.contactlist {
|
||||
p { margin-bottom: 0 }
|
||||
p { margin-bottom: 0; }
|
||||
|
||||
.p-adr { margin-bottom: $spacer; }
|
||||
.social { margin-top: $spacer; }
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
}
|
||||
|
||||
.feture_roadmap {
|
||||
padding: 1rem 0 0 0;
|
||||
padding: 1rem 0 0;
|
||||
}
|
||||
|
||||
.feature__title__comingsoon {
|
||||
|
||||
@ -18,8 +18,8 @@
|
||||
|
||||
.section-intro__main {
|
||||
@extend .text-center;
|
||||
margin-top: $spacer;
|
||||
margin-bottom: $spacer * 4;
|
||||
margin-top: $spacer;
|
||||
|
||||
h3 {
|
||||
@extend .h4;
|
||||
@ -29,7 +29,7 @@
|
||||
}
|
||||
|
||||
sub {
|
||||
font-size: 0.85rem;
|
||||
font-size: .85rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@ -39,8 +39,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.section-intro__detail {}
|
||||
|
||||
.section-quickstart__title {
|
||||
@extend .h3;
|
||||
margin-top: 0;
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
text-align: center;
|
||||
|
||||
&,
|
||||
.color-meta { @extend .transition; }
|
||||
.color-meta { @include transition; }
|
||||
|
||||
.color-meta {
|
||||
display: block;
|
||||
@ -48,16 +48,16 @@
|
||||
|
||||
|
||||
// colors
|
||||
.brand-main-blue { background: $brand-main-blue }
|
||||
.brand-main-blue-light { background: $brand-main-blue-light }
|
||||
.brand-main-blue-dark { background: $brand-main-blue-dark }
|
||||
.brand-main-gray { background: $brand-main-gray }
|
||||
.brand-main-green { background: $brand-main-green }
|
||||
.brand-main-violet { background: $brand-main-violet }
|
||||
.brand-main-gray-light { background: $brand-main-gray-light }
|
||||
.brand-main-gray-lighter { background: $brand-main-gray-lighter }
|
||||
.brand-main-blue { background: $brand-main-blue; }
|
||||
.brand-main-blue-light { background: $brand-main-blue-light; }
|
||||
.brand-main-blue-dark { background: $brand-main-blue-dark; }
|
||||
.brand-main-gray { background: $brand-main-gray; }
|
||||
.brand-main-green { background: $brand-main-green; }
|
||||
.brand-main-violet { background: $brand-main-violet; }
|
||||
.brand-main-gray-light { background: $brand-main-gray-light; }
|
||||
.brand-main-gray-lighter { background: $brand-main-gray-lighter; }
|
||||
|
||||
.brand-success { background: $brand-success }
|
||||
.brand-info { background: $brand-info }
|
||||
.brand-warning { background: $brand-warning }
|
||||
.brand-danger { background: $brand-danger }
|
||||
.brand-success { background: $brand-success; }
|
||||
.brand-info { background: $brand-info; }
|
||||
.brand-warning { background: $brand-warning; }
|
||||
.brand-danger { background: $brand-danger; }
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacer * 2;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,3 @@
|
||||
> p:nth-child(3) { text-align: center; }
|
||||
}
|
||||
}
|
||||
|
||||
.section-whitepaper-download {
|
||||
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
padding-top: ($spacer * 3);
|
||||
padding-bottom: ($spacer * 3);
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
&:last-child { border-bottom: 0; }
|
||||
|
||||
// use this so animated elements coming in from outside of screen
|
||||
// don't affect layout
|
||||
@ -40,12 +40,12 @@
|
||||
margin-bottom: ($spacer * 2);
|
||||
|
||||
// the bottom line
|
||||
&:after {
|
||||
content: "";
|
||||
&::after {
|
||||
content: '';
|
||||
height: 2px;
|
||||
width: 3rem;
|
||||
display: block;
|
||||
margin: ($spacer * 2) auto 0 auto;
|
||||
margin: ($spacer * 2) auto 0;
|
||||
background: $gray-light;
|
||||
}
|
||||
}
|
||||
@ -100,7 +100,7 @@
|
||||
// Photo background
|
||||
//
|
||||
.background--photo {
|
||||
@extend .color-overlay;
|
||||
@include color-overlay;
|
||||
|
||||
// background
|
||||
background: url('../img/hero-berlin.jpg') no-repeat top center;
|
||||
@ -112,7 +112,7 @@
|
||||
}
|
||||
|
||||
.section-title {
|
||||
&:after {
|
||||
&::after {
|
||||
background: rgba($brand-main-blue-light, .5);
|
||||
}
|
||||
}
|
||||
@ -123,3 +123,12 @@
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Specific sections
|
||||
//
|
||||
@import '_sections/section-cta-whitepaper';
|
||||
@import '_sections/section-cta-features';
|
||||
@import '_sections/section-cta-community';
|
||||
@import '_sections/section-partners';
|
||||
@ -2,11 +2,6 @@
|
||||
.grid__col {
|
||||
padding-right: $gutter-space;
|
||||
}
|
||||
@media ($screen-md) {
|
||||
.grid__col {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.partner {
|
||||
@ -32,7 +27,7 @@
|
||||
// All logos
|
||||
//
|
||||
.partner__logo {
|
||||
@extend .transition;
|
||||
@include transition;
|
||||
fill: $brand-main-blue-light;
|
||||
fill-opacity: .6;
|
||||
max-width: 100%;
|
||||
|
||||
@ -5,60 +5,56 @@
|
||||
//
|
||||
|
||||
// Normalize all the things
|
||||
@import '../../../node_modules/normalize-css/normalize';
|
||||
@import '../../../node_modules/normalize-opentype.css/normalize-opentype.scss';
|
||||
@import 'normalize-css/normalize';
|
||||
@import 'normalize-opentype.css/normalize-opentype.scss';
|
||||
|
||||
// Variables & Mixins
|
||||
@import 'bigchain/_variables';
|
||||
@import 'bigchain/_mixins';
|
||||
@import 'bigchain/variables';
|
||||
@import 'bigchain/mixins';
|
||||
@import 'bigchain/animations';
|
||||
|
||||
// Components
|
||||
@import 'bigchain/_typography';
|
||||
@import 'bigchain/_animations';
|
||||
@import 'bigchain/_tables';
|
||||
@import 'bigchain/_buttons';
|
||||
@import 'bigchain/_forms';
|
||||
@import 'bigchain/_input-group';
|
||||
@import 'bigchain/_logo';
|
||||
@import 'bigchain/_icons';
|
||||
@import 'bigchain/_grid';
|
||||
@import 'bigchain/_media';
|
||||
@import 'bigchain/_sections';
|
||||
@import 'bigchain/_menus';
|
||||
@import 'bigchain/_tabs';
|
||||
@import 'bigchain/_alerts';
|
||||
@import 'bigchain/_code';
|
||||
@import 'bigchain/_syntax';
|
||||
@import 'bigchain/_hero';
|
||||
@import 'bigchain/_header';
|
||||
@import 'bigchain/_footer';
|
||||
@import 'bigchain/_team';
|
||||
@import 'bigchain/_timeline';
|
||||
@import 'bigchain/_terminal';
|
||||
@import 'bigchain/_utilities';
|
||||
@import 'bigchain/typography';
|
||||
@import 'bigchain/tables';
|
||||
@import 'bigchain/buttons';
|
||||
@import 'bigchain/forms';
|
||||
@import 'bigchain/input-group';
|
||||
@import 'bigchain/logo';
|
||||
@import 'bigchain/icons';
|
||||
@import 'bigchain/grid';
|
||||
@import 'bigchain/media';
|
||||
@import 'bigchain/menus';
|
||||
@import 'bigchain/tabs';
|
||||
@import 'bigchain/alerts';
|
||||
@import 'bigchain/code';
|
||||
@import 'bigchain/syntax';
|
||||
@import 'bigchain/hero';
|
||||
@import 'bigchain/header';
|
||||
@import 'bigchain/footer';
|
||||
@import 'bigchain/team';
|
||||
@import 'bigchain/timeline';
|
||||
@import 'bigchain/terminal';
|
||||
@import 'bigchain/utilities';
|
||||
|
||||
// Content types
|
||||
@import 'bigchain/_content-page';
|
||||
@import 'bigchain/_comments';
|
||||
@import 'bigchain/_toc';
|
||||
@import 'bigchain/_newsletter';
|
||||
@import 'bigchain/_testimonials';
|
||||
@import 'bigchain/content-page';
|
||||
@import 'bigchain/comments';
|
||||
@import 'bigchain/toc';
|
||||
@import 'bigchain/newsletter';
|
||||
@import 'bigchain/testimonials';
|
||||
|
||||
// Section specific styles
|
||||
@import '_sections/section-cta-whitepaper';
|
||||
@import '_sections/section-cta-features';
|
||||
@import '_sections/section-cta-community';
|
||||
@import '_sections/section-partners';
|
||||
@import 'sections';
|
||||
|
||||
// specific page styles
|
||||
@import '_page-front';
|
||||
@import '_page-whitepaper';
|
||||
@import '_page-404';
|
||||
@import '_page-styleguide';
|
||||
@import '_page-about';
|
||||
@import '_page-features';
|
||||
@import '_page-usecases';
|
||||
@import '_page-community';
|
||||
@import '_page-contact';
|
||||
@import '_page-cla';
|
||||
@import '_page-partners';
|
||||
@import 'page-front';
|
||||
@import 'page-whitepaper';
|
||||
@import 'page-404';
|
||||
@import 'page-styleguide';
|
||||
@import 'page-about';
|
||||
@import 'page-features';
|
||||
@import 'page-usecases';
|
||||
@import 'page-community';
|
||||
@import 'page-contact';
|
||||
@import 'page-cla';
|
||||
@import 'page-partners';
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
> p:last-child { margin-bottom: 0 }
|
||||
> p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
.alert__icon {
|
||||
@ -26,19 +26,11 @@
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
stroke-width: 3;
|
||||
margin: 0 auto $spacer auto;
|
||||
margin: 0 auto $spacer;
|
||||
border-bottom: 1px solid transparent;
|
||||
padding-bottom: $spacer;
|
||||
}
|
||||
|
||||
.alert__title {
|
||||
|
||||
}
|
||||
|
||||
.alert__link {
|
||||
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Alternate styles
|
||||
@ -46,12 +38,15 @@
|
||||
.alert-success {
|
||||
@include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
@include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
@include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
@include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
|
||||
}
|
||||
|
||||
@ -42,6 +42,7 @@ $timing-bounce: cubic-bezier(0,1.02,.32,1.34); // easeOutBack, modified:
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -65,6 +66,7 @@ $timing-bounce: cubic-bezier(0,1.02,.32,1.34); // easeOutBack, modified:
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
//
|
||||
|
||||
.btn {
|
||||
@extend .transition;
|
||||
@include transition;
|
||||
display: inline-block;
|
||||
font-family: $btn-font-family;
|
||||
font-weight: $btn-font-weight;
|
||||
@ -14,7 +14,7 @@
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius);
|
||||
|
||||
@ -31,6 +31,7 @@
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 1px 2px rgba($brand-main-blue-dark, .3);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
opacity: 0.45;
|
||||
@ -59,24 +60,31 @@ fieldset[disabled] a.btn {
|
||||
.btn-primary {
|
||||
@include button-variant($btn-primary-color, $btn-primary-bg);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@include button-variant($btn-secondary-color, $btn-secondary-bg);
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
@include button-variant($btn-blue-color, $btn-blue-bg);
|
||||
}
|
||||
|
||||
.btn-violet {
|
||||
@include button-variant($btn-violet-color, $btn-violet-bg);
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
@include button-variant($btn-info-color, $btn-info-bg);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
@include button-variant($btn-success-color, $btn-success-bg);
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
@include button-variant($btn-warning-color, $btn-warning-bg);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
@include button-variant($btn-danger-color, $btn-danger-bg);
|
||||
}
|
||||
@ -90,6 +98,7 @@ fieldset[disabled] a.btn {
|
||||
font-weight: normal;
|
||||
color: $link-color;
|
||||
border-radius: 0;
|
||||
|
||||
&,
|
||||
&:active,
|
||||
&.active,
|
||||
@ -97,6 +106,7 @@ fieldset[disabled] a.btn {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
@ -105,8 +115,6 @@ fieldset[disabled] a.btn {
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
}
|
||||
&:disabled {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -122,6 +130,7 @@ fieldset[disabled] a.btn {
|
||||
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);
|
||||
@ -131,6 +140,7 @@ fieldset[disabled] a.btn {
|
||||
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);
|
||||
@ -147,12 +157,12 @@ fieldset[disabled] a.btn {
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Vertically space out multiple block buttons
|
||||
.btn-block + .btn-block {
|
||||
+ .btn-block {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Specificity overrides
|
||||
input[type="submit"],
|
||||
|
||||
@ -27,6 +27,7 @@ kbd {
|
||||
background-color: $kbd-bg;
|
||||
border-radius: $border-radius-sm;
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
|
||||
|
||||
kbd {
|
||||
padding: 0;
|
||||
font-size: 100%;
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
// bigchain.io
|
||||
//
|
||||
|
||||
@import "_mixins/_buttons";
|
||||
@import "_mixins/_alerts";
|
||||
@import "_mixins/_color-overlay";
|
||||
@import '_mixins/typography';
|
||||
@import '_mixins/buttons';
|
||||
@import '_mixins/alerts';
|
||||
@import '_mixins/color-overlay';
|
||||
|
||||
35
_src/_assets/styles/bigchain/_mixins/_typography.scss
Normal file
35
_src/_assets/styles/bigchain/_mixins/_typography.scss
Normal file
@ -0,0 +1,35 @@
|
||||
@mixin text-bold {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
@mixin text-light {
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
|
||||
@mixin text-large {
|
||||
font-size: floor((100% * $font-size-lg / $font-size-base));
|
||||
}
|
||||
|
||||
@mixin text-small {
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
|
||||
@mixin text-mini {
|
||||
font-size: $font-size-xs;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
|
||||
@mixin text-lead {
|
||||
font-size: $font-size-lg;
|
||||
color: $headings-color;
|
||||
line-height: $line-height-lg;
|
||||
}
|
||||
|
||||
@mixin text-dimmed {
|
||||
color: $gray-light;
|
||||
}
|
||||
|
||||
.text-dimmed {
|
||||
@include text-dimmed;
|
||||
}
|
||||
@ -7,7 +7,7 @@
|
||||
// Body reset
|
||||
html {
|
||||
font-size: $font-size-root;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-tap-highlight-color: rgba($brand-main-blue-dark, 0);
|
||||
|
||||
@media ($screen-lg) {
|
||||
font-size: $font-size-root-lg;
|
||||
@ -33,7 +33,6 @@ body {
|
||||
// Safari/Firefox when animations are running
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-moz-font-feature-settings: 'liga', 'kern';
|
||||
|
||||
// remove old style numerals
|
||||
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 1;
|
||||
@ -50,7 +49,7 @@ body {
|
||||
.section,
|
||||
.content {
|
||||
.row {
|
||||
@extend .transition;
|
||||
@include transition;
|
||||
|
||||
.wf-loading & {
|
||||
opacity: 0;
|
||||
@ -79,7 +78,7 @@ textarea {
|
||||
// Links
|
||||
//
|
||||
a {
|
||||
@extend .transition;
|
||||
@include transition;
|
||||
color: $link-color;
|
||||
text-decoration: none;
|
||||
box-shadow: inset 0 -2px 0 $brand-primary;
|
||||
@ -90,14 +89,13 @@ a {
|
||||
background: $link-hover-bg;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:active { }
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Headings
|
||||
//
|
||||
// scss-lint:disable SingleLinePerSelector
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
font-family: $headings-font-family;
|
||||
@ -148,6 +146,7 @@ h3, .h3 { font-size: $font-size-h3; }
|
||||
h4, .h4 { font-size: $font-size-h4; }
|
||||
h5, .h5 { font-size: $font-size-h5; }
|
||||
h6, .h6 { font-size: $font-size-h6; }
|
||||
// scss-lint:enable SingleLinePerSelector
|
||||
|
||||
|
||||
//
|
||||
@ -163,23 +162,21 @@ p {
|
||||
//
|
||||
small,
|
||||
.small {
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-normal;
|
||||
@include text-small;
|
||||
}
|
||||
|
||||
.mini {
|
||||
font-size: $font-size-xs;
|
||||
font-weight: $font-weight-normal;
|
||||
@include text-mini;
|
||||
}
|
||||
|
||||
.large {
|
||||
font-size: floor((100% * $font-size-lg / $font-size-base));
|
||||
@include text-large;
|
||||
}
|
||||
|
||||
strong,
|
||||
.strong,
|
||||
.bold {
|
||||
font-weight: $font-weight-bold;
|
||||
@include text-bold;
|
||||
}
|
||||
|
||||
em,
|
||||
@ -188,28 +185,20 @@ em,
|
||||
}
|
||||
|
||||
.light {
|
||||
font-weight: $font-weight-light;
|
||||
@include text-light;
|
||||
}
|
||||
|
||||
// Alignment
|
||||
// scss-lint:disable SpaceBeforeBrace
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
.text-center { text-align: center; }
|
||||
.text-justify { text-align: justify; }
|
||||
.text-nowrap { white-space: nowrap; }
|
||||
|
||||
// Transformation
|
||||
.text-lowercase { text-transform: lowercase; }
|
||||
.text-uppercase { text-transform: uppercase; }
|
||||
.text-capitalize { text-transform: capitalize; }
|
||||
|
||||
.text-dimmed { color: $gray-light }
|
||||
|
||||
// scss-lint:enable SpaceBeforeBrace
|
||||
|
||||
.lead {
|
||||
font-size: $font-size-lg;
|
||||
color: $headings-color;
|
||||
line-height: $line-height-lg;
|
||||
@include text-lead;
|
||||
}
|
||||
|
||||
//
|
||||
@ -226,6 +215,7 @@ ol {
|
||||
margin-bottom: ($spacer / 2);
|
||||
padding-left: ($spacer / 2);
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-top: ($spacer / 2);
|
||||
@ -317,5 +307,7 @@ address {
|
||||
//
|
||||
// Text selection
|
||||
//
|
||||
::-moz-selection { color: #fff; background: $brand-main-blue; }
|
||||
::selection { color: #fff; background: $brand-main-blue; }
|
||||
::selection {
|
||||
color: #fff;
|
||||
background: $brand-main-blue;
|
||||
}
|
||||
|
||||
@ -7,15 +7,15 @@
|
||||
//
|
||||
// Colors
|
||||
//
|
||||
$brand-main-green: #39BA91 !default;
|
||||
$brand-main-green: #39ba91 !default;
|
||||
$brand-main-blue: #074354 !default;
|
||||
$brand-main-gray: #445261 !default;
|
||||
$brand-main-blue-dark: #101A25 !default;
|
||||
$brand-main-blue-dark: #101a25 !default;
|
||||
|
||||
$brand-main-violet: #B581CF !default;
|
||||
$brand-main-blue-light: #BFE6EC !default;
|
||||
$brand-main-gray-light: #CAD2DA !default;
|
||||
$brand-main-gray-lighter: #E8EBEF !default;
|
||||
$brand-main-violet: #b581cf !default;
|
||||
$brand-main-blue-light: #bfe6ec !default;
|
||||
$brand-main-gray-light: #cad2da !default;
|
||||
$brand-main-gray-lighter: #e8ebef !default;
|
||||
|
||||
$gray: $brand-main-gray !default;
|
||||
$gray-light: lighten($brand-main-gray, 35%) !default;
|
||||
@ -25,8 +25,8 @@ $brand-primary: $brand-main-green !default;
|
||||
|
||||
// alerts
|
||||
$brand-success: #388250 !default;
|
||||
$brand-info: #3E91CE !default;
|
||||
$brand-warning: #8E8E24 !default;
|
||||
$brand-info: #3e91ce !default;
|
||||
$brand-warning: #8e8e24 !default;
|
||||
$brand-danger: #c9726a !default;
|
||||
|
||||
|
||||
@ -46,8 +46,8 @@ $font-size-root-lg: 20px !default;
|
||||
|
||||
$font-size-base: 1rem !default;
|
||||
$font-size-lg: 1.3rem !default;
|
||||
$font-size-sm: 0.85rem !default;
|
||||
$font-size-xs: 0.7rem !default;
|
||||
$font-size-sm: .85rem !default;
|
||||
$font-size-xs: .7rem !default;
|
||||
|
||||
$font-size-h1: 2.7rem !default;
|
||||
$font-size-h2: 2.3rem !default;
|
||||
|
||||
@ -151,7 +151,9 @@ export const html = () => src(DIST + '**/*.html')
|
||||
//
|
||||
export const css = () => src(SRC + '_assets/styles/bigchain.scss')
|
||||
.pipe($.if(!(isProduction || isStaging), $.sourcemaps.init()))
|
||||
.pipe($.sass().on('error', $.sass.logError))
|
||||
.pipe($.sass({
|
||||
includePaths: ['node_modules']
|
||||
}).on('error', $.sass.logError))
|
||||
.pipe($.autoprefixer({ browsers: COMPATIBILITY }))
|
||||
.pipe($.if(isProduction || isStaging, $.cleanCss()))
|
||||
.pipe($.if(!(isProduction || isStaging), $.sourcemaps.write()))
|
||||
@ -188,13 +190,15 @@ export const criticalCss = (done) => {
|
||||
//
|
||||
// JavaScript
|
||||
//
|
||||
const js = () =>
|
||||
export const js = () =>
|
||||
src([
|
||||
SRC + '_assets/javascripts/bigchain.js',
|
||||
SRC + '_assets/javascripts/page-*.js'
|
||||
])
|
||||
.pipe($.if(!(isProduction || isStaging), $.sourcemaps.init()))
|
||||
.pipe($.include()).on('error', onError)
|
||||
.pipe($.include({
|
||||
includePaths: ['node_modules', SRC + '_assets/javascripts']
|
||||
})).on('error', onError)
|
||||
.pipe($.if(isProduction || isStaging, $.uglify())).on('error', onError)
|
||||
.pipe($.if(!(isProduction || isStaging), $.sourcemaps.write()))
|
||||
.pipe($.if(isProduction || isStaging, $.header(BANNER, { pkg: pkg })))
|
||||
|
||||
Loading…
Reference in New Issue
Block a user