Revert "feat(pride): pride 2024 (#11213)"

This reverts commit b791c07.
mdn · Jul 1, 2024 · fe4d6e7 · fe4d6e7
1 parent 4872a86
commit fe4d6e7
Show file tree

Hide file tree

Showing 7 changed files with 7 additions and 228 deletions.
diff --git a/client/src/homepage/homepage-hero/index.scss b/client/src/homepage/homepage-hero/index.scss
@@ -57,30 +57,6 @@
     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,11 +11,12 @@ export function HomepageHero() {
           <br /> by Developers
         </h1>
         <p>
-          <span>United in love</span>
+          Documenting web technologies, including CSS, HTML, and JavaScript,
+          since 2005.
         </p>
         <Search id="hp-search" isHomepageSearch={true} />
       </section>
-      <Mandala pride={true} extraClasses="homepage-hero-bg animate-colors" />
+      <Mandala extraClasses="homepage-hero-bg" />
     </div>
   );
 }
diff --git a/client/src/ui/atoms/logo/index.scss b/client/src/ui/atoms/logo/index.scss
@@ -11,38 +11,9 @@
     margin-top: 0.3rem;
   }
 
-  #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-m,
   .logo-_ {
-    fill: url("#pride-gradient-h");
+    fill: var(--text-link);
   }
 
   .logo-text {

diff --git a/client/src/ui/atoms/logo/index.tsx b/client/src/ui/atoms/logo/index.tsx
@@ -19,36 +19,6 @@ 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>
   );
 }
diff --git a/client/src/ui/base/_themes.scss b/client/src/ui/base/_themes.scss
@@ -570,12 +570,6 @@ body,
   --mdn-background-light: #{$mdn-theme-light-background-primary};
   --mdn-background-light-grey: #{$mdn-color-neutral-10};
   --color-announcement-banner-accent: #{$mdn-color-light-theme-pink-40};
-  --pride-0: #e50000;
-  --pride-1: #e68d00;
-  --pride-2: #e6d600;
-  --pride-3: #008100;
-  --pride-4: #004cff;
-  --pride-5: #760188;
 }
 
 .light {

diff --git a/client/src/ui/molecules/mandala/index.scss b/client/src/ui/molecules/mandala/index.scss
@@ -40,122 +40,4 @@
   textPath[href="#circle5"] {
     font-size: 1rem;
   }
-
-  &.pride:not(.animate-colors) {
-    textPath {
-      opacity: 0.9;
-    }
-
-    textPath[href="#circle1"] {
-      fill: var(--pride-0);
-    }
-
-    textPath[href="#circle2"] {
-      fill: var(--pride-1);
-    }
-
-    textPath[href="#circle3"] {
-      fill: var(--pride-2);
-    }
-
-    textPath[href="#circle4"] {
-      fill: var(--pride-3);
-    }
-
-    textPath[href="#circle5"] {
-      fill: var(--pride-4);
-    }
-
-    textPath[href="#circle6"] {
-      fill: var(--pride-5);
-      font-size: 0.9rem;
-      font-weight: 500;
-    }
-  }
-
-  &.pride.animate-colors {
-    svg > text > textPath > tspan {
-      animation: mandala-color-change 50s infinite;
-      animation-timing-function: ease-in-out;
-      fill: var(--mandala-primary);
-    }
-
-    textPath[href="#circle1"] > tspan {
-      animation-delay: -15s;
-      fill: var(--mandala-accent-1);
-    }
-
-    textPath[href="#circle2"] > tspan {
-      animation-delay: -20s;
-      fill: var(--mandala-accent-2);
-    }
-
-    textPath[href="#circle3"] > tspan {
-      animation-delay: -30s;
-      fill: var(--mandala-accent-3);
-    }
-
-    textPath[href="#circle5"] > tspan {
-      animation-delay: -40s;
-      fill: var(--mandala-accent-4);
-    }
-  }
-
-  @keyframes mandala-color-change {
-    0% {
-      fill: var(--mandala-primary);
-    }
-
-    10% {
-      fill: var(--mandala-primary);
-    }
-
-    15% {
-      fill: var(--mandala-accent-1);
-    }
-
-    20% {
-      fill: var(--mandala-primary);
-    }
-
-    25% {
-      fill: var(--mandala-primary);
-    }
-
-    30% {
-      fill: var(--mandala-accent-2);
-    }
-
-    35% {
-      fill: var(--mandala-primary);
-    }
-
-    40% {
-      fill: var(--mandala-primary);
-    }
-
-    50% {
-      fill: var(--mandala-accent-3);
-    }
-
-    55% {
-      fill: var(--mandala-primary);
-    }
-
-    60% {
-      fill: var(--mandala-primary);
-    }
-
-    65% {
-      fill: var(--mandala-accent-4);
-    }
-
-    70% {
-      fill: var(--mandala-primary);
-    }
-
-    100% {
-      fill: var(--mandala-primary);
-    }
-  }
 }
diff --git a/client/src/ui/molecules/mandala/index.tsx b/client/src/ui/molecules/mandala/index.tsx
@@ -1,15 +1,9 @@
 import "./index.scss";
 
-function Mandala({
-  extraClasses = null,
-  pride = false,
-}: {
-  extraClasses?: string | null;
-  pride?: boolean;
-}) {
+function Mandala({ extraClasses = null }: { extraClasses?: string | null }) {
   return (
     <div
-      className={`mandala-container ${extraClasses || ""} ${pride ? "pride" : ""}`}
+      className={`mandala-container ${extraClasses || ""}`}
       aria-hidden="true"
     >
       <div className="mandala-translate">
@@ -131,15 +125,6 @@ function Mandala({
                 <tspan>&lt;&gt;</tspan>&lt;/&gt;
               </textPath>
             </text>
-            {pride && (
-              <text dy="70" textLength="754">
-                <textPath textLength="754" href="#circle6">
-                  <tspan>--&lt;3()</tspan>&nbsp;&nbsp; --&lt;3()&nbsp;&nbsp;
-                  <tspan>--&lt;3()</tspan>&nbsp;&nbsp; --&lt;3()&nbsp;&nbsp;
-                  <tspan>--&lt;3()</tspan>&nbsp;&nbsp; --&lt;3()&nbsp;&nbsp;
-                </textPath>
-              </text>
-            )}
           </svg>
         </div>
       </div>