Merge pull request #2236 from nestjs/chore/ukraine-banner

chore(): add top banner

Author: kamilmysliwiec

src/app/homepage/header/header.component.html

@@ -1,3 +1,6 @@
+<div class="top-bar">
+  <a href="https://supportukrainenow.org/">STOP RUSSIA'S INVASION OF UKRAINE 🇺🇦</a>
+</div>
 <header>
   <button
     class="icon-wrapper"
@@ -74,14 +77,4 @@
       </li>
     </ul>
   </div>
-  <!--<div class="workshop-wrapper">
-    <img src="/assets/ng-camp-small.svg" alt="AngularCamp, Barcelona" />
-    <div class="workshop-info">
-      <h3 class="long-title">
-        <span>NestJS</span> at 2018 JSCamp Conference, Barcelona</h3>
-      <h3 class="short-title">
-        <span>NestJS</span> 2018 JSCamp</h3>
-      <a href="https://angularcamp.tech/workshops/scalable-nodejs-with-nest/" target="_blank">LEARN MORE</a>
-    </div>
-  </div>-->
 </header>

src/app/homepage/header/header.component.scss

@@ -2,23 +2,42 @@
 @import '../../../scss/utils.scss';
 
 :host {
-  background: $black-color;
-  display: block;
-  width: 100%;
-  height: 70px;
   position: fixed;
   z-index: 10000;
+  width: 100%;
+  height: 105px;
 
   @media print {
     position: relative;
   }
 }
 
+.top-bar {
+  background: #0a0a0a;
+  text-align: center;
+  height: 35px;
+  padding: 4px;
+  letter-spacing: 0.2px;
+  box-sizing: border-box;
+
+  span {
+    margin: 0;
+  }
+
+  a {
+    color: #fff;
+    font-weight: 600;
+    font-size: 18px;
+  }
+}
+
 header {
-  height: 100%;
-  width: 100%;
   display: block;
   position: relative;
+  background: $black-color;
+  width: 100%;
+  height: 70px;
+  z-index: 10000;
 }
 
 .icon-wrapper {

src/app/homepage/homepage.component.scss

@@ -22,7 +22,7 @@
   //@include transform(translateX(250px));
   margin-left: 250px;
   width: calc(100% - 250px);
-  padding: 85px 85px 0;
+  padding: 120px 85px 0;
   display: inline-block;
   vertical-align: top;
   position: relative;
@@ -38,7 +38,7 @@
     //@include transform(translateX(250px));
     margin-left: 250px;
     width: calc(100% - 250px);
-    padding: 85px 50px 0;
+    padding: 120px 50px 0;
     &.wide {
       width: 100%;
     }
@@ -47,7 +47,7 @@
     //@include transform(translateX(0));
     margin-left: 0;
     width: 100%;
-    padding: 85px 20px 0;
+    padding: 120px 20px 0;
   }
 
   @media print {

src/app/homepage/menu/menu.component.scss

@@ -5,7 +5,7 @@
   @extend .transition;
   @extend .box-sizing;
   @include transform(translateX(-100%));
-  padding: 90px 17px 40px 24px;
+  padding: 125px 17px 40px 24px;
   width: 250px;
   background: #f5f5f5;
   position: fixed !important;
@@ -27,7 +27,7 @@
     }
   }
   @include media(medium) {
-    padding: 85px 25px 20px 25px;
+    padding: 120px 25px 20px 25px;
   }
   @include media(small) {
     width: 100%;

src/app/shared/components/toc/toc.component.scss

@@ -6,7 +6,7 @@
   padding-left: 45px;
   box-sizing: border-box;
   position: fixed;
-  top: 90px;
+  top: 125px;
   right: 20px;
   max-height: 350px;
   max-height: calc(100vh - 350px);