commit: 82936aed382c67280a929f3738f94bc0e172d245
parent 414947d7555e99389977a8083469bab84c7b0abf
Author: Henry Jameson <me@hjkos.com>
Date: Wed, 18 Sep 2024 03:37:59 +0300
cleanup, styles, fox random, and better "animation" for orz
Diffstat:
5 files changed, 29 insertions(+), 31 deletions(-)
diff --git 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;
}
}
</style>
@@ -132,7 +126,7 @@
<div class="chunk" id="chunk-E">
</div>
</div>
- <img id="mascot" src="/static/pleromatan_apology_fox.png">
+ <img id="mascot" src="/static/pleromatan_apology.png">
</div>
<div id="status" class="css-ok">
<!-- (｡>﹏<) -->
diff --git 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
@@ -0,0 +1 @@
+../../static/pleromatan_apology.png
+\ No newline at end of file
diff --git 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/src/assets/pleromatan_apology.png b/static/pleromatan_apology.png
Binary files differ.
