Merge pull request #2543 from exadel-inc/feat/site-presentation-styles

refactor(site): rework icons to unify animation, header styles cleanup

site/src/common/typography.large.less

@@ -0,0 +1,52 @@
+@import (reference) './variables.less';
+@import (reference) './typography.less';
+
+.typo-large {
+  // Base font size
+  font-size: 1.35rem;
+
+  h1.large,
+  .h1.large {
+    font-size: 4rem;
+    @media @sm-xl {
+      font-size: 5rem;
+    }
+  }
+
+  h1,
+  .h1,
+  h2.large,
+  .h2.large {
+    font-size: 3.5rem;
+    @media @sm-xl {
+      font-size: 4rem;
+    }
+  }
+
+  h2,
+  .h2,
+  h3.large,
+  .h3.large {
+    font-size: 2.5rem;
+    margin-bottom: 2rem;
+  }
+
+  h3,
+  .h3,
+  h4.large,
+  .h4.large {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+  }
+
+  h4,
+  .h4 {
+    font-size: 1.75rem;
+    margin-bottom: 0.75rem;
+  }
+
+  h5,
+  .h5 {
+    font-size: 1.5rem;
+  }
+}

site/src/common/typography.less

@@ -99,22 +99,3 @@ a {
 time {
   opacity: 0.75;
 }
-
-.landing-layout {
-  font-size: 1.175rem;
-  h1 {
-    font-size: 3.5rem;
-    @media @sm-xl {
-      font-size: 4rem;
-    }
-  }
-  h2,
-  .h2 {
-    font-size: 2.5rem;
-    margin-bottom: 2rem;
-  }
-  h3,
-  .h3 {
-    font-size: 2rem;
-  }
-}

site/src/localdev.less

@@ -2,6 +2,7 @@
 
 @import './common/reboot.less';
 @import './common/typography.less';
+@import './common/typography.large.less';
 @import './common/colors.less';
 @import './common/markdown.less';
 
@@ -32,6 +33,7 @@
 @import './search/search.less';
 
 @import './navigation/navigation.less';
+@import './logo/logo.animation.less';
 @import './landing/landing.less';
 
 @import './banner/banner.less';

site/src/navigation/header/logo.less → site/src/logo/logo.animation.less

@@ -1,58 +1,66 @@
 .logo-animated {
-  @duration: 5s;
+  @logo-animation: 5s ease-in-out;
 
   .shield {
-    animation: logo-enlarge-shield @duration ease-in-out infinite;
+    animation: logo-enlarge-shield @logo-animation infinite;
     transform-origin: center;
   }
   .wrenches {
-    animation: logo-rotate-180 @duration ease-in-out infinite;
+    animation: logo-rotate-180 @logo-animation infinite;
     transform-origin: center;
     .w-l {
-      animation: logo-move-wrench-l @duration ease-in-out infinite;
+      animation: logo-move-wrench-l @logo-animation infinite;
     }
     .w-r {
-      animation: logo-move-wrench-r @duration ease-in-out infinite;
+      animation: logo-move-wrench-r @logo-animation infinite;
+    }
+  }
+  &.animation-delay {
+    .shield,
+    .wrenches,
+    .wrenches .w-l,
+    .wrenches .w-r {
+      animation-delay: 5s;
     }
   }
 }
 
 @keyframes logo-enlarge-shield {
-  93%,
-  97% {
+  23%,
+  27% {
     transform: scale(1);
   }
-  95% {
+  25% {
     transform: scale(1.15);
   }
 }
 @keyframes logo-rotate-180 {
   0%,
-  80% {
+  10%,
+  20.00005% {
     transform: rotate(0deg);
   }
-  90%,
-  100% {
+  20% {
     transform: rotate(180deg);
   }
 }
 @keyframes logo-move-wrench-l {
-  70%,
-  100% {
+  10%,
+  30% {
     transform: translate(0px, 0px);
   }
-  80%,
-  90% {
+  10%,
+  20% {
     transform: translate(15px, -2px);
   }
 }
 @keyframes logo-move-wrench-r {
-  70%,
-  100% {
+  0%,
+  30% {
     transform: translate(0px, 0px);
   }
-  80%,
-  90% {
+  10%,
+  20% {
     transform: translate(-15px, 2px);
   }
 }

site/src/navigation/footer/footer.less

@@ -35,19 +35,19 @@
     }
   }
 
-  &-title {
+  & &-title {
     display: none;
     color: @primary-blue;
     font-weight: 500;
-    font-size: 1rem;
+    font-size: 1.2rem;
     margin-left: 15px;
 
     @media @md-xl {
       display: block;
     }
   }
 
-  &-link {
+  & &-link {
     display: inline-block;
     color: white;
     padding: 10px 0;
@@ -100,7 +100,7 @@
     }
   }
 
-  &-accordion-trigger {
+  & &-accordion-trigger {
     display: block;
     position: relative;
     color: white;
@@ -183,10 +183,10 @@
     }
   }
 
-  &-common-links {
+  & &-common-links {
     font-size: 0.9rem;
   }
-  &-common-links &-link {
+  & &-common-links &-link {
     padding: 0;
     font-size: inherit;
     > svg {
@@ -195,7 +195,7 @@
     }
   }
 
-  &-copyright &-link {
+  & &-copyright &-link {
     font-size: inherit;
     padding: 0;
     outline-offset: 0;

site/src/navigation/header/header.less

@@ -1,6 +1,7 @@
 @import (reference) '../../common/variables.less';
 
 .header {
+  position: relative;
   z-index: 10;
 
   // force to move to the separate layer
@@ -9,10 +10,9 @@
   color: @landing-fg-color;
   background-color: @landing-bg-color;
 
-  height: @header-height-mobile;
-
+  height: var(--_header-height, @header-height-mobile);
   @media @md-xl {
-    height: @header-height-desktop;
+    height: var(--_header-height, @header-height-desktop);
   }
 
   &-container {
@@ -94,18 +94,16 @@
   }
 
   &-utility {
+    flex: 1 0 0;
+    margin: 0 0 0 auto;
+    justify-self: flex-end;
+
     display: flex;
     align-items: center;
     justify-content: flex-end;
-
-    flex: 1 0 auto;
-    margin-left: auto;
-    justify-self: flex-end;
   }
 
   &-logo {
-    flex: 1 0 auto;
-
     display: flex;
     align-items: center;
     white-space: nowrap;
@@ -120,8 +118,21 @@
       margin: -5px;
       width: 48px;
       height: 48px;
+    }
+  }
 
-      @media @md-xl {
+  &-left {
+    flex: 1 0 0;
+  }
+
+  &-central {
+    flex: 0 0 auto;
+    margin-inline: auto;
+  }
+
+  @media @md-xl {
+    &-logo-large {
+      svg {
         width: 66px;
         height: 66px;
       }
@@ -138,9 +149,6 @@
 
   &-hamburger {
     display: block;
-    @media @md-xl {
-      display: none;
-    }
 
     position: relative;
     width: 30px;
@@ -201,6 +209,6 @@
   &-long-name {
     font-size: 1.125rem;
     font-weight: 500;
-    margin-left: 11px;
+    margin-left: 1rem;
   }
 }

site/src/navigation/navigation.less

@@ -1,6 +1,5 @@
 @import './header/header.less';
 @import './header/header-search.less';
-@import './header/logo.less';
 
 @import './sidebar/sidebar.less';
 @import './related/related-links.less';