Adrien/beau-gosse-du-92
1
0
Fork 0
Code Issues 2 Pull Requests 1 Packages Projects Releases Wiki Activity

🐛 The loading spinner isn't aligned with the wallpaper on mobile

Browse Source
This commit is contained in:
Adrien
2024-04-21 23:08:34 +02:00
parent eecb46e4b8
commit b3330abecc
2 changed files with 28 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
public/assets/index.css
View File

@@ -34,7 +34,7 @@ html, body {
:root { :root {
--wallpaper-pattern-height: 128px; --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)); --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 (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 { :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 (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 { :root {
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 2)); --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 (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 { :root {
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 3)); --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 (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 { :root {
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 4)); --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 (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 { :root {
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 5)); --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 (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 { :root {
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 6)); --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 (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 { :root {
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 7)); --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 (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 { :root {
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 8)); --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 (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 { :root {
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 9)); --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 (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 { :root {
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 10)); --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 (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 { :root {
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 11)); --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 (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 { :root {
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 12)); --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 (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 { :root {
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 13)); --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 (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 { :root {
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 14)); --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 (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 { :root {
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 15)); --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 (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 { :root {
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 16)); --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 (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 { :root {
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 17)); --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 (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 { :root {
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 18)); --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 18));
} }
@@ -182,7 +182,7 @@ html, body {
} }
.spinner { .spinner {
height: 5%; height: var(--spinner-height);
aspect-ratio: 2; aspect-ratio: 2;
position: absolute; position: absolute;

2
public/index.html
View File

@@ -33,7 +33,7 @@
import init from "{base_path}/assets/dioxus/beau-gosse-du-92.js"; import init from "{base_path}/assets/dioxus/beau-gosse-du-92.js";
// Ensure that everything needed to render preloader has been downloaded // Ensure that everything needed to render preloader has been downloaded
// before fetching the app wasm bundle. // before fetching the wasm bundle.
window.onload=function() { window.onload=function() {
init("{base_path}/assets/dioxus/beau-gosse-du-92_bg.wasm").then( init("{base_path}/assets/dioxus/beau-gosse-du-92_bg.wasm").then(
wasm => { wasm => {