Testing hugo

public/themes/novela/assets/scss/progress.scss

@@ -0,0 +1,111 @@
+/*************************ASIDE*************************/
+.aside-container{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    margin: 0 auto;
+    max-width: 1140px;
+    z-index: 0;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 30%;
+    -webkit-animation-name: progress-fade-in;
+            animation-name: progress-fade-in;
+    -webkit-animation-duration: 0.5s;
+            animation-duration: 0.5s;
+  
+    /*DESKTOP MEDIUM*/
+    @media screen and (max-width: $desktop_medium){
+        display: none;
+    }
+}
+
+@-webkit-keyframes progress-fade-in {
+    from {opacity: 0;}
+    to {opacity: 1;}
+}
+
+@keyframes progress-fade-in {
+    from {opacity: 0;}
+    to {opacity: 1;}
+}
+
+@-webkit-keyframes progress-fade-out {
+    from {opacity: 1;}
+    to {opacity: 0;}
+}
+
+@keyframes progress-fade-out {
+    from {opacity: 1;}
+    to {opacity: 0;}
+}
+
+.aside-align{
+    position: fixed;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-transform: translateY(0px);
+        -ms-transform: translateY(0px);
+            transform: translateY(0px);
+    top: 0;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    height: 100vh;
+    z-index: 3;
+  
+    opacity: 1;
+    visibility: visible;
+    -webkit-transition: opacity 0.4s linear, visibility 0.4s linear;
+    -o-transition: opacity 0.4s linear, visibility 0.4s linear;
+    transition: opacity 0.4s linear, visibility 0.4s linear;
+}
+
+.overlap-container{
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    pointer-events: none;
+    opacity: 0;
+    -webkit-transition: opacity 0.25s;
+    -o-transition: opacity 0.25s;
+    transition: opacity 0.25s;
+}
+
+/*************************PROGRESS*************************/
+.progress-container{
+    position: relative;
+    outline: none;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+}
+
+.track-line{
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    height: calc(88vh - 40px);
+    max-height: 425px;
+    width: 1px;
+    background-color: var(--track);
+    opacity: 0.6;
+    overflow: hidden;
+}
+
+.progress-line{
+    position: absolute;
+    height: 100%;
+    top: -100%;
+    width: 1px;
+    background-color: var(--progress);
+    left: 0;
+}