bytewax-docs 0.1.0

data/_assets/scss/global/typography.scss

@@ -0,0 +1,106 @@
+/** Text **/
+body{
+    color:rgba($black,.6);
+    font-size:16px;
+    font-family:$mainFont;
+    line-height:26px;
+    @include min-sm{
+        font-size:18px;
+        line-height:30px;
+    }
+    &.dark-mode{
+        color:rgba($white,.6);
+        background:$darkBg;
+    }
+}
+p{
+    margin:0 0 .5em 0;
+}
+
+/** Custom selection color **/
+::selection {
+    color: rgba($black,.87);
+    background: $yellow;
+}
+body.dark-mode ::selection{
+    color:$white;
+}
+
+/** Headings **/
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6{
+    margin:0 0 .5em 0;
+    color:$black;
+    font-weight:400;
+    font-family:$mainFont;
+    line-height:130%;
+    @include min-sm{
+        line-height:120%;
+    }
+    strong{
+        font-weight:600;
+    }
+}
+body.dark-mode h1, body.dark-mode .h1,
+body.dark-mode h2, body.dark-mode .h2,
+body.dark-mode h3, body.dark-mode .h3,
+body.dark-mode h4, body.dark-mode .h4,
+body.dark-mode h5, body.dark-mode .h5,
+body.dark-mode h6, body.dark-mode .h6{ 
+    color:$white;
+}
+h1, .h1{
+    font-size:1.6875em;
+    @include min-sm{
+        font-size:2.22em;
+    }
+}
+h2, .h2{
+    font-size:1.5em;
+    @include min-sm{
+        font-size:1.77em;
+    }
+}
+h3, .h3{
+    font-size:1.3125em;
+    line-height:135%;
+    @include min-sm{
+        font-size:1.33em;
+    }
+}
+h4, .h4{
+    font-weight:600;
+    font-size:1em;
+    line-height:135%;
+}
+
+/** Code snippets **/
+.code{
+    display:block;
+    margin-bottom:.75em;
+    font-family:$codeFont;
+    @include min-sm{
+        margin-bottom:1em;
+    }
+    &--white{
+        color:$white;
+    }
+    &--purple{
+        color:$purple;
+    }
+    &--blue{
+        color:$lightBlue;
+    }
+    &--green{
+        color:$oliveGreen;
+    }
+    &--grey{
+        color:#777777;
+    }
+    &--yellow{
+        color:#fad437;
+    }
+    &--indent{
+        padding-left:2em;
+    }
+}

data/_assets/scss/global/variables.scss

@@ -0,0 +1,23 @@
+/** Color palette **/
+$white: #ffffff;
+$black: #000000;
+$yellow: #FAB90F;
+$blue: #334AC0;
+$red: #FA420F;
+$lightGrey: #F4F4F4;
+$purple: #b464b4;
+$oliveGreen: #a0b450;
+$lightBlue: #6aacef;
+$turquoise: #44C3D4;
+$green: #96C84B;
+$orange: #ff6400;
+
+/** Dark mode palette **/
+$darkBg: #171717;
+$darkGrey: #333;
+$grey: #666;
+
+/** Font stack **/
+$mainFont: "Open Sans", sans-serif;
+$iconFont: "Material Icons", sans-serif;
+$codeFont: "JetBrains Mono", sans-serif;

data/_assets/scss/main.scss

@@ -0,0 +1,35 @@
+/** Import common files **/
+@import 'global/normalize';
+@import 'global/fonts';
+@import 'global/mixins';
+@import 'global/animate';
+@import 'global/variables';
+@import 'global/typography';
+@import 'global/buttons';
+@import 'global/layout';
+@import 'global/slick';
+@import 'global/prism';
+@import 'global/alerts';
+
+/** Import components (reusable modules) files **/
+@import 'components/navbar';
+@import 'components/article';
+@import 'components/newsletter';
+@import 'components/footer';
+@import 'components/cookie-consent';
+
+/** Import default template **/
+@import 'templates/default';
+
+/** Import docs files **/
+@import 'templates/docs/layout';
+@import 'templates/docs/sidebar';
+@import 'templates/docs/content';
+@import 'templates/docs/toc';
+@import 'templates/docs/pagination';
+
+/** Import tutorial (single post) files **/
+@import 'templates/tutorials/layout';
+@import 'templates/tutorials/content';
+@import 'templates/tutorials/snippets';
+@import 'templates/tutorials/archive';

data/_assets/scss/templates/default.scss

@@ -0,0 +1,100 @@
+/** Default **/
+.default{
+    padding-top:92px;
+    @include min-lg{
+        padding-top:126px;
+    }
+    &__container{
+        max-width:992px;
+        margin:0 auto;
+        padding-top:12px;
+        padding-bottom:64px;
+        @include min-sm{
+            padding-top:24px;
+            padding-bottom:96px;
+        }
+        @include min-lg{
+            padding-top:36px;
+            padding-bottom:120px;
+        }
+    }
+    &__title{
+        margin-bottom:.75em;
+        font-weight:600;
+    }
+    &__content{
+        h2{
+            margin:2em 0 .5em 0;
+            color:rgba($black,.6);
+            font-weight:600;
+            font-size:1.3125em;
+            line-height:135%;
+            @include min-sm{
+                font-size:1.33em;
+            }
+            &:first-of-type{
+                margin-top:1em;
+            }
+        }
+        h3{
+            margin:1.5em 0 .5em 0;
+            font-weight:600;
+            @include min-sm{
+                font-size:1.166em;
+            }
+        }
+        h4{
+            margin:1.25em 0 .25em 0;
+        }
+        p{
+            margin:0 0 1em 0;
+        }
+        p, li, pre, code{
+            @include min-sm{
+                font-size:16px;
+                line-height:28px;
+            }
+        }
+        ul{
+            margin:24px 0;
+            padding:0 0 0 36px;
+            list-style-type:none;
+            li{
+                margin:0 0 .5em 0;
+            }
+            li::before{
+                @include material-icons;
+                margin:0 6px 0 -30px;
+                color:rgba($black,.38);
+                font-size:24px;
+                vertical-align:middle;
+                content:"chevron_right";
+            }
+            li ul{
+                margin:.5em 0 1em 0;
+            }
+        }
+        a{
+            color:$blue;
+            font-weight:600;
+            text-decoration:none;
+            &:hover{
+                text-decoration: underline;
+            }
+        }
+    }
+}
+
+/** Dark mode styles **/
+body.dark-mode .default{
+    &__content{
+        a{
+            color:$yellow;
+        }
+        ul {
+            li::before{
+                color:rgba($white,.38);
+            }
+        }
+    }
+}

data/_assets/scss/templates/docs/content.scss

@@ -0,0 +1,113 @@
+/** Docs -- Content **/
+.docs{
+    &__content{
+        width:100%;
+        @include min-sm{
+            max-width:calc(100% - 288px);
+            margin:0 0 0 48px;
+        }
+        @include min-lg{
+            max-width:calc(100% - 348px);
+        }
+        @include min-xxl{
+            max-width:680px;
+            margin:0 64px 0 72px;
+        }
+        h1{
+            margin:.25em 0 .5em 0;
+            color:$black;
+            font-weight:600;
+            font-size:1.5em;
+            @include min-sm{
+                font-size:1.77em;
+            }
+        }
+        h2{
+            margin:2em 0 .5em 0;
+            color:rgba($black,.6);
+            font-weight:600;
+            font-size:1.3125em;
+            line-height:135%;
+            @include min-sm{
+                font-size:1.33em;
+            }
+            &:first-of-type{
+                margin-top:1em;
+            }
+        }
+        h3{
+            margin:2em 0 .5em 0;
+            font-weight:600;
+            @include min-sm{
+                font-size:1.166em;
+            }
+        }
+        p, li{
+            @include min-sm{
+                font-size:16px;
+                line-height:28px;
+            }
+            a:not(.docs__pagination-item){
+                color:$blue;
+                font-weight:600;
+                text-decoration:none;
+                &:hover{
+                    text-decoration: underline;
+                }
+            }
+        }
+        pre, code{
+            @include min-sm{
+                font-size:16px;
+                line-height:28px;
+            }
+        }
+        p:not(.alert__content){
+            margin:0 0 1em 0;
+        }
+        ul{
+            margin:24px 0;
+            padding:0 0 0 36px;
+            list-style-type:none;
+            li{
+                margin:.1em 0;
+            }
+            li::before{
+                @include material-icons;
+                margin:0 6px 0 -30px;
+                color:rgba($black,.38);
+                font-size:24px;
+                vertical-align:middle;
+                content:"chevron_right";
+            }
+        }
+        pre{
+            margin:24px 0;
+        }
+        img{
+            max-width:100%;
+            height:auto;
+            margin:1em 0 0 0;
+            border-radius:8px;
+        }
+        code{
+            font-family:$codeFont;
+        }
+    }
+}
+
+/** Dark mode styles **/
+body.dark-mode .docs{
+    &__content{
+        p, li, pre, code{
+            a:not(.docs__pagination-item){
+                color:$yellow;
+            }
+        }
+        ul{
+            li::before{
+                color:rgba($white,.38);
+            }
+        }
+    }
+}

data/_assets/scss/templates/docs/layout.scss

@@ -0,0 +1,21 @@
+/** Docs -- Layout **/
+.docs{
+    &__container{
+        padding-top:12px;
+        padding-bottom:64px;
+        @include min-sm{
+            padding-top:24px;
+            padding-bottom:96px;
+        }
+        @include min-lg{
+            padding-bottom:150px;
+        }
+    }
+    &__row{
+        position:relative;
+        align-items:flex-start;
+        @include min-sm{
+            flex-wrap:nowrap;
+        }
+    }
+}

data/_assets/scss/templates/docs/pagination.scss

@@ -0,0 +1,48 @@
+/** Docs -- Prev/next nav **/
+.docs{
+    &__pagination{
+        display:flex;
+        flex-direction:row;
+        flex-wrap:wrap;
+        align-items:center;
+        justify-content:space-between;
+        margin-top:36px;
+        padding-top:18px;
+        border-top:1px solid rgba($black,.12);
+        @include min-lg{
+            flex-wrap:nowrap;
+        }
+        &-item{
+            color:$yellow;
+            font-weight:600;
+            font-family:$mainFont;
+            text-decoration:none;
+            &::before, 
+            &::after{
+                @include material-icons;
+                display:inline-block;
+                font-size:24px;
+                vertical-align:-6px;
+            }
+            &--prev{
+                margin-right:auto;
+            }
+            &--prev::before{
+                content:"arrow_left";
+            }
+            &--next{
+                margin-left:auto;
+            }
+            &--next::after{
+                content:"arrow_right";
+            }
+        }
+    }
+}
+
+/** Dark mode styles **/
+body.dark-mode .docs{
+    &__pagination{
+        border-color:rgba($white,.12);
+    }
+}