Devin Haska
1a1af8b9a9
All checks were successful
Build and Deploy / build_and_deploy (push) Successful in 1m33s
Reviewed-on: #5 Co-authored-by: Devin Haska <wonderfulfrog@noreply.git.cloud.haska.me> Co-committed-by: Devin Haska <wonderfulfrog@noreply.git.cloud.haska.me>
101 lines
1.6 KiB
CSS
101 lines
1.6 KiB
CSS
.media-grid {
|
|
--column-count: 5;
|
|
--aspect-ratio: 0.67;
|
|
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
|
|
grid-gap: var(--spacing-2);
|
|
|
|
li {
|
|
aspect-ratio: var(--aspect-ratio);
|
|
display: grid;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
a {
|
|
display: block;
|
|
color: var(--color-white);
|
|
|
|
picture {
|
|
height: 100%;
|
|
border-radius: 0;
|
|
}
|
|
|
|
img {
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.text-only {
|
|
aspect-ratio: var(--aspect-ratio);
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
.meta {
|
|
background: linear-gradient(transparent, var(--color-shadow) 90%);
|
|
bottom: 0;
|
|
height: 100%;
|
|
position: absolute;
|
|
transition: opacity 0.3s ease;
|
|
width: 100%;
|
|
|
|
.meta-text {
|
|
text-shadow: 1px 1px 2px var(--color-black);
|
|
transition: transform 0.3s var(--transition-bounce);
|
|
}
|
|
}
|
|
}
|
|
|
|
.media-grid--square {
|
|
--aspect-ratio: 1;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.media-grid {
|
|
li {
|
|
a {
|
|
.meta {
|
|
opacity: 0;
|
|
|
|
.meta-text {
|
|
transition-delay: 0.05s;
|
|
transform: translateY(var(--spacing-4));
|
|
}
|
|
}
|
|
}
|
|
|
|
a:hover {
|
|
img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.meta {
|
|
opacity: 1;
|
|
|
|
.meta-text {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.media-grid.square {
|
|
--aspect-ratio: 1;
|
|
}
|
|
|
|
@container (max-width: 32rem) {
|
|
.media-grid {
|
|
--column-count: 3;
|
|
}
|
|
}
|
|
|
|
@container (max-width: 24rem) {
|
|
.media-grid {
|
|
--column-count: 2;
|
|
}
|
|
}
|