home improvments, bedo circle

sass/base.scss

@@ -133,6 +133,27 @@ $v-unit-2: 8rem;
   @for $i from 1 through $num-letters {
     &.char#{$i} {
       @include transform(rotate($angle-offset + $angle-per-char * $i));
+
+      -webkit-animation: spin#{$i} 4s linear infinite;
+      -moz-animation: spin#{$i} 4s linear infinite;
+      animation: spin#{$i} 4s linear infinite;
+
+      @-moz-keyframes spin#{$i} {
+        100% {
+          -moz-transform: rotate((360deg + $angle-per-char * $i));
+        }
+      }
+      @-webkit-keyframes spin#{$i} {
+        100% {
+          -webkit-transform: rotate((360deg + $angle-per-char * $i));
+        }
+      }
+      @keyframes spin#{$i} {
+        100% {
+          -webkit-transform: rotate((360deg + $angle-per-char * $i));
+          transform: rotate((360deg + $angle-per-char * $i));
+        }
+      }
     }
   }
 }
@@ -331,7 +352,7 @@ $v-unit-2: 8rem;
           // color: #000;
           // fill: currentColor;
           filter: invert(100%); //black
-          @include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+          @include transform(rotate(180deg)) // transform: rotate(180deg);
         }
       }
     }
@@ -504,6 +525,9 @@ $v-unit-2: 8rem;
       position: fixed;
       right: calc(#{$h-unit-2}* 2);
       top: calc(#{$v-unit-1}/ 2);
+      @media #{$smalldesktop} {
+        top: calc(#{$v-unit-1}* 0.4);
+      }
       z-index: 1000;
       @media #{$smalldesktop} {
         display: block;
@@ -517,17 +541,47 @@ $v-unit-2: 8rem;
           a {
             span {
               height: calc(#{$v-unit-1}/ 2);
+              // line-height: calc(#{$v-unit-1}/ 2);
+              width: 1rem;
+              @media #{$smalldesktop} {
+                height: 3rem;
+                // line-height: 5rem;
+              }
+              margin: auto;
+              display: block;
+              text-align: center;
+
               position: absolute;
-              // width: 20px;
-              left: 0;
-              top: 0;
-              transform-origin: bottom center;
-              @include bedocircle();
+              // left: 50%;
+              // top: 0;
+              // transform-origin: bottom center;
+              transform-origin: 50% 100%;
+              @include bedocircle(); //this is the font
               @include rotated-text(17, 360deg, 0deg);
+
+              &.pause {
+                animation-play-state: paused;
+              }
             }
           }
         }
       }
+      .sub-wrapper{
+        position: fixed;
+        right: $h-unit-2;
+        left: $h-unit-2;
+        top: 0;
+        background-color: #000;
+        height: 50vh;
+        a{
+          
+        }
+        span{
+
+        }
+        
+      }
+
     }
   } //header end
 
@@ -829,14 +883,7 @@ $v-unit-2: 8rem;
                   height: ($h-unit-1 + $h-unit-2);
                   position: absolute;
                   right: 0;
-                  top:  calc(-50% + 0.5px);
-                  // &:first-child {
-                  //   // top: calc(-100% + 2px);
-                  //   top: -100%;
-                  //   // top: unset;
-                  //   @include transform(scale(1, -1));
-                  //   // @include transform(rotate(-90deg));
-                  // }
+                  top: calc(-50% + 0.5px);
                 }
               }
             } //metadata end