cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: now page text visibility

Browse source
This commit is contained in:
Cory Dransfeldt 2024-03-08 08:55:35 -08:00
parent ce401d90fb
commit 71db7116d1
No known key found for this signature in database
8 changed files with 35 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/assets/styles/components/media-grid.css
View file

@ -24,6 +24,18 @@
position: relative;
}
.media__grid .item__wrapper.shadow picture::after {
position: absolute;
z-index: 1;
content: '';
top: 0;
left: 1px;
border-radius: calc(var(--rounded-md) * .85);
box-shadow: inset 0 -70px 50px -40px #000;
width: 100%;
height: calc(100% - 1px);
}
.media__grid a:hover img,
.media__grid a:focus img,
.media__grid a:active img {
@ -34,28 +46,21 @@
position: absolute;
z-index: 2;
padding: 0 var(--sizing-sm);
bottom: var(--sizing-sm);
width: 100%;
box-sizing: border-box;
}
.media__grid.square .item__meta-text {
bottom: var(--sizing-xs);
}
.media__grid.vertical .item__meta-text {
bottom: var(--sizing-md);
}
.media__grid .item__meta-text .header,
.media__grid .item__meta-text .subheader {
color: var(--color-lightest);
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
text-shadow: var(--color-darkest) 0 0 12px,-1px -1px 0 rgba(0,0,0,.25),1px -1px 0 rgba(0,0,0,.25),-1px 1px 0 rgba(0,0,0,.25),1px 1px 0 rgba(0,0,0,.25);
text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
}
.media__grid .item__meta-text .header {
font-weight: 700;
font-weight: var(--font-weight-bold);
}
.media__grid img {
@ -66,21 +71,23 @@
transition-duration: 300ms;
}
.media__grid.square a,
.media__grid.square .item__wrapper,
.media__grid.square img {
width: 100%;
height: 100%;
aspect-ratio: 1/1;
}
.media__grid.vertical a,
.media__grid.vertical .item__wrapper,
.media__grid.vertical img {
width: 100%;
height: auto;
}
.media__grid .item__wrapper picture {
width: 100%;
height: 100%;
position: relative;
display: flex;
}
@media screen and (min-width: 768px) {
:root {
--grid-square: repeat(4,minmax(0,1fr));