wonderfulfrog/wonderfulfrog.com
1
0
Fork 0
Code Pull requests Activity Actions

feat: move all css to includes dir

Browse source
This commit is contained in:
Devin Haska 2025-03-16 11:55:36 -07:00
parent 408e859ef4
commit 6a84af0c37
29 changed files with 4 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

100
src/css/blocks/media-grid.css
View file

@ -1,100 +0,0 @@
.media-grid {
--column-count: 5;
--aspect-ratio: 0.67;
display: grid;
grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
li {
border: 1px solid var(--color-shadow);
overflow: hidden;
position: relative;
a {
color: var(--color-white);
picture {
height: 100%;
img {
aspect-ratio: var(--aspect-ratio);
border-radius: 0;
width: 100%;
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-1));
}
}
}
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;
}
}