bytewax-docs 0.1.0

data/_assets/scss/templates/docs/sidebar.scss

@@ -0,0 +1,222 @@
+/** Docs -- Sidebar **/
+.docs{
+    &__sidebar{
+        width:100%;
+        margin-bottom:36px;
+        padding-bottom:24px;
+        border-bottom:1px solid rgba($black,.12);
+        @include min-sm{
+            position:sticky;
+            top:128px;
+            min-width:240px;
+            max-width:240px;
+            margin-bottom:0;
+            padding-bottom:0;
+            border-bottom:0;
+        }
+        @include min-lg{
+            min-width:300px;
+            max-width:300px;
+        }
+    }
+    &__search{
+        position:relative;
+        margin-bottom:18px;
+        @include min-sm{
+            margin-bottom:24px;
+        }
+        &::before{
+            position:absolute;
+            top:12px;
+            left:12px;
+            font-size:24px;
+            content:"search";
+            @include material-icons;
+            @include min-sm{
+                top:15px;
+                left:15px;
+            }
+        }
+        &-input{
+            width:100%;
+            height:48px;
+            padding-left:48px;
+            font-size:0.875em;
+            border:1px solid rgba($black,.12);
+            border-radius: 0;
+            outline:none;
+            @include placeholder(rgba($black,.6));
+            @include min-sm{
+                height:54px;
+                padding-left:50px;
+                font-size:.888em;
+            }
+            &:focus{
+                border-color:rgba($black,.18);
+                box-shadow: 0 1px 3px rgba($black,0.12),
+            }
+            &::-webkit-search-cancel-button{
+                position:absolute;
+                top:15px;
+                right:5px;
+                width: 24px;
+                height: 24px;
+                background:url('../img/cancel-grey.svg')no-repeat center;
+                background-size:10px;
+                -webkit-appearance: none;
+            }
+        }
+        &-results{
+            position:absolute;
+            top:54px;
+            z-index:3;
+            width:100%;
+            max-height:320px;
+            margin:0;
+            padding:0;
+            overflow:auto;
+            list-style-type:none;
+            background:$white;
+            border:1px solid rgba($black,.12);
+            border-top:0;
+            box-shadow: 0 3px 9px rgba($black,0.18);
+            @include min-sm{
+                font-size:.777em;
+                line-height:150%;
+            }
+            &-item{
+                &--blank{
+                    padding:8px 15px;
+                    border-left:3px solid $red;
+                }
+            }
+            &-link{
+                display:block;
+                padding:8px 15px;
+                color:rgba($black,.6);
+                text-decoration:none;
+                border-left:3px solid transparent;
+                @include transition(.25s ease-in-out);
+                &:hover{
+                    color:rgba($black,.87);
+                    border-color:$yellow;
+                }
+            }
+        }
+    }
+    &__nav{
+        margin:0;
+        padding:0;
+        list-style-type: none;
+        &-toggle{
+            display:block;
+            padding:6px 0;
+            color:$black;
+            font-weight:600;
+            font-size:1.125em;
+            font-family:$mainFont;
+            cursor:pointer;
+            @include min-sm{
+                padding:9px 0;
+                font-size:1em;
+            }
+            &::before{
+                display:inline-block;
+                margin-right:8px;
+                color:$yellow;
+                font-size:24px;
+                vertical-align:-6px;
+                transform:rotate(-90deg);
+                content:"expand_more";
+                @include material-icons;
+                @include transition(transform .25s ease-in-out);
+            }
+        }
+        &-item--active &-toggle::before{
+            transform:rotate(0deg);
+        }
+        &-item--active &-dropdown{
+            display:block;
+        }
+        &-dropdown{
+            display:none;
+            margin:0;
+            padding:0 0 12px 0;
+            list-style-type:none;
+            &-link{
+                position:relative;
+                display:block;
+                padding:6px 0 6px 29px;
+                color:inherit;
+                font-size:1em;
+                line-height:150%;
+                text-decoration:none;
+                border-left:3px solid transparent;
+                @include transition(.25s ease-in-out);
+                @include min-sm{
+                    font-size:.888em;
+                }
+            }
+            &-item--external &-link{
+                padding-right:36px;
+            }
+            &-item--external &-link::after{
+                position:absolute;
+                top:8px;
+                right:8px;
+                display:inline-block;
+                color:rgba($black,.38);
+                font-size:20px;
+                content:"open_in_new";
+                @include material-icons;
+            }
+            &-item--active &-link{
+                color:rgba($black,.87);
+                border-color:rgba($black,.12);
+            }
+            &-item:hover &-link{
+                color:rgba($black,.87);
+                border-color:$yellow;
+            }
+        }
+    }
+}
+
+/** Dark mode styles **/
+body.dark-mode .docs{
+    &__search{
+        &::before{
+            color:rgba($white,.38);
+        }
+        &-input{
+            color:$white;
+            background:transparent;
+            border:1px solid rgba($white,.12);
+            @include placeholder(rgba($white,.6));
+        }
+        &-results{
+            background-color:$darkGrey;
+            border:1px solid rgba($white,.12);
+        }
+        &-results-link{
+            color:rgba($white,.6);
+            &:hover{
+                color:rgba($white,.87);
+            }
+        }
+    }
+    &__nav {
+        &-toggle{
+            color:$white;
+        }
+        &-dropdown{
+            &-item--active .docs__nav-dropdown-link{
+                color:rgba($white,.87);
+                border-color:rgba($white,.12);
+            }
+            &-item:hover .docs__nav-dropdown-link{
+                color:rgba($white,.87);
+            }
+        }
+    }
+}

data/_assets/scss/templates/docs/toc.scss

@@ -0,0 +1,65 @@
+/** Docs -- Table of contents **/
+.docs{
+    &__toc{
+        display:none;
+        @include min-xxl{
+            position:sticky;
+            top:128px;
+            display:block;
+            min-width:202px;
+        }
+        &-title{
+            margin-bottom:8px;
+            padding-top:12px;
+            padding-bottom:12px;
+            color:rgba($black,.6);
+            border-bottom:2px solid rgba($black,.12);
+        }
+        &-list{
+            margin:0;
+            padding:0;
+            list-style-type:none;
+        }
+        &-item{
+            position:relative;
+        }
+        &-link{
+            display:block;
+            padding:2px 0;
+            color:inherit;
+            font-size:.888em;
+            text-decoration: none;
+            &::before{
+                position:absolute;
+                left:-18px;
+                color:$yellow;
+                content:"#";
+                @include opacity(0);
+                @include transition(opacity .25s ease-in-out);
+            }
+        }
+        &-item--active &-link{
+            color:$yellow;
+            font-weight:600;
+        }
+        &-item:hover &-link{
+            color:rgba($black,.87);
+        }
+        &-item:hover &-link::before{
+            @include opacity(1);
+        }
+    }
+}
+
+/** Dark mode styles **/
+body.dark-mode .docs{
+    &__toc{
+        &-title{
+            color:rgba($white,.6);
+            border-color:rgba($white,.12);
+        }
+        &-item:hover .docs__toc-link{
+            color:rgba($white,.87);
+        }
+    }
+}

data/_assets/scss/templates/tutorials/archive.scss

@@ -0,0 +1,173 @@
+/** Tutorials -- Archive **/
+.tutorials{
+    &__container{
+        position:relative;
+        padding-top:12px;
+        padding-bottom:48px;
+        @include min-sm{
+            padding-top:24px;
+            padding-bottom:72px;
+        }
+        @include min-lg{
+            padding-bottom:120px;
+        }
+    }
+    &__intro{
+        margin-bottom:36px;
+        @include min-sm{
+            margin-bottom:48px;
+        }
+        @include min-lg{
+            margin-bottom:54px;
+        }
+        &-title{
+            margin-bottom:.375em;
+            font-weight:600;
+        }
+    }
+    &__archive{
+        margin:0 -18px;
+        @include min-lg{
+            margin:0 -24px;
+        }
+    }
+    &__post{
+        display:flex;
+        &-thumbnail{
+            position:relative;
+            margin:0;
+            overflow:hidden;
+            &-img{
+                position:absolute;
+                top:50%;
+                left:50%;
+                transform:translate(-50%,-50%);
+            }
+        }
+        &-permalink{
+            color:inherit;
+            text-decoration:none;
+        }
+        &-title{
+            margin-bottom:8px;
+            font-weight:600;
+            @include min-sm{
+                margin-bottom:12px;
+            }
+        }
+        &-link{
+            display:inline-block;
+            color:$yellow;
+            font-weight:600;
+            font-size:1em;
+            font-family:$mainFont;
+            text-decoration:none;
+            &::after{
+                display:inline-block;
+                font-size:24px;
+                vertical-align:-7px;
+                content:"arrow_right";
+                @include material-icons;
+            }
+        }
+        &--featured{
+            flex-direction:column;
+            width:100%;
+            margin:0 18px 48px 18px;
+            @include min-sm{
+                width:calc(50% - 36px);
+                margin:0 18px 64px 18px;
+                padding-bottom:36px;
+                border-bottom:1px solid rgba($black,.12);
+            }
+            @include min-lg{
+                width:calc(50% - 48px);
+                margin:0 24px 64px 24px;
+            }
+        }
+        &--featured &-thumbnail{
+            height:210px;
+            margin-bottom:27px;
+            border-radius:12px;
+            @include min-lg{
+                height:270px;
+            }
+            @include min-xxl{
+                height:320px;
+            }
+            &-img{
+                width:auto;
+                max-width:100%;
+                height:auto;
+            }
+        }
+        &--featured &-excerpt{
+            margin-bottom:18px;
+        }
+        &--archive{
+            flex-direction:row;
+            align-items:center;
+            width:100%;
+            margin:0 18px 27px 18px;
+            @include min-sm{
+                margin:0 18px 36px 18px;
+            }
+            @include min-lg{
+                width:calc(50% - 48px);
+                margin:0 24px 36px 24px;
+            }
+        }
+        &--archive &-thumbnail{
+            min-width:45%;
+            height:150px;
+            margin-right:24px;
+            border-radius:8px;
+            @include min-sm{
+                min-width:33.3%;
+                height:100%;
+                margin-right:36px;
+            }
+            @include min-lg{
+                min-width:40%;
+                border-radius:10px;
+            }
+            @include min-xxl{
+                min-width:33.3%;
+            }
+            &-img{
+                width:auto;
+                height:100%
+            }
+        }
+        &--archive &-content{
+            @include min-sm{
+                padding:18px 0;
+            }
+        }
+        &--archive &-title{
+            @include min-sm{
+                margin-bottom:6px;
+            }
+        }
+        &--archive &-excerpt{
+            display:none;
+            @include min-sm{
+                display:block;
+                margin-bottom:12px;
+                font-size:16px;
+                line-height:28px;
+            }
+        }
+    }
+}
+    
+/** Dark mode styles **/
+body.dark-mode .tutorials{
+    &__post{
+        &--featured{
+            @include min-sm{
+                border-bottom:1px solid rgba($white,.12);
+            }
+        }
+    }
+}