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

chore: never did like those class conventions

Browse source
This commit is contained in:
Cory Dransfeldt 2024-04-15 13:22:07 -07:00
parent 40a873a354
commit 9317a760b0
No known key found for this signature in database
63 changed files with 247 additions and 256 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,107 +3,107 @@
--grid-vertical: repeat(3,minmax(0,1fr));
}
.now__section--header {
.now-header {
margin: var(--sizing-3xl) 0 var(--sizing-lg);
}
.now__section--header-buttons {
.now-header-buttons {
margin: 0 0 var(--sizing-lg);
& > button {
margin-bottom: var(--sizing-sm) !important;
&:last-of-type {
margin-right: 0 !important;
}
}
}
.now__section--header-wrapper {
.now-header-wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.now__section--header-buttons > button {
margin-bottom: var(--sizing-sm) !important;
}
.now__section--header-buttons > button:last-of-type {
margin-right: 0 !important;
}
.media__grid {
display: grid;
gap: var(--sizing-sm);
}
.media__grid.square {
grid-template-columns: var(--grid-square);
}
&.square {
grid-template-columns: var(--grid-square);
.media__grid.vertical {
grid-template-columns: var(--grid-vertical);
}
& img {
width: 100%;
height: 100%;
}
}
.media__grid .item__wrapper {
position: relative;
}
&.vertical {
grid-template-columns: var(--grid-vertical);
.media__grid .item__wrapper.shadow picture::after {
position: absolute;
z-index: 1;
content: '';
top: 0;
left: 1px;
border-radius: calc(var(--sizing-xs) * .85);
box-shadow: inset 0 -70px 50px -40px #000;
width: 100%;
height: calc(100% - 1px);
}
& img {
width: 100%;
height: auto;
}
}
.media__grid a:hover img,
.media__grid a:focus img,
.media__grid a:active img {
border-color: var(--accent-color-hover)
}
& .item__wrapper {
position: relative;
.media__grid .item__meta-text {
position: absolute;
z-index: 2;
padding: 0 var(--sizing-sm);
bottom: var(--sizing-sm);
width: 100%;
box-sizing: border-box;
}
&.shadow picture::after {
position: absolute;
z-index: 1;
content: '';
top: 0;
left: 1px;
border-radius: calc(var(--sizing-xs) * .85);
box-shadow: inset 0 -70px 50px -40px #000;
width: 100%;
height: calc(100% - 1px);
}
.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: rgba(0, 0, 0, 0.7) 0px 0px 10px;
}
& picture {
width: 100%;
height: 100%;
position: relative;
display: flex;
}
}
.media__grid .item__meta-text .header {
font-weight: var(--font-weight-bold);
}
& a:hover img,
& a:focus img,
& a:active img {
border-color: var(--accent-color-hover)
}
.media__grid img {
border: 1px solid var(--accent-color);
border-radius: var(--rounded);
transition-property: border-color;
transition-timing-function: var(--transition-ease-in-out);
transition-duration: 300ms;
}
& .meta-text {
position: absolute;
z-index: 2;
padding: 0 var(--sizing-sm);
bottom: var(--sizing-sm);
width: 100%;
box-sizing: border-box;
.media__grid.square img {
width: 100%;
height: 100%;
}
& .header,
& .subheader {
color: var(--color-lightest);
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
}
.media__grid.vertical img {
width: 100%;
height: auto;
}
& .header {
font-weight: var(--font-weight-bold);
}
}
.media__grid .item__wrapper picture {
width: 100%;
height: 100%;
position: relative;
display: flex;
& img {
border: 1px solid var(--accent-color);
border-radius: var(--rounded);
transition-property: border-color;
transition-timing-function: var(--transition-ease-in-out);
transition-duration: 300ms;
}
}
@media screen and (min-width: 768px) {
@ -112,15 +112,15 @@
--grid-vertical: repeat(6,minmax(0,1fr));
}
.now__section--header-wrapper {
.now-header-wrapper {
flex-direction: row;
}
.now__section--header-buttons {
.now-header-buttons {
margin: var(--sizing-3xl) 0 var(--sizing-lg);
}
.now__section--header-buttons > button {
margin-bottom: 0 !important;
& > button {
margin-bottom: 0 !important;
}
}
}