diff --git a/website/_includes/_mixins-base.jade b/website/_includes/_mixins-base.jade index 94b1bfd84..e75ef36c8 100644 --- a/website/_includes/_mixins-base.jade +++ b/website/_includes/_mixins-base.jade @@ -86,6 +86,44 @@ mixin permalink(id) block +//- Quickstart widget + quickstart.js with manual markup, inspired by PyTorch's "Getting started" + groups - [object] option groups, uses global variable QUICKSTART + headline - [string] optional text to be rendered as widget headline + +mixin quickstart(groups, headline) + .c-quickstart.o-block#qs + .c-quickstart__content + if headline + +h(2)=headline + for group in groups + .c-quickstart__group.u-text-small(data-qs-group=group.id) + .c-quickstart__legend=group.title + .c-quickstart__fields + for option in group.options + input.c-quickstart__input(class="c-quickstart__input--" + (group.multiple ? "check" : "radio") type=group.multiple ? "checkbox" : "radio" name=group.id id=option.id value=option.id checked=option.checked) + label.c-quickstart__label(for=option.id)=option.title + if option.meta + | #[span.c-quickstart__label__meta (#{option.meta})] + if option.help + | #[+help(option.help).c-quickstart__label__meta] + + pre.c-code-block + code.c-code-block__content.c-quickstart__code(data-qs-results="") + block + + +//- Quickstart code item + data [object] - Rendering conditions (keyed by option group ID, value: option) + +mixin qs(data) + - args = {} + for value, setting in data + - args['data-qs-' + setting] = value + span.c-quickstart__line&attributes(args) + block + + //- Terminal-style code window label - [string] title displayed in top bar of terminal window diff --git a/website/assets/css/_components/_quickstart.sass b/website/assets/css/_components/_quickstart.sass new file mode 100644 index 000000000..f9972db70 --- /dev/null +++ b/website/assets/css/_components/_quickstart.sass @@ -0,0 +1,83 @@ +//- 💫 CSS > COMPONENTS > QUICKSTART + +.c-quickstart + border: 1px solid $color-subtle + border-radius: 2px + display: none + background: $color-subtle-light + +.c-quickstart__content + padding: 2rem 3rem + +.c-quickstart__input + display: none + +.c-quickstart__label + cursor: pointer + background: $color-back + border: 1px solid $color-subtle + border-radius: 2px + display: inline-block + padding: 0.75rem 1.25rem + margin: 0 0.5rem 0.5rem 0 + font-weight: bold + + &:hover + background: lighten($color-theme-light, 5) + + .c-quickstart__input--radio:checked + & + color: $color-back + border-color: $color-theme + background: $color-theme + + .c-quickstart__input--check + &:before + content: "" + background: $color-back + display: inline-block + width: 20px + height: 20px + position: relative + bottom: 0.2rem + border: 1px solid $color-subtle + vertical-align: middle + margin-right: 1rem + cursor: pointer + border-radius: 50% + + .c-quickstart__input--check:checked + &:before + background: $color-theme url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTkgMTYuMTcybDEwLjU5NC0xMC41OTQgMS40MDYgMS40MDYtMTIgMTItNS41NzgtNS41NzggMS40MDYtMS40MDZ6Ii8+PC9zdmc+) + background-size: contain + border-color: $color-theme + +.c-quickstart__label__meta + font-weight: normal + color: $color-subtle-dark + +.c-quickstart__group + @include breakpoint(min, md) + display: flex + flex-flow: row nowrap + + &:not(:last-child) + margin-bottom: 1rem + +.c-quickstart__fields + flex: 100% + +.c-quickstart__legend + color: $color-subtle-dark + margin-right: 2rem + padding-top: 0.75rem + flex: 1 1 35% + font-weight: bold + +.c-quickstart__line + display: block + + &:before + color: $color-theme + margin-right: 1em + content: "$" + +.c-quickstart__code + font-size: 1.6rem diff --git a/website/assets/css/style.sass b/website/assets/css/style.sass index 259d563c3..eaf7cdf70 100644 --- a/website/assets/css/style.sass +++ b/website/assets/css/style.sass @@ -32,4 +32,5 @@ $theme: blue !default @import _components/navigation @import _components/sidebar @import _components/tables +@import _components/quickstart @import _components/tooltips