home improvments, bedo circle

2019-06-23 03:22:06 +02:00
parent 8b99976607
commit bbd581903b
7 changed files with 466 additions and 55 deletions
--- a/KÉZIKÖNYV.md
+++ b/KÉZIKÖNYV.md
@@ -4,33 +4,34 @@

 ### function.php

-    esemény cat-id-t átírni!!
+esemény cat-id-t átírni!!

 ### wp beállítások

-	settings>reading>Blog pages show at most 6
+settings>reading>Blog pages show at most 6

 ## Paraméterek

 ### Bejegyzések

-#### dis-alcim
+dis-alcim:

-Csak az első két nagy cikknél jelenik meg
+- Csak az első két nagy cikknél jelenik meg

-#### dis-bevezeto
+dis-bevezeto:

-Csak az első két nagy cikknél jelenik meg
+- Csak az első két nagy cikknél jelenik meg

 ### Események

-#### dis-esemeny-datum
+dis-esemeny-datum

-#### dis-esemeny-link
+dis-esemeny-link

 ## Developement verzió telepítése

 Szükséges: python2, gulp global, max node 11
+
 Mountnál exec paramétert nem kifelejteni!!!

 ```
--- a/css/base.css
+++ b/css/base.css
@@ -306,6 +306,9 @@ object {
      right: calc(10rem* 2);
      top: calc(4rem/ 2);
      z-index: 1000; }
+      @media (min-width: 769px) {
+        .wrapper .header #tag-nav {
+          top: calc(4rem* 0.4); } }
      @media (min-width: 769px) {
        .wrapper .header #tag-nav {
          display: block; } }
@@ -316,120 +319,416 @@ object {
        color: transparent;
        -webkit-text-stroke: #000 1px;
        text-transform: uppercase; }
+        .wrapper .header #tag-nav ul.current {
+          -webkit-text-stroke: #fff 1px !important; }
+        @media (min-width: 769px) {
+          .wrapper .header #tag-nav ul {
+            font-size: 1.2rem; } }
        .wrapper .header #tag-nav ul li {
          display: inline; }
          .wrapper .header #tag-nav ul li a span {
            height: calc(4rem/ 2);
+            width: 1rem;
+            margin: auto;
+            display: block;
+            text-align: center;
            position: absolute;
-            left: 0;
-            top: 0;
-            transform-origin: bottom center;
+            transform-origin: 50% 100%;
            font: 900 1rem "Westeinde Caption";
            color: transparent;
            -webkit-text-stroke: #000 1px;
            text-transform: uppercase; }
+            @media (min-width: 769px) {
+              .wrapper .header #tag-nav ul li a span {
+                height: 3rem; } }
+            .wrapper .header #tag-nav ul li a span.current {
+              -webkit-text-stroke: #fff 1px !important; }
+            @media (min-width: 769px) {
+              .wrapper .header #tag-nav ul li a span {
+                font-size: 1.2rem; } }
            .wrapper .header #tag-nav ul li a span.char1 {
              -moz-transform: rotate(21.17647deg);
              -o-transform: rotate(21.17647deg);
              -ms-transform: rotate(21.17647deg);
              -webkit-transform: rotate(21.17647deg);
-              transform: rotate(21.17647deg); }
+              transform: rotate(21.17647deg);
+              -webkit-animation: spin1 4s linear infinite;
+              -moz-animation: spin1 4s linear infinite;
+              animation: spin1 4s linear infinite; }
+
+@-moz-keyframes spin1 {
+  100% {
+    -moz-transform: rotate(381.17647deg); } }
+
+@-webkit-keyframes spin1 {
+  100% {
+    -webkit-transform: rotate(381.17647deg); } }
+
+@keyframes spin1 {
+  100% {
+    -webkit-transform: rotate(381.17647deg);
+    transform: rotate(381.17647deg); } }
            .wrapper .header #tag-nav ul li a span.char2 {
              -moz-transform: rotate(42.35294deg);
              -o-transform: rotate(42.35294deg);
              -ms-transform: rotate(42.35294deg);
              -webkit-transform: rotate(42.35294deg);
-              transform: rotate(42.35294deg); }
+              transform: rotate(42.35294deg);
+              -webkit-animation: spin2 4s linear infinite;
+              -moz-animation: spin2 4s linear infinite;
+              animation: spin2 4s linear infinite; }
+
+@-moz-keyframes spin2 {
+  100% {
+    -moz-transform: rotate(402.35294deg); } }
+
+@-webkit-keyframes spin2 {
+  100% {
+    -webkit-transform: rotate(402.35294deg); } }
+
+@keyframes spin2 {
+  100% {
+    -webkit-transform: rotate(402.35294deg);
+    transform: rotate(402.35294deg); } }
            .wrapper .header #tag-nav ul li a span.char3 {
              -moz-transform: rotate(63.52941deg);
              -o-transform: rotate(63.52941deg);
              -ms-transform: rotate(63.52941deg);
              -webkit-transform: rotate(63.52941deg);
-              transform: rotate(63.52941deg); }
+              transform: rotate(63.52941deg);
+              -webkit-animation: spin3 4s linear infinite;
+              -moz-animation: spin3 4s linear infinite;
+              animation: spin3 4s linear infinite; }
+
+@-moz-keyframes spin3 {
+  100% {
+    -moz-transform: rotate(423.52941deg); } }
+
+@-webkit-keyframes spin3 {
+  100% {
+    -webkit-transform: rotate(423.52941deg); } }
+
+@keyframes spin3 {
+  100% {
+    -webkit-transform: rotate(423.52941deg);
+    transform: rotate(423.52941deg); } }
            .wrapper .header #tag-nav ul li a span.char4 {
              -moz-transform: rotate(84.70588deg);
              -o-transform: rotate(84.70588deg);
              -ms-transform: rotate(84.70588deg);
              -webkit-transform: rotate(84.70588deg);
-              transform: rotate(84.70588deg); }
+              transform: rotate(84.70588deg);
+              -webkit-animation: spin4 4s linear infinite;
+              -moz-animation: spin4 4s linear infinite;
+              animation: spin4 4s linear infinite; }
+
+@-moz-keyframes spin4 {
+  100% {
+    -moz-transform: rotate(444.70588deg); } }
+
+@-webkit-keyframes spin4 {
+  100% {
+    -webkit-transform: rotate(444.70588deg); } }
+
+@keyframes spin4 {
+  100% {
+    -webkit-transform: rotate(444.70588deg);
+    transform: rotate(444.70588deg); } }
            .wrapper .header #tag-nav ul li a span.char5 {
              -moz-transform: rotate(105.88235deg);
              -o-transform: rotate(105.88235deg);
              -ms-transform: rotate(105.88235deg);
              -webkit-transform: rotate(105.88235deg);
-              transform: rotate(105.88235deg); }
+              transform: rotate(105.88235deg);
+              -webkit-animation: spin5 4s linear infinite;
+              -moz-animation: spin5 4s linear infinite;
+              animation: spin5 4s linear infinite; }
+
+@-moz-keyframes spin5 {
+  100% {
+    -moz-transform: rotate(465.88235deg); } }
+
+@-webkit-keyframes spin5 {
+  100% {
+    -webkit-transform: rotate(465.88235deg); } }
+
+@keyframes spin5 {
+  100% {
+    -webkit-transform: rotate(465.88235deg);
+    transform: rotate(465.88235deg); } }
            .wrapper .header #tag-nav ul li a span.char6 {
              -moz-transform: rotate(127.05882deg);
              -o-transform: rotate(127.05882deg);
              -ms-transform: rotate(127.05882deg);
              -webkit-transform: rotate(127.05882deg);
-              transform: rotate(127.05882deg); }
+              transform: rotate(127.05882deg);
+              -webkit-animation: spin6 4s linear infinite;
+              -moz-animation: spin6 4s linear infinite;
+              animation: spin6 4s linear infinite; }
+
+@-moz-keyframes spin6 {
+  100% {
+    -moz-transform: rotate(487.05882deg); } }
+
+@-webkit-keyframes spin6 {
+  100% {
+    -webkit-transform: rotate(487.05882deg); } }
+
+@keyframes spin6 {
+  100% {
+    -webkit-transform: rotate(487.05882deg);
+    transform: rotate(487.05882deg); } }
            .wrapper .header #tag-nav ul li a span.char7 {
              -moz-transform: rotate(148.23529deg);
              -o-transform: rotate(148.23529deg);
              -ms-transform: rotate(148.23529deg);
              -webkit-transform: rotate(148.23529deg);
-              transform: rotate(148.23529deg); }
+              transform: rotate(148.23529deg);
+              -webkit-animation: spin7 4s linear infinite;
+              -moz-animation: spin7 4s linear infinite;
+              animation: spin7 4s linear infinite; }
+
+@-moz-keyframes spin7 {
+  100% {
+    -moz-transform: rotate(508.23529deg); } }
+
+@-webkit-keyframes spin7 {
+  100% {
+    -webkit-transform: rotate(508.23529deg); } }
+
+@keyframes spin7 {
+  100% {
+    -webkit-transform: rotate(508.23529deg);
+    transform: rotate(508.23529deg); } }
            .wrapper .header #tag-nav ul li a span.char8 {
              -moz-transform: rotate(169.41176deg);
              -o-transform: rotate(169.41176deg);
              -ms-transform: rotate(169.41176deg);
              -webkit-transform: rotate(169.41176deg);
-              transform: rotate(169.41176deg); }
+              transform: rotate(169.41176deg);
+              -webkit-animation: spin8 4s linear infinite;
+              -moz-animation: spin8 4s linear infinite;
+              animation: spin8 4s linear infinite; }
+
+@-moz-keyframes spin8 {
+  100% {
+    -moz-transform: rotate(529.41176deg); } }
+
+@-webkit-keyframes spin8 {
+  100% {
+    -webkit-transform: rotate(529.41176deg); } }
+
+@keyframes spin8 {
+  100% {
+    -webkit-transform: rotate(529.41176deg);
+    transform: rotate(529.41176deg); } }
            .wrapper .header #tag-nav ul li a span.char9 {
              -moz-transform: rotate(190.58824deg);
              -o-transform: rotate(190.58824deg);
              -ms-transform: rotate(190.58824deg);
              -webkit-transform: rotate(190.58824deg);
-              transform: rotate(190.58824deg); }
+              transform: rotate(190.58824deg);
+              -webkit-animation: spin9 4s linear infinite;
+              -moz-animation: spin9 4s linear infinite;
+              animation: spin9 4s linear infinite; }
+
+@-moz-keyframes spin9 {
+  100% {
+    -moz-transform: rotate(550.58824deg); } }
+
+@-webkit-keyframes spin9 {
+  100% {
+    -webkit-transform: rotate(550.58824deg); } }
+
+@keyframes spin9 {
+  100% {
+    -webkit-transform: rotate(550.58824deg);
+    transform: rotate(550.58824deg); } }
            .wrapper .header #tag-nav ul li a span.char10 {
              -moz-transform: rotate(211.76471deg);
              -o-transform: rotate(211.76471deg);
              -ms-transform: rotate(211.76471deg);
              -webkit-transform: rotate(211.76471deg);
-              transform: rotate(211.76471deg); }
+              transform: rotate(211.76471deg);
+              -webkit-animation: spin10 4s linear infinite;
+              -moz-animation: spin10 4s linear infinite;
+              animation: spin10 4s linear infinite; }
+
+@-moz-keyframes spin10 {
+  100% {
+    -moz-transform: rotate(571.76471deg); } }
+
+@-webkit-keyframes spin10 {
+  100% {
+    -webkit-transform: rotate(571.76471deg); } }
+
+@keyframes spin10 {
+  100% {
+    -webkit-transform: rotate(571.76471deg);
+    transform: rotate(571.76471deg); } }
            .wrapper .header #tag-nav ul li a span.char11 {
              -moz-transform: rotate(232.94118deg);
              -o-transform: rotate(232.94118deg);
              -ms-transform: rotate(232.94118deg);
              -webkit-transform: rotate(232.94118deg);
-              transform: rotate(232.94118deg); }
+              transform: rotate(232.94118deg);
+              -webkit-animation: spin11 4s linear infinite;
+              -moz-animation: spin11 4s linear infinite;
+              animation: spin11 4s linear infinite; }
+
+@-moz-keyframes spin11 {
+  100% {
+    -moz-transform: rotate(592.94118deg); } }
+
+@-webkit-keyframes spin11 {
+  100% {
+    -webkit-transform: rotate(592.94118deg); } }
+
+@keyframes spin11 {
+  100% {
+    -webkit-transform: rotate(592.94118deg);
+    transform: rotate(592.94118deg); } }
            .wrapper .header #tag-nav ul li a span.char12 {
              -moz-transform: rotate(254.11765deg);
              -o-transform: rotate(254.11765deg);
              -ms-transform: rotate(254.11765deg);
              -webkit-transform: rotate(254.11765deg);
-              transform: rotate(254.11765deg); }
+              transform: rotate(254.11765deg);
+              -webkit-animation: spin12 4s linear infinite;
+              -moz-animation: spin12 4s linear infinite;
+              animation: spin12 4s linear infinite; }
+
+@-moz-keyframes spin12 {
+  100% {
+    -moz-transform: rotate(614.11765deg); } }
+
+@-webkit-keyframes spin12 {
+  100% {
+    -webkit-transform: rotate(614.11765deg); } }
+
+@keyframes spin12 {
+  100% {
+    -webkit-transform: rotate(614.11765deg);
+    transform: rotate(614.11765deg); } }
            .wrapper .header #tag-nav ul li a span.char13 {
              -moz-transform: rotate(275.29412deg);
              -o-transform: rotate(275.29412deg);
              -ms-transform: rotate(275.29412deg);
              -webkit-transform: rotate(275.29412deg);
-              transform: rotate(275.29412deg); }
+              transform: rotate(275.29412deg);
+              -webkit-animation: spin13 4s linear infinite;
+              -moz-animation: spin13 4s linear infinite;
+              animation: spin13 4s linear infinite; }
+
+@-moz-keyframes spin13 {
+  100% {
+    -moz-transform: rotate(635.29412deg); } }
+
+@-webkit-keyframes spin13 {
+  100% {
+    -webkit-transform: rotate(635.29412deg); } }
+
+@keyframes spin13 {
+  100% {
+    -webkit-transform: rotate(635.29412deg);
+    transform: rotate(635.29412deg); } }
            .wrapper .header #tag-nav ul li a span.char14 {
              -moz-transform: rotate(296.47059deg);
              -o-transform: rotate(296.47059deg);
              -ms-transform: rotate(296.47059deg);
              -webkit-transform: rotate(296.47059deg);
-              transform: rotate(296.47059deg); }
+              transform: rotate(296.47059deg);
+              -webkit-animation: spin14 4s linear infinite;
+              -moz-animation: spin14 4s linear infinite;
+              animation: spin14 4s linear infinite; }
+
+@-moz-keyframes spin14 {
+  100% {
+    -moz-transform: rotate(656.47059deg); } }
+
+@-webkit-keyframes spin14 {
+  100% {
+    -webkit-transform: rotate(656.47059deg); } }
+
+@keyframes spin14 {
+  100% {
+    -webkit-transform: rotate(656.47059deg);
+    transform: rotate(656.47059deg); } }
            .wrapper .header #tag-nav ul li a span.char15 {
              -moz-transform: rotate(317.64706deg);
              -o-transform: rotate(317.64706deg);
              -ms-transform: rotate(317.64706deg);
              -webkit-transform: rotate(317.64706deg);
-              transform: rotate(317.64706deg); }
+              transform: rotate(317.64706deg);
+              -webkit-animation: spin15 4s linear infinite;
+              -moz-animation: spin15 4s linear infinite;
+              animation: spin15 4s linear infinite; }
+
+@-moz-keyframes spin15 {
+  100% {
+    -moz-transform: rotate(677.64706deg); } }
+
+@-webkit-keyframes spin15 {
+  100% {
+    -webkit-transform: rotate(677.64706deg); } }
+
+@keyframes spin15 {
+  100% {
+    -webkit-transform: rotate(677.64706deg);
+    transform: rotate(677.64706deg); } }
            .wrapper .header #tag-nav ul li a span.char16 {
              -moz-transform: rotate(338.82353deg);
              -o-transform: rotate(338.82353deg);
              -ms-transform: rotate(338.82353deg);
              -webkit-transform: rotate(338.82353deg);
-              transform: rotate(338.82353deg); }
+              transform: rotate(338.82353deg);
+              -webkit-animation: spin16 4s linear infinite;
+              -moz-animation: spin16 4s linear infinite;
+              animation: spin16 4s linear infinite; }
+
+@-moz-keyframes spin16 {
+  100% {
+    -moz-transform: rotate(698.82353deg); } }
+
+@-webkit-keyframes spin16 {
+  100% {
+    -webkit-transform: rotate(698.82353deg); } }
+
+@keyframes spin16 {
+  100% {
+    -webkit-transform: rotate(698.82353deg);
+    transform: rotate(698.82353deg); } }
            .wrapper .header #tag-nav ul li a span.char17 {
              -moz-transform: rotate(360deg);
              -o-transform: rotate(360deg);
              -ms-transform: rotate(360deg);
              -webkit-transform: rotate(360deg);
-              transform: rotate(360deg); }
+              transform: rotate(360deg);
+              -webkit-animation: spin17 4s linear infinite;
+              -moz-animation: spin17 4s linear infinite;
+              animation: spin17 4s linear infinite; }
+
+@-moz-keyframes spin17 {
+  100% {
+    -moz-transform: rotate(720deg); } }
+
+@-webkit-keyframes spin17 {
+  100% {
+    -webkit-transform: rotate(720deg); } }
+
+@keyframes spin17 {
+  100% {
+    -webkit-transform: rotate(720deg);
+    transform: rotate(720deg); } }
+            .wrapper .header #tag-nav ul li a span.pause {
+              animation-play-state: paused; }
+      .wrapper .header #tag-nav .sub-wrapper {
+        position: fixed;
+        right: 10rem;
+        left: 10rem;
+        top: 0;
+        background-color: #000;
+        height: 50vh; }
  .wrapper main {
    z-index: 1; }
    .wrapper main section {
--- a/functions.php
+++ b/functions.php
@@ -86,6 +86,38 @@ function dis2019_nav()
    );
 }

+//walker for tag menu: bedo circle hover
+class Menu_With_Description extends Walker_Nav_Menu {
+    function start_el(&$output, $item, $depth, $args) {
+        global $wp_query;
+        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
+         
+        $class_names = $value = '';
+ 
+        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
+ 
+        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
+        $class_names = ' class="' . esc_attr( $class_names ) . '"';
+ 
+        $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
+ 
+        $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
+        $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
+        $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
+        $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
+ 
+        $item_output = $args->before;
+        $item_output .= '<a'. $attributes .'>';
+        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
+        $item_output .= '</a>';
+        $item_output .= '<span class="sub menu-item-sub-' . $item->ID . '">' . $item->description . '</span>';
+        $item_output .= $args->after;
+ 
+        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
+    }
+}
+
+
 // Load dis-2019 scripts (header.php)
 function dis2019_header_scripts()
 {
--- a/header.php
+++ b/header.php
@@ -128,10 +128,11 @@

 			<div id="tag-nav">
 				<nav role="navigation" class="tag-nav">
-
-					<?php wp_nav_menu( array( 'theme_location' => 'tag-menu' ) ); ?>
-
+				<?php $walker = new Menu_With_Description; ?>
+					<?php wp_nav_menu( array( 'theme_location' => 'tag-menu', 'walker' => $walker ) ); ?>
 				</nav>
+				<div class="sub-wrapper">
+				</div>
 			</div>

 			<!-- ----------------------- to top arrow on mobile ------------------------ -->
--- a/js/scripts.js
+++ b/js/scripts.js
@@ -479,7 +479,7 @@
 			cMetadata.children(".categories, .postedon").addClass("transparent")

 			//animate border
-			cMetadata.stop().animate({ height: "25rem" },400, _ => {
+			cMetadata.stop().animate({ height: "25rem" }, 400, _ => {
 				//hide metadata
 				cMetadata.children(".categories, .postedon").hide().removeClass("transparent")
 				cMetadata.children(".alcim, .bevezeto").show().removeClass("transparent")
@@ -503,7 +503,7 @@
 			cMetadata.children(".alcim, .bevezeto").addClass("transparent")

 			//animate height change
-			cMetadata.stop().animate({ height: "10rem" },400, _ => {
+			cMetadata.stop().animate({ height: "10rem" }, 400, _ => {
 				//hide and show metadata
 				cMetadata.children(".alcim, .bevezeto").hide().removeClass("transparent")
 				cMetadata.children(".categories, .postedon").removeClass("transparent").show()
@@ -568,8 +568,22 @@
 		/*                                CIRCULAR TEXT                               */
 		/* -------------------------------------------------------------------------- */

+		const bedoListItems = ".wrapper .header #tag-nav ul li"
+		const bedoWords = bedoListItems + " a"
+		const bedoLetters = bedoWords + " span"
+
+
+		//move subs to wrapper
+		$(bedoListItems).each(function () {
+			let itemId = $(this).attr("id")
+			$(".sub-wrapper").append('<div id="' + itemId + '"></div>')
+			$(this).children("a").clone().appendTo(".sub-wrapper #"+ itemId)
+			$(this).children("span").appendTo(".sub-wrapper #"+ itemId)
+		})
+
+		//wrap each letter to spans
 		var charnum = 0
-		$(".wrapper .header #tag-nav ul li a").each(function () {
+		$(bedoWords).each(function () {
 			let chars = $(this).html().length + 1
 			$(this).lettering()
 			$(this).children("span").each(function () {
@@ -581,6 +595,17 @@
 			charnum += chars
 		})

+		/* ---------------------------------- hover --------------------------------- */
+
+		$(bedoWords).hover(function () {
+			$(bedoLetters).addClass("pause")
+			$(this).children("span").addClass("current")
+		}, function () {
+			$(bedoLetters).removeClass("pause")
+			$(this).children("span").removeClass("current")
+		})
+
+

 	});

--- a/sass/_font-mixins.scss
+++ b/sass/_font-mixins.scss
@@ -83,6 +83,12 @@
  color: transparent;
  -webkit-text-stroke: #000 1px;
  text-transform: uppercase;
+  &.current{
+    -webkit-text-stroke: #fff 1px !important;
+  }
+  @media #{$smalldesktop} {
+    font-size: 1.2rem;
+  }
 }

@mixin single-title {
--- a/sass/base.scss
+++ b/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,18 +541,48 @@ $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

  /* -------------------------------------------------------------------------- */
@@ -830,13 +884,6 @@ $v-unit-2: 8rem;
                  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));
-                  // }
                }
              }
            } //metadata end