chore: pride month 2023 is over :( (#9137)

reverts 776e70a, keeping the general logo/mandala svg improvements
mdn · Jul 2, 2023 · 47d75f2 · 47d75f2
1 parent 1bf2856
commit 47d75f2
Show file tree

Hide file tree

Showing 7 changed files with 7 additions and 156 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 rotate={true} pride={true} extraClasses="homepage-hero-bg" />
+      <Mandala rotate={true} extraClasses="homepage-hero-bg" />
     </div>
   );
 }
diff --git a/client/src/ui/atoms/logo/index.scss b/client/src/ui/atoms/logo/index.scss
@@ -9,38 +9,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
@@ -408,12 +408,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
@@ -73,38 +73,6 @@
     }
   }
 
-  &.pride {
-    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;
-    }
-  }
-
   @keyframes rotation {
     from {
       transform: rotate(0deg);

diff --git a/client/src/ui/molecules/mandala/index.tsx b/client/src/ui/molecules/mandala/index.tsx
@@ -4,20 +4,18 @@ function Mandala({
   animate = false,
   animateColors = false,
   rotate = false,
-  pride = false,
   extraClasses = null,
 }: {
   animate?: boolean;
   animateColors?: boolean;
   rotate?: boolean;
-  pride?: boolean;
   extraClasses?: string | null;
 }) {
   return (
     <div
       className={`mandala-container ${animateColors ? "animate-colors" : ""} ${
-        pride ? "pride" : ""
-      } ${extraClasses || ""}`}
+        extraClasses || ""
+      }`}
       aria-hidden="true"
     >
       <div
@@ -118,24 +116,6 @@ function Mandala({
                   />
                 )}
               </path>
-              {pride && (
-                <path
-                  d="M337.5,337.5 m-120,0 a120,120 0 1,1 240,0 a120,120 0 1,1 -240,0"
-                  id="circle6"
-                >
-                  {animate && (
-                    <animateTransform
-                      attributeName="transform"
-                      begin="0s"
-                      dur="500s"
-                      type="rotate"
-                      from="360 337.5 337.5"
-                      to="0 337.5 337.5"
-                      repeatCount="indefinite"
-                    />
-                  )}
-                </path>
-              )}
             </defs>
             <text dy="70" textLength="2010">
               <textPath textLength="2010" href="#circle1">
@@ -223,15 +203,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>