diff --git a/index.html b/index.html index 95daf3b5..b5116b25 100644 --- a/index.html +++ b/index.html @@ -29,10 +29,8 @@ #splash-credit { position: absolute; font-size: 14px; - bottom: 0; - right: 0; - margin-right: 8px - margin-bottom: 8px + bottom: 16px; + right: 16px; } #splash-container { @@ -43,30 +41,25 @@ display: flex; align-items: flex-end; justify-content: center; + perspective: 60em; + perspective-origin: 0 -15em; + transform-style: preserve-3d; } - #mascot:not(.orz) { - margin-bottom: 2em - object-position: 2.5em 0; - } - - #mascot-temp.orz { - margin-bottom: 2em - object-position: 2.5em 0; - } - - #mascot, - #mascot-temp { + #mascot { width: calc(10em * var(--scale)); - height: calc(8em * var(--scale)); + height: calc(10em * var(--scale)); object-fit: contain; object-position: bottom; + transform: translateZ(-2em); } #throbber { display: grid; width: calc(5em * 0.5 * var(--scale)); height: calc(8em * 0.5 * var(--scale)); + margin-left: 5.1em; + z-index: 2; grid-template-rows: repeat(8, 1fr); grid-template-columns: repeat(5, 1fr); grid-template-areas: "P P . L L" @@ -100,6 +93,7 @@ } #status { + margin-top: 0.5em; line-height: 2; width: 100%; text-align: center; @@ -107,7 +101,7 @@ @media (prefers-reduced-motion) { #throbber { - animation: none; + animation: none !important; } } @@ -132,7 +126,7 @@
- +
diff --git a/src/App.scss b/src/App.scss index 5e7d3656..d5bb6469 100644 --- a/src/App.scss +++ b/src/App.scss @@ -954,8 +954,7 @@ option { &.dead { animation-name: dead; - animation-duration: 3s; - // animation-iteration-count: 1; + animation-duration: 2s; animation-iteration-count: 1; transform: rotateX(90deg) rotateY(0) rotateZ(-45deg); } diff --git a/src/assets/pleromatan_apology.png b/src/assets/pleromatan_apology.png deleted file mode 100644 index 36ad7aeb..00000000 Binary files a/src/assets/pleromatan_apology.png and /dev/null differ diff --git a/src/assets/pleromatan_apology.png b/src/assets/pleromatan_apology.png new file mode 120000 index 00000000..a7f6191f --- /dev/null +++ b/src/assets/pleromatan_apology.png @@ -0,0 +1 @@ +../../static/pleromatan_apology.png \ No newline at end of file diff --git a/src/main.js b/src/main.js index 4ccdabb9..81fa09db 100644 --- a/src/main.js +++ b/src/main.js @@ -48,16 +48,6 @@ const i18n = createI18n({ messages.setLanguage(i18n.global, currentLocale) -const splashError = (i18n, e) => { - document.querySelector('#mascot').src = (Math.floor(Math.random() * 2) > 0) - ? '/static/pleromatan_orz_fox.png' - : '/static/pleromatan_orz.png' - document.querySelector('#mascot').classList.add('orz') - document.querySelector('#throbber').classList.add('dead') - document.querySelector('#status').textContent = i18n.global.t('splash.error') - console.error('PleromaFE failed to initialize: ', e) -} - const persistedStateOptions = { paths: [ 'serverSideStorage.cache', @@ -68,6 +58,18 @@ const persistedStateOptions = { }; (async () => { + const isFox = Math.floor(Math.random() * 2) > 0 ? '_fox' : '' + + const splashError = (i18n, e) => { + const throbber = document.querySelector('#throbber') + throbber.addEventListener('animationend', () => { + document.querySelector('#mascot').src = `/static/pleromatan_orz${isFox}.png` + }) + throbber.classList.add('dead') + document.querySelector('#status').textContent = i18n.global.t('splash.error') + console.error('PleromaFE failed to initialize: ', e) + } + try { let storageError const plugins = [pushNotifications] @@ -78,6 +80,7 @@ const persistedStateOptions = { console.error('Storage error', e) storageError = e } + document.querySelector('#mascot').src = `/static/pleromatan_apology${isFox}.png` document.querySelector('#status').removeAttribute('class') document.querySelector('#status').textContent = i18n.global.t('splash.loading') document.querySelector('#splash-credit').textContent = i18n.global.t('update.art_by', { linkToArtist: 'pipivovott' }) diff --git a/static/pleromatan_apology.png b/static/pleromatan_apology.png new file mode 100644 index 00000000..36ad7aeb Binary files /dev/null and b/static/pleromatan_apology.png differ