diff --git a/_src/_assets/images/starbase-intro.svg b/_src/_assets/images/starbase-intro.svg new file mode 100644 index 0000000..017278e --- /dev/null +++ b/_src/_assets/images/starbase-intro.svg @@ -0,0 +1,438 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_src/_assets/images/starbase.svg b/_src/_assets/images/starbase-server.svg similarity index 100% rename from _src/_assets/images/starbase.svg rename to _src/_assets/images/starbase-server.svg diff --git a/_src/_assets/styles/_page-getstarted.scss b/_src/_assets/styles/_page-getstarted.scss index b55895a..861b168 100644 --- a/_src/_assets/styles/_page-getstarted.scss +++ b/_src/_assets/styles/_page-getstarted.scss @@ -5,11 +5,24 @@ // .section--firsttransaction { - .grid__col { + overflow: visible; + h4 { + margin-bottom: $spacer * 2.5; } } +.form--transaction { + // mnml frm + background: none; + padding: 0; +} + +.form--transaction__content { + border: none; + padding: 0; +} + .waiting { width: 100%; @@ -39,20 +52,7 @@ } .message { - color: #fff; -} - -.form--transaction { - min-height: 340px; - padding-left: $spacer * 1.5; - padding-right: $spacer * 1.5; - display: flex; - align-items: center; -} - -.form--transaction__content { - border: none; - padding: 0; + font-size: $font-size-base; } .section-title--numbered { @@ -101,6 +101,11 @@ } } +// +// All your star bases belong to us +// +// .starbase--server is the baseline +// .starbase { position: relative; margin-top: -($spacer * 2); @@ -139,26 +144,51 @@ display: block; left: -5%; right: -5%; - bottom: 0; + bottom: auto; background: lighten($gray, 8%); height: 24%; - width: calc(100vw + 10%); + width: calc(100vw + 5%); } } // Drivers starbase -// All magic numbers, gonna wing that visually +// All magic numbers, gonna wing it visually .starbase--drivers { - min-height: 15rem; + min-height: 12rem; .starbase__image { + // surface layer + &:before { + height: 40%; + } + + img { + margin-bottom: -.5%; + } + } +} + +// Intro starbase +// All magic numbers, gonna wing it visually +.starbase--intro { + min-height: 10rem; + margin-top: -($spacer * 8); + margin-bottom: 2%; + + @media ($screen-sm) { + margin-bottom: 4%; + } + + .starbase__image { + margin-top: -($spacer * 8); + // surface layer &:before { height: 35%; } img { - margin-bottom: -.5%; + margin-bottom: -1%; } } } diff --git a/_src/_assets/styles/bigchain/_alerts.scss b/_src/_assets/styles/bigchain/_alerts.scss index d3bd0ab..7031bc6 100644 --- a/_src/_assets/styles/bigchain/_alerts.scss +++ b/_src/_assets/styles/bigchain/_alerts.scss @@ -9,7 +9,6 @@ @extend .small; padding: $alert-padding; margin-bottom: $spacer; - border: 1px solid transparent; border-radius: $border-radius; text-align: left; @@ -31,22 +30,21 @@ padding-bottom: $spacer; } - // // Alternate styles // -.alert-success { - @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text); +.alert--success { + @include alert-variant($alert-success-bg, $alert-success-text); } -.alert-info { - @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text); +.alert--info { + @include alert-variant($alert-info-bg, $alert-info-text); } -.alert-warning { - @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text); +.alert--warning { + @include alert-variant($alert-warning-bg, $alert-warning-text); } -.alert-danger { - @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text); +.alert--danger { + @include alert-variant($alert-danger-bg, $alert-danger-text); } diff --git a/_src/_assets/styles/bigchain/_mixins/_alerts.scss b/_src/_assets/styles/bigchain/_mixins/_alerts.scss index 838c851..409fac9 100644 --- a/_src/_assets/styles/bigchain/_mixins/_alerts.scss +++ b/_src/_assets/styles/bigchain/_mixins/_alerts.scss @@ -1,11 +1,8 @@ // Alerts -@mixin alert-variant($background, $border, $text-color) { +@mixin alert-variant($background, $text-color) { background-color: $background; - border-color: $border; color: $text-color; - hr { border-top-color: darken($border, 5%); } - .alert__icon { stroke: $text-color; border-bottom-color: rgba($text-color, .3); diff --git a/_src/_assets/styles/bigchain/_variables.scss b/_src/_assets/styles/bigchain/_variables.scss index db3120e..d24c0af 100644 --- a/_src/_assets/styles/bigchain/_variables.scss +++ b/_src/_assets/styles/bigchain/_variables.scss @@ -212,21 +212,17 @@ $input-color-placeholder: $gray-light !default; // // Form states and alerts // -$state-success-text: $brand-success !default; -$state-success-bg: lighten($brand-success, 40%) !default; -$state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default; +$state-success-text: #fff !default; +$state-success-bg: rgba($brand-primary, .4) !default; -$state-info-text: $brand-info !default; -$state-info-bg: lighten($brand-info, 30%) !default; -$state-info-border: darken(adjust-hue($state-info-bg, -10), 5%) !default; +$state-info-text: #fff !default; +$state-info-bg: rgba($brand-main-violet, .4) !default; -$state-warning-text: $brand-warning !default; -$state-warning-bg: lighten($brand-warning, 40%) !default; -$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) !default; +$state-warning-text: #fff !default; +$state-warning-bg: rgba($brand-warning, .4) !default; -$state-danger-text: $brand-danger !default; -$state-danger-bg: lighten($brand-danger, 40%) !default; -$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default; +$state-danger-text: #fff !default; +$state-danger-bg: rgba($brand-danger, .4) !default; // @@ -237,16 +233,12 @@ $alert-border-radius: $border-radius !default; $alert-success-bg: $state-success-bg !default; $alert-success-text: $state-success-text !default; -$alert-success-border: $state-success-border !default; $alert-info-bg: $state-info-bg !default; $alert-info-text: $state-info-text !default; -$alert-info-border: $state-info-border !default; $alert-warning-bg: $state-warning-bg !default; $alert-warning-text: $state-warning-text !default; -$alert-warning-border: $state-warning-border !default; $alert-danger-bg: $state-danger-bg !default; $alert-danger-text: $state-danger-text !default; -$alert-danger-border: $state-danger-border !default; diff --git a/_src/_data/getstarted.yml b/_src/_data/getstarted.yml index 8e52e19..6e0b7e4 100644 --- a/_src/_data/getstarted.yml +++ b/_src/_data/getstarted.yml @@ -4,8 +4,13 @@ # ---------------------------- firsttransaction: - title: - description: + title: "Get your first transaction into BigchainDB" + message: + label: "Type a message" + button: "Off you go" + request: "A transaction can contain a digital asset along with a message. Type something to be sent along the asset." + response: "Nicely done! You have just created an asset, sent it along in a signed transaction and retrieved the result of that transaction. Phew." + # ---------------------------- diff --git a/_src/getstarted.html b/_src/getstarted.html index de29155..25a1c9d 100644 --- a/_src/getstarted.html +++ b/_src/getstarted.html @@ -15,26 +15,35 @@ redirect_from:
+ +
+

{{ content.firsttransaction.title }}

+
-

Get your first transaction into BigchainDB

+

{{ content.firsttransaction.message.request }}

+
+

- +

-

- A transaction can contain a digital asset along with a message. Type something to be sent along the asset. -

- + +
-

 

 Beep, boop, waiting for your input...
@@ -54,13 +63,11 @@ redirect_from:
-
-

- Nicely done! You have just created an asset, sent it along in a signed transaction and retrieved the result of that transaction. Phew. -

+
+

{{ content.firsttransaction.message.response }}

Check out your transaction on IPDB

-

Shenanigans! Something's off. Would you mind trying again?

+

Shenanigans! Something's off. Would you mind trying again?

@@ -96,7 +103,7 @@ redirect_from: diff --git a/_src/styleguide.md b/_src/styleguide.md index 725d002..8876f39 100644 --- a/_src/styleguide.md +++ b/_src/styleguide.md @@ -293,28 +293,28 @@ Logo can be used with a base class and modifier classes for size & color: ### Alerts -
Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
-
Lucas ipsum Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
-
Lucas ipsum Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
-
Lucas ipsum Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
+
Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
+
Lucas ipsum Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
+
Lucas ipsum Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
+
Lucas ipsum Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
```html -
+
Lucas ipsum Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
-
+
Lucas ipsum Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
-
+
Lucas ipsum Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
-
+
Lucas ipsum Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus