feature: pride month 2023 (#8979)

update logo m and underscore to pride flag site wide
update homepage mandala to pride colours
replace tagline on homepage with "united in love"

also includes some general improvements to mandala and logo svgs - I'll
prepare a special PR to just revert the pride changes at the end of the
month, while keeping those other changes

Co-authored-by: Florian Dieminger <[email protected]>
Co-authored-by: Claas Augner <[email protected]>

Author: 3 people

Diff for: client/src/assets/mdn-docs-logo.svg

@@ -7,6 +7,11 @@
   width: 100%;
 
   section {
+    --contrast-boost-bg: #191919;
+    --contrast-boost-shadow: 2px 2px 3px var(--contrast-boost-bg),
+      2px -2px 3px var(--contrast-boost-bg),
+      -2px -2px 3px var(--contrast-boost-bg),
+      -2px 2px 3px var(--contrast-boost-bg);
     display: flex;
     flex-direction: column;
     gap: 2rem;
@@ -47,6 +52,35 @@
     p {
       font-weight: 300;
     }
+
+    h1,
+    p {
+      text-shadow: var(--contrast-boost-shadow);
+    }
+
+    p > span {
+      font-size: 1.5rem;
+      position: relative;
+
+      &:after {
+        background: linear-gradient(
+          90deg,
+          var(--pride-0) 0%,
+          var(--pride-1) 20%,
+          var(--pride-2) 40%,
+          var(--pride-3) 60%,
+          var(--pride-4) 80%,
+          var(--pride-5) 100%
+        );
+        bottom: -0.1rem;
+        box-shadow: var(--contrast-boost-shadow);
+        content: "";
+        height: 0.15rem;
+        left: 0;
+        position: absolute;
+        right: 0;
+      }
+    }
   }
 
   .homepage-hero-bg {

Diff for: client/src/assets/mdn-logo.svg

@@ -11,12 +11,11 @@ export function HomepageHero() {
           <br /> by Developers
         </h1>
         <p>
-          Documenting web technologies, including CSS, HTML, and JavaScript,
-          since 2005.
+          <span>United in love</span>
         </p>
         <Search id="hp-search" isHomepageSearch={true} />
       </section>
-      <Mandala rotate={true} extraClasses="homepage-hero-bg" />
+      <Mandala rotate={true} pride={true} extraClasses="homepage-hero-bg" />
     </div>
   );
 }

Diff for: client/src/assets/mdn-plus-logo.svg

@@ -8,12 +8,42 @@
     height: 1.5rem;
     margin-top: 0.3rem;
   }
-}
 
-/* DARK AND HIGH CONTRACT BLACK MODE */
-.dark,
-.high-contrast-black {
+  #pride-gradient {
+    :nth-child(1) {
+      stop-color: var(--pride-0);
+    }
+
+    :nth-child(2) {
+      stop-color: var(--pride-1);
+    }
+
+    :nth-child(3) {
+      stop-color: var(--pride-2);
+    }
+
+    :nth-child(4) {
+      stop-color: var(--pride-3);
+    }
+
+    :nth-child(5) {
+      stop-color: var(--pride-4);
+    }
+
+    :nth-child(6) {
+      stop-color: var(--pride-5);
+    }
+  }
+
+  .logo-m {
+    fill: url("#pride-gradient-v");
+  }
+
+  .logo-_ {
+    fill: url("#pride-gradient-h");
+  }
+
   .logo-text {
-    fill: #fff;
+    fill: var(--text-primary);
   }
 }

Diff for: client/src/homepage/homepage-hero/index.scss

@@ -19,6 +19,36 @@ export function Logo() {
   return (
     <a href={`/${locale}/`} className="logo" aria-label="MDN homepage">
       {(plus && <MDNPlusLogo />) || (docs && <MDNDocsLogo />) || <MDNLogo />}
+      <svg width="0" height="0">
+        <defs>
+          <linearGradient id="pride-gradient">
+            <stop offset="0" />
+            <stop offset=".2" />
+            <stop offset=".4" />
+            <stop offset=".6" />
+            <stop offset=".8" />
+            <stop offset="1" />
+          </linearGradient>
+          <linearGradient
+            href="#pride-gradient"
+            id="pride-gradient-v"
+            x1="0"
+            x2="0"
+            y1="0"
+            y2="1"
+            gradientUnits="objectBoundingBox"
+          />
+          <linearGradient
+            href="#pride-gradient"
+            id="pride-gradient-h"
+            x1="0"
+            x2="1"
+            y1="0"
+            y2="0"
+            gradientUnits="objectBoundingBox"
+          />
+        </defs>
+      </svg>
     </a>
   );
 }