docs: Add Ukraine support banner to Yarn website (#4190)

* Adds Ukraine support banner

* Update packages/gatsby/src/components/header.js

Co-authored-by: Kristoffer K. <[email protected]>

* Updates scroll padding top height to account for banner

Co-authored-by: Kristoffer K. <[email protected]>

Author: larixer

packages/gatsby/src/components/header.js

@@ -159,6 +159,44 @@ const MenuNavigation = styled.div`
   }
 `;
 
+const Banner = styled.div`
+  background-color: #5474c9;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 1em;
+
+  > :first-child {
+    margin-right: 1em;
+  }
+`;
+
+const UkrainianFlag = styled.div`
+  width: 4em;
+  height: 3em;
+  background-image: linear-gradient(#0066cc 50%, #ffcc00 50%);
+`;
+
+const BannerTextContainer = styled.div`
+  flex: 1;
+
+  color: white;
+
+  a {
+    color: #fff;
+    text-decoration: underline;
+  }
+
+  > :first-child {
+    margin-top: 0;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+`;
+
 const MenuSearchBox = styled.div`
   display: none;
 
@@ -348,6 +386,17 @@ export const Header = ({children}) => {
           </a>
         </MenuSearchBox>
       </MenuContainer>
+      <Banner>
+        <UkrainianFlag />
+        <BannerTextContainer>
+          <p>
+            The Yarn team stands with the people of Ukraine during this heinous assault on their freedom, their independence, and their lives.
+          </p>
+          <p>
+            To support Ukraine in their time of need visit this <a href={`https://ukraine.ua/news/stand-with-ukraine/`}>page</a>.
+          </p>
+        </BannerTextContainer>
+      </Banner>
       {children}
     </HeaderContainer>
   </>;

packages/gatsby/src/components/layout.css

@@ -11,9 +11,9 @@ body {
 
   font-family: "Open Sans", sans-serif;
   line-height: 1.5;
-  
+
   /* match banner + topbar height to avoid hiding anchor link targets below topbar */
-  scroll-padding-top: 100px;
+  scroll-padding-top: 196px;
 }
 
 code {