akemi/noway.moe
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Meow: make mobile responsive

Browse source
This commit is contained in:
Akemi Izuko 2024-01-01 17:24:20 -07:00
parent 3ab97c54d2
commit bde9210195
Signed by: akemi
GPG key ID: 8DE0764E1809E9FC
1 changed files with 22 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/pages/meow.astro
View file

@ -25,7 +25,7 @@ const imageFiles = (await Astro.glob('../assets/cat-pics/*'));
</p> </p>
<hr class="m-4" style="border: 1px solid black;" /> <hr class="m-4" style="border: 1px solid black;" />
</div> </div>
<div class="masonary"> <div class="masonry">
{ {
imageFiles.reverse().map((img) => ( imageFiles.reverse().map((img) => (
<div class="meow-grid"> <div class="meow-grid">
@ -57,11 +57,30 @@ const imageFiles = (await Astro.glob('../assets/cat-pics/*'));
text-align: center; text-align: center;
margin: 10px; margin: 10px;
} }
.masonary { .masonry {
column-count: 4;
column-gap: 10px; column-gap: 10px;
margin: 10px; margin: 10px;
} }
@media (min-width: 1100px) {
.masonry {
column-count: 4;
}
}
@media (max-width: 1099px) and (min-width: 900px) {
.masonry {
column-count: 3;
}
}
@media (max-width: 899px) and (min-width: 400px) {
.masonry {
column-count: 2;
}
}
@media (max-width: 399px) {
.masonry {
column-count: 1;
}
}
.meow-grid { .meow-grid {
display: grid; display: grid;
grid-template-rows: 1fr auto; grid-template-rows: 1fr auto;