bytewax-docs 0.1.0

data/_assets/scss/global/buttons.scss

@@ -0,0 +1,186 @@
+/** UI Elements -- Buttons **/
+.btn{
+    display:inline-block;
+    font-weight:600;
+    font-family:$mainFont;
+    line-height:1;
+    text-align:center;
+    text-decoration:none;
+    border-radius:0;
+    outline:none;
+    cursor:pointer;
+    @include transition(.25s ease-in-out);
+    &--lg{
+        padding:18px 30px;
+        font-size:1.125em;
+        border:1px solid;
+        @include min-sm{
+            padding:18px 36px;
+            font-size:1.11em;
+        }
+    }
+    &--md{
+        padding:14px 27px;
+        font-size:1em;
+        border:1px solid;
+        @include min-sm{
+            padding:15px 32px;
+            font-size:.88em;
+        }
+    }
+    &--primary{
+        color:$white;
+        background-color:$yellow;
+        border-color:$yellow;
+        &:hover, &:focus{
+            color:$yellow;
+            background:transparent;
+            border-color:$yellow;
+        }
+    }
+    &--secondary{
+        color:$white;
+        background-color:$blue;
+        border-color:$blue;
+        &:hover, &:focus{
+            color:$blue;
+            background:transparent;
+            border-color:rgba($blue,.38);
+        }
+    }
+    &--ghost{
+        color:rgba($black,.87);
+        background-color:transparent;
+        border-color:rgba($black,.87);
+        &:hover, &:focus{
+            color:$white;
+            background:$black;
+            border-color:$black;
+        }
+    }
+    &__github{
+        display:inline-block;
+        width:18px;
+        height:18px;
+        margin-right:-2px;
+        margin-left:8px;
+        vertical-align:-4px;
+        background:url('../img/github_black.svg')no-repeat center;
+        background-size:100%;
+        @include min-sm{
+            width:24px;
+            height:24px;
+            margin-right:-4px;
+            vertical-align:-6px;
+        }
+    }
+    &:hover &__github{
+        background:url('../img/github_white.svg')no-repeat center;
+        background-size:100%;
+    }
+    &--md &__github{
+        margin-left:6px;
+        @include min-sm{
+            vertical-align:-7px;
+        }
+    }
+    &__icon{
+        display:inline-block;
+        width:18px;
+        height:18px;
+        font-size:18px;
+        vertical-align:-4px;
+        @include min-sm{
+            width:24px;
+            height:24px;
+            font-size:24px;
+            vertical-align:-6px;
+        }
+        @include material-icons;
+        &--left{
+            margin-right:8px;
+            margin-left:-2px;
+        }
+        &--right{
+            margin-right:-2px;
+            margin-left:8px;
+        }
+    }
+    &--md &__icon{
+        @include min-sm{
+            vertical-align:-7px;
+        }
+        &--left{
+            margin-right:6px;
+        }
+        &--right{
+            margin-left:6px;
+        }
+    }
+    &__arrow{
+        &::before{
+            display:inline-block;
+            width:18px;
+            height:18px;
+            font-size:18px;
+            vertical-align:-4px;
+            content:"";
+            @include material-icons;
+            @include min-sm{
+                width:24px;
+                height:24px;
+                font-size:24px;
+                vertical-align:-6px;
+            }
+        }
+        &--left::before{
+            margin-right:8px;
+            margin-left:-2px;
+            content:"arrow_backward";
+            @include min-sm{
+                margin-left:-4px;
+            }
+        }
+        &--right::before{
+            margin-right:-2px;
+            margin-left:8px;
+            content:"arrow_forward";
+            @include min-sm{
+                margin-right:-4px;
+            }
+        }
+    }
+}
+
+
+/** Dark mode styles **/
+body.dark-mode .btn{
+    &--secondary{
+        color:$white;
+        background-color:$yellow;
+        border-color:$yellow;
+        &:hover, &:focus{
+            color:$yellow;
+            background:transparent;
+            border-color:$yellow;
+        }
+    }
+    &--ghost{
+        color:$white;
+        background-color:transparent;
+        border-color:rgba($white,.18);
+        &:hover, &:focus{
+            color:$black;
+            background-color:$white;
+            border-color:$white;
+        }
+    }
+    &__github{
+        background:url('../img/github_white.svg')no-repeat center;
+        background-size:100%;
+    }
+    &:hover .btn__github{
+        background:url('../img/github_black.svg')no-repeat center;
+        background-size:100%;
+    }
+}

data/_assets/scss/global/fonts.scss

@@ -0,0 +1,95 @@
+/** Open Sans **/
+@font-face {
+    font-weight: 400;
+    font-family: 'Open Sans';
+    font-style: normal;
+    src: url('../fonts/open-sans-v18-latin-regular.eot'); /* IE9 Compat Modes */
+    src: local(''),
+         url('../fonts/open-sans-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../fonts/open-sans-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+         url('../fonts/open-sans-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
+         url('../fonts/open-sans-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+         url('../fonts/open-sans-v18-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
+}
+@font-face {
+    font-weight: 400;
+    font-family: 'Open Sans';
+    font-style: italic;
+    src: url('../fonts/open-sans-v18-latin-italic.eot'); /* IE9 Compat Modes */
+    src: local(''),
+         url('../fonts/open-sans-v18-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../fonts/open-sans-v18-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
+         url('../fonts/open-sans-v18-latin-italic.woff') format('woff'), /* Modern Browsers */
+         url('../fonts/open-sans-v18-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
+         url('../fonts/open-sans-v18-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
+}
+@font-face {
+    font-weight: 600;
+    font-family: 'Open Sans';
+    font-style: normal;
+    src: url('../fonts/open-sans-v18-latin-600.eot'); /* IE9 Compat Modes */
+    src: local(''),
+         url('../fonts/open-sans-v18-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../fonts/open-sans-v18-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
+         url('../fonts/open-sans-v18-latin-600.woff') format('woff'), /* Modern Browsers */
+         url('../fonts/open-sans-v18-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
+         url('../fonts/open-sans-v18-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
+}
+@font-face {
+    font-weight: 600;
+    font-family: 'Open Sans';
+    font-style: italic;
+    src: url('../fonts/open-sans-v18-latin-600italic.eot'); /* IE9 Compat Modes */
+    src: local(''),
+         url('../fonts/open-sans-v18-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../fonts/open-sans-v18-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
+         url('../fonts/open-sans-v18-latin-600italic.woff') format('woff'), /* Modern Browsers */
+         url('../fonts/open-sans-v18-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
+         url('../fonts/open-sans-v18-latin-600italic.svg#OpenSans') format('svg'); /* Legacy iOS */
+}
+@font-face {
+    font-weight: 700;
+    font-family: 'Open Sans';
+    font-style: normal;
+    src: url('../fonts/open-sans-v18-latin-700.eot'); /* IE9 Compat Modes */
+    src: local(''),
+         url('../fonts/open-sans-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../fonts/open-sans-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
+         url('../fonts/open-sans-v18-latin-700.woff') format('woff'), /* Modern Browsers */
+         url('../fonts/open-sans-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
+         url('../fonts/open-sans-v18-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
+}
+@font-face {
+    font-weight: 700;
+    font-family: 'Open Sans';
+    font-style: italic;
+    src: url('../fonts/open-sans-v18-latin-700italic.eot'); /* IE9 Compat Modes */
+    src: local(''),
+         url('../fonts/open-sans-v18-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../fonts/open-sans-v18-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
+         url('../fonts/open-sans-v18-latin-700italic.woff') format('woff'), /* Modern Browsers */
+         url('../fonts/open-sans-v18-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
+         url('../fonts/open-sans-v18-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */
+}
+
+/** Material Icons **/
+@font-face {
+    font-weight: 400;
+    font-family: 'Material Icons';
+    font-style: normal;
+    src: url('../fonts/material-icons.woff2') format('woff2');
+}
+
+/** JetBrains Mono **/
+@font-face {
+    font-weight: 400;
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    src: url('../fonts/jetbrains-mono-v3-latin-regular.eot'); /* IE9 Compat Modes */
+    src: local(''),
+         url('../fonts/jetbrains-mono-v3-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../fonts/jetbrains-mono-v3-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+         url('../fonts/jetbrains-mono-v3-latin-regular.woff') format('woff'), /* Modern Browsers */
+         url('../fonts/jetbrains-mono-v3-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+         url('../fonts/jetbrains-mono-v3-latin-regular.svg#JetBrainsMono') format('svg'); /* Legacy iOS */
+}

data/_assets/scss/global/layout.scss

@@ -0,0 +1,25 @@
+/** Layout styles **/
+*, *:before, *:after{
+    box-sizing:border-box;
+}
+.row{
+    display:flex;
+    flex-direction:row;
+    flex-wrap:wrap;
+}
+.container{
+    max-width:1366px;
+    margin:0 auto;
+    padding-right:18px;
+    padding-left:18px;
+    @include min-lg{
+        padding-right:24px;
+        padding-left:24px;
+    }
+}
+.main{
+    padding-top:92px;
+    @include min-lg{
+        padding-top:126px;
+    }
+}

data/_assets/scss/global/mixins.scss

@@ -0,0 +1,134 @@
+/** Cross-browser grayscale **/
+@mixin grayscale($opacity){
+    -webkit-filter: grayscale($opacity);
+    filter: gray;
+}
+
+/** Cross-browser placeholder **/
+@mixin placeholder($color){
+    &::-webkit-input-placeholder{
+        color:$color;
+    }
+    &:-moz-placeholder{
+        color:$color;
+    }
+    &::-moz-placeholder{
+        color:$color;
+    }
+    &:-ms-input-placeholder{
+        color:$color;
+    }  
+}
+
+/** Cross-browser opacity **/
+@mixin opacity($opacity) {
+    opacity: $opacity;
+    $opacity-ie: $opacity * 100;
+    filter: alpha(opacity=$opacity-ie); 
+}
+
+/** Cross-browser transition **/
+@mixin transition($args) {
+    -webkit-transition: $args;
+    -moz-transition: $args;
+    -ms-transition: $args;
+    -o-transition: $args;
+    transition: $args;
+}
+
+/** Material Icons mixin **/
+@mixin material-icons{
+    font-weight: normal;
+    font-family: 'Material Icons';
+    font-style: normal;
+    line-height: 1;
+    direction: ltr;
+    letter-spacing: normal;
+    white-space: nowrap;
+    text-transform: none;
+    word-wrap: normal;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+}
+
+/** Media queries **/
+@mixin min-1600 {
+    @media only screen and (min-width: 1600px) {
+        @content;
+    }
+}
+@mixin max-1600 {
+    @media only screen and (max-width: 1600px) {
+        @content;
+    }
+}
+@mixin min-1440 {
+    @media only screen and (min-width: 1440px) {
+        @content;
+    }
+}
+@mixin max-1440 {
+    @media only screen and (max-width: 1440px) {
+        @content;
+    }
+}
+@mixin min-xxl {
+    @media only screen and (min-width: 1280px) {
+        @content;
+    }
+}
+@mixin max-xxl {
+    @media only screen and (max-width: 1280px) {
+        @content;
+    }
+}
+@mixin min-xl {
+    @media only screen and (min-width: 1024px) {
+        @content;
+    }
+}
+@mixin max-xl {
+    @media only screen and (max-width: 1024px) {
+        @content;
+    }
+}
+@mixin min-lg {
+    @media only screen and (min-width: 992px) {
+        @content;
+    }
+}
+@mixin max-lg {
+    @media only screen and (max-width: 992px) {
+        @content;
+    }
+}
+@mixin min-md {
+    @media only screen and (min-width: 768px) {
+        @content;
+    }
+}
+@mixin max-md {
+    @media only screen and (max-width: 768px) {
+        @content;
+    }
+}
+@mixin min-sm {
+    @media only screen and (min-width: 576px) {
+        @content;
+    }
+}
+@mixin max-sm {
+    @media only screen and (max-width: 576px) {
+        @content;
+    }
+}
+@mixin min-xs {
+    @media only screen and (min-width: 320px) {
+        @content;
+    }
+}
+@mixin max-xs {
+    @media only screen and (max-width: 320px) {
+        @content;
+    }
+}

data/_assets/scss/global/normalize.scss

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+========================================================================== */
+
+/**
+* 1. Correct the line height in all browsers.
+* 2. Prevent adjustments of font size after orientation changes in iOS.
+*/
+
+html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+    ========================================================================== */
+
+/**
+* Remove the margin in all browsers.
+*/
+
+body {
+    margin: 0;
+}
+
+/**
+* Render the `main` element consistently in IE.
+*/
+
+main {
+    display: block;
+}
+
+/**
+* Correct the font size and margin on `h1` elements within `section` and
+* `article` contexts in Chrome, Firefox, and Safari.
+*/
+
+h1 {
+    margin: 0.67em 0;
+    font-size: 2em;
+}
+
+/* Grouping content
+    ========================================================================== */
+
+/**
+* 1. Add the correct box sizing in Firefox.
+* 2. Show the overflow in Edge and IE.
+*/
+
+hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+}
+
+/**
+* 1. Correct the inheritance and scaling of font size in all browsers.
+* 2. Correct the odd `em` font sizing in all browsers.
+*/
+
+pre {
+    font-size: 1em; /* 2 */
+    font-family: monospace, monospace; /* 1 */
+}
+
+/* Text-level semantics
+    ========================================================================== */
+
+/**
+* Remove the gray background on active links in IE 10.
+*/
+
+a {
+    background-color: transparent;
+}
+
+/**
+* 1. Remove the bottom border in Chrome 57-
+* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+*/
+
+abbr[title] {
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+    border-bottom: none; /* 1 */
+}
+
+/**
+* Add the correct font weight in Chrome, Edge, and Safari.
+*/
+
+b,
+strong {
+    font-weight: bolder;
+}
+
+/**
+* 1. Correct the inheritance and scaling of font size in all browsers.
+* 2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp {
+    font-size: 1em; /* 2 */
+    font-family: monospace, monospace; /* 1 */
+}
+
+/**
+* Add the correct font size in all browsers.
+*/
+
+small {
+    font-size: 80%;
+}
+
+/**
+* Prevent `sub` and `sup` elements from affecting the line height in
+* all browsers.
+*/
+
+sub,
+sup {
+    position: relative;
+    font-size: 75%;
+    line-height: 0;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+sup {
+    top: -0.5em;
+}
+
+/* Embedded content
+    ========================================================================== */
+
+/**
+* Remove the border on images inside links in IE 10.
+*/
+
+img {
+    border-style: none;
+}
+
+/* Forms
+    ========================================================================== */
+
+/**
+* 1. Change the font styles in all browsers.
+* 2. Remove the margin in Firefox and Safari.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    margin: 0; /* 2 */
+    font-size: 100%; /* 1 */
+    font-family: inherit; /* 1 */
+    line-height: 1.15; /* 1 */
+}
+
+/**
+* Show the overflow in IE.
+* 1. Show the overflow in Edge.
+*/
+
+button,
+input { /* 1 */
+    overflow: visible;
+}
+
+/**
+* Remove the inheritance of text transform in Edge, Firefox, and IE.
+* 1. Remove the inheritance of text transform in Firefox.
+*/
+
+button,
+select { /* 1 */
+    text-transform: none;
+}
+
+/**
+* Correct the inability to style clickable types in iOS and Safari.
+*/
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+    -webkit-appearance: button;
+}
+
+/**
+* Remove the inner border and padding in Firefox.
+*/
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+    padding: 0;
+    border-style: none;
+}
+
+/**
+* Restore the focus styles unset by the previous rule.
+*/
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+}
+
+/**
+* Correct the padding in Firefox.
+*/
+
+fieldset {
+    padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+* 1. Correct the text wrapping in Edge and IE.
+* 2. Correct the color inheritance from `fieldset` elements in IE.
+* 3. Remove the padding so developers are not caught out when they zero out
+*    `fieldset` elements in all browsers.
+*/
+
+legend {
+    display: table; /* 1 */
+    box-sizing: border-box; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    color: inherit; /* 2 */
+    white-space: normal; /* 1 */
+}
+
+/**
+* Add the correct vertical alignment in Chrome, Firefox, and Opera.
+*/
+
+progress {
+    vertical-align: baseline;
+}
+
+/**
+* Remove the default vertical scrollbar in IE 10+.
+*/
+
+textarea {
+    overflow: auto;
+}
+
+/**
+* 1. Add the correct box sizing in IE 10.
+* 2. Remove the padding in IE 10.
+*/
+
+[type="checkbox"],
+[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+* Correct the cursor style of increment and decrement buttons in Chrome.
+*/
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+}
+
+/**
+* 1. Correct the odd appearance in Chrome and Safari.
+* 2. Correct the outline style in Safari.
+*/
+
+[type="search"] {
+    outline-offset: -2px; /* 2 */
+    -webkit-appearance: textfield; /* 1 */
+}
+
+/**
+* Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+* 1. Correct the inability to style clickable types in iOS and Safari.
+* 2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+    font: inherit; /* 2 */
+    -webkit-appearance: button; /* 1 */
+}
+
+/* Interactive
+    ========================================================================== */
+
+/*
+* Add the correct display in Edge, IE 10+, and Firefox.
+*/
+
+details {
+    display: block;
+}
+
+/*
+* Add the correct display in all browsers.
+*/
+
+summary {
+    display: list-item;
+}
+
+/* Misc
+    ========================================================================== */
+
+/**
+* Add the correct display in IE 10+.
+*/
+
+template {
+    display: none;
+}
+
+/**
+* Add the correct display in IE 10.
+*/
+
+[hidden] {
+    display: none;
+}