bytewax-docs 0.1.0

data/_assets/scss/templates/tutorials/content.scss

@@ -0,0 +1,208 @@
+/** Tutorial -- Content **/
+.tutorial{
+    &__content{
+        width:100%;
+        @include min-lg{
+            width:calc(50% - 24px);
+            margin:0 auto 0 0;
+        }
+        @include min-xxl{
+            width:calc(40% - 24px);
+        }
+    }
+    &__intro{
+        margin-bottom:36px;
+        padding-bottom:27px;
+        border-bottom:1px solid rgba($black,.12);
+        @include min-sm{
+            margin-bottom:48px;
+            padding-bottom:36px;
+        }
+        &-link{
+            display:inline-block;
+            color:$yellow;
+            font-weight:600;
+            font-size:.888em;
+            font-family:$mainFont;
+            line-height:150%;
+            text-decoration:none;
+            &::before{
+                margin-left:-7px;
+                font-size:24px;
+                line-height:1;
+                vertical-align:-7px;
+                content:"arrow_left";
+                @include material-icons;
+            }
+        }
+    }
+    &__title{
+        margin:.25em 0 .375em 0;
+        color:$black;
+        font-weight:600;
+        font-size:1.5em;
+        @include min-sm{
+            font-size:1.77em;
+        }
+    }
+    &__description{
+        margin:0;
+    }
+    &__buttons{
+        display:flex;
+        flex-direction:row;
+        flex-wrap:wrap;
+        margin-top:27px;
+        @include min-xxl{
+            margin-top:36px;
+        }
+        .btn{
+            margin-right:12px;
+            margin-bottom:8px;
+            @include min-xxl{
+                margin-bottom:0;
+            }
+        }
+    }
+
+    /** Case study -- Entry content **/
+    &__text{
+        h1{
+            margin:0 0 .25em 0;
+            color:$black;
+            font-weight:600;
+            font-size:1.5em;
+            @include min-sm{
+                font-size:1.77em;
+            }
+        }
+        h2{
+            margin:1.5em 0 .25em 0;
+            padding:0 36px;
+            font-weight:600;
+            font-size:1.3125em;
+            line-height:135%;
+            @include min-sm{
+                margin:2em 0 .25em 0;
+                font-size:1.33em;
+            }
+            &:first-of-type{
+                margin-top:1em;
+            }
+            &::before{
+                display:inline-block;
+                width:24px;
+                height:24px;
+                margin:0 12px 0 -36px;
+                padding:4px 0;
+                color:$white;
+                font-weight:700;
+                font-size:16px;
+                line-height:1;
+                text-align:center;
+                vertical-align:3px;
+                background:$yellow;
+                border-radius:50%;
+                content:attr(data-count);
+            }
+        }
+        h3, h4{
+            margin:1.5em 0 1em 0;
+            font-weight:600;
+            font-size:1em;
+            @include min-sm{
+                font-size:1.166em;
+            }
+        }
+        p{
+            margin:0;
+            padding:21px 36px 27px 33px;
+            font-size:14px;
+            line-height:24px;
+            border-bottom:1px solid rgba($black,.12);
+            border-left:3px solid transparent;
+            cursor:pointer;
+            @include transition(.25s ease-in-out);
+            @include min-sm{
+                font-size:16px;
+                line-height:28px;
+            }
+            &:last-of-type{
+                border-bottom:0;
+            }
+            &:hover{
+                border-left-color:$lightGrey;
+            }
+            &.highlight{
+                border-left-color:$yellow;
+            }
+            &.highlight strong{
+                color:rgba($black,.87);
+            }
+        }
+        a{
+            color:$blue;
+            font-weight:600;
+            text-decoration:none;
+            &:hover{
+                text-decoration:underline;
+            }
+        }
+        img{
+            max-width:100%;
+            height:auto;
+            margin-top:1em;
+        }
+        strong{
+            display:block;
+            margin-bottom:.25em;
+        }
+        ul{
+            margin:24px 0;
+            padding:0 0 0 30px;
+            list-style-type:none;
+            li{
+                margin:0 0 8px 0;
+                font-size:14px;
+                line-height:24px;
+                @include min-sm{
+                    margin:0 0 12px 0;
+                    font-size:16px;
+                    line-height:28px;
+                }
+            }
+            li::before{
+                @include material-icons;
+                margin:0 6px 0 -30px;
+                color:rgba($black,.38);
+                font-size:24px;
+                vertical-align:-7px;
+                content:"chevron_right";
+            }
+        }
+    }
+}
+
+/** Dark mode styles **/
+body.dark-mode .tutorial{
+    &__intro{
+        border-color:rgba($white,.12);
+    }
+    &__text{
+        p{
+            border-bottom:1px solid rgba($white,.12);
+            &:hover{
+                border-left-color:rgba($white,.38);
+            }
+            &.highlight strong{
+                color:rgba($white,.87);
+            }
+        }
+        a{
+            color:$yellow;
+        }
+        li::before{
+            color:rgba($white,.38);
+        }
+    }
+}

data/_assets/scss/templates/tutorials/layout.scss

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

data/_assets/scss/templates/tutorials/snippets.scss

@@ -0,0 +1,259 @@
+/** Tutorial -- Code snippet **/
+.tutorial{
+    &__snippets{
+        width:100%;
+        padding-top:24px;
+        font-size:14px;
+        line-height:22px;
+        @include min-sm{
+            padding-top:36px;
+            font-size:16px;
+            line-height:28px;
+        }
+        @include min-lg{
+            position:sticky;
+            top:126px;
+            left:0;
+            width:calc(50% - 24px);
+            margin:0 0 0 auto;
+            padding-top:0;
+        }
+        @include min-xxl{
+            width:calc(60% - 24px);
+        }
+        &-nav{
+            display:flex;
+            flex-direction:row;
+            flex-wrap:wrap;
+            margin:0;
+            padding:0;
+            list-style-type:none;
+            @include min-sm{
+                flex-wrap:nowrap;
+                overflow-x:auto;
+                overflow-y:hidden;
+            }
+            &-item{
+                width:100%;
+                border-left:3px solid transparent;
+                @include transition(.25s ease-in-out);
+                @include min-sm{
+                    width:auto;
+                    border-bottom:3px solid transparent;
+                    border-left:0;
+                }
+                &--active{
+                    border-color:$yellow;
+                }
+            }
+            &-link{
+                display:block;
+                padding:10px 12px;
+                color:rgba($black,.6);
+                font-weight:600;
+                font-size:14px;
+                line-height:22px;
+                text-decoration:none;
+                @include transition(.25s ease-in-out);
+                @include min-sm{
+                    padding:3px 16px 12px 16px;
+                    white-space:nowrap;
+                }
+                &::before{
+                    display:inline-block;
+                    margin-right:8px;
+                    color:rgba($black,.18);
+                    font-size:24px;
+                    line-height:1;
+                    vertical-align:-7px;
+                    content:"code";
+                    @include material-icons;
+                }
+                &--notebook::before{
+                    content:"summarize";
+                }
+            }
+            &-item--active &-link{
+                color:rgba($black,.87);
+                &::before{
+                    color:rgba($black,.38);
+                }
+            }
+        }
+        &-tabs{
+            div.code-toolbar>.toolbar{
+                display:none;
+            }
+            div.code-toolbar:hover>.toolbar{
+                display:block;
+            }
+        }
+        &-tab{
+            display:none;
+            margin:0!important;
+            overflow:auto;
+            outline:none;
+            @include transition(background-color .5s ease-in-out);
+            @include min-lg{
+                max-height:calc(100vh - 168px - 72px);
+            }
+            &--active{
+                display:block;
+            }
+            &--highlight{
+                background-color: #dedede!important;
+            }
+        }
+        &-buttons{
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            margin:24px 0;
+        }
+        &-btn{
+            padding:0;
+            color:$yellow;
+            font-weight:600;
+            font-size:14px;
+            background:transparent;
+            border:0;
+            border-radius:0;
+            cursor:pointer;
+            &--prev::before,
+            &--next::after{
+                @include material-icons;
+                display:inline-block;
+                font-size:24px;
+                line-height:24px;
+                vertical-align: -7px;
+            }
+            &--prev::before{
+                content:"arrow_left";
+            }
+            &--next::after{
+                content:"arrow_right";
+            }
+            &--inactive{
+                color:rgba($black,.38);
+                cursor: not-allowed;
+            }
+        }
+    }
+}
+
+/** Dark mode styles **/
+body.dark-mode .tutorial{
+    &__snippets{
+        &-nav{
+            border-bottom-color:rgba($white,.12);
+            &-link{
+                color:rgba($white,.6);
+                &::before{
+                    color:rgba($white,.18);
+                }
+            }
+            &-item--active .tutorial__snippets-nav-link{
+                color:rgba($white,.87);
+                &::before{
+                    color:rgba($white,.38);
+                }
+            }
+        }
+        &-tab--highlight{
+            background-color: #444!important;
+        }
+        &-btn--inactive{
+            color:rgba($white,.38);
+        }
+    }
+}
+
+/** Notebook render styling **/
+.nb{
+    &-markdown-cell{
+        padding-top:12px;
+        padding-bottom:1.5em;
+        h1, h2, h3, h4, h5{
+            font-weight:600;
+            font-family:$mainFont;
+        }
+        h1{
+            font-size:1.5em;
+            @include min-sm{
+                font-size:1.77em;
+            }
+        }
+        h2{
+            font-size:1.3125em;
+            @include min-sm{
+                font-size:1.33em;
+            }
+        }
+        h3, h4,h5{
+            font-size:1em;
+        }
+    }
+    &-stdout, 
+    &-stderr {
+        margin: 1em 0;
+        white-space: pre-wrap;
+    }
+    &-cell {
+        position: relative;  
+        padding-left:96px;
+        border-bottom:1px solid rgba($black,.12);
+        &:last-of-type{
+            border-bottom:0;
+        }
+        &--highlight{
+            background: rgba($black,.09);
+            background: linear-gradient(to right, rgba($black,.09) 70%, rgba($black,0));
+        }
+        pre[class*=language-]{
+            background:transparent;
+        }
+    }
+    &-cell + .nb-cell {
+        margin-top: 0.5em;
+    }
+    &-input,
+    &-output{
+        position: relative;
+    }
+    &-output:before, 
+    &-input:before {
+        position: absolute;
+        top: .75em;
+        left: -96px;
+        width: 96px;
+        padding-right:6px;
+        color: rgba($black,.38);    
+        font-family: $codeFont;
+        text-align: right;
+    }
+    &-input:before {
+        content: "In [" attr(data-prompt-number) "]:";
+    }
+    &-output:before {
+        content: "Out [" attr(data-prompt-number) "]:";
+    }
+}
+
+/** Dark mode **/
+body.dark-mode .nb{
+    &-output:before, 
+    &-input:before {
+        color:rgba($white,.38);
+    }
+    &-cell{
+        border-bottom:1px solid rgba($white,.12);
+        pre[class*=language-]{
+            background:transparent;
+        }
+    }
+    &-cell--highlight{
+        background: rgba($white,.09);
+        background: linear-gradient(to right, rgba($white,.09) 70%, rgba($white,0));
+    }
+}