From b3330abeccdc604f2decbad12053ecd318a0d8ab Mon Sep 17 00:00:00 2001 From: Adrien Date: Sun, 21 Apr 2024 23:08:34 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20The=20loading=20spinner=20isn't?= =?UTF-8?q?=20aligned=20with=20the=20wallpaper=20on=20mobile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/assets/index.css | 42 ++++++++++++++++++++--------------------- public/index.html | 14 +++++++------- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/public/assets/index.css b/public/assets/index.css index 01cd208..34f83d3 100644 --- a/public/assets/index.css +++ b/public/assets/index.css @@ -34,7 +34,7 @@ html, body { :root { --wallpaper-pattern-height: 128px; - --spinner-height: calc(32px * 2); + --spinner-height: 5%; --window-center-pos: calc(50% + (var(--wallpaper-pattern-height) / 2) - (var(--spinner-height) / 2)); } @@ -45,109 +45,109 @@ html, body { } } /* @media (calc($wallpaper-pattern-height * 5) < height <= calc($wallpaper-pattern-height * 6)) { */ -@media (min-height: 640px) and (max-height: 768px) { +@media (min-height: 641px) and (max-height: 768px) { :root { - --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 1)); + --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 2)); } } /* @media (calc($wallpaper-pattern-height * 6) < height <= calc($wallpaper-pattern-height * 8)) { */ -@media (min-height: 768px) and (max-height: 1024px) { +@media (min-height: 769px) and (max-height: 1024px) { :root { --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 2)); } } /* @media (calc($wallpaper-pattern-height * 8) < height <= calc($wallpaper-pattern-height * 10)) { */ -@media (min-height: 1024px) and (max-height: 1280px) { +@media (min-height: 1025px) and (max-height: 1280px) { :root { --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 3)); } } /* @media (calc($wallpaper-pattern-height * 10) < height <= calc($wallpaper-pattern-height * 12)) { */ -@media (min-height: 1280px) and (max-height: 1536px) { +@media (min-height: 1281px) and (max-height: 1536px) { :root { --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 4)); } } /* @media (calc($wallpaper-pattern-height * 12) < height <= calc($wallpaper-pattern-height * 14)) { */ -@media (min-height: 1536px) and (max-height: 1792px) { +@media (min-height: 1537px) and (max-height: 1792px) { :root { --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 5)); } } /* @media (calc($wallpaper-pattern-height * 14) < height <= calc($wallpaper-pattern-height * 16)) { */ -@media (min-height: 1792px) and (max-height: 2048px) { +@media (min-height: 1793px) and (max-height: 2048px) { :root { --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 6)); } } /* @media (calc($wallpaper-pattern-height * 16) < height <= calc($wallpaper-pattern-height * 18)) { */ -@media (min-height: 2048px) and (max-height: 2304px) { +@media (min-height: 2049px) and (max-height: 2304px) { :root { --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 7)); } } /* @media (calc($wallpaper-pattern-height * 18) < height <= calc($wallpaper-pattern-height * 20)) { */ -@media (min-height: 2304px) and (max-height: 2560px) { +@media (min-height: 2305px) and (max-height: 2560px) { :root { --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 8)); } } /* @media (calc($wallpaper-pattern-height * 20) < height <= calc($wallpaper-pattern-height * 22)) { */ -@media (min-height: 2560px) and (max-height: 2816px) { +@media (min-height: 2561px) and (max-height: 2816px) { :root { --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 9)); } } /* @media (calc($wallpaper-pattern-height * 22) < height <= calc($wallpaper-pattern-height * 24)) { */ -@media (min-height: 2816px) and (max-height: 3072px) { +@media (min-height: 2817px) and (max-height: 3072px) { :root { --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 10)); } } /* @media (calc($wallpaper-pattern-height * 24) < height <= calc($wallpaper-pattern-height * 26)) { */ -@media (min-height: 3072px) and (max-height: 3328px) { +@media (min-height: 3073px) and (max-height: 3328px) { :root { --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 11)); } } /* @media (calc($wallpaper-pattern-height * 26) < height <= calc($wallpaper-pattern-height * 28)) { */ -@media (min-height: 3328px) and (max-height: 3584px) { +@media (min-height: 3329px) and (max-height: 3584px) { :root { --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 12)); } } /* @media (calc($wallpaper-pattern-height * 28) < height <= calc($wallpaper-pattern-height * 30)) { */ -@media (min-height: 3584px) and (max-height: 3840px) { +@media (min-height: 3585px) and (max-height: 3840px) { :root { --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 13)); } } /* @media (calc($wallpaper-pattern-height * 30) < height <= calc($wallpaper-pattern-height * 32)) { */ -@media (min-height: 3840px) and (max-height: 4096px) { +@media (min-height: 3841px) and (max-height: 4096px) { :root { --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 14)); } } /* @media (calc($wallpaper-pattern-height * 32) < height <= calc($wallpaper-pattern-height * 34)) { */ -@media (min-height: 4096px) and (max-height: 4352px) { +@media (min-height: 4097px) and (max-height: 4352px) { :root { --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 15)); } } /* @media (calc($wallpaper-pattern-height * 34) < height <= calc($wallpaper-pattern-height * 36)) { */ -@media (min-height: 4352px) and (max-height: 4608px) { +@media (min-height: 4353px) and (max-height: 4608px) { :root { --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 16)); } } /* @media (calc($wallpaper-pattern-height * 36) < height <= calc($wallpaper-pattern-height * 38)) { */ -@media (min-height: 4608px) and (max-height: 4864px) { +@media (min-height: 4609px) and (max-height: 4864px) { :root { --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 17)); } } /* @media (calc($wallpaper-pattern-height * 38) < height <= calc($wallpaper-pattern-height * 40)) { */ -@media (min-height: 4864px) and (max-height: 5120px) { +@media (min-height: 4865px) and (max-height: 5120px) { :root { --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 18)); } @@ -182,7 +182,7 @@ html, body { } .spinner { - height: 5%; + height: var(--spinner-height); aspect-ratio: 2; position: absolute; diff --git a/public/index.html b/public/index.html index 4caa45d..5dcbf50 100644 --- a/public/index.html +++ b/public/index.html @@ -33,19 +33,19 @@ import init from "{base_path}/assets/dioxus/beau-gosse-du-92.js"; // Ensure that everything needed to render preloader has been downloaded - // before fetching the app wasm bundle. + // before fetching the wasm bundle. window.onload=function() { init("{base_path}/assets/dioxus/beau-gosse-du-92_bg.wasm").then( wasm => { const preloader = document.getElementById("preloader"); - if (preloader !== undefined) { - preloader.style.display = 'none'; - } + if (preloader !== undefined) { + preloader.style.display = 'none'; + } - if (wasm.__wbindgen_start == undefined) { - wasm.main(); + if (wasm.__wbindgen_start == undefined) { + wasm.main(); + } } - } ); }