diff --git a/_src/_assets/styles/_page-getstarted.scss b/_src/_assets/styles/_page-getstarted.scss index 5198c54..cbb6f35 100644 --- a/_src/_assets/styles/_page-getstarted.scss +++ b/_src/_assets/styles/_page-getstarted.scss @@ -4,6 +4,60 @@ // bigchaindb.com // +.driver { + padding: $spacer; + background: rgba($brand-main-blue-light, .15); + border-top-left-radius: $border-radius; + border-top-right-radius: $border-radius; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + + &:hover, + &:focus { + .driver__title { + color: #fff; + } + + .driver__logo { + background: #fff; + } + } +} + +.driver, +.driver__logo, +.driver__title { + @include transition; +} + +.driver__logo { + width: 3rem; + height: 3rem; + background: $brand-primary; +} + +.driver__title { + color: $brand-primary; + margin: 0; + font-size: $font-size-h3; +} + +.driver__meta { + @include text-small; + width: 100%; + align-self: flex-end; + margin: 0; + + span { + display: block; + } +} + +.driver__version { + opacity: .75; +} + .section--community { text-align: center; position: relative; diff --git a/_src/start.html b/_src/start.html index d7c2b90..ccd5d11 100644 --- a/_src/start.html +++ b/_src/start.html @@ -42,7 +42,17 @@ redirect_from: <section class="section section--drivers background--darker" id="drivers"> <div class="row"> + <a class="driver" href="https://github.com/bigchaindb/bigchaindb-driver"> + <h2 class="driver__title">Python</h2> + <svg class="driver__logo"> + <use></use> + </svg> + <p class="driver__meta"> + <span class="driver__repo">bigchaindb-driver</span> + <span class="driver__version">v0.1.1</span> + </p> + </a> </div> </section>