diff --git a/aleksis/core/frontend/components/app/Splash.vue b/aleksis/core/frontend/components/app/Splash.vue index 27494b0bbfb06e8b2255cfcf0a93163c87494282..8f287071a8f59bd18e9983f77aca9235cfd41d20 100644 --- a/aleksis/core/frontend/components/app/Splash.vue +++ b/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> diff --git a/aleksis/core/templates/core/partials/splash_screen.html b/aleksis/core/templates/core/partials/splash_screen.html index a17fe9ef965d318b3a4ca28a6f1addd1bfba79be..f3491141c1d0bb48b1b767e382ce66ff87239936 100644 --- a/aleksis/core/templates/core/partials/splash_screen.html +++ b/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); } }