Testing first attempt

_includes/nav.html

@@ -1,5 +1,13 @@
 {% assign current = page.url | downcase | remove: ".html" | split: '/' %}
-
+<div class="SocialBanner">
+  <div>
+    Support Ukraine 🇺🇦 
+    <a href="https://opensource.facebook.com/support-ukraine">
+      Help Provide Humanitarian Aid to Ukraine
+    </a>
+    .
+  </div>
+</div>
 <div class="header-container">
   <a class="header-logo" href="{{ site.url }}{{ site.baseurl }}" aria-label="PyTorch"></a>
 

_sass/_variables.scss

@@ -8,19 +8,20 @@ $medium_grey: #f3f4f7;
 $not_quite_black: #262626;
 $slate: #262626;
 $very_light_grey: #f3f4f7;
-$very_dark_grey: #CCCDD1;
+$very_dark_grey: #cccdd1;
 $content_text_color: #6c6c6d;
 $code_background_color: #f3f4f7;
 $dark_blue: #3d5a97;
 $quick_start_grey: #6c6c6d;
 $command_block_black: #6c6c6d;
-$smoky_grey: #CCCDD1;
-$medium_smoky_grey: #CCCDD1;
-$code_link_color: #4974D1;
-$purple: #812CE5;
+$smoky_grey: #cccdd1;
+$medium_smoky_grey: #cccdd1;
+$code_link_color: #4974d1;
+$purple: #812ce5;
 $light_white: #e2e2e2;
 $mid_gray: #979797;
 
+$banner_height: 40px;
 $desktop_header_height: 90px;
 $mobile_header_height: 68px;
 $desktop_footer_height: 471px;
@@ -29,27 +30,36 @@ $site_horizontal_padding: 30px;
 @import "../node_modules/bootstrap/scss/variables";
 
 @mixin desktop {
-  @media screen and (min-width: 768px) { @content; }
+  @media screen and (min-width: 768px) {
+    @content;
+  }
 }
 
 @mixin full-nav-menu-desktop {
-  @media screen and (min-width: 1200px) { @content; }
+  @media screen and (min-width: 1200px) {
+    @content;
+  }
 }
 
 @mixin max-width-desktop {
-  @media screen and (min-width: 1240px) { @content; }
+  @media screen and (min-width: 1240px) {
+    @content;
+  }
 }
 
 @mixin small-desktop {
-  @media (min-width: 768px) and (max-width: 1239px) { @content; }
+  @media (min-width: 768px) and (max-width: 1239px) {
+    @content;
+  }
 }
 
 @function rem($px) {
   @return ($px / 16px) * 1rem;
 }
 
 @mixin code_font_family {
-  font-family: IBMPlexMono,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+  font-family: IBMPlexMono, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
 }
 
 @mixin clearfix {
@@ -92,7 +102,7 @@ $site_horizontal_padding: 30px;
       bottom: 0;
       left: 0;
       background-color: $orange;
-      transition: width .250s ease-in-out;
+      transition: width 0.25s ease-in-out;
     }
 
     &:hover:after {
@@ -105,10 +115,10 @@ $site_horizontal_padding: 30px;
 }
 
 @mixin external_link_icon {
-    &:after {
-      content: url($baseurl + "/assets/images/external-link-icon.svg");
-      margin-left: 15px;
-    }
+  &:after {
+    content: url($baseurl + "/assets/images/external-link-icon.svg");
+    margin-left: 15px;
+  }
 }
 
 @mixin blog_date_and_feature {

_sass/homepage.scss

@@ -1,5 +1,4 @@
 .homepage {
-
   .main-content-wrapper {
     @include desktop {
       margin-top: 539px;
@@ -34,7 +33,7 @@
   .jumbotron {
     height: 195px;
     @include desktop {
-    height: 395px;
+      height: 395px;
     }
     .btn {
       margin-top: rem(6px);
@@ -331,7 +330,8 @@
   padding: 20px;
   width: 90%;
 
-  .right-arrow, .left-arrow {
+  .right-arrow,
+  .left-arrow {
     height: 15px;
     bottom: -3px;
     position: relative;

_sass/jumbotron.scss

@@ -48,7 +48,8 @@
   }
 
   &.on-dark-background {
-    h1, p {
+    h1,
+    p {
       color: $white;
     }
   }

_sass/navigation.scss

@@ -29,6 +29,17 @@
   }
 }
 
+/* Social Banner */
+.SocialBanner {
+  font-weight: bold;
+  font-size: 20px;
+  max-width: 768px;
+  margin: 0 auto;
+  text-align: center;
+  height: $banner_height;
+  z-index: 9999;
+}
+
 .header-container {
   position: relative;
   display: flex;
@@ -174,7 +185,8 @@
     padding: 0;
   }
 
-  ul li a, .resources-mobile-menu-title {
+  ul li a,
+  .resources-mobile-menu-title {
     font-size: rem(32px);
     color: $white;
     letter-spacing: 0;
@@ -251,11 +263,13 @@
 }
 
 .main-menu ul li {
-  .ecosystem-dropdown, .resources-dropdown a {
+  .ecosystem-dropdown,
+  .resources-dropdown a {
     cursor: pointer;
   }
 
-  .ecosystem-dropdown, .resources-dropdown {
+  .ecosystem-dropdown,
+  .resources-dropdown {
     .with-down-orange-arrow {
       padding-right: rem(32px);
       position: relative;
@@ -322,7 +336,8 @@
   }
 }
 
-.ecosystem-dropdown-menu, .resources-dropdown-menu {
+.ecosystem-dropdown-menu,
+.resources-dropdown-menu {
   left: -75px;
   width: 226px;
   display: none;
@@ -342,21 +357,26 @@
   border-radius: 0.25rem;
 }
 
-.ecosystem-dropdown:hover, .resources-dropdown:hover, .resources-active:hover {
-  .ecosystem-dropdown-menu, .resources-dropdown-menu {
+.ecosystem-dropdown:hover,
+.resources-dropdown:hover,
+.resources-active:hover {
+  .ecosystem-dropdown-menu,
+  .resources-dropdown-menu {
     display: block;
   }
 }
 
 .main-menu ul li {
-  .ecosystem-dropdown-menu, .resources-dropdown-menu {
+  .ecosystem-dropdown-menu,
+  .resources-dropdown-menu {
     border-radius: 0;
     padding: 0;
   }
 }
 
 .main-menu ul li {
-  .ecosystem-dropdown-menu, .resources-dropdown-menu {
+  .ecosystem-dropdown-menu,
+  .resources-dropdown-menu {
     .dropdown-item {
       color: #6c6c6d;
       border-bottom: 1px solid #e2e2e2;