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

chore: use vars in media queries

Browse source
This commit is contained in:
Cory Dransfeldt 2024-01-25 11:59:41 -08:00
parent 0ce7e9b5fc
commit 45a605a4bf
No known key found for this signature in database
1 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/assets/styles/widgets/media-grid.css
View file

@ -1,3 +1,9 @@
:root {
--grid-square: repeat(2,minmax(0,1fr));
--grid-vertical: repeat(3,minmax(0,1fr));
--item-wrapper-max-width: 193px;
}
.now__section--header { .now__section--header {
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -9,15 +15,15 @@
} }
.media__grid.square { .media__grid.square {
grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-columns: var(--grid-square);
} }
.media__grid.vertical { .media__grid.vertical {
grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-columns: var(--grid-vertical);
} }
.media__grid.vertical .item__wrapper { .media__grid.vertical .item__wrapper {
max-width: 193px; max-width: var(--item-wrapper-max-width);
} }
.media__grid .item__wrapper { .media__grid .item__wrapper {
@ -73,15 +79,9 @@
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.media__grid.square { :root {
grid-template-columns: repeat(4,minmax(0,1fr)); --grid-square: repeat(4,minmax(0,1fr));
} --grid-vertical: repeat(6,minmax(0,1fr));
--item-wrapper-max-width: 121px;
.media__grid.vertical {
grid-template-columns: repeat(6,minmax(0,1fr));
}
.media__grid.vertical .item__wrapper {
max-width: 121px;
} }
} }