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]>
mdn · May 31, 2023 · 776e70a · 776e70a
1 parent 458dd5b
commit 776e70a
Show file tree

Hide file tree

Showing 10 changed files with 187 additions and 27 deletions.
diff --git a/client/src/assets/mdn-docs-logo.svg b/client/src/assets/mdn-docs-logo.svg
diff --git a/client/src/assets/mdn-logo.svg b/client/src/assets/mdn-logo.svg
diff --git a/client/src/assets/mdn-plus-logo.svg b/client/src/assets/mdn-plus-logo.svg
diff --git a/client/src/homepage/homepage-hero/index.scss b/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 {

diff --git a/client/src/homepage/homepage-hero/index.tsx b/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>
   );
 }
diff --git a/client/src/ui/atoms/logo/index.scss b/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);
   }
 }
diff --git a/client/src/ui/atoms/logo/index.tsx b/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>
   );
 }