Repository: exadel-inc/esl
Pull request #623 (2021-11-09 02:06:03)

Tech/clenup redesign
# PR Details

- marquee reworked
- structure cleanup
- partial color fixes
- typography updated
- fix sidebar paddings after header update


Patch:
diff --git a/pages/src/common/badge.less b/pages/src/common/badge.less
index 7656c5a24..92535a2da 100644
--- a/pages/src/common/badge.less
+++ b/pages/src/common/badge.less
@@ -1,3 +1,5 @@
+@import (reference) "./variables.less";
+
 .badge {
   display: inline-block;
   padding: 0.25em 0.4em;
diff --git a/pages/src/common/breakpoints.less b/pages/src/common/breakpoints.less
new file mode 100644
index 000000000..f6cc90223
--- /dev/null
+++ b/pages/src/common/breakpoints.less
@@ -0,0 +1,27 @@
+/* Breakpoints definition */
+@xs-min: 1px;
+@xs-max: 599px;
+@sm-min: @xs-max + 1;
+@sm-max: 991px;
+@md-min: @sm-max + 1;
+@md-max: 1199px;
+@lg-min: @md-max + 1;
+@lg-max: 1599px;
+@xl-min: @lg-max + 1;
+@xl-max: 999999px;
+
+/* Media queries */
+@xs: ~'(min-width: @{xs-min}) and (max-width: @{xs-max})';
+@xs-sm: ~'(min-width: @{xs-min}) and (max-width: @{sm-max})';
+@xs-md: ~'(min-width: @{xs-min}) and (max-width: @{md-max})';
+@xs-lg: ~'(min-width: @{xs-min}) and (max-width: @{lg-max})';
+@sm: ~'(min-width: @{sm-min}) and (max-width: @{sm-max})';
+@sm-md: ~'(min-width: @{sm-min}) and (max-width: @{md-max})';
+@sm-lg: ~'(min-width: @{sm-min}) and (max-width: @{lg-max})';
+@sm-xl: ~'(min-width: @{sm-min}) and (max-width: @{xl-max})';
+@md: ~'(min-width: @{md-min}) and (max-width: @{md-max})';
+@md-lg: ~'(min-width: @{md-min}) and (max-width: @{lg-max})';
+@md-xl: ~'(min-width: @{md-min}) and (max-width: @{xl-max})';
+@lg: ~'(min-width: @{lg-min}) and (max-width: @{lg-max})';
+@lg-xl: ~'(min-width: @{lg-min}) and (max-width: @{xl-max})';
+@xl: ~'(min-width: @{xl-min}) and (max-width: @{xl-max})';
diff --git a/pages/src/common/variables.ts b/pages/src/common/breakpoints.ts
similarity index 100%
rename from pages/src/common/variables.ts
rename to pages/src/common/breakpoints.ts
diff --git a/pages/src/common/colors.less b/pages/src/common/colors.less
new file mode 100644
index 000000000..77a96796f
--- /dev/null
+++ b/pages/src/common/colors.less
@@ -0,0 +1,74 @@
+//@ex-1: #0082ca;
+//@ex-2: #40bfef;
+
+/* Colors */
+@primary-blue: #0082ca;
+@primary-dark-blue: #0066ff;
+@primary-light-blue: #8bc2ff;
+
+@primary-orange: #ff5d24;
+@primary-orange-dark: #c6361a;
+
+@body-bg: #f8f8f8;
+@body-fg: rgba(22, 0, 27, 0.9);
+
+@link-fg: #0097E7;
+@link-hover-fg: #0097E7;
+@link-hover-underline: #0097E7;
+
+@landing-bg-color: #131A2E;
+@landing-fg-color: #fff;
+
+@nav-dark-bg: @landing-bg-color; //#232429;
+@nav-dark-fg: #fff;
+@nav-dark-hover: #74c5ff;
+@nav-dark-selected: #00a2ff;
+@nav-dark-accent: #3eb2ff;
+
+// Color Helpers
+// Text helpers
+.text {
+  &-white {
+    color: #fff !important;
+  }
+  &-warning {
+    color: #ffc107 !important;
+  }
+  &-muted {
+    color: #6c757d !important;
+  }
+}
+
+// Backgrounds
+.bg {
+  &-info {
+    background-color: #17a2b8 !important;
+  }
+
+  &-danger {
+    background-color: #dc3545 !important;
+  }
+
+  &-white {
+    background-color: #fff !important;
+  }
+}
+
+// Borders
+.border {
+  border: 1px solid #dee2e6 !important;
+}
+
+.border-primary {
+  border-color: #007bff !important;
+}
+
+// Svg
+.fill {
+  &-light svg {
+    fill: #fff;
+  }
+  &-primary svg {
+    fill: @primary-blue;
+  }
+}
diff --git a/pages/src/common/helpers.less b/pages/src/common/helpers.less
index 909216f83..e84a7e278 100644
--- a/pages/src/common/helpers.less
+++ b/pages/src/common/helpers.less
@@ -85,3 +85,26 @@
 .pb-2 {
   padding-bottom: 0.5rem !important;
 }
+
+// List helpers
+.unstyled-list li {
+  list-style-type: none;
+}
+
+// Text
+.text-center {
+  text-align: center !important;
+}
+
+// A11ty helpers
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
diff --git a/pages/src/common/page.less b/pages/src/common/page.less
deleted file mode 100644
index 0f4ac6ce1..000000000
--- a/pages/src/common/page.less
+++ /dev/null
@@ -1,161 +0,0 @@
-html {
-  font-size: 16px;
-  font-family: sans-serif;
-  line-height: 1.15;
-  -webkit-text-size-adjust: 100%;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-body {
-  display: flex;
-  min-height: 100vh;
-  color: rgba(22, 0, 27, 0.9);
-  background: #f8f8f8;
-  flex-direction: column;
-}
-
-.brand-section {
-  width: 200px;
-}
-
-.error-details {
-  overflow: hidden auto;
-  white-space: normal;
-}
-
-main {
-  position: relative;
-  flex: 1 0 auto;
-}
-
-.page-scrollbar {
-  z-index: 100;
-}
-
-section {
-  margin-bottom: 20px;
-}
-
-.bg {
-  &-info {
-    background-color: #17a2b8 !important;
-  }
-
-  &-danger {
-    background-color: #dc3545 !important;
-  }
-
-  &-dark {
-    background-color: #343a40 !important;
-  }
-
-  &-white {
-    background-color: #fff !important;
-  }
-}
-
-button.bg-danger:hover,
-button.bg-danger:focus {
-  background-color: #bd2130 !important;
-}
-
-.border {
-  border: 1px solid #dee2e6 !important;
-}
-
-.border-primary {
-  border-color: #007bff !important;
-}
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-test-media-source,
-test-media-controls {
-  display: block;
-  padding: 5px;
-  text-align: center;
-  min-width: 250px;
-
-  .btn {
-    margin-right: 5px;
-  }
-}
-
-.demo-marquee {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-
-  position: relative;
-  padding: 40px;
-  min-height: 340px;
-
-  .bg-content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-
-    z-index: 1;
-  }
-  .demo-content {
-    z-index: 2;
-
-    &.contrast {
-      color: white;
-      text-shadow: 0 0 4px rgba(0,0,0,.8);
-    }
-  }
-}
-
-.logo-light svg {
-  fill: #ffffff;
-}
-
-.logo-primary svg {
-  fill: #0082CA;
-}
-
-.unstyled-list li {
-  list-style-type: none;
-}
-
-.list-inline {
-  padding-left: 0;
-  list-style: none;
-
-  &-item {
-    display: inline-block;
-
-    &:not(:last-child) {
-      margin-right: 0.5rem;
-    }
-  }
-}
-
-.text {
-  &-center {
-    text-align: center !important;
-  }
-
-  &-white {
-    color: #fff !important;
-  }
-  &-warning {
-    color: #ffc107 !important;
-  }
-  &-muted {
-    color: #6c757d !important;
-  }
-}
diff --git a/pages/src/common/reboot.less b/pages/src/common/reboot.less
index 8e5cb3d10..f666bd7df 100644
--- a/pages/src/common/reboot.less
+++ b/pages/src/common/reboot.less
@@ -46,7 +46,9 @@ hr {
   border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-
+section {
+  margin-bottom: 20px;
+}
 
 pre,
 code {
diff --git a/pages/src/common/typography.less b/pages/src/common/typography.less
index 0f8f57a40..bc3647d92 100644
--- a/pages/src/common/typography.less
+++ b/pages/src/common/typography.less
@@ -1,5 +1,17 @@
 @import "./variables.less";
 
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+body {
+  color: @body-fg;
+  background: @body-bg;
+}
+
 p {
   margin-top: 0;
   margin-bottom: 1rem;
@@ -14,26 +26,22 @@ h1, h2, h3, h4, h5,
 }
 
 h1, .h1 {
-  font-size: 3.5rem;
+  font-size: 2.5rem;
   @media @sm-xl {
-    font-size: 4.5rem;
+    font-size: 3rem;
     margin-bottom: 1rem;
   }
 }
-
 h2, .h2 {
-  font-size: 3rem;
+  font-size: 2rem;
   margin-bottom: 2rem;
 }
-
 h3, .h3 {
-  font-size: 2rem;
+  font-size: 1.75rem;
 }
-
 h4, .h4 {
   font-size: 1.5rem;
 }
-
 h5, .h5 {
   font-size: 1.25rem;
 }
@@ -45,9 +53,6 @@ b, strong {
 ol, ul {
   margin-top: 0;
   margin-bottom: 1rem;
-}
-
-ol, ul {
   ol, ul {
     margin-bottom: 0;
   }
@@ -70,3 +75,13 @@ a {
     text-decoration: none;
   }
 }
+
+.landing-layout {
+  font-size: 1.175rem;
+  h2, .h2 {
+    font-size: 2.5rem;
+  }
+  h3, .h3 {
+    font-size: 2rem;
+  }
+}
diff --git a/pages/src/common/variables.less b/pages/src/common/variables.less
index 84c1a60f8..6312b7dcb 100644
--- a/pages/src/common/variables.less
+++ b/pages/src/common/variables.less
@@ -1,51 +1,2 @@
-//@ex-1: #0082ca;
-//@ex-2: #40bfef;
-
-/* Colors */
-@primary-blue: #0082ca;
-@primary-dark-blue: #0066ff;
-@primary-light-blue: #8bc2ff;
-
-@primary-orange: #ff5d24;
-@primary-orange-dark: #c6361a;
-
-@link-fg: #0097E7;
-@link-hover-fg: #007fe7;
-@link-hover-underline: #ff5d24;
-
-@landing-bg-color: #131A2E;
-@landing-fg-color: #fff;
-
-@nav-dark-bg: @landing-bg-color; //#232429;
-@nav-dark-fg: #fff;
-@nav-dark-hover: #74c5ff;
-@nav-dark-selected: #00a2ff;
-@nav-dark-accent: #3eb2ff;
-
-/* Breakpoints definition */
-@xs-min: 1px;
-@xs-max: 599px;
-@sm-min: @xs-max + 1;
-@sm-max: 991px;
-@md-min: @sm-max + 1;
-@md-max: 1199px;
-@lg-min: @md-max + 1;
-@lg-max: 1599px;
-@xl-min: @lg-max + 1;
-@xl-max: 999999px;
-
-/* Media queries */
-@xs: ~'(min-width: @{xs-min}) and (max-width: @{xs-max})';
-@xs-sm: ~'(min-width: @{xs-min}) and (max-width: @{sm-max})';
-@xs-md: ~'(min-width: @{xs-min}) and (max-width: @{md-max})';
-@xs-lg: ~'(min-width: @{xs-min}) and (max-width: @{lg-max})';
-@sm: ~'(min-width: @{sm-min}) and (max-width: @{sm-max})';
-@sm-md: ~'(min-width: @{sm-min}) and (max-width: @{md-max})';
-@sm-lg: ~'(min-width: @{sm-min}) and (max-width: @{lg-max})';
-@sm-xl: ~'(min-width: @{sm-min}) and (max-width: @{xl-max})';
-@md: ~'(min-width: @{md-min}) and (max-width: @{md-max})';
-@md-lg: ~'(min-width: @{md-min}) and (max-width: @{lg-max})';
-@md-xl: ~'(min-width: @{md-min}) and (max-width: @{xl-max})';
-@lg: ~'(min-width: @{lg-min}) and (max-width: @{lg-max})';
-@lg-xl: ~'(min-width: @{lg-min}) and (max-width: @{xl-max})';
-@xl: ~'(min-width: @{xl-min}) and (max-width: @{xl-max})';
+@import (reference) "./colors.less";
+@import (reference) "./breakpoints.less";
diff --git a/pages/src/benefits/benefits.less b/pages/src/landing/benefits/benefits.less
similarity index 95%
rename from pages/src/benefits/benefits.less
rename to pages/src/landing/benefits/benefits.less
index 0c9e436ae..932cda214 100644
--- a/pages/src/benefits/benefits.less
+++ b/pages/src/landing/benefits/benefits.less
@@ -1,4 +1,4 @@
-@import (reference) "../common/variables.less";
+@import (reference) "../../common/variables.less";
 
 .benefit {
   position: relative;
diff --git a/pages/src/browser-support/browser-support.less b/pages/src/landing/browser-support/browser-support.less
similarity index 92%
rename from pages/src/browser-support/browser-support.less
rename to pages/src/landing/browser-support/browser-support.less
index 24af2b87d..e9d4b0d4e 100644
--- a/pages/src/browser-support/browser-support.less
+++ b/pages/src/landing/browser-support/browser-support.less
@@ -1,3 +1,5 @@
+@import (reference) "../../common/variables.less";
+
 .browser-support {
   position: relative;
   flex-direction: column;
diff --git a/pages/src/landing/landing.less b/pages/src/landing/landing.less
new file mode 100644
index 000000000..14db9e730
--- /dev/null
+++ b/pages/src/landing/landing.less
@@ -0,0 +1,4 @@
+@import "./marquee/marquee.less";
+@import "./benefits/benefits.less";
+@import "./browser-support/browser-support.less";
+//@import "./overview/overview.less";
diff --git a/pages/src/landing/landing.ts b/pages/src/landing/landing.ts
new file mode 100644
index 000000000..067580d72
--- /dev/null
+++ b/pages/src/landing/landing.ts
@@ -0,0 +1,1 @@
+export * from './marquee/marquee';
diff --git a/pages/src/marquee/marquee-logo.less b/pages/src/landing/marquee/marquee-logo.less
similarity index 100%
rename from pages/src/marquee/marquee-logo.less
rename to pages/src/landing/marquee/marquee-logo.less
diff --git a/pages/src/landing/marquee/marquee.less b/pages/src/landing/marquee/marquee.less
new file mode 100644
index 000000000..0f7da0ee7
--- /dev/null
+++ b/pages/src/landing/marquee/marquee.less
@@ -0,0 +1,104 @@
+@import (reference) "../../common/variables.less";
+
+.marquee {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  @media @md-xl {
+    flex-direction: row;
+  }
+  justify-content: space-between;
+  align-items: center;
+
+  min-height: 50vh;
+
+  @media @md-xl {
+    padding-top: 2rem;
+  }
+
+  padding-bottom: 3rem;
+  margin-bottom: 7rem;
+
+  &-content {
+    position: relative;
+    z-index: 1;
+    flex: 1 1 auto;
+
+    text-align: center;
+    max-width: 100%;
+    @media @md-xl {
+      text-align: left;
+      max-width: 50%;
+    }
+  }
+
+  &-illustration {
+    position: absolute;
+    top: 0;
+    left: calc(~'50% - 150px');
+    width: 300px;
+    @media @sm {
+      left: calc(~'50% - 175px');
+      width: 350px;
+    }
+    @media @md-xl {
+      position: static;
+      flex: 1 1 auto;
+      justify-self: flex-end;
+      width: 100%;
+      max-width: 50%;
+    }
+  }
+
+  &-heading-container {
+    display: flex;
+    align-items: center;
+    height: 300px;
+    @media @sm {
+      height: 350px;
+    }
+    @media @md-xl {
+      height: auto;
+    }
+  }
+
+  &-heading {
+    font-size: 55px;
+    max-width: 350px;
+    margin: 0 auto;
+    text-shadow: 1px 1px 5px #0b5bd5;
+
+    @media @sm {
+      font-size: 60px;
+      max-width: 600px;
+    }
+    @media @md-xl {
+      font-size: 4rem;
+      max-width: 100%;
+      margin: 0 0 1rem;
+      text-shadow: none;
+    }
+  }
+  &-body {
+    font-size: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  &-brand {
+    width: 100%;
+    margin: 0 auto;
+    opacity: .7;
+
+    @media @md-xl {
+      width: 90%;
+      margin: -10% auto;
+      opacity: 1;
+    }
+
+    > svg {
+      min-width: 300px;
+      min-height: 300px;
+    }
+  }
+}
+@import "./marquee-logo.less";
diff --git a/pages/src/marquee/marquee.ts b/pages/src/landing/marquee/marquee.ts
similarity index 79%
rename from pages/src/marquee/marquee.ts
rename to pages/src/landing/marquee/marquee.ts
index ee4f16d9e..e3aab7861 100644
--- a/pages/src/marquee/marquee.ts
+++ b/pages/src/landing/marquee/marquee.ts
@@ -1,9 +1,9 @@
-import {ESLBaseElement, attr} from '../../../src/modules/esl-base-element/core';
-import {bind} from '../../../src/modules/esl-utils/decorators/bind';
-import {ready} from '../../../src/modules/esl-utils/decorators/ready';
-import {range} from '../../../src/modules/esl-utils/misc/array';
-import {memoize} from '../../../src/modules/esl-utils/decorators/memoize';
-import {isIE} from '../../../src/modules/esl-utils/environment/device-detector';
+import {ESLBaseElement, attr} from '../../../../src/modules/esl-base-element/core';
+import {bind} from '../../../../src/modules/esl-utils/decorators/bind';
+import {ready} from '../../../../src/modules/esl-utils/decorators/ready';
+import {range} from '../../../../src/modules/esl-utils/misc/array';
+import {memoize} from '../../../../src/modules/esl-utils/decorators/memoize';
+import {isIE} from '../../../../src/modules/esl-utils/environment/device-detector';
 
 export class ESLDemoMarquee extends ESLBaseElement {
   static is = 'esl-d-marquee';
diff --git a/pages/src/overview/overview-item.less b/pages/src/landing/overview/overview-item.less
similarity index 93%
rename from pages/src/overview/overview-item.less
rename to pages/src/landing/overview/overview-item.less
index 1fc073633..912cdd80a 100644
--- a/pages/src/overview/overview-item.less
+++ b/pages/src/landing/overview/overview-item.less
@@ -1,4 +1,4 @@
-@import (reference) "../common/variables.less";
+@import (reference) "../../common/variables.less";
 
 .overview {
   &-item {
diff --git a/pages/src/overview/overview.less b/pages/src/landing/overview/overview.less
similarity index 95%
rename from pages/src/overview/overview.less
rename to pages/src/landing/overview/overview.less
index 8d2d055b3..fed4514db 100644
--- a/pages/src/overview/overview.less
+++ b/pages/src/landing/overview/overview.less
@@ -1,4 +1,4 @@
-@import (reference) "../common/variables.less";
+@import (reference) "../../common/variables.less";
 
 .overview {
   position: relative;
diff --git a/pages/src/localdev.less b/pages/src/localdev.less
index f5fdbf868..458c62d2e 100644
--- a/pages/src/localdev.less
+++ b/pages/src/localdev.less
@@ -1,6 +1,6 @@
 @import "./common/reboot.less";
 @import "./common/typography.less";
-@import "./common/page.less";
+@import "./common/colors.less";
 @import "./common/markdown.less";
 
 @import "./common/accent-lines.less";
@@ -21,11 +21,10 @@
 
 @import "./navigation/navigation.less";
 @import "./related/related.less";
-@import "./marquee/marquee.less";
+@import "./landing/landing.less";
+
 @import "./collection-grid/collection-grid.less";
-@import "./benefits/benefits.less";
-@import "./browser-support/browser-support.less";
-@import "./overview/overview.less";
+@import "./esl-media-demo/test-media.less";
 
 @import "../../src/modules/all.less";
 @import "../../src/modules/draft/all.less";
diff --git a/pages/src/localdev.ts b/pages/src/localdev.ts
index 6cf8e872e..c3c1e417d 100644
--- a/pages/src/localdev.ts
+++ b/pages/src/localdev.ts
@@ -8,7 +8,7 @@ import '../../src/polyfills/polyfills.validate';
 // With Namespace
 import '../../src/modules/lib';
 // Config
-import './common/variables';
+import './common/breakpoints';
 
 import {
   ESLImage,
@@ -46,7 +46,7 @@ import './esl-media-demo/test-media';
 import './esl-media-demo/test-media-source';
 
 import {ESLDemoSidebar} from './navigation/navigation';
-import {ESLDemoMarquee} from './marquee/marquee';
+import {ESLDemoMarquee} from './landing/landing';
 
 // Register Demo components
 ESLDemoSidebar.register();
diff --git a/pages/src/marquee/marquee.less b/pages/src/marquee/marquee.less
deleted file mode 100644
index ad1baaca6..000000000
--- a/pages/src/marquee/marquee.less
+++ /dev/null
@@ -1,74 +0,0 @@
-@import (reference) "../common/variables.less";
-
-.marquee {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  @media @md-xl {
-    flex-direction: row;
-  }
-  justify-content: space-between;
-  align-items: center;
-
-  min-height: 50vh;
-
-  @media @md-xl {
-    padding-top: 2rem;
-  }
-
-  padding-bottom: 3rem;
-  margin-bottom: 7rem;
-
-  &-content {
-    position: relative;
-    z-index: 1;
-    flex: 1 1 auto;
-    max-width: 100%;
-
-    text-align: center;
-    @media @sm-xl {
-      text-align: left;
-    }
-    @media @md-xl {
-      max-width: 50%;
-    }
-  }
-  &-illustration {
-    position: relative;
-    flex: 1 1 auto;
-    max-width: 50%;
-    width: 100%;
-    justify-self: flex-end;
-
-    order: -1;
-    @media @md-xl {
-      order: 1;
-    }
-  }
-
-  &-heading {
-    font-size: 3rem;
-    @media @sm-xl {
-      font-size: 4rem;
-      margin-bottom: 1rem;
-    }
-  }
-  &-body {
-    font-size: 1.5rem;
-    margin-bottom: 1.5rem;
-  }
-
-  &-brand {
-    width: 90%;
-    margin: 0 auto;
-
-    @media @md-xl {
-      margin: -10% auto;
-    }
-
-    > svg {
-      min-height: 200px;
-    }
-  }
-}
-@import "./marquee-logo.less";
diff --git a/pages/src/navigation/header/header.less b/pages/src/navigation/header/header.less
index 2429e8aeb..be0b39af8 100644
--- a/pages/src/navigation/header/header.less
+++ b/pages/src/navigation/header/header.less
@@ -159,19 +159,21 @@
   &-short-name {
     display: none;
     text-transform: uppercase;
-    @media @md {
+    @media @xs-md {
       display: inline-block;
     }
   }
 
   &-long-name {
     display: inline-block;
-    @media @md {
+    @media @xs-md {
       display: none;
     }
   }
 
   &-short-name, &-long-name {
-    margin-left: 10px;
+    font-size: 1.125rem;
+    font-weight: 500;
+    margin-left: 11px;
   }
 }
diff --git a/pages/src/navigation/sidebar/sidebar-content.less b/pages/src/navigation/sidebar/sidebar-content.less
index 20b172557..5f50355a6 100644
--- a/pages/src/navigation/sidebar/sidebar-content.less
+++ b/pages/src/navigation/sidebar/sidebar-content.less
@@ -17,13 +17,10 @@ esl-d-sidebar {
 
   .sidebar-heading {
     display: none;
-
+    padding: 0 10px;
     min-width: 100%;
     align-items: center;
 
-    margin: 0 0 13px 10px;
-    transition: margin .5s ease-in-out;
-
     color: inherit;
     text-decoration: none;
 
@@ -31,9 +28,6 @@ esl-d-sidebar {
       display: flex;
     }
   }
-  &.open .sidebar-heading {
-    margin: 0 0 8px 24px;
-  }
 
   .sidebar-logo {
     flex: 0 0 auto;
@@ -43,10 +37,10 @@ esl-d-sidebar {
 
   .sidebar-title {
     flex: 1 0 auto;
-    padding-left: 14px;
+    padding-left: 15px;
     overflow: hidden;
 
-    font-size: 0.75rem;
+    font-size: 0.95rem;
     font-weight: 600;
     line-height: 20px;
     text-transform: uppercase;
diff --git a/pages/src/navigation/sidebar/sidebar-primary-nav.less b/pages/src/navigation/sidebar/sidebar-primary-nav.less
index dcdd5c20c..b7db09c84 100644
--- a/pages/src/navigation/sidebar/sidebar-primary-nav.less
+++ b/pages/src/navigation/sidebar/sidebar-primary-nav.less
@@ -6,8 +6,12 @@ esl-d-sidebar {
     display: flex;
     flex-direction: column;
 
-    margin-top: 45px;
     height: 100%;
+    margin-top: 30px;
+
+    @media @xs-sm {
+      margin-top: 35px;
+    }
 
     .sidebar-nav-list {
       flex: 1 1 0;
@@ -25,10 +29,10 @@ esl-d-sidebar {
   // Primary Heading
   .sidebar-nav-item-heading {
     display: flex;
-    padding: 10px 40px 10px 30px;
+    padding: 10px 40px 10px 25px;
 
     @media @sm {
-      padding-left: 40px;
+      padding-left: 35px;
     }
     @media @md-xl {
       padding-left: 20px;
diff --git a/pages/src/navigation/sidebar/sidebar-seccondary-nav.less b/pages/src/navigation/sidebar/sidebar-seccondary-nav.less
index 57f2aeefa..6d0fd1b55 100644
--- a/pages/src/navigation/sidebar/sidebar-seccondary-nav.less
+++ b/pages/src/navigation/sidebar/sidebar-seccondary-nav.less
@@ -10,10 +10,10 @@ esl-d-sidebar {
   .sidebar-nav-secondary-item {
     display: block;
     position: relative;
-    padding: 10px 35px 10px 75px;
+    padding: 10px 35px 10px 70px;
 
     @media @sm {
-      padding-left: 85px;
+      padding-left: 80px;
     }
     @media @md-xl {
       padding-left: 65px;
diff --git a/pages/src/navigation/sidebar/sidebar.less b/pages/src/navigation/sidebar/sidebar.less
index da1765476..caa90bedd 100644
--- a/pages/src/navigation/sidebar/sidebar.less
+++ b/pages/src/navigation/sidebar/sidebar.less
@@ -33,7 +33,7 @@ esl-d-sidebar {
   }
 
   @media @sm {
-    width: 28rem;
+    width: 20rem;
   }
   @media @md-xl {
     position: relative;
diff --git a/pages/src/page/base-layout.less b/pages/src/page/base-layout.less
new file mode 100644
index 000000000..07537b93c
--- /dev/null
+++ b/pages/src/page/base-layout.less
@@ -0,0 +1,12 @@
+body {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+main {
+  position: relative;
+  flex: 1 0 auto;
+}
+.page-scrollbar {
+  z-index: 100;
+}
diff --git a/pages/src/page/landing-layout.less b/pages/src/page/landing-layout.less
index c03bdc427..85502dab7 100644
--- a/pages/src/page/landing-layout.less
+++ b/pages/src/page/landing-layout.less
@@ -1,4 +1,5 @@
 @import (reference) "../common/variables.less";
+@import "./base-layout.less";
 
 .landing-layout {
   height: 100vh;
@@ -8,6 +9,7 @@
   color: @landing-fg-color;
   background-color: @landing-bg-color;
 
+
   header {
     flex-basis: 100%;
   }
diff --git a/pages/src/page/sidebar-layout.less b/pages/src/page/sidebar-layout.less
index ddaaf7255..328361482 100644
--- a/pages/src/page/sidebar-layout.less
+++ b/pages/src/page/sidebar-layout.less
@@ -1,3 +1,6 @@
+@import (reference) "../common/variables.less";
+@import "./base-layout.less";
+
 .sidebar-layout {
   height: 100vh;
   display: flex;
diff --git a/pages/views/_includes/landing/marquee.njk b/pages/views/_includes/landing/marquee.njk
index 5c7b7e6a6..9dc096a0d 100644
--- a/pages/views/_includes/landing/marquee.njk
+++ b/pages/views/_includes/landing/marquee.njk
@@ -1,6 +1,8 @@
 <esl-d-marquee class="marquee container">
   <div class="marquee-content">
-    <h1 class="marquee-heading">Exadel Smart Library</h1>
+    <div class="marquee-heading-container">
+      <h1 class="marquee-heading">Exadel Smart Library</h1>
+    </div>
     <div class="marquee-body">
       <p>Open-source UI component library that helps developers create modern-looking, effective, and user-friendly interfaces faster.</p>
     </div>
@@ -8,7 +10,7 @@
   </div>
 
   <div class="marquee-illustration" role="presentation">
-    <div class="marquee-brand logo-primary logo-animated">
+    <div class="marquee-brand logo-animated">
       {% include 'static/assets/logo-pretty.svg' %}
     </div>
   </div>
diff --git a/pages/views/_includes/navigation/header.njk b/pages/views/_includes/navigation/header.njk
index b48341e55..b38d77753 100644
--- a/pages/views/_includes/navigation/header.njk
+++ b/pages/views/_includes/navigation/header.njk
@@ -1,6 +1,6 @@
 <header class="header">
   <nav class="header-container container">
-    <a class="header-link header-logo logo-light logo-animated" href="{{ '/' | url }}" aria-label="Landing page">
+    <a class="header-link header-logo fill-light logo-animated" href="{{ '/' | url }}" aria-label="Landing page">
       {% include 'static/assets/logo.svg' %}
       <span class="header-short-name">esl</span>
       <span class="header-long-name">{{ site.name }}</span>
diff --git a/pages/views/_includes/navigation/sidebar.njk b/pages/views/_includes/navigation/sidebar.njk
index 40f64289d..5a9549e04 100644
--- a/pages/views/_includes/navigation/sidebar.njk
+++ b/pages/views/_includes/navigation/sidebar.njk
@@ -3,7 +3,7 @@
 <esl-d-sidebar id="sidebar" class="open" aria-label="Site Navigation">
   <nav class="sidebar-nav">
     <a class="sidebar-heading" href="{{ '/' | url }}">
-      <span class="sidebar-logo logo-light logo-animated">{% include 'static/assets/logo.svg' %}</span>
+      <span class="sidebar-logo fill-light logo-animated">{% include 'static/assets/logo.svg' %}</span>
       <span class="sidebar-title">{{ site.name }}</span>
     </a>
 
diff --git a/pages/views/components/esl-scrollbar.njk b/pages/views/components/esl-scrollbar.njk
index 2e2711090..ac347e986 100644
--- a/pages/views/components/esl-scrollbar.njk
+++ b/pages/views/components/esl-scrollbar.njk
@@ -11,12 +11,3 @@ aside:
 ---
 
 {% mdRender 'src/modules/esl-scrollbar/README.md', 'intro' %}
-
-<section class="row">
-  <div class="col-12">
-    <h2>Related Examples: </h2>
-    <ul class="list-inline">
-      <li class="list-inline-item"><a href="{{ '/examples/scrollbar' | url }}">Scrollbar</a></li>
-    </ul>
-  </div>
-</section>
diff --git a/pages/views/utils/esl-a11ty-group.njk b/pages/views/utils/esl-a11ty-group.njk
index 9dd9f72d0..85e0620ad 100644
--- a/pages/views/utils/esl-a11ty-group.njk
+++ b/pages/views/utils/esl-a11ty-group.njk
@@ -11,12 +11,3 @@ aside:
 ---
 
 {% mdRender 'src/modules/esl-a11y-group/README.md', 'intro' %}
-
-<section class="row">
-  <div class="col-12">
-    <h2>Related Examples: </h2>
-    <ul class="list-inline">
-      <li class="list-inline-item"><a href="{{ '/examples/tabs' | url }}">Tabs</a></li>
-    </ul>
-  </div>
-</section>


Test patch:
diff --git a/pages/src/esl-media-demo/test-media.less b/pages/src/esl-media-demo/test-media.less
new file mode 100644
index 000000000..992ed57cc
--- /dev/null
+++ b/pages/src/esl-media-demo/test-media.less
@@ -0,0 +1,39 @@
+test-media-source,
+test-media-controls {
+  display: block;
+  padding: 5px;
+  text-align: center;
+  min-width: 250px;
+
+  .btn {
+    margin-right: 5px;
+  }
+}
+
+.demo-marquee {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+
+  position: relative;
+  padding: 40px;
+  min-height: 340px;
+
+  .bg-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    z-index: 1;
+  }
+  .demo-content {
+    z-index: 2;
+
+    &.contrast {
+      color: white;
+      text-shadow: 0 0 4px rgba(0, 0, 0, .8);
+    }
+  }
+}