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

Meow: move masonry to separate stylesheet

Browse source
This commit is contained in:
Akemi Izuko 2024-01-01 17:32:46 -07:00
parent bde9210195
commit c35d2a7f53
Signed by: akemi
GPG key ID: 8DE0764E1809E9FC
2 changed files with 79 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
src/pages/meow.astro
View file

@ -5,6 +5,8 @@ import Footer from '../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
import { Image } from 'astro:assets';
import '../styles/masonry.css';
const imageFiles = (await Astro.glob('../assets/cat-pics/*'));
---
@ -28,13 +30,13 @@ const imageFiles = (await Astro.glob('../assets/cat-pics/*'));
<div class="masonry">
{
imageFiles.reverse().map((img) => (
<div class="meow-grid">
<div class="masonry-grid">
<a href={img.default.src}>
<Image
src={img.default}
width="600"
alt="Photo of a grey cat with yellow eyes"
class="meow-image"
class="masonry-image"
/>
</a>
</div>
@ -57,68 +59,4 @@ const imageFiles = (await Astro.glob('../assets/cat-pics/*'));
text-align: center;
margin: 10px;
}
.masonry {
column-gap: 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 {
display: grid;
grid-template-rows: 1fr auto;
margin-bottom: 10px;
break-inside: avoid;
}
.meow-image {
display: block;
max-width: 100%;
border-radius: 30px;
grid-row: 1 / -1;
grid-column: 1;
animation: float-rev 1s ease-in-out;
}
.meow-image:hover {
box-shadow: 0px 10px 60px -10px;
transform: translatey(-10px);
cursor: pointer;
animation: float 1s ease-in-out;
}
@keyframes float {
0% {
box-shadow: 0px 10px 60px -10px rgba(0,0,0,0);
transform: translatey(0px);
}
100% {
box-shadow: 0px 10px 60px -10px rgba(0,0,0,1);
transform: translatey(-10px);
}
}
@keyframes float-rev {
0% {
box-shadow: 0px 10px 60px -10px rgba(0,0,0,1);
transform: translatey(-10px);
}
100% {
box-shadow: 0px 10px 60px -10px rgba(0,0,0,0);
transform: translatey(0px);
}
}
</style>

75
src/styles/masonry.css Normal file
View file

@ -0,0 +1,75 @@
/*
* >>>> Masonry Styles <<<<
*
* This stylesheet creates a pinterest-like layout, intended for images. This
* is currently used for the cat-pictures page.
*
* The parent div with the masonry must have the class ".masonry".
*/
.masonry {
column-gap: 10px;
margin: 10px;
}
@media (min-width: 1100px) {
.masonry {
column-count: 4;
}
}
@media (max-width: 1099px) and (min-width: 800px) {
.masonry {
column-count: 3;
}
}
@media (max-width: 799px) and (min-width: 400px) {
.masonry {
column-count: 2;
}
}
@media (max-width: 399px) {
.masonry {
column-count: 1;
}
}
.masonry .masonry-grid {
display: grid;
grid-template-rows: 1fr auto;
margin-bottom: 10px;
break-inside: avoid;
}
.masonry .masonry-image {
display: block;
max-width: 100%;
border-radius: 30px;
grid-row: 1 / -1;
grid-column: 1;
animation: float-rev 1s ease-in-out;
}
@media (min-width: 800px) {
/* Doesn't do hover effect if there are fewer than 3 columns */
.masonry .masonry-image:hover {
box-shadow: 0px 10px 60px -10px;
transform: translatey(-10px);
cursor: pointer;
animation: float 1s ease-in-out;
}
}
@keyframes float {
0% {
box-shadow: 0px 10px 60px -10px rgba(0,0,0,0);
transform: translatey(0px);
}
100% {
box-shadow: 0px 10px 60px -10px rgba(0,0,0,1);
transform: translatey(-10px);
}
}
@keyframes float-rev {
0% {
box-shadow: 0px 10px 60px -10px rgba(0,0,0,1);
transform: translatey(-10px);
}
100% {
box-shadow: 0px 10px 60px -10px rgba(0,0,0,0);
transform: translatey(0px);
}
}