Prevent loader clipping into site logo on splash screen

aleksis/core/frontend/components/app/Splash.vue

@@ -36,6 +36,7 @@ export default {
 
 #logo {
   width: 100%;
+  max-height: inherit;
 }
 
 #logo-container {
@@ -45,45 +46,47 @@ export default {
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
+  max-height: calc(100vh - 10vh - calc(2 * min(85px, 15vh)));
 }
 
 .lds-ellipsis {
   display: inline-block;
   position: absolute;
-  bottom: 5%;
+  bottom: 5vh;
   left: 50%;
   transform: translate(-50%);
-  width: 80px;
-  height: 80px;
+  aspect-ratio: 1;
+  height: min(15vh, 85px);
 }
 
 .lds-ellipsis div {
   position: absolute;
-  top: 33px;
-  width: 13px;
-  height: 13px;
+  top: 41.25%;
+  width: 16.25%;
+  height: 16.25%;
   border-radius: 50%;
-  background: v-bind("$vuetify.theme.currentTheme.primary");
+  aspect-ratio: 1;
+  background: {{ request.site.preferences.theme__primary }};
   animation-timing-function: cubic-bezier(0, 1, 1, 0);
 }
 
 .lds-ellipsis div:nth-child(1) {
-  left: 8px;
+  left: 10%;
   animation: lds-ellipsis1 0.6s infinite;
 }
 
 .lds-ellipsis div:nth-child(2) {
-  left: 8px;
+  left: 10%;
   animation: lds-ellipsis2 0.6s infinite;
 }
 
 .lds-ellipsis div:nth-child(3) {
-  left: 32px;
+  left: 40%;
   animation: lds-ellipsis2 0.6s infinite;
 }
 
 .lds-ellipsis div:nth-child(4) {
-  left: 56px;
+  left: 70%;
   animation: lds-ellipsis3 0.6s infinite;
 }
 
@@ -110,7 +113,7 @@ export default {
     transform: translate(0, 0);
   }
   100% {
-    transform: translate(24px, 0);
+    transform: translate(calc(0.3 * min(15vh, 85px)), 0);
   }
 }
 </style>

aleksis/core/templates/core/partials/splash_screen.html

@@ -23,6 +23,7 @@
 <style>
   #logo {
     width: 100%;
+    max-height: inherit;
   }
 
   #logo-container {
@@ -32,6 +33,7 @@
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
+    max-height: calc(100vh - 10vh - calc(2 * min(85px, 15vh)));
   }
 
   noscript {
@@ -42,40 +44,41 @@
   .lds-ellipsis {
     display: inline-block;
     position: absolute;
-    bottom: 5%;
+    bottom: 5vh;
     left: 50%;
     transform: translate(-50%);
-    width: 80px;
-    height: 80px;
+    aspect-ratio: 1;
+    height: min(15vh, 85px);
   }
 
   .lds-ellipsis div {
     position: absolute;
-    top: 33px;
-    width: 13px;
-    height: 13px;
+    top: 41.25%;
+    width: 16.25%;
+    height: 16.25%;
     border-radius: 50%;
+    aspect-ratio: 1;
     background: {{ request.site.preferences.theme__primary }};
     animation-timing-function: cubic-bezier(0, 1, 1, 0);
   }
 
   .lds-ellipsis div:nth-child(1) {
-    left: 8px;
+    left: 10%;
     animation: lds-ellipsis1 0.6s infinite;
   }
 
   .lds-ellipsis div:nth-child(2) {
-    left: 8px;
+    left: 10%;
     animation: lds-ellipsis2 0.6s infinite;
   }
 
   .lds-ellipsis div:nth-child(3) {
-    left: 32px;
+    left: 40%;
     animation: lds-ellipsis2 0.6s infinite;
   }
 
   .lds-ellipsis div:nth-child(4) {
-    left: 56px;
+    left: 70%;
     animation: lds-ellipsis3 0.6s infinite;
   }
 
@@ -102,7 +105,7 @@
       transform: translate(0, 0);
     }
     100% {
-      transform: translate(24px, 0);
+      transform: translate(calc(0.3 * min(15vh, 85px)), 0);
     }
   }