Meow: move masonry to separate stylesheet
This commit is contained in:
parent
bde9210195
commit
c35d2a7f53
GPG key ID:
8DE0764E1809E9FC
|
|
@ -5,6 +5,8 @@ import Footer from '../components/Footer.astro';
|
||||||
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
|
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
|
||||||
import { Image } from 'astro:assets';
|
import { Image } from 'astro:assets';
|
||||||
|
|
||||||
|
import '../styles/masonry.css';
|
||||||
|
|
||||||
const imageFiles = (await Astro.glob('../assets/cat-pics/*'));
|
const imageFiles = (await Astro.glob('../assets/cat-pics/*'));
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -28,13 +30,13 @@ const imageFiles = (await Astro.glob('../assets/cat-pics/*'));
|
||||||
<div class="masonry">
|
<div class="masonry">
|
||||||
{
|
{
|
||||||
imageFiles.reverse().map((img) => (
|
imageFiles.reverse().map((img) => (
|
||||||
<div class="meow-grid">
|
<div class="masonry-grid">
|
||||||
<a href={img.default.src}>
|
<a href={img.default.src}>
|
||||||
<Image
|
<Image
|
||||||
src={img.default}
|
src={img.default}
|
||||||
width="600"
|
width="600"
|
||||||
alt="Photo of a grey cat with yellow eyes"
|
alt="Photo of a grey cat with yellow eyes"
|
||||||
class="meow-image"
|
class="masonry-image"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -57,68 +59,4 @@ const imageFiles = (await Astro.glob('../assets/cat-pics/*'));
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 10px;
|
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>
|
</style>
|
||||||
|
|
|
||||||
75
src/styles/masonry.css
Normal file
75
src/styles/masonry.css
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue