website: Add “Stop the war” banner (#3518)

* Add “Stop the war” banner

* Update website/themes/uppy/layout/layout.ejs

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

* Update website/src/images/ua-flag.svg

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

* Update website/themes/uppy/layout/layout.ejs

Co-authored-by: Merlijn Vos <merlijn@soverin.net>

* Update website/themes/uppy/layout/layout.ejs

* Update website/themes/uppy/layout/layout.ejs

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>
Co-authored-by: Merlijn Vos <merlijn@soverin.net>
Co-authored-by: Kevin van Zonneveld <kevin@vanzonneveld.net>

website/src/images/ua-flag-wave.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 548.69 398.68"><defs><linearGradient id="a" x1="8.04" y1="202.19" x2="538.15" y2="196.31" gradientUnits="userSpaceOnUse"><stop offset="0" stop-opacity="0"/><stop offset="0.12" stop-opacity="0.24"/><stop offset="0.25" stop-opacity="0.38"/><stop offset="0.5" stop-opacity="0.35"/><stop offset="0.8" stop-opacity="0.05"/><stop offset="0.9" stop-opacity="0"/><stop offset="1" stop-opacity="0.08"/></linearGradient></defs><path d="M0,20.54c168.49-71.15,367.35,71.17,536.08,0a1273.36,1273.36,0,0,1,12.61,178.8c-178.82,71.7-357.51-71.7-536.08,0A1273.36,1273.36,0,0,0,0,20.54Z" fill="#005bbb"/><path d="M12.61,199.34c178.57-71.7,357.27,71.7,536.08,0a1274.87,1274.87,0,0,1-12.61,178.8C347.18,449.29,188.66,307,0,378.14A1273.36,1273.36,0,0,0,12.61,199.34Z" fill="#ffd500"/><path d="M536.08,20.54C367.35,91.71,168.49-50.61,0,20.54a1273.36,1273.36,0,0,1,12.61,178.8A1273.36,1273.36,0,0,1,0,378.14c188.66-71.18,347.18,71.15,536.08,0a1274.87,1274.87,0,0,0,12.61-178.8A1273.36,1273.36,0,0,0,536.08,20.54Z" fill="url(#a)"/></svg>

website/src/images/ua-flag.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800">
+<rect width="1200" height="800" fill="#005BBB"/>
+<rect width="1200" height="400" y="400" fill="#FFD500"/>
+</svg>

website/themes/uppy/layout/layout.ejs

@@ -41,13 +41,13 @@ if (page.series) {
     <div class="page">
       <div class="TransloaditBar js-TransloaditBar">
         <div class="TransloaditBar-about">
-          <a class="TransloaditBar-logo" href="https://transloadit.com/" target="_blank" rel="noopener">
+          <!-- <a class="TransloaditBar-logo" href="https://transloadit.com/" target="_blank" rel="noopener">
             <img class="TransloaditBar-logoImg" src="/images/transloadit-white-glyph.svg" width="20" height="20" alt="Transloadit">
-          </a>
-          <span>Uppy is an open source project by <a class="TransloaditBar-link" href="https://transloadit.com/" target="_blank">Transloadit</a></span>
-        </div>
-        <div class="TransloaditBar-info">
-          <a href="https://transloadit.com/pricing" class="TransloaditBar-info-link">Transloadit Community Plan</a>: free hosted Companion &amp; tusd, unlimited uploading, and 5GB/mo encoding traffic!
+          </a> -->
+          <!-- <span>Uppy is an open source project by <a class="TransloaditBar-link" href="https://transloadit.com/" target="_blank">Transloadit</a></span> -->
+          <img width="24" height="16" src="/images/ua-flag.svg" alt="Flag of Ukraine">
+          &nbsp;
+          We stand with the brave people of Ukraine. Stop the war. Find out&nbsp;<a class="TransloaditBar-link" href="https://transloadit.com/blog/2022/02/ukraine" target="_blank" rel="noopener">how you can help.</a>
         </div>
       </div>
 
@@ -57,7 +57,7 @@ if (page.series) {
         <span id="logo" class="MainLogo">
           <a class="MainLogo-link" href="/"><%- config.title %></a>
           <!-- Was used for 1.0, we can re-use for 2.0 or major announcements -->
-          <!-- <a class="MainLogo-version" href="/blog/2019/04/1.0/">
+          <!-- <a class="MainLogo-announcement" href="/blog/2019/04/1.0/">
             1.0
             <span class="MainLogo-emoji">
               <img src="/images/party-popper.png" srcset="/images/party-popper@2x.png 2x" alt="🎉">
@@ -107,15 +107,6 @@ if (page.series) {
 
       <!-- Twitter follow button script -->
       <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
-
-      <!--script src="//ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
-      <script>
-        WebFont.load({
-          google: {
-            families: ['Source Sans Pro:400,600', 'Roboto Mono', 'Poiret One:400']
-          }
-        });
-      </script-->
     </div>
   </body>
 </html>

website/themes/uppy/source/css/_common.scss

@@ -225,15 +225,22 @@ hr {
   font-size: 27px;
   font-family: $fontFamily-logo;
   font-weight: 700;
+  position: relative;
 
   @media #{$screen-medium} {
-    margin-right: 15px;
+    margin-right: 25px;
   }
 
   &-link {
     color: $color-primary;
   }
 
+  &-announcement {
+    position: absolute;
+    top: -10px;
+    right: -22px;
+  }
+
   // Was used for 1.0, we can re-use for 2.0 or major announcements
   // 
   // &-version {
@@ -265,9 +272,9 @@ hr {
 .TransloaditBar {
   display: block;
   padding: 5px 10px 8px;
-  background: $color-darkblue;
+  background: #0165d6;
   color: #fff;
-  font-size: 13px;
+  font-size: 15px;
   position: relative;
   z-index: 11;
   
@@ -284,7 +291,8 @@ hr {
   }
 
   &-link {
-    color: #fff;
+    // color: #fff;
+    color: #FFD700;
     font-weight: 700;
 
     &:hover {