Use data- attribute instead of class

client/scss/components/_logo.scss

@@ -9,7 +9,9 @@
 }
 
 .logo {
-    display: block;
+    display: flex;
+    align-items: center;
+    padding: 0.6em 1.2em;
     color: #aaa;
     -webkit-font-smoothing: auto;
     position: relative;
@@ -18,39 +20,23 @@
         color: $color-white;
     }
 
-    @include media-breakpoint-down(xs) {
-        padding: 0 1.2em;
-        margin: 0.9em 0;
-        height: 28px;
-        position: relative;
-        display: flex;
-        align-items: center;
-    }
-
-    // Desktop styling (override mobile styling):
     @include media-breakpoint-up(sm) {
+        display: block;
         margin: 2em auto;
         text-align: center;
     }
 }
 
 .wagtail-logo-container__mobile {
-    position: relative;
     margin-right: 10px;
     background-color: #555;
     border-radius: 50%;
     padding: 5px 7.5px;
 
     .wagtail-logo {
+        width: 20px;
         float: left;
-        width: 20px;
         border: 0;
-        margin-right: 1em;
-    }
-
-    .wagtail-logo-container-inner {
-        width: 20px;
-        height: 25px;
     }
 }
 
@@ -61,6 +47,7 @@
     background-color: #555;
     border-radius: 50%;
     margin: 0 auto;
+    transition: all 0.25s cubic-bezier(0.28, 0.15, 0, 2.1);
 
     .page404__bg & {
         background-color: transparent;
@@ -71,6 +58,12 @@
         height: 100px;
         margin: auto;
         position: relative;
+
+        .page404__bg & {
+            width: auto;
+            height: auto;
+            position: static;
+        }
     }
 
     .wagtail-logo {
@@ -80,7 +73,7 @@
         width: 100%;
         height: 100%;
         position: absolute;
-        transition: all 0.25s cubic-bezier(0.28, 0.15, 0, 2.1);
+        transition: inherit;
 
         &.wagtail-logo__eye--open {
             // stylelint-disable-next-line declaration-no-important

wagtail/admin/static_src/wagtailadmin/js/core.js

@@ -122,7 +122,7 @@ $(function() {
     function initLogo() {
         var sensitivity = 8; // the amount of times the user must stroke the wagtail to trigger the animation
 
-        var $logoContainer = $('.animated-logo-container');
+        var $logoContainer = $('[data-animated-logo-container]');
         var mouseX = 0;
         var lastMouseX = 0;
         var dir = '';

wagtail/admin/templates/wagtailadmin/404.html

@@ -14,9 +14,7 @@
     <div class="page404__bg">
         <div class="page404__wrapper">
             {% block branding_logo %}
-                <div class="wagtail-logo-container__desktop animated-logo-container u-hidden@xs">
-                    {% include "wagtailadmin/shared/animated_logo.html" %}
-                </div>
+                {% include "wagtailadmin/shared/animated_logo.html" %}
             {% endblock %}
 
             <div class="page404__text-container">

wagtail/admin/templates/wagtailadmin/base.html

@@ -8,17 +8,11 @@
                 {% block branding_logo %}
                     {# Mobile-only logo: #}
                     <div class="wagtail-logo-container__mobile u-hidden@sm">
-                        <div class="wagtail-logo-container-inner">
-                          <img class="wagtail-logo wagtail-logo__full" src="{% versioned_static 'wagtailadmin/images/wagtail-logo.svg' %}" alt="Wagtail" width="80" />
-                        </div>
+                        <img class="wagtail-logo wagtail-logo__full" src="{% versioned_static 'wagtailadmin/images/wagtail-logo.svg' %}" alt="" width="80" />
                     </div>
 
                     {# Desktop logo (animated): #}
-                    <div class="wagtail-logo-container__desktop animated-logo-container u-hidden@xs">
-                        <div class="wagtail-logo-container-inner">
-                            {% include "wagtailadmin/shared/animated_logo.html" %}
-                        </div>
-                    </div>
+                    {% include "wagtailadmin/shared/animated_logo.html" %}
                 {% endblock %}
                 <span class="u-hidden@sm">{% trans "Dashboard" %}</span>
             </a>

wagtail/admin/templates/wagtailadmin/shared/animated_logo.html

@@ -1,6 +1,10 @@
 {% load wagtailadmin_tags %}
 
-<img class="wagtail-logo wagtail-logo__body" src="{% versioned_static 'wagtailadmin/images/logo-body.svg' %}" alt=""/>
-<img class="wagtail-logo wagtail-logo__tail" src="{% versioned_static 'wagtailadmin/images/logo-tail.svg' %}" alt="" />
-<img class="wagtail-logo wagtail-logo__eye--open" src="{% versioned_static 'wagtailadmin/images/logo-eyeopen.svg' %}" alt="" />
-<img class="wagtail-logo wagtail-logo__eye--closed" src="{% versioned_static 'wagtailadmin/images/logo-eyeclosed.svg' %}" alt="" />
+<div class="wagtail-logo-container__desktop u-hidden@xs" data-animated-logo-container>
+    <div class="wagtail-logo-container-inner">
+        <img class="wagtail-logo wagtail-logo__body" src="{% versioned_static 'wagtailadmin/images/logo-body.svg' %}" alt=""/>
+        <img class="wagtail-logo wagtail-logo__tail" src="{% versioned_static 'wagtailadmin/images/logo-tail.svg' %}" alt="" />
+        <img class="wagtail-logo wagtail-logo__eye--open" src="{% versioned_static 'wagtailadmin/images/logo-eyeopen.svg' %}" alt="" />
+        <img class="wagtail-logo wagtail-logo__eye--closed" src="{% versioned_static 'wagtailadmin/images/logo-eyeclosed.svg' %}" alt="" />
+    </div>
+</div>