fix(site): improve loading animation, hide alt text on Firefox while loading (#65)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Jonah Lawrence 2022-08-25 09:07:25 -06:00 committed by GitHub
parent 04b2898989
commit bae7cf4a54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 9 deletions

View File

@ -94,7 +94,7 @@ if (isset($_GET['random'])) {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 1em;
width: 95vw;
width: 95%;
max-width: 1200px;
margin: auto;
}
@ -127,20 +127,17 @@ if (isset($_GET['random'])) {
}
.gallery img.loading {
background:
linear-gradient(0.25turn, transparent, #3c3c3c, transparent),
linear-gradient(#2c2c2c, #2c2c2c),
radial-gradient(38px circle at 19px 19px, #2c2c2c 50%, transparent 51%),
linear-gradient(#2c2c2c, #2c2c2c);
aspect-ratio: 16 / 9;
color: transparent;
background: linear-gradient(0.25turn, transparent, #3c3c3c, transparent), linear-gradient(#2c2c2c, #2c2c2c);
background-repeat: no-repeat;
background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px;
background-position: -315px 0, 0 0, 0px 190px, 50px 195px;
background-position: -315px 0, 0 0;
animation: loading 1.5s infinite;
}
@keyframes loading {
to {
background-position: 315px 0, 0 0, 0 190px, 50px 195px;
background-position: 315px 0, 0 0;
}
}
</style>