bytewax-docs 0.1.0

data/_assets/scss/components/newsletter.scss

@@ -0,0 +1,222 @@
+/** UI Components -- Newsletter **/
+.newsletter{
+    color:rgba($white, .72);
+    background-color:$blue;
+    &__container{
+        padding-top:54px;
+        padding-bottom:72px;
+        @include min-lg{
+            flex-wrap:nowrap;
+            padding-top:80px;
+            padding-bottom:96px;
+        }
+    }
+    &__title{
+        margin:0 0 .375em 0;
+        color:$white;
+    }
+    &__content{
+        width:100%;
+        margin-bottom:36px;
+        text-align:center;
+        p{
+            margin:0;
+        }
+        @include min-sm{
+            margin-bottom:48px;
+        }
+        @include min-lg{
+            width:auto;
+            min-width:33.3%;
+            margin-right:36px;
+            margin-bottom:0;
+            text-align:left;
+        }
+        @include min-xxl{
+            margin-right:auto;
+        }
+    }
+    &__form{
+        display:flex;
+        flex-direction:row;
+        flex-wrap:wrap;
+        align-items:flex-start;
+        &-wrapper{
+            @include min-lg{
+                min-width:66.6%;
+            }
+        }
+        #mce-responses{
+            order:4;
+            width:100%;
+            margin-top:20px;
+        }
+        #mce-responses .response{
+            padding:10px 16px;
+            font-weight:600;
+            font-size:14px;
+            line-height:22px;
+            border:1px dashed;
+            &#mce-error-response{
+                color:$red;
+                border-color:$red;
+            }
+            &#mce-success-response{
+                color:$green;
+                border-color:$green;
+            }
+        }
+    }
+    &__input{
+        width:100%;
+        height:54px;
+        padding:0 24px 0 50px;
+        font-size:1em;
+        border:0;
+        outline:none;
+        @include min-sm{
+            height:60px;
+            padding:0 36px 0 54px;
+            font-size:0.88em;
+        }
+        &-group{
+            position:relative;
+            width:100%;
+            margin-bottom:12px;
+            @include min-sm{
+                width:calc(50% - 10px);
+                margin-bottom:0;
+            }
+            @include min-lg{
+                flex:auto;
+                width:auto;
+            }
+            &::before{
+                position:absolute;
+                top:15px;
+                left:15px;
+                display:inline-block;
+                color:rgba($black,.18);
+                font-size:24px;
+                content:"";
+                @include material-icons;
+                @include min-sm{
+                    top:18px;
+                    left:18px;
+                }
+            }
+            &--name{
+                @include min-sm{
+                    margin-right:10px;
+                }
+                @include min-lg{
+                    margin-right:20px;
+                }
+            }
+            &--name::before{
+                content:"how_to_reg";
+            }
+            &--email{
+                @include min-sm{
+                    margin-left:10px;
+                }
+                @include min-xxl{
+                    margin-right:20px;
+                    margin-left:0px;
+                }
+            }
+            &--email::before{
+                content:"alternate_email";
+            }
+        }
+    }
+    &__submit{
+        @include max-xl{
+            order:4;
+            margin:32px auto 0 auto;
+        }
+    }
+    &__checkbox{
+        position:relative;
+        width:100%;
+        margin-top:12px;
+        cursor:pointer;
+        @include min-sm{
+            margin-top:27px;
+        }
+        &-input{
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 1;
+            width: 1px;
+            height: 1px;
+            margin: 0;
+            padding: 0;
+            cursor:inherit;
+        }
+        &-label{
+            position:relative;
+            display:inline-block;
+            padding-left:52px;
+            font-size:12px;
+            line-height:20px;
+            cursor:pointer;
+            @include min-sm{
+                padding-left:56px;
+                font-size:14px;
+                line-height:22px;
+            }
+            a{
+                color:$white;
+                text-decoration:none;
+            }
+            &::before{
+                position:absolute;
+                top:0;
+                left:0;
+                display:inline-block;
+                width:36px;
+                height:36px;
+                background:url('../img/cancel.svg')no-repeat center #273892;
+                background-size:12px;
+                border-radius:0;
+                content:"";
+            }
+        }
+        &-input:checked + &-label::before{
+            background:url('../img/check.svg')no-repeat center $yellow;
+            background-size:12px;
+        }
+    }
+}
+
+/** Mailchimp validation **/
+#mc_embed_signup div.mce_inline_error{
+    margin:12px 0 0 0!important;
+    padding:8px 16px!important;
+    font-weight:600!important;
+    font-size:14px!important;
+    line-height:22px!important;
+    background-color:$red!important;
+}
+
+/** Dark mode styles **/
+body.dark-mode .newsletter{
+    color:rgba($white, .6);
+    background-color:rgba($white,.06);
+    &__input{
+        color:$white;
+        background-color:$darkGrey;
+        @include placeholder(rgba($white,.38));
+        &-group::before{
+            color:rgba($white, .18);
+        }
+    }
+    &__checkbox{
+        &-label::before{
+            background:url('../img/cancel-grey.svg')no-repeat center $darkGrey;
+            background-size:12px;
+        }
+    }
+}

data/_assets/scss/global/alerts.scss

@@ -0,0 +1,112 @@
+/** Alert styling **/
+.alert{
+    margin:24px 0;
+    padding:16px 24px 16px 30px;
+    border-left:4px solid;
+    position:relative;
+    @include min-sm{
+        font-size:16px;
+        line-height:28px;
+        padding:16px 27px 16px 32px;
+    }
+    a{  
+        font-weight:600;
+        text-decoration:none;
+        &:hover, &:focus{
+            text-decoration: underline;
+        }
+    }
+    &__icon{
+        @include material-icons;
+        position:absolute;
+        z-index:1;
+        left:-18px;
+        top:14px;
+        display:inline-block;
+        width:32px;
+        height:32px;
+        font-size:18px;
+        line-height:18px;
+        padding:7px;
+        border-radius:50%;
+        color: $white;
+    }
+    &__content{
+        margin:0;
+    }
+    &--primary{
+        background-color:rgba($yellow,.06);
+        border-color:$yellow;
+        a, code{
+            color:$yellow;
+        }
+    }
+    &--primary &__icon{
+        background-color:$yellow;
+    }
+    &--secondary{
+        background-color:rgba($turquoise,.06);
+        border-color:$turquoise;
+        a, code{
+            color:$turquoise;
+        }
+    }
+    &--secondary &__icon{
+        background-color: $turquoise;
+    }
+    &--success{
+        background-color:rgba($green,.06);
+        border-color:$green;
+        a, code{
+            color:$green;
+        }
+    }
+    &--success &__icon{
+        background-color: $green;
+    }
+    &--warning{
+        background-color:rgba($orange,.06);
+        border-color:$orange;
+        a, code{
+            color:$orange;
+        }
+    }
+    &--warning &__icon{
+        background-color: $orange;
+    }
+    &--error{
+        background-color:rgba($red,.06);
+        border-color:$red;
+        a, code{
+            color:$red;
+        }
+    }
+    &--error &__icon{
+        background-color: $red;
+    }
+    &--info{
+        background-color:rgba($blue,.06);
+        border-color:$blue;
+        a, code{
+            color:$blue;
+        }
+    }
+    &--info &__icon{
+        background-color: $blue;
+    }
+}
+
+/** Dark mode styles **/
+body.dark-mode .alert{
+    &--primary,
+    &--secondary,
+    &--success,
+    &--warning,
+    &--error,
+    &--info{
+        background-color: $darkGrey;
+        a{
+            color:$white;
+        }
+    }
+}

data/_assets/scss/global/animate.scss

@@ -0,0 +1,633 @@
+@charset "UTF-8";
+
+/*!
+ * animate.css -https://daneden.github.io/animate.css/
+ * Version - 3.7.2
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2019 Daniel Eden
+ */
+
+
+ /*
+ * Fade effects 
+ */
+ @-webkit-keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+  
+    to {
+      opacity: 1;
+    }
+  }
+  
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+  
+    to {
+      opacity: 1;
+    }
+  }
+  
+  .fadeIn {
+    -webkit-animation-name: fadeIn;
+    animation-name: fadeIn;
+  }
+  
+  @-webkit-keyframes fadeInDown {
+    from {
+      -webkit-transform: translate3d(0, -100%, 0);
+      transform: translate3d(0, -100%, 0);
+      opacity: 0;
+    }
+  
+    to {
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+  
+  @keyframes fadeInDown {
+    from {
+      -webkit-transform: translate3d(0, -100%, 0);
+      transform: translate3d(0, -100%, 0);
+      opacity: 0;
+    }
+  
+    to {
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+  
+  .fadeInDown {
+    -webkit-animation-name: fadeInDown;
+    animation-name: fadeInDown;
+  }
+  
+  @-webkit-keyframes fadeInDownBig {
+    from {
+      -webkit-transform: translate3d(0, -2000px, 0);
+      transform: translate3d(0, -2000px, 0);
+      opacity: 0;
+    }
+  
+    to {
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+  
+  @keyframes fadeInDownBig {
+    from {
+      -webkit-transform: translate3d(0, -2000px, 0);
+      transform: translate3d(0, -2000px, 0);
+      opacity: 0;
+    }
+  
+    to {
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+  
+  .fadeInDownBig {
+    -webkit-animation-name: fadeInDownBig;
+    animation-name: fadeInDownBig;
+  }
+  
+  @-webkit-keyframes fadeInLeft {
+    from {
+      -webkit-transform: translate3d(-100%, 0, 0);
+      transform: translate3d(-100%, 0, 0);
+      opacity: 0;
+    }
+  
+    to {
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+  
+  @keyframes fadeInLeft {
+    from {
+      -webkit-transform: translate3d(-100%, 0, 0);
+      transform: translate3d(-100%, 0, 0);
+      opacity: 0;
+    }
+  
+    to {
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+  
+  .fadeInLeft {
+    -webkit-animation-name: fadeInLeft;
+    animation-name: fadeInLeft;
+  }
+  
+  @-webkit-keyframes fadeInLeftBig {
+    from {
+      -webkit-transform: translate3d(-2000px, 0, 0);
+      transform: translate3d(-2000px, 0, 0);
+      opacity: 0;
+    }
+  
+    to {
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+  
+  @keyframes fadeInLeftBig {
+    from {
+      -webkit-transform: translate3d(-2000px, 0, 0);
+      transform: translate3d(-2000px, 0, 0);
+      opacity: 0;
+    }
+  
+    to {
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+  
+  .fadeInLeftBig {
+    -webkit-animation-name: fadeInLeftBig;
+    animation-name: fadeInLeftBig;
+  }
+  
+  @-webkit-keyframes fadeInRight {
+    from {
+      -webkit-transform: translate3d(100%, 0, 0);
+      transform: translate3d(100%, 0, 0);
+      opacity: 0;
+    }
+  
+    to {
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+  
+  @keyframes fadeInRight {
+    from {
+      -webkit-transform: translate3d(100%, 0, 0);
+      transform: translate3d(100%, 0, 0);
+      opacity: 0;
+    }
+  
+    to {
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+  
+  .fadeInRight {
+    -webkit-animation-name: fadeInRight;
+    animation-name: fadeInRight;
+  }
+  
+  @-webkit-keyframes fadeInRightBig {
+    from {
+      -webkit-transform: translate3d(2000px, 0, 0);
+      transform: translate3d(2000px, 0, 0);
+      opacity: 0;
+    }
+  
+    to {
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+  
+  @keyframes fadeInRightBig {
+    from {
+      -webkit-transform: translate3d(2000px, 0, 0);
+      transform: translate3d(2000px, 0, 0);
+      opacity: 0;
+    }
+  
+    to {
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+  
+  .fadeInRightBig {
+    -webkit-animation-name: fadeInRightBig;
+    animation-name: fadeInRightBig;
+  }
+  
+  @-webkit-keyframes fadeInUp {
+    from {
+      -webkit-transform: translate3d(0, 100%, 0);
+      transform: translate3d(0, 100%, 0);
+      opacity: 0;
+    }
+  
+    to {
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+  
+  @keyframes fadeInUp {
+    from {
+      -webkit-transform: translate3d(0, 100%, 0);
+      transform: translate3d(0, 100%, 0);
+      opacity: 0;
+    }
+  
+    to {
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+  
+  .fadeInUp {
+    -webkit-animation-name: fadeInUp;
+    animation-name: fadeInUp;
+  }
+  
+  @-webkit-keyframes fadeInUpBig {
+    from {
+      -webkit-transform: translate3d(0, 2000px, 0);
+      transform: translate3d(0, 2000px, 0);
+      opacity: 0;
+    }
+  
+    to {
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+  
+  @keyframes fadeInUpBig {
+    from {
+      -webkit-transform: translate3d(0, 2000px, 0);
+      transform: translate3d(0, 2000px, 0);
+      opacity: 0;
+    }
+  
+    to {
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+  
+  .fadeInUpBig {
+    -webkit-animation-name: fadeInUpBig;
+    animation-name: fadeInUpBig;
+  }
+  
+  @-webkit-keyframes fadeOut {
+    from {
+      opacity: 1;
+    }
+  
+    to {
+      opacity: 0;
+    }
+  }
+  
+  @keyframes fadeOut {
+    from {
+      opacity: 1;
+    }
+  
+    to {
+      opacity: 0;
+    }
+  }
+  
+  .fadeOut {
+    -webkit-animation-name: fadeOut;
+    animation-name: fadeOut;
+  }
+  
+  @-webkit-keyframes fadeOutDown {
+    from {
+      opacity: 1;
+    }
+  
+    to {
+      -webkit-transform: translate3d(0, 100%, 0);
+      transform: translate3d(0, 100%, 0);
+      opacity: 0;
+    }
+  }
+  
+  @keyframes fadeOutDown {
+    from {
+      opacity: 1;
+    }
+  
+    to {
+      -webkit-transform: translate3d(0, 100%, 0);
+      transform: translate3d(0, 100%, 0);
+      opacity: 0;
+    }
+  }
+  
+  .fadeOutDown {
+    -webkit-animation-name: fadeOutDown;
+    animation-name: fadeOutDown;
+  }
+  
+  @-webkit-keyframes fadeOutDownBig {
+    from {
+      opacity: 1;
+    }
+  
+    to {
+      -webkit-transform: translate3d(0, 2000px, 0);
+      transform: translate3d(0, 2000px, 0);
+      opacity: 0;
+    }
+  }
+  
+  @keyframes fadeOutDownBig {
+    from {
+      opacity: 1;
+    }
+  
+    to {
+      -webkit-transform: translate3d(0, 2000px, 0);
+      transform: translate3d(0, 2000px, 0);
+      opacity: 0;
+    }
+  }
+  
+  .fadeOutDownBig {
+    -webkit-animation-name: fadeOutDownBig;
+    animation-name: fadeOutDownBig;
+  }
+  
+  @-webkit-keyframes fadeOutLeft {
+    from {
+      opacity: 1;
+    }
+  
+    to {
+      -webkit-transform: translate3d(-100%, 0, 0);
+      transform: translate3d(-100%, 0, 0);
+      opacity: 0;
+    }
+  }
+  
+  @keyframes fadeOutLeft {
+    from {
+      opacity: 1;
+    }
+  
+    to {
+      -webkit-transform: translate3d(-100%, 0, 0);
+      transform: translate3d(-100%, 0, 0);
+      opacity: 0;
+    }
+  }
+  
+  .fadeOutLeft {
+    -webkit-animation-name: fadeOutLeft;
+    animation-name: fadeOutLeft;
+  }
+  
+  @-webkit-keyframes fadeOutLeftBig {
+    from {
+      opacity: 1;
+    }
+  
+    to {
+      -webkit-transform: translate3d(-2000px, 0, 0);
+      transform: translate3d(-2000px, 0, 0);
+      opacity: 0;
+    }
+  }
+  
+  @keyframes fadeOutLeftBig {
+    from {
+      opacity: 1;
+    }
+  
+    to {
+      -webkit-transform: translate3d(-2000px, 0, 0);
+      transform: translate3d(-2000px, 0, 0);
+      opacity: 0;
+    }
+  }
+  
+  .fadeOutLeftBig {
+    -webkit-animation-name: fadeOutLeftBig;
+    animation-name: fadeOutLeftBig;
+  }
+  
+  @-webkit-keyframes fadeOutRight {
+    from {
+      opacity: 1;
+    }
+  
+    to {
+      -webkit-transform: translate3d(100%, 0, 0);
+      transform: translate3d(100%, 0, 0);
+      opacity: 0;
+    }
+  }
+  
+  @keyframes fadeOutRight {
+    from {
+      opacity: 1;
+    }
+  
+    to {
+      -webkit-transform: translate3d(100%, 0, 0);
+      transform: translate3d(100%, 0, 0);
+      opacity: 0;
+    }
+  }
+  
+  .fadeOutRight {
+    -webkit-animation-name: fadeOutRight;
+    animation-name: fadeOutRight;
+  }
+  
+  @-webkit-keyframes fadeOutRightBig {
+    from {
+      opacity: 1;
+    }
+  
+    to {
+      -webkit-transform: translate3d(2000px, 0, 0);
+      transform: translate3d(2000px, 0, 0);
+      opacity: 0;
+    }
+  }
+  
+  @keyframes fadeOutRightBig {
+    from {
+      opacity: 1;
+    }
+  
+    to {
+      -webkit-transform: translate3d(2000px, 0, 0);
+      transform: translate3d(2000px, 0, 0);
+      opacity: 0;
+    }
+  }
+  
+  .fadeOutRightBig {
+    -webkit-animation-name: fadeOutRightBig;
+    animation-name: fadeOutRightBig;
+  }
+  
+  @-webkit-keyframes fadeOutUp {
+    from {
+      opacity: 1;
+    }
+  
+    to {
+      -webkit-transform: translate3d(0, -100%, 0);
+      transform: translate3d(0, -100%, 0);
+      opacity: 0;
+    }
+  }
+  
+  @keyframes fadeOutUp {
+    from {
+      opacity: 1;
+    }
+  
+    to {
+      -webkit-transform: translate3d(0, -100%, 0);
+      transform: translate3d(0, -100%, 0);
+      opacity: 0;
+    }
+  }
+  
+  .fadeOutUp {
+    -webkit-animation-name: fadeOutUp;
+    animation-name: fadeOutUp;
+  }
+  
+  @-webkit-keyframes fadeOutUpBig {
+    from {
+      opacity: 1;
+    }
+  
+    to {
+      -webkit-transform: translate3d(0, -2000px, 0);
+      transform: translate3d(0, -2000px, 0);
+      opacity: 0;
+    }
+  }
+  
+  @keyframes fadeOutUpBig {
+    from {
+      opacity: 1;
+    }
+  
+    to {
+      -webkit-transform: translate3d(0, -2000px, 0);
+      transform: translate3d(0, -2000px, 0);
+      opacity: 0;
+    }
+  }
+  
+  .fadeOutUpBig {
+    -webkit-animation-name: fadeOutUpBig;
+    animation-name: fadeOutUpBig;
+  }
+  
+
+ /*
+ * Animate.css classes
+ */
+ 
+.animated {
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+  }
+  
+  .animated.infinite {
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+  }
+  
+  .animated.delay-1s {
+    -webkit-animation-delay: 1s;
+    animation-delay: 1s;
+  }
+  
+  .animated.delay-2s {
+    -webkit-animation-delay: 2s;
+    animation-delay: 2s;
+  }
+  
+  .animated.delay-3s {
+    -webkit-animation-delay: 3s;
+    animation-delay: 3s;
+  }
+  
+  .animated.delay-4s {
+    -webkit-animation-delay: 4s;
+    animation-delay: 4s;
+  }
+  
+  .animated.delay-5s {
+    -webkit-animation-delay: 5s;
+    animation-delay: 5s;
+  }
+  
+  .animated.fast {
+    -webkit-animation-duration: 800ms;
+    animation-duration: 800ms;
+  }
+  
+  .animated.faster {
+    -webkit-animation-duration: 500ms;
+    animation-duration: 500ms;
+  }
+  
+  .animated.slow {
+    -webkit-animation-duration: 2s;
+    animation-duration: 2s;
+  }
+  
+  .animated.slower {
+    -webkit-animation-duration: 3s;
+    animation-duration: 3s;
+  }
+  
+  @media (print), (prefers-reduced-motion: reduce) {
+    .animated {
+      -webkit-transition-duration: 1ms !important;
+      transition-duration: 1ms !important;
+      -webkit-animation-duration: 1ms !important;
+      animation-duration: 1ms !important;
+      -webkit-animation-iteration-count: 1 !important;
+      animation-iteration-count: 1 !important;
+    }
+  }
+