bytewax-docs 0.1.0

data/_assets/scss/components/cookie-consent.scss

@@ -0,0 +1,35 @@
+/** UI Components -- Cookie consent **/
+.cookie-consent{
+    position:fixed;
+    right:18px;
+    bottom:18px;
+    z-index:999;
+    display:none;
+    max-width:calc(100vw - 36px);
+    padding:21px;
+    text-align:center;
+    background-color:$blue;
+    box-shadow:0px 3px 9px rgba($black,.38);
+    @include min-sm{
+        right:24px;
+        bottom:24px;
+        max-width:320px;
+        padding:24px;
+        text-align:left;
+    }
+    &__content{
+        margin-bottom:18px;
+        color:rgba($white,.76);
+        font-size:13px;
+        line-height:21px;
+    }
+    &__link{
+        color:$white;
+        font-weight:600;
+        text-decoration:none;
+        @include transition(.25s ease-in-out);
+        &:hover{
+            text-decoration:underline;
+        }
+    }
+}

data/_assets/scss/components/footer.scss

@@ -0,0 +1,154 @@
+/** UI Components -- Footer **/
+.footer{
+    background-color: rgba($black,.06);
+    &__container{
+        padding-top:64px;
+        padding-bottom:48px;
+        @include min-sm{
+            padding-top:72px;
+            padding-bottom:96px;
+        }
+        @include min-xxl{
+            padding-top:96px;
+            padding-bottom:136px;
+        }
+    }
+    &__logo{
+        display:none;
+        @include min-sm{
+            display:block;
+            height:44px;
+            margin:0 auto;
+        }
+        @include min-lg{
+            margin:0 0 18px 0;
+        }
+        &--mono{
+            display:block;  
+            height:40px;
+            margin:0 auto 12px auto;
+            @include opacity(.24);
+            @include min-sm{
+                display:none;
+            }
+        }
+        &--dark{
+            display:none;
+        }
+    }
+    &__copyright{
+        order:4;
+        width:calc(100% + 48px);
+        margin:48px -18px 0 -18px;
+        padding:48px 36px 0 36px;
+        color:rgba($black,.38);
+        font-size:14px;
+        line-height:22px;
+        text-align:center;
+        border-top:1px solid rgba($black,.12);
+        @include min-lg{
+            order:1;
+            width:auto;
+            max-width:33.3%;
+            margin:0 auto 0 0;
+            padding:0;
+            text-align:left;
+            border-top:0;
+        }
+        @include min-xxl{
+            max-width:none;
+        }
+    }
+    &__widget{
+        margin:0 auto;
+        text-align:center;
+        @include min-lg{
+            margin:0 64px;
+            text-align:left;
+        }
+        &-title{
+            margin-bottom:.75em;
+            font-weight:600;
+            font-size:1.125em;
+            @include min-sm{
+                font-size:1em;
+            }
+        }
+        &--about{
+            width:50%;
+            margin-bottom:48px;
+            @include min-sm{
+                width:auto;
+                margin-bottom:0;
+            }
+            @include min-lg{
+                order:2;
+            }
+        }
+        &--resources{
+            width:50%;
+            margin-bottom:48px;
+            @include min-sm{
+                width:auto;
+                margin-bottom:0;
+            }
+            @include min-lg{
+                order:3;
+            }
+        }
+        &--legal{
+            width:100%;
+            @include min-sm{
+                width:auto;
+            }
+            @include min-lg{
+                order:4;
+                margin-right:36px;
+            }
+        }
+    }
+    &__nav{
+        margin:0;
+        padding:0;
+        list-style-type:none;
+        &-item{
+            margin:8px 0;
+            line-height:135%;
+        }
+        &-link{
+            color:inherit;
+            font-size:0.88em;
+            text-decoration:none;
+        }
+    }
+}
+
+/** Dark mode styles **/
+body.dark-mode .footer{
+    background-color: rgba($white,.03);
+    &__copyright{
+        color:rgba($white,.38);
+        border-top:1px solid rgba($white,.06);
+        @include min-lg{
+            border-top:0;
+        }
+    }
+    &__logo{
+        display:none;
+        &--mono{
+            display:none;
+        }
+        &--dark{
+            display:block;
+            height:40px;
+            margin:0 auto 12px auto;
+            @include min-sm{
+                height:44px;
+                margin:0 auto;
+            }
+            @include min-lg{
+                margin:0 0 18px 0;
+            }
+        }
+    }
+}

data/_assets/scss/components/navbar.scss

@@ -0,0 +1,345 @@
+/** UI Components -- Navbar **/
+.navbar{
+    position:fixed;
+    top:0;
+    right:0;
+    left:0;
+    z-index:9999;
+    background:transparent;
+    @include transition(.25s ease-in-out);
+    &__container{
+        display:flex;
+        flex-direction:row;
+        flex-wrap:wrap;
+        align-items:center;
+        min-height:92px;
+        padding-top:24px;
+        padding-bottom:24px;
+        @include transition(.25s ease-in-out);
+        @include min-lg{
+            flex-wrap:nowrap;
+            min-height:126px;
+            padding-top:0;
+            padding-bottom:0;
+        }
+    }
+    &__brand{
+        @include max-lg{
+            order:1;
+        }
+    }
+    &__logo{
+        display:block;
+        height:44px;
+        @include min-sm{
+            height:54px;
+        }
+        &--yellow{
+            display:none;
+            height:44px;
+            @include min-sm{
+                height:54px;
+            }
+        }
+        &--dark{
+            display:none;
+            height:44px;
+            @include min-sm{
+                height:54px;
+            }
+        }
+    }
+    &__toggler{
+        position:relative;
+        display:inline-block;
+        height:24px;
+        margin-left:32px;
+        padding:0px;
+        background:transparent;
+        border:0px;
+        border-radius:0px;
+        outline: 0;
+        @include max-lg{
+            order:3;
+        }
+        @include min-lg{
+            display:none;
+        }
+        span{
+            position: relative;
+            left: 0;
+            display: block;
+            width: 24px;
+            height: 3px;
+            margin-top: 4px;
+            margin-bottom: 4px;
+            background-color: $yellow;
+            border-radius:0px;
+            transform: rotate(0deg);
+            opacity: 1;
+        }
+        span:nth-child(1),
+        span:nth-child(3) {
+            transition: transform .5s ease-in-out;
+        }
+        &--open span:nth-child(1) {
+            position: absolute;
+            top: 6px;
+            left: 0;
+            background-color: $white;
+            transform: rotate(135deg);
+            opacity: 1;
+        }
+        &--open span:nth-child(2) {
+            height: 2px;
+            background-color: transparent;
+            visibility: hidden;
+        }
+        &--open span:nth-child(3) {
+            position: absolute;
+            top: 6px;
+            left: 0;
+            background-color: $white;
+            transform: rotate(-135deg);
+            opacity: 1;
+        }
+    }
+    &__nav{
+        display:none;
+        flex-direction:column;
+        align-items:center;
+        justify-content:center;
+        width:100%;
+        min-height:calc(100vh - 92px);
+        padding:0;
+        list-style-type:none;
+        @include max-lg{
+            order:4;
+        }
+        @include min-lg{
+            display:flex;
+            flex-direction:row;
+            justify-content:flex-end;
+            min-height:0;
+            margin:0 0 0 auto;
+        }
+        &-item{
+            position:relative;
+            margin:18px 0;
+            line-height:135%;
+            @include min-lg{
+                margin:0 24px;
+            }
+            @include min-xxl{
+                margin:0 36px;
+            }
+            &:last-of-type{
+                @include min-lg{
+                    margin-right:0;
+                }
+            }
+        }
+        &-link{
+            color:$white;
+            font-weight:600;
+            font-size:1.25em;
+            font-family:$mainFont;
+            text-decoration:none;
+            @include min-lg{
+                color:$black;
+                font-size:1em;
+            }
+            &--dropdown::after{
+                display:inline-block;
+                color:rgba($black,.24);
+                font-size:24px;
+                vertical-align:middle;
+                transform:rotate(0deg);
+                content:"arrow_drop_down";
+                @include transition(.25s ease-in-out);
+                @include material-icons;
+                @include min-lg{
+                    color:$yellow;
+                }
+            }
+            &--dropdown-open::after{
+                transform:rotate(-180deg);
+            }
+        }
+        &-item--active &-link{
+            color:$black;
+            @include min-lg{
+                color:$yellow;
+            }
+        }
+        &-dropdown{
+            display:none;
+            padding:12px 0 0 0;
+            list-style-type:none;
+            @include min-lg{
+                position:absolute;
+                top:48px;
+                left:-24px;
+                min-width:220px;
+                padding:12px 24px 16px 24px;
+                background:$yellow;
+            }
+            &-item{
+                margin:12px 0;
+                line-height:135%;
+                text-align:center;
+                @include min-lg{
+                    margin:10px 0;
+                    text-align:left;
+                }
+            }
+            &-link{
+                color:$black;
+                font-weight:600;
+                font-size:1.25em;
+                font-family:$mainFont;
+                text-decoration:none;
+                @include min-lg{
+                    color:$white;
+                    font-size:1em;
+                }
+            }
+            &::before{
+                position:absolute;
+                top:-5px;
+                left:48px;
+                display:none;
+                border-color: transparent transparent $yellow transparent;
+                border-style: solid;
+                border-width: 0 5px 5px 5px;
+                content:"";
+                @include min-lg{
+                    display:inline-block;
+                }
+            }
+        }
+        &-btn{
+            display:inline-block;
+            padding:18px 32px 18px 36px;
+            color:$white;
+            font-weight:600;
+            font-size:1.25em;
+            font-family:$mainFont;
+            text-decoration:none;
+            background:$black;
+            border:1px solid $black;
+            @include min-lg{
+                padding:14px 24px 14px 30px;
+                font-size:1em;
+                background:$yellow;
+                border:1px solid $yellow;
+            }
+            @include transition(.35s ease-in-out);
+            &::after{
+                display:inline-block;
+                margin:0 0 0 2px;
+                vertical-align:-4px;
+                content:"arrow_right";
+                @include material-icons;
+            }
+            &:hover, &:focus{
+                color:$white;
+                background-color:$blue;
+                border-color:$blue;
+            }
+        }
+    }
+
+    /** States **/
+    &--open{
+        background:$yellow;
+    }
+    &--open &__logo{
+        display:none;
+    }
+    &--open &__logo--yellow{
+        display:block;
+    }
+    &--scroll:not(.navbar--open){
+        background:$white;
+        box-shadow:0px 3px 9px rgba($black,.12);
+    }
+    &--scroll &__container{
+        @include min-lg{
+            min-height:96px;
+        }
+    }
+
+    /** Dark-light mode switch **/
+    &__switch{
+        position:relative;
+        min-width:36px;
+        height:12px;
+        margin-left:auto;
+        padding:0;
+        border:0;
+        border-radius:30px;
+        outline:none;
+        cursor:pointer;
+        @include transition(background-color .25s ease-in-out);
+        @include max-lg{
+            order:2;
+        }
+        @include min-lg{
+            margin-left:54px;
+        }
+        &::before{
+            position:absolute;
+            top:-9px;
+            left:0;
+            padding:6px;
+            font-size:18px;
+            border-radius:50%;
+            box-shadow:0px 1px 2px rgba($black,.24);
+            @include material-icons;
+            @include transition(transform .25s ease-in-out);
+        }
+        &--light{
+            background-color:rgba($black,.06);
+        }
+        &--light::before{
+            color:$yellow;
+            background-color:$white;
+            transform:translateX(-15px);
+            content:"light_mode";
+        }
+        &--dark{
+            background-color:rgba($white,.18);
+        }
+        &--dark::before{
+            color:$white;
+            background-color:$darkGrey;
+            transform:translateX(21px);
+            content:"dark_mode";
+        }
+    }
+}
+
+/** Dark mode styles **/
+body.dark-mode .navbar{
+    &__logo{
+        display:none;
+    }
+    &__logo--dark{
+        display:block;
+    }
+    &__nav{
+        &-link{
+            @include min-lg{
+                color:$white;
+            }
+        }
+    }
+    &--scroll:not(.navbar--open){
+        background:$darkBg;
+        box-shadow:0px 3px 9px rgba($black,.12);
+    }
+    &--open .navbar__logo--dark{
+        display:none;
+    }
+}