mirror of
https://github.com/bigchaindb/site.git
synced 2024-11-22 09:46:57 +01:00
updated branding (#99)
- new typeface: Europa, loaded from Typekit - new colors, reduced gray tones - new hero image - new gradient overlay - new buttons - bigger default font sizes - ditch caps for action items
This commit is contained in:
GitHub
parent
afa2eaacf2
commit
2705fa90e3
@ -33,6 +33,7 @@ address:
|
||||
# Track all the things
|
||||
# --------------------
|
||||
analyticsID: UA-60614729-8
|
||||
typekitID: fih1ngo
|
||||
|
||||
|
||||
# Urls
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 220 KiB After Width: | Height: | Size: 175 KiB |
@ -38,7 +38,7 @@ jQuery(function($) {
|
||||
//
|
||||
// Automatically add header links to all Markdown headings
|
||||
//
|
||||
$('.content--page--markdown h1, .content--page--markdown h2').each(function(i, el) {
|
||||
$('.content--page--markdown h1:not(#heading-1), .content--page--markdown h2:not(#heading-2)').each(function(i, el) {
|
||||
var $el, icon, id;
|
||||
$el = $(el);
|
||||
id = $el.attr('id');
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
|
||||
//=include bigchain/smoothscroll.js
|
||||
//=include bigchain/testimonials.js
|
||||
|
||||
jQuery(function($) {
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
width: 5rem;
|
||||
display: block;
|
||||
margin: ($spacer * 2) auto 0 auto;
|
||||
background: $gray-lighter;
|
||||
background: $brand-main-gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
|
||||
.form-cla {
|
||||
padding: $spacer ($spacer * 2);
|
||||
background: $gray-darker;
|
||||
background: $gray-dark;
|
||||
}
|
||||
|
||||
@ -29,15 +29,17 @@
|
||||
}
|
||||
|
||||
.feature__title {
|
||||
font-size: $font-size-h4;
|
||||
@extend .h4;
|
||||
color: $brand-main-blue-light;
|
||||
margin-top: 0;
|
||||
margin-bottom: ($spacer / 3);
|
||||
}
|
||||
|
||||
.feature__text {
|
||||
// @extend .text-dimmed;
|
||||
@extend .text-dimmed;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.feture_roadmap {
|
||||
padding: 1rem 0 0 0;
|
||||
}
|
||||
@ -46,7 +48,7 @@
|
||||
@extend .small;
|
||||
font-family: $headings-font-family;
|
||||
color: $gray-light;
|
||||
background: $gray_darker;
|
||||
background: $gray-dark;
|
||||
|
||||
display: inline-block;
|
||||
margin-left: ($spacer / 2);
|
||||
|
||||
@ -22,8 +22,8 @@
|
||||
margin-bottom: $spacer * 4;
|
||||
|
||||
h3 {
|
||||
@extend .h4;
|
||||
display: block;
|
||||
font-size: $font-size-h4;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -35,7 +35,7 @@
|
||||
.icon {
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-bottom: $spacer * 2;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,14 @@
|
||||
|
||||
.page-styleguide {
|
||||
.highlight { margin-bottom: ($spacer * 2) }
|
||||
|
||||
.typeface {
|
||||
font-size: 7vw;
|
||||
|
||||
&.bold {
|
||||
margin-bottom: $spacer * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// color swatches
|
||||
@ -8,7 +16,7 @@
|
||||
padding: ($spacer / 2);
|
||||
margin-bottom: 5px;
|
||||
border-radius: $border-radius;
|
||||
border: 1px solid $gray-darker;
|
||||
border: 1px solid lighten($body-bg, 10%);
|
||||
min-height: 70px;
|
||||
text-align: center;
|
||||
|
||||
@ -40,21 +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-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 }
|
||||
|
||||
.gray-darker { background: $gray-darker }
|
||||
.gray-dark { background: $gray-dark }
|
||||
.gray { background: $gray }
|
||||
.gray-light { background: $gray-light }
|
||||
.gray-lighter { background: $gray-lighter }
|
||||
.gray-lightest { background: $gray-lightest }
|
||||
|
||||
.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 }
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
.page-usecases {
|
||||
|
||||
.header {
|
||||
background-position: bottom center;
|
||||
}
|
||||
}
|
||||
|
||||
.section--intro {
|
||||
@ -10,7 +12,7 @@
|
||||
.section-description {
|
||||
margin-bottom: $spacer * 2;
|
||||
padding-bottom: $spacer * 2;
|
||||
border-bottom: 2px solid lighten($gray-dark, 5%);
|
||||
border-bottom: 2px solid lighten($gray-dark, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -48,13 +50,13 @@
|
||||
@extend .background--darker;
|
||||
|
||||
.featuredusecase {
|
||||
border-top-color: $gray-dark;
|
||||
border-top-color: lighten($gray-dark, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.featuredusecase {
|
||||
border-top: 2px solid lighten($gray-dark, 5%);
|
||||
border-top: 2px solid lighten($gray-dark, 10%);
|
||||
padding-top: $spacer * 2;
|
||||
margin-top: $spacer * 2;
|
||||
|
||||
@ -181,7 +183,7 @@
|
||||
|
||||
.content__about {
|
||||
margin-top: $spacer * 4;
|
||||
background: $gray-darker;
|
||||
background: $gray-dark;
|
||||
padding-top: $spacer * 3;
|
||||
padding-bottom: $spacer;
|
||||
}
|
||||
@ -200,7 +202,6 @@
|
||||
text-align: center;
|
||||
box-shadow: none;
|
||||
font-family: $btn-font-family;
|
||||
text-transform: uppercase;
|
||||
color: $brand-main-blue-dark;
|
||||
|
||||
&:hover,
|
||||
|
||||
@ -13,7 +13,6 @@
|
||||
@import 'bigchain/_mixins';
|
||||
|
||||
// Components
|
||||
@import 'bigchain/_fonts';
|
||||
@import 'bigchain/_typography';
|
||||
@import 'bigchain/_animations';
|
||||
@import 'bigchain/_tables';
|
||||
|
||||
@ -6,7 +6,7 @@ $timing-bounce: cubic-bezier(0,1.02,.32,1.34); // easeOutBack, modified:
|
||||
// Transitions
|
||||
//
|
||||
@mixin transition {
|
||||
transition: all .2s ease-in-out;
|
||||
transition: all .2s ease-out;
|
||||
}
|
||||
|
||||
.transition {
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
display: inline-block;
|
||||
font-family: $btn-font-family;
|
||||
font-weight: $btn-font-weight;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
|
||||
@ -13,10 +13,12 @@
|
||||
}
|
||||
|
||||
> h1, h2 {
|
||||
border-bottom: 1px solid $brand-main-blue-light;
|
||||
padding-bottom: $spacer;
|
||||
margin-bottom: ($spacer * 2);
|
||||
text-align: center;
|
||||
&:not(#heading-1):not(#heading-2) {
|
||||
border-bottom: 1px solid $brand-main-blue-light;
|
||||
padding-bottom: $spacer;
|
||||
margin-bottom: ($spacer * 2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-link {
|
||||
box-shadow: none;
|
||||
@ -26,32 +28,32 @@
|
||||
opacity: 0;
|
||||
transform: translate3d(20px,0,0) scale(0);
|
||||
|
||||
// &,
|
||||
// .header-icon {
|
||||
// @extend .transition;
|
||||
// }
|
||||
//
|
||||
// &:hover,
|
||||
// &:focus {
|
||||
// background: none;
|
||||
//
|
||||
// .header-icon {
|
||||
// color: lighten($brand-primary, 10%);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .header-icon {
|
||||
// font-style: normal;
|
||||
// font-size: 2rem;
|
||||
// color: $brand-primary;
|
||||
// }
|
||||
&,
|
||||
.header-icon {
|
||||
@extend .transition;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: none;
|
||||
|
||||
.header-icon {
|
||||
color: lighten($brand-primary, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
font-style: normal;
|
||||
font-size: 2rem;
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.header-link {
|
||||
opacity: 1;
|
||||
transform: translate3d(0,0,0) scale(.8);
|
||||
}
|
||||
}
|
||||
//
|
||||
// &:hover {
|
||||
// .header-link {
|
||||
// opacity: 1;
|
||||
// transform: translate3d(0,0,0) scale(.8);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
//
|
||||
// Fonts
|
||||
// ---
|
||||
// bigchain.io
|
||||
//
|
||||
@font-face {
|
||||
font-family: 'Noto Sans';
|
||||
src: local('Noto Sans Regular'),
|
||||
url('/assets/fonts/NotoSans-Regular.woff2') format('woff2'),
|
||||
url('/assets/fonts/NotoSans-Regular.woff') format('woff'),
|
||||
url('/assets/fonts/NotoSans-Regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
|
||||
.footer {
|
||||
@extend .background--darker;
|
||||
border-top: 1px solid $gray;
|
||||
color: $gray-light;
|
||||
padding-top: $spacer * 3;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@ $menu-height-md: 66px;
|
||||
|
||||
.hero {
|
||||
@extend .background--photo;
|
||||
background-image: url('/assets/img/hero-berlin.jpg');
|
||||
background-image: url('../img/hero-berlin.jpg');
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
@ -68,13 +68,26 @@ $menu-height-md: 66px;
|
||||
// intro animation
|
||||
.section-title,
|
||||
.btn {
|
||||
@extend .animation-slide-in-from-bottom;
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: backwards;
|
||||
.wf-active &,
|
||||
.wf-inactive & {
|
||||
@extend .animation-slide-in-from-bottom;
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: backwards;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
animation-delay: .5s;
|
||||
.wf-active &,
|
||||
.wf-inactive & {
|
||||
animation-delay: .5s;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
.wf-active &,
|
||||
.wf-inactive & {
|
||||
animation-delay: .8s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
fill: $brand-main-blue;
|
||||
color: $brand-main-green; // the fill="currentColor" trick
|
||||
width: 300px;
|
||||
height: 30px;
|
||||
height: 60px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -32,8 +32,8 @@
|
||||
// size modifiers
|
||||
//
|
||||
.logo--sm {
|
||||
width: 120px;
|
||||
height: 25px;
|
||||
width: 140px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.logo--full {
|
||||
|
||||
@ -4,29 +4,25 @@
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
align-self: flex-start;
|
||||
|
||||
.grid__col {
|
||||
text-align: center;
|
||||
|
||||
@media ($screen-md) {
|
||||
text-align: left;
|
||||
|
||||
&:last-child { text-align: right; }
|
||||
}
|
||||
}
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.menu__link {
|
||||
@extend .small;
|
||||
display: inline-block;
|
||||
padding: $spacer ($spacer / 2);
|
||||
text-transform: uppercase;
|
||||
box-shadow: none;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@media ($screen-md) {
|
||||
padding: ($spacer * 2) $spacer;
|
||||
&,
|
||||
&:first-child {
|
||||
padding: ($spacer * 2) $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
// link line
|
||||
@ -60,26 +56,22 @@
|
||||
}
|
||||
|
||||
.menu__logo {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
box-shadow: none;
|
||||
padding-top: $spacer;
|
||||
vertical-align: middle;
|
||||
|
||||
@media ($screen-md) {
|
||||
padding-top: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
svg {
|
||||
@extend .transition;
|
||||
opacity: .8;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: inline;
|
||||
|
||||
@media ($screen-md) {
|
||||
display: inline-block;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -92,13 +84,16 @@
|
||||
}
|
||||
|
||||
.menu__hiring {
|
||||
color: lighten($brand-main-green, 15%);
|
||||
@extend .small;
|
||||
color: $brand-main-green;
|
||||
box-shadow: none;
|
||||
padding: $spacer ($spacer / 4);
|
||||
display: inline-block;
|
||||
float: right;
|
||||
|
||||
@media ($screen-md) {
|
||||
margin-left: $spacer;
|
||||
float: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
@ -113,9 +108,9 @@
|
||||
|
||||
.icon {
|
||||
@extend .transition;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
stroke: lighten($brand-main-green, 15%);
|
||||
width: $font-size-sm;
|
||||
height: $font-size-sm;
|
||||
stroke: $brand-main-green;
|
||||
stroke-width: 1.5;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
@ -129,7 +124,7 @@
|
||||
.menu--main {
|
||||
background: rgba($brand-main-blue-dark, .35);
|
||||
backdrop-filter: saturate(150%) blur(10px);
|
||||
border-bottom: 1px solid rgba($gray, .9);
|
||||
border-bottom: 1px solid rgba($brand-main-gray, .5);
|
||||
padding-top: ($spacer / 2);
|
||||
padding-bottom: ($spacer / 2);
|
||||
|
||||
@ -167,6 +162,7 @@
|
||||
margin-right: -$gutter-space / 2;
|
||||
padding-left: $gutter-space / 2;
|
||||
padding-right: $gutter-space / 2;
|
||||
text-align: center;
|
||||
|
||||
&::-webkit-scrollbar { display: none; }
|
||||
|
||||
@ -175,6 +171,7 @@
|
||||
padding: 0;
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
@ -204,12 +201,14 @@
|
||||
}
|
||||
|
||||
.menu__link {
|
||||
padding: ($spacer / 2);
|
||||
color: $gray-light;
|
||||
@extend .small;
|
||||
padding: ($spacer / 2) ($spacer / 4);
|
||||
color: $text-color;
|
||||
|
||||
@media ($screen-sm) {
|
||||
display: block;
|
||||
text-align: left;
|
||||
padding: ($spacer / 2);
|
||||
}
|
||||
|
||||
// hide link line
|
||||
@ -223,7 +222,7 @@
|
||||
|
||||
|
||||
.footer__copyright {
|
||||
border-top: 1px solid $gray-dark;
|
||||
border-top: 1px solid $brand-main-gray;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin-top: ($spacer * 2);
|
||||
@ -245,15 +244,15 @@
|
||||
padding: 0 $spacer;
|
||||
}
|
||||
|
||||
&:first-child { margin-left: ($spacer/2); }
|
||||
&:first-child { margin-left: ($spacer / 2); }
|
||||
&:last-child { padding-right: 0; }
|
||||
}
|
||||
|
||||
&,
|
||||
small,
|
||||
.menu__link {
|
||||
@extend .small;
|
||||
color: $gray;
|
||||
@extend .mini;
|
||||
color: $gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
@ -292,8 +291,11 @@
|
||||
|
||||
|
||||
.menu--sub {
|
||||
text-align: center;
|
||||
background: $gray-darker;
|
||||
background: $gray-dark;
|
||||
|
||||
.menu-overflow {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1rem;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
|
||||
@mixin color-overlay($color-from: $brand-main-violet, $color-to: $brand-main-green) {
|
||||
@mixin color-overlay($color-from: $brand-main-blue, $color-to: $brand-main-blue-dark) {
|
||||
position: relative;
|
||||
|
||||
// color overlay
|
||||
@ -12,7 +12,7 @@
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(to bottom right, $color-from 0%, $color-from 10%, $color-to 70%);
|
||||
background: linear-gradient(to bottom right, $color-from 0%, $color-to 100%);
|
||||
opacity: .7;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
.grid { margin-bottom: 0; }
|
||||
|
||||
.form-control {
|
||||
border-color: $gray-darker;
|
||||
border-color: $gray-dark;
|
||||
|
||||
&:focus {
|
||||
border-color: #000;
|
||||
@ -48,5 +48,5 @@
|
||||
|
||||
.newsletter__title,
|
||||
.newsletter__text {
|
||||
color: $gray-darker;
|
||||
color: $gray-dark;
|
||||
}
|
||||
|
||||
@ -46,13 +46,12 @@
|
||||
width: 3rem;
|
||||
display: block;
|
||||
margin: ($spacer * 2) auto 0 auto;
|
||||
background: $gray;
|
||||
background: $gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
.section-description {
|
||||
font-size: $font-size-lg;
|
||||
line-height: $line-height-lg;
|
||||
margin-bottom: 0;
|
||||
|
||||
+ .section-description {
|
||||
@ -79,15 +78,15 @@
|
||||
}
|
||||
|
||||
.background--darker {
|
||||
background: $gray-darker;
|
||||
background: $gray-dark;
|
||||
}
|
||||
|
||||
.background--light {
|
||||
background: $gray-lightest;
|
||||
background: $brand-main-gray-lighter;
|
||||
|
||||
.section-title,
|
||||
p {
|
||||
color: $gray;
|
||||
color: $brand-main-gray;
|
||||
}
|
||||
}
|
||||
|
||||
@ -101,10 +100,9 @@
|
||||
//
|
||||
.background--photo {
|
||||
@extend .color-overlay;
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,.1);
|
||||
|
||||
// background
|
||||
background: url('../img/hero-berlin.jpg') no-repeat center center;
|
||||
background: url('../img/hero-berlin.jpg') no-repeat top center;
|
||||
background-size: cover;
|
||||
|
||||
.row * {
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
|
||||
.team__image {
|
||||
@extend .img--responsive;
|
||||
background: $gray;
|
||||
background: $brand-main-gray;
|
||||
width: 230px;
|
||||
clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
|
||||
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
}
|
||||
|
||||
.comment {
|
||||
color: $gray;
|
||||
color: $brand-main-gray;
|
||||
}
|
||||
|
||||
.deps {
|
||||
@ -80,7 +80,7 @@ $frame-border-radius: $border-radius;
|
||||
height: $frame-height-mobile;
|
||||
border-top-left-radius: $frame-border-radius;
|
||||
border-top-right-radius: $frame-border-radius;
|
||||
background: linear-gradient(to bottom, $gray-dark 0%, $gray-darker 100%);
|
||||
background: linear-gradient(to bottom, $gray-dark 0%, $gray-dark 100%);
|
||||
margin-top: -($frame-height-mobile);
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
&:before {
|
||||
content: "“";
|
||||
font-size: 250%;
|
||||
color: $gray;
|
||||
color: $gray-light;
|
||||
line-height: 1;
|
||||
margin-left: -1rem;
|
||||
}
|
||||
@ -53,7 +53,7 @@
|
||||
align-self: flex-end;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top: 2px solid $gray;
|
||||
border-top: 2px solid $gray-light;
|
||||
padding-top: $spacer;
|
||||
position: relative;
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
top: 0;
|
||||
border-width: .9rem .9rem 0 0;
|
||||
border-color: transparent;
|
||||
border-top-color: $gray;
|
||||
border-top-color: $gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
@ -79,14 +79,14 @@
|
||||
display: inline-block;
|
||||
margin-right: $spacer;
|
||||
border-radius: 50%;
|
||||
border: 2px solid $gray;
|
||||
border: 2px solid $gray-light;
|
||||
}
|
||||
|
||||
.testimonial__cite {
|
||||
@extend .small;
|
||||
font-style: normal;
|
||||
flex: 1;
|
||||
color: $gray-light;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.testimonial__name {
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
content: counters(item, ".") " ";
|
||||
counter-increment: item;
|
||||
margin-right: $spacer;
|
||||
color: $gray;
|
||||
color: $brand-main-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -39,6 +39,31 @@ body {
|
||||
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 1;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Smoothly fade in all content after
|
||||
// fonts have loaded. Not quite useful,
|
||||
// but beautiful.
|
||||
//
|
||||
.hero,
|
||||
.header,
|
||||
.section,
|
||||
.content {
|
||||
.row {
|
||||
@extend .transition;
|
||||
|
||||
.wf-loading & {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.wf-active &,
|
||||
.wf-inactive & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Reset fonts for relevant elements
|
||||
input,
|
||||
button,
|
||||
@ -49,6 +74,7 @@ textarea {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Links
|
||||
//
|
||||
@ -75,12 +101,21 @@ a {
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
font-family: $headings-font-family;
|
||||
font-weight: $headings-font-weight;
|
||||
line-height: $headings-line-height;
|
||||
color: $headings-color;
|
||||
|
||||
// remove old style numerals
|
||||
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 1;
|
||||
|
||||
.wf-loading & {
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
|
||||
&,
|
||||
.wf-active &,
|
||||
.wf-inactive & {
|
||||
font-weight: $headings-font-weight;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -88,15 +123,20 @@ h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3 {
|
||||
margin-top: ($spacer * 2);
|
||||
margin-bottom: $spacer;
|
||||
margin-bottom: ($spacer * 2);
|
||||
}
|
||||
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6 {
|
||||
color: $gray-light;
|
||||
margin-top: $spacer;
|
||||
margin-bottom: ($spacer / 2);
|
||||
margin-bottom: $spacer;
|
||||
|
||||
&,
|
||||
.wf-active &,
|
||||
.wf-inactive & {
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
}
|
||||
|
||||
h1, .h1 { font-size: $font-size-h1; }
|
||||
@ -139,6 +179,10 @@ strong,
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.light {
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
|
||||
// Alignment
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
@ -219,12 +263,12 @@ ul {
|
||||
// Blockquotes
|
||||
//
|
||||
blockquote {
|
||||
border-left: 3px solid $gray-lighter;
|
||||
@extend .text-dimmed;
|
||||
border-left: 3px solid $gray-light;
|
||||
margin-left: 0;
|
||||
margin-top: $spacer;
|
||||
margin-bottom: $spacer;
|
||||
padding: ($spacer/2) $spacer;
|
||||
color: $gray;
|
||||
font-style: italic;
|
||||
|
||||
p,
|
||||
@ -238,7 +282,7 @@ blockquote {
|
||||
|
||||
cite {
|
||||
@extend .bold, .small;
|
||||
font-style: italic;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// Addresses
|
||||
|
||||
@ -7,21 +7,23 @@
|
||||
//
|
||||
// Colors
|
||||
//
|
||||
$brand-main-green: #39BA91 !default;
|
||||
$brand-main-blue: #074354 !default;
|
||||
$brand-main-blue-light: #BFE6EC !default;
|
||||
$brand-main-gray: #445261 !default;
|
||||
$brand-main-blue-dark: #101A25 !default;
|
||||
$brand-main-green: #54C695 !default;
|
||||
$brand-main-gray: #70859B !default;
|
||||
$brand-main-violet: #B581CF !default;
|
||||
|
||||
$gray-darker: darken($brand-main-gray, 25%) !default;
|
||||
$gray-dark: darken($brand-main-gray, 20%) !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, 20%) !default;
|
||||
$gray-lighter: lighten($brand-main-gray, 30%) !default;
|
||||
$gray-lightest: lighten($brand-main-gray, 40%) !default;
|
||||
$gray-light: lighten($brand-main-gray, 35%) !default;
|
||||
$gray-dark: darken($brand-main-gray, 5%) !default;
|
||||
|
||||
$brand-primary: $brand-main-green !default;
|
||||
|
||||
// alerts
|
||||
$brand-success: #388250 !default;
|
||||
$brand-info: #3E91CE !default;
|
||||
$brand-warning: #8E8E24 !default;
|
||||
@ -31,35 +33,33 @@ $brand-danger: #c9726a !default;
|
||||
//
|
||||
// Typography
|
||||
//
|
||||
$font-family-noto: 'Noto Sans', 'Helvetica Neue', 'Arial', sans-serif !default;
|
||||
$font-family-avenir: 'Avenir Next', 'Helvetica Neue', 'Arial', sans-serif !default;
|
||||
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
|
||||
$font-family-base: $font-family-avenir !default;
|
||||
$font-family-base: 'europa', 'Avenir Next', 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !default;
|
||||
$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace !default;
|
||||
|
||||
$font-weight-light: 300 !default;
|
||||
$font-weight-normal: 400 !default;
|
||||
$font-weight-bold: 600 !default;
|
||||
$font-weight-base: $font-weight-normal !default;
|
||||
|
||||
$font-size-root: 16px !default;
|
||||
$font-size-root-lg: 18px !default;
|
||||
$font-size-root: 18px !default;
|
||||
$font-size-root-lg: 20px !default;
|
||||
|
||||
$font-size-base: 1rem !default;
|
||||
$font-size-lg: 1.25rem !default;
|
||||
$font-size-sm: 0.8rem !default;
|
||||
$font-size-xs: 0.65rem !default;
|
||||
$font-size-lg: 1.3rem !default;
|
||||
$font-size-sm: 0.85rem !default;
|
||||
$font-size-xs: 0.7rem !default;
|
||||
|
||||
$font-size-h1: 2.5rem !default;
|
||||
$font-size-h2: 2rem !default;
|
||||
$font-size-h3: 1.5rem !default;
|
||||
$font-size-h4: 1.2rem !default;
|
||||
$font-size-h1: 2.7rem !default;
|
||||
$font-size-h2: 2.3rem !default;
|
||||
$font-size-h3: 2rem !default;
|
||||
$font-size-h4: 1.3rem !default;
|
||||
$font-size-h5: $font-size-base !default;
|
||||
$font-size-h6: 0.85rem !default;
|
||||
|
||||
$line-height: 1.5 !default;
|
||||
|
||||
$headings-font-family: $font-family-noto !default;
|
||||
$headings-font-weight: $font-weight-normal !default;
|
||||
$headings-font-family: inherit !default;
|
||||
$headings-font-weight: $font-weight-light !default;
|
||||
$headings-line-height: 1.2 !default;
|
||||
$headings-color: $brand-main-blue-light !default;
|
||||
|
||||
@ -67,8 +67,8 @@ $headings-color: $brand-main-blue-light !default;
|
||||
//
|
||||
// Scaffolding
|
||||
//
|
||||
$body-bg: $gray-dark !default;
|
||||
$text-color: $gray-lightest !default;
|
||||
$body-bg: $brand-main-gray !default;
|
||||
$text-color: $brand-main-gray-lighter !default;
|
||||
|
||||
$link-color: inherit !default;
|
||||
$link-hover-color: #fff !default;
|
||||
@ -98,7 +98,7 @@ $line-height-xs: 1.2 !default;
|
||||
$border-radius: .15rem !default;
|
||||
$border-radius-lg: .2rem !default;
|
||||
$border-radius-sm: .1rem !default;
|
||||
$border-radius-xs: .05rem !default;
|
||||
$border-radius-xs: .1rem !default;
|
||||
|
||||
$component-active-color: #fff !default;
|
||||
$component-active-bg: $brand-primary !default;
|
||||
@ -114,7 +114,7 @@ $gutter-space: ($spacer * 2) !default;
|
||||
// Code
|
||||
//
|
||||
$code-color: $text-color !default;
|
||||
$code-bg: $gray-darker !default;
|
||||
$code-bg: $gray-dark !default;
|
||||
|
||||
$kbd-color: $code-color !default;
|
||||
$kbd-bg: $code-bg !default;
|
||||
@ -130,31 +130,31 @@ $pre-scrollable-max-height: 340px !default;
|
||||
$table-cell-padding: .75rem !default;
|
||||
$table-sm-cell-padding: .3rem !default;
|
||||
|
||||
$table-bg: $gray-darker !default;
|
||||
$table-bg-accent: $gray-darker !default;
|
||||
$table-bg: $gray-dark !default;
|
||||
$table-bg-accent: $gray-dark !default;
|
||||
|
||||
$table-border-width: 1px !default;
|
||||
$table-border-color: $gray !default;
|
||||
$table-border-color: $gray-light !default;
|
||||
|
||||
//
|
||||
// Buttons
|
||||
//
|
||||
$btn-font-family: $font-family-noto;
|
||||
$btn-font-weight: $font-weight-normal !default;
|
||||
$btn-font-family: inherit;
|
||||
$btn-font-weight: $font-weight-bold !default;
|
||||
|
||||
$btn-padding-x: 2rem !default;
|
||||
$btn-padding-y: .5rem !default;
|
||||
|
||||
$btn-primary-color: #fff !default;
|
||||
$btn-primary-color: $brand-main-blue !default;
|
||||
$btn-primary-bg: $brand-primary !default;
|
||||
|
||||
$btn-secondary-color: #fff !default;
|
||||
$btn-secondary-bg: $brand-main-gray !default;
|
||||
$btn-secondary-color: $brand-main-blue !default;
|
||||
$btn-secondary-bg: $gray-light !default;
|
||||
|
||||
$btn-blue-color: #fff !default;
|
||||
$btn-blue-color: $brand-primary !default;
|
||||
$btn-blue-bg: $brand-main-blue !default;
|
||||
|
||||
$btn-violet-color: #fff !default;
|
||||
$btn-violet-color: $brand-main-blue !default;
|
||||
$btn-violet-bg: $brand-main-violet !default;
|
||||
|
||||
$btn-info-color: #fff !default;
|
||||
@ -190,20 +190,20 @@ $btn-border-radius-xs: $border-radius-xs !default;
|
||||
//
|
||||
// Forms
|
||||
//
|
||||
$input-font: $font-family-avenir !default;
|
||||
$input-font: inherit !default;
|
||||
$input-font-weight: $font-weight-normal !default;
|
||||
|
||||
$input-padding-x: .5rem !default;
|
||||
$input-padding-y: 0 !default;
|
||||
|
||||
$input-bg: transparent !default;
|
||||
$input-bg-disabled: $gray-darker !default;
|
||||
$input-bg-disabled: $gray-dark !default;
|
||||
|
||||
$input-color: $text-color !default;
|
||||
$input-border-color: $gray !default;
|
||||
$input-border-color: $gray-light !default;
|
||||
|
||||
$input-border-focus: $gray-light !default;
|
||||
$input-color-placeholder: $gray !default;
|
||||
$input-border-focus: $text-color !default;
|
||||
$input-color-placeholder: $gray-light !default;
|
||||
|
||||
|
||||
//
|
||||
|
||||
@ -4,39 +4,24 @@
|
||||
#
|
||||
primary:
|
||||
- name: brand-main-green
|
||||
hex: 54C695
|
||||
- name: brand-main-violet
|
||||
hex: B581CF
|
||||
- name: gray-dark
|
||||
hex: 445261
|
||||
- name: brand-main-gray
|
||||
hex: 70859B
|
||||
hex: 39BA91
|
||||
- name: brand-main-blue
|
||||
hex: '074354'
|
||||
- name: brand-main-gray
|
||||
hex: 445261
|
||||
- name: brand-main-blue-dark
|
||||
hex: 101A25
|
||||
|
||||
secondary:
|
||||
- name: brand-main-violet
|
||||
hex: B581CF
|
||||
- name: brand-main-blue-light
|
||||
hex: BFE6EC
|
||||
|
||||
|
||||
#
|
||||
# Grays
|
||||
#
|
||||
grays:
|
||||
- name: gray-darker
|
||||
hex: 2f3943
|
||||
- name: gray-dark
|
||||
hex: 445261
|
||||
- name: gray
|
||||
hex: 70859B
|
||||
- name: gray-light
|
||||
hex: ACB8C5
|
||||
- name: gray-lighter
|
||||
- name: brand-main-gray-light
|
||||
hex: CAD2DA
|
||||
- name: gray-lightest
|
||||
- name: brand-main-gray-lighter
|
||||
hex: E8EBEF
|
||||
|
||||
|
||||
#
|
||||
# Errors
|
||||
#
|
||||
|
||||
@ -28,6 +28,18 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<!-- Typekit advanced async snippet -->
|
||||
<script>
|
||||
(function(d) {
|
||||
var config = {
|
||||
kitId: '{{ site.typekitID }}',
|
||||
scriptTimeout: 3000,
|
||||
async: true
|
||||
},
|
||||
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
|
||||
})(document);
|
||||
</script>
|
||||
|
||||
<!-- CSS -->
|
||||
<link rel="stylesheet" href="/assets/css/bigchain.min.css">
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<p class="section-description">There are many ways you can contribute to the BigchainDB project.</p>
|
||||
</header>
|
||||
|
||||
<a class="btn btn-blue" href="/community/">
|
||||
<a class="btn btn-primary" href="/community/">
|
||||
Community
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<p class="section-description">Learn how we scale</p>
|
||||
</header>
|
||||
|
||||
<a class="btn btn-blue" href="/features/">
|
||||
<a class="btn btn-primary" href="/features/">
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<p class="section-description">BigchainDB: A Scalable Blockchain Database</p>
|
||||
</header>
|
||||
|
||||
<a class="btn btn-blue" href="/whitepaper/">
|
||||
<a class="btn btn-primary" href="/whitepaper/">
|
||||
<svg class="icon">
|
||||
<use xlink:href="/assets/img/sprite.svg#icon-documents"></use>
|
||||
</svg>
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<p class="section-description">{{ context.cta.description }}</p>
|
||||
</header>
|
||||
|
||||
<a class="btn btn-blue" href="/">
|
||||
<a class="btn btn-primary" href="/">
|
||||
{{ context.cta.button }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -71,7 +71,7 @@ cta:
|
||||
|
||||
<aside class="actionbar">
|
||||
|
||||
<div class="grid grid--full grid-small--half grid--top">
|
||||
<div class="grid grid--full grid-small--fit grid--top">
|
||||
|
||||
{% if page.fullstudy %}
|
||||
<div class="grid__col">
|
||||
|
||||
@ -9,7 +9,7 @@ sitemap: false
|
||||
|
||||
### Primary
|
||||
|
||||
<div class="grid grid--gutters grid--full grid-medium--third">
|
||||
<div class="grid grid--gutters grid--full grid-medium--fit">
|
||||
{% for color in site.data.colors.primary %}
|
||||
<div class="grid__col">
|
||||
<div class="color {{ color.name }}">
|
||||
@ -20,10 +20,10 @@ sitemap: false
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
### Grays
|
||||
### Secondary
|
||||
|
||||
<div class="grid grid--gutters grid--full grid-medium--third">
|
||||
{% for color in site.data.colors.grays %}
|
||||
<div class="grid grid--gutters grid--full grid-medium--fit">
|
||||
{% for color in site.data.colors.secondary %}
|
||||
<div class="grid__col">
|
||||
<div class="color {{ color.name }}">
|
||||
<span class="color-meta color-name">${{ color.name }}</span>
|
||||
@ -35,7 +35,7 @@ sitemap: false
|
||||
|
||||
### Errors
|
||||
|
||||
<div class="grid grid--gutters grid--full grid-medium--third">
|
||||
<div class="grid grid--gutters grid--full grid-medium--fit">
|
||||
{% for color in site.data.colors.errors %}
|
||||
<div class="grid__col">
|
||||
<div class="color {{ color.name }}">
|
||||
@ -46,6 +46,70 @@ sitemap: false
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
## Typography
|
||||
|
||||
The main branding typeface is [**Europa**](http://www.europatype.com/articledetail/17), used for both text and headline. Europa is only [available from Typekit](https://typekit.com/fonts/europa) or as a paid download. Please consult a designer to assist you in using this font in your documents & presentations.
|
||||
|
||||
<div class="typeface light">Europa Light</div>
|
||||
<div class="typeface">Europa Regular</div>
|
||||
<div class="typeface italic">Europa Regular Italic</div>
|
||||
<div class="typeface bold">Europa Bold</div>
|
||||
|
||||
The light weight is only used for headlines from a certain size to retain readability on all screens. For the website this means only headings 1 - 3 are using light weight.
|
||||
|
||||
### Body Copy
|
||||
|
||||
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis [parturient montes](#), nascetur ridiculus mus. Nullam id dolor id nibh **ultricies vehicula**.
|
||||
|
||||
Donec *ullamcorper nulla* non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
|
||||
|
||||
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis [parturient montes](#), nascetur ridiculus mus. Nullam id dolor id nibh **ultricies vehicula**.
|
||||
|
||||
|
||||
<p class="large">Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.</p>
|
||||
|
||||
```html
|
||||
<p class="large">Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.</p>
|
||||
```
|
||||
|
||||
<small>Maecenas sed diam eget risus varius blandit sit amet non magna.</small>
|
||||
|
||||
```html
|
||||
<small>Maecenas sed diam eget risus varius blandit sit amet non magna.</small>
|
||||
```
|
||||
|
||||
<p class="mini">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
||||
|
||||
```html
|
||||
<p class="mini">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
||||
```
|
||||
|
||||
|
||||
## Headings
|
||||
|
||||
# Heading 1
|
||||
|
||||
## Heading 2
|
||||
|
||||
### Heading 3
|
||||
|
||||
#### Heading 4
|
||||
|
||||
##### Heading 5
|
||||
|
||||
|
||||
## Lists
|
||||
|
||||
* 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
|
||||
|
||||
Logo can be used with a base class and modifier classes for size & color:
|
||||
@ -92,67 +156,6 @@ Logo can be used with a base class and modifier classes for size & color:
|
||||
```
|
||||
|
||||
|
||||
## Typography
|
||||
|
||||
The main branding typeface is **Noto Sans Regular**, used for all headings and buttons. Noto Sans is open source and free to download and use.
|
||||
|
||||
<a class="btn btn-secondary btn-sm" href="http://www.google.com/get/noto/#sans-lgc">Download Noto Sans</a>
|
||||
|
||||
For body copy we're using the system installed font **Avenir Next** on Mac OS X & iOS and **Arial** on Windows. Linux will just use the default sans-serif typeface, e.g. on Ubuntu this should be **Bitstream Vera Sans**.
|
||||
|
||||
### Body Copy
|
||||
|
||||
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis [parturient montes](#), nascetur ridiculus mus. Nullam id dolor id nibh **ultricies vehicula**.
|
||||
|
||||
Donec *ullamcorper nulla* non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
|
||||
|
||||
```html
|
||||
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis <a href="#">parturient montes</a>, nascetur ridiculus mus. Nullam id dolor id nibh <strong>ultricies vehicula</strong>.</p>
|
||||
|
||||
<p>Donec <em>ullamcorper nulla</em> non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
```
|
||||
|
||||
<p class="large">Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.</p>
|
||||
|
||||
```html
|
||||
<p class="large">Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.</p>
|
||||
```
|
||||
|
||||
<small>Maecenas sed diam eget risus varius blandit sit amet non magna.</small>
|
||||
|
||||
```html
|
||||
<small>Maecenas sed diam eget risus varius blandit sit amet non magna.</small>
|
||||
```
|
||||
|
||||
<p class="mini">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
||||
|
||||
```html
|
||||
<p class="mini">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
||||
```
|
||||
|
||||
|
||||
## Headings
|
||||
|
||||
# Heading 1
|
||||
|
||||
## Heading 2
|
||||
|
||||
### Heading 3
|
||||
|
||||
#### Heading 4
|
||||
|
||||
|
||||
## Lists
|
||||
|
||||
* 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.
|
||||
|
||||
|
||||
## Components
|
||||
|
||||
### Buttons
|
||||
|
||||
@ -220,21 +220,6 @@ export const images = () => src(SRC + '_assets/images/**/*')
|
||||
.pipe(dest(DIST + 'assets/img/'))
|
||||
|
||||
|
||||
//
|
||||
// Copy Fonts
|
||||
//
|
||||
export const fonts = () => src(SRC + '_assets/fonts/**/*')
|
||||
.pipe($.rename({dirname: ''}))
|
||||
.pipe(dest(DIST + 'assets/fonts/'))
|
||||
|
||||
|
||||
//
|
||||
// Copy Videos
|
||||
//
|
||||
export const videos = () => src(SRC + '_assets/videos/**/*')
|
||||
.pipe(dest(DIST + 'assets/videos/'))
|
||||
|
||||
|
||||
//
|
||||
// Revision static assets
|
||||
//
|
||||
@ -332,7 +317,7 @@ const deployBanner = (done) => {
|
||||
// `gulp build` is the development build
|
||||
// `gulp build --production` is the production build
|
||||
//
|
||||
export const build = series(buildBanner, clean, jekyll, parallel(html, css, js, images, fonts, videos, svg), rev, revReplace, criticalCss)
|
||||
export const build = series(buildBanner, clean, jekyll, parallel(html, css, js, images, svg), rev, revReplace, criticalCss)
|
||||
|
||||
//
|
||||
// Build site, run server, and watch for file changes
|
||||
|
||||
Loading…
Reference in New Issue
Block a user