feature: pride month 2023

client/src/homepage/homepage-hero/index.scss

@@ -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 {

client/src/homepage/homepage-hero/index.tsx

@@ -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>
   );
 }

client/src/ui/atoms/logo/index.scss

@@ -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);
   }
 }

client/src/ui/atoms/logo/index.tsx

@@ -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>
   );
 }