Revert to using old logo (#13343)

mozilla · Jul 4, 2023 · 5f7d78b · 5f7d78b
1 parent 2a319a6
commit 5f7d78b
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 56 deletions.
diff --git a/bedrock/firefox/templates/firefox/challenge-the-default/landing.html b/bedrock/firefox/templates/firefox/challenge-the-default/landing.html
@@ -37,52 +37,27 @@
   {{ download_firefox_thanks(button_class='not-firefox', alt_copy='Jetzt Firefox wählen') }}
 {% endset %}
 
-{% set ctd_logo %}
-  <svg class="ctd-animated-logo" xmlns="http://www.w3.org/2000/svg" width="500" height="200"
-    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 200" shape-rendering="geometricPrecision"
-    text-rendering="geometricPrecision">
-    <g>
-      <path class="word-wrapper"
-        d="M305.726,29.345681v-30.235162h-305.608812L-0.773815,44.0212l.891003,8.3642v58.1876h305.608812v-14.5883l.331092-51.9635L305.726,29.345681Z"
-        transform="translate(97.078406 43.802059)" fill="#1a1a1a" />
-      <g class="challenge-outer" transform="translate(245.93008,71.656782)">
-        <g class="challenge-inner" transform="scale(0,0)">
-          <path
-            d="M49.7169,52.3825c-8.6062,0-14.3054-6.3877-14.3054-14.3436c0-8.1471,6.0817-14.3436,14.3054-14.3436c5.3931,0,9.9448,2.754,12.4311,6.8849l-5.8522,3.7103c-1.2623-2.4863-3.4807-4.0545-6.5407-4.0545-4.4369,0-7.5352,3.4807-7.5352,7.8029c0,4.2457,3.0218,7.7264,7.4587,7.7264c3.3277,0,5.6227-1.9125,6.7702-4.5517l6.1582,3.2895c-2.3715,4.6282-6.9232,7.8794-12.8901,7.8794ZM80.5281,52v-10.7481h-9.1417v10.7481h-6.6936v-27.9222h6.6936v10.5951h9.1417v-10.5951h6.6936v27.9222h-6.6936Zm8.3103,0L99.1658,24.0778h6.4262L115.919,52h-6.77l-1.454-4.1692h-10.6712L95.5703,52h-6.7319ZM102.379,32.6457l-3.2897,9.3712h6.5787l-3.289-9.3712ZM117.512,52v-27.9222h6.693v21.5345h12.164v6.3877h-18.857Zm21.609,0v-27.9222h6.694v21.5345h12.163v6.3877h-18.857Zm21.61,0v-27.9222h19.277v6.1964h-12.622v4.59h12.622v6.1964h-12.622v4.743h12.622v6.1964h-19.277Zm22.543,0v-27.9222h6.961l10.519,16.7533v-16.7533h6.349v27.9222h-6.464L189.662,34.4435v17.5565h-6.388Zm41.25.3825c-9.103,0-14.65-6.6172-14.65-14.3436c0-8.1089,5.967-14.3436,14.382-14.3436c5.355,0,9.295,2.2185,11.934,5.6227l-5.584,3.9397c-1.339-2.0655-3.481-3.2512-6.312-3.2512-4.322,0-7.764,3.4425-7.764,8.0324c0,4.743,3.251,7.9942,7.879,7.9942c3.213,0,5.47-1.6065,6.426-4.3605h-7.765v-6.1964h14.994v3.1747c0,7.3822-5.469,13.7316-13.54,13.7316ZM240.911,52v-27.9222h19.278v6.1964h-12.622v4.59h12.622v6.1964h-12.622v4.743h12.622v6.1964h-19.278Z"
-            transform="translate(-147.800247,-38.038899)" fill="#fff" />
-        </g>
-      </g>
-      <g class="the-outer" transform="translate(297.72629,117.553637)">
-        <g class="the-inner" transform="scale(0,0)">
-          <path
-            d="M128.065,87v-27.9222h9.907c8.683,0,14.535,6.0434,14.535,13.9611c0,7.9559-6.12,13.9611-14.42,13.9611h-10.022Zm9.601-21.7258h-2.945v15.4911h3.06c4.896,0,7.994-3.4042,7.994-7.7264c0-4.3987-2.869-7.7647-8.109-7.7647ZM155.278,87v-27.9222h19.278v6.1964h-12.623v4.59h12.623v6.1964h-12.623v4.743h12.623v6.1964h-19.278Zm22.543,0v-27.9222h19.202v6.2729h-12.546v5.039214l12.546-.066714v6.1582h-12.546v10.5186h-6.656Zm18.169,0l10.328-27.9222h6.426L223.071,87h-6.77l-1.454-4.1692h-10.671L202.722,87h-6.732Zm13.541-19.3543l-3.29,9.3712h6.579l-3.289-9.3712Zm24.621,19.7368c-6.884,0-11.283-4.131-11.283-11.3601v-16.9446h6.77v16.9446c0,3.0982,1.759,4.8577,4.475,4.8577c2.678,0,4.552-1.7595,4.552-4.8577v-16.9446h6.77v16.9446c0,7.2291-4.399,11.3601-11.284,11.3601ZM248.776,87v-27.9222h6.693v21.5345h12.164v6.3877h-18.857Zm22.411,0v-21.764h-7.573v-6.1582h21.572v6.1582h-7.497v21.764h-6.502Z"
-            transform="translate(-206.625504,-73.23015)" fill="#fff" />
-        </g>
-      </g>
-      <g class="default-outer" transform="translate(180.024998,125.638101)">
-        <g class="default-inner" transform="scale(0,0)">
-          <path
-            d="M46.1799,87v-21.764h-7.5734v-6.1582h21.5727v6.1582h-7.4969v21.764h-6.5024Zm32.7584,0v-10.7481h-9.1417v10.7481h-6.6937v-27.9222h6.6937v10.5951h9.1417v-10.5951h6.6936v27.9222h-6.6936Zm10.1445,0v-27.9222h19.2782v6.1964h-12.6228l.274892,4.3987l12.347908.1913v6.1964h-12.6228v4.743h12.6228v6.1964h-19.2782Z"
-            transform="translate(-73.483749,-73.0389)" fill="#fff" />
-        </g>
-      </g>
-    </g>
-  </svg>
-{% endset %}
-
 {% block content %}
 <main class="firefox-home">
   <div class="ctd-mobile-banner">
     {{ resp_img(
-      url='img/firefox/challenge-the-default/logo-firefox.svg',
+        url='img/firefox/challenge-the-default/logo-firefox.svg',
         optional_attributes={
           'loading': 'eager',
           'height': '24',
           'class': 'ctd-sub-nav-image',
           'alt': 'Firefox'
       })
     }}
-    {{ ctd_logo }}
+    {{ resp_img(
+        url='img/firefox/challenge-the-default/logo-ctd.svg',
+        optional_attributes={
+          'loading': 'eager',
+          'height': '24',
+          'class': 'ctd-sub-nav-image',
+          'alt': 'Challenge the Default'
+        }
+    ) }}
   </div>
   <section class="ctd-hero-wrapper">
     <div class="hidden hero-easter-egg">
@@ -174,7 +149,14 @@
                   'class': 'firefox-logo'
                 })
               }}
-              {{ ctd_logo }}
+              {{ resp_img(
+                url='img/firefox/challenge-the-default/logo-ctd.svg',
+                optional_attributes={
+                  'loading': 'eager',
+                  'alt': 'Challenge the default',
+                  'class': 'ctd-logo'
+                })
+              }}
           </div>
           <div class="c-hero-top-controls" aria-hidden="true">
               <span class="hero-control-btn minimize"></span>
@@ -486,7 +468,13 @@ <h3>Zusammen ist man weniger allein</h3>
         <circle cx="719.996" cy="123" r="283" fill="#2AC3A2" />
       </svg>
       <button class="animated-button">
-          {{ ctd_logo }}
+          {{ resp_img(
+            url='img/firefox/challenge-the-default/logo-ctd.svg',
+            optional_attributes={
+              'loading': 'lazy',
+              'alt': 'Challenge the default'
+           })
+          }}
       </button>
       {{ resp_img(
           url='img/firefox/challenge-the-default/is-wednesday.png',

diff --git a/media/css/firefox/challenge-the-default/_hero.scss b/media/css/firefox/challenge-the-default/_hero.scss
@@ -58,7 +58,7 @@ $campaign-red: #ff6a75;
 
             img {
                 max-height: 100%;
-                margin-right: -20px;
+                margin-right: $spacing-md;
             }
 
             .ctd-animated-logo {
@@ -77,18 +77,18 @@ $campaign-red: #ff6a75;
                 padding: 10px $spacing-md;
 
                 &.active {
-                    .firefox-logo, .ctd-animated-logo {
+                    .firefox-logo, .ctd-logo {
                         opacity: 1;
                         transform: scale(1);
                     }
 
-                    .ctd-animated-logo {
+                    .ctd-logo {
                         transition-delay: .25s;
                     }
                 }
 
                 @media (prefers-reduced-motion: no-preference) {
-                    .firefox-logo, .ctd-animated-logo {
+                    .firefox-logo, .ctd-logo {
                         transform: scale(0.25);
                         opacity: 0;
                         transition: all .25s ease-in-out;

diff --git a/media/js/firefox/challenge-the-default/animate-pop-in.es6.js b/media/js/firefox/challenge-the-default/animate-pop-in.es6.js
@@ -26,14 +26,11 @@ function createObserver() {
                 } else if (heroSection.contains(entry.target)) {
                     const heroWrapper =
                         entry.target.querySelector('.hero-wrapper');
-                    const ctdLogo =
-                        entry.target.querySelector('.ctd-animated-logo');
                     const imageWrapper =
                         entry.target.querySelector('.c-hero-top-images');
                     heroWrapper.classList.add('animate-pop-in');
                     heroWrapper.addEventListener('animationend', function () {
                         imageWrapper.classList.add('active');
-                        ctdLogo.classList.add('animate-active');
                     });
                 } else if (
                     entry.target.classList.contains('ctd-animated-logo')
@@ -73,18 +70,6 @@ function init() {
         });
 
         observer.observe(heroSection);
-
-        const logo = document.querySelector(
-            '.c-animated-button .ctd-animated-logo'
-        );
-
-        const mobileLogo = document.querySelector(
-            '.ctd-mobile-banner .ctd-animated-logo'
-        );
-
-        // add animated logo to only animate while in view
-        observer.observe(logo);
-        observer.observe(mobileLogo);
     }
 }