Update mdn developer whatsnew page

- Fix regression in text color - Remove mandala animation (cpu-intensive) and accent colors (distracting)
mozilla · Jan 9, 2025 · eabc80c · eabc80c
1 parent 9e2aca2
commit eabc80c
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 128 deletions.
diff --git a/bedrock/firefox/templates/firefox/developer/whatsnew-mdnplus.html b/bedrock/firefox/templates/firefox/developer/whatsnew-mdnplus.html
@@ -35,8 +35,8 @@ <h1 class="c-mdn-header-title">{{ ftl('developer-mdnplus-more-mdn-your-mdn') }}<
     </div>
 
     <div class="mandala-wrapper">
-      <div id="mandala" class="mandala-container animate-colors" aria-hidden="true">
-        <div class="mandala-translate mandala-rotate">
+      <div id="mandala" class="mandala-container" aria-hidden="true">
+        <div>
           <svg width="675" height="675" viewBox="0 0 675 675" fill="none" xmlns="http://www.w3.org/2000/svg" class="mandala">
             <defs>
               <path d="M337.5,337.5 m-320,0 a320,320 0 1,1 640,0 a320,320 0 1,1 -640,0" id="circle1"></path>

diff --git a/media/css/firefox/developer/whatsnew-mdnplus.scss b/media/css/firefox/developer/whatsnew-mdnplus.scss
@@ -19,7 +19,6 @@ $image-path: '/media/protocol/img';
         h3,
         h4 {
             @include font-base;
-            color: $color-black;
         }
     }
 }
@@ -79,131 +78,6 @@ $image-path: '/media/protocol/img';
     transform: translate(12rem, -8rem);
 
     --mandala-primary: #{$color-dark-gray-10};
-    --mandala-accent-1: #{$color-violet-30};
-    --mandala-accent-2: #{$color-yellow-30};
-    --mandala-accent-3: #{$color-green-30};
-    --mandala-accent-4: #{$color-red-20};
-    --mandala-accent-5: #{$color-light-gray-30};
-
-    @keyframes rotation {
-        from { transform: rotate(0deg); }
-        to { transform: rotate(360deg); }
-    }
-
-    @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);
-        }
-    }
-
-    &.animated {
-        .mandala-rotate > svg {
-            .mandala-accent-1 {
-                animation: rotation 505s linear infinite;
-            }
-
-            .mandala-accent-2 {
-                animation: rotation 480s linear infinite reverse;
-            }
-
-            .mandala-accent-3 {
-                animation: rotation 515s linear infinite;
-            }
-
-            .mandala-accent-4 {
-                animation: rotation 425s linear infinite reverse;
-            }
-
-            .mandala-accent-5 {
-                animation: rotation 415s linear infinite;
-            }
-        }
-
-        &.animate-colors {
-            svg > text > textPath > tspan {
-                animation: mandala-color-change 50s infinite;
-                animation-timing-function: ease-in-out;
-                fill: var(--mandala-primary);
-            }
-
-            .mandala-accent-1 > textPath > tspan {
-                fill: var(--mandala-accent-1);
-                animation-delay: -15s;
-            }
-
-            .mandala-accent-2 > textPath > tspan {
-                fill: var(--mandala-accent-2);
-                animation-delay: -20s;
-            }
-
-            .mandala-accent-3 > textPath > tspan {
-                fill: var(--mandala-accent-3);
-                animation-delay: -30s;
-            }
-
-            .mandala-accent-4 > textPath > tspan {
-                fill: var(--mandala-accent-4);
-                animation-delay: -5s;
-            }
-
-            .mandala-accent-5 > textPath > tspan {
-                fill: var(--mandala-accent-4);
-                animation-delay: -40s;
-            }
-        }
-    }
 
     svg {
         font-size: 1.5rem;