sam
/
minimalistic-wallpaper-collection
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
index.php
View File

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