uuupah/11ty_neocities
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

vastly simplify front page links using css grid

Browse Source
This commit is contained in:
jonathan
2023-03-29 13:02:29 +10:30
parent 4f269bb7ef
commit 5dfe851d34
1 changed files with 7 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/_includes/styles.css
View File

@ -151,22 +151,16 @@ nav {
z-index: -1; z-index: -1;
} }
.link_tiles_grid { .link_tiles_grid {
display: flex;
width: 100%; width: 100%;
flex-wrap: wrap; display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 15px; gap: 15px;
} }
.link_tiles_grid>a,
.link_tiles_grid>a>img {
width: 230px;
}
.link_tiles_grid>a>img { .link_tiles_grid>a>img {
background-color: var(--border); background-color: var(--border);
height: 230px; width: 100%;
color: var(--container) color: var(--container)
} }
@ -222,32 +216,11 @@ nav {
transform: none; transform: none;
} }
/* the commented out calcs work in firefox and mobile, but not in chromium */ /* switch to two columns when it gets really small */
.link_tiles_grid>a,
.link_tiles_grid>a>img {
max-width: 230px;
width: calc((100vw - 117px)/3);
/* width: calc((100vw - 100px)/3); */
}
.link_tiles_grid>a>img {
max-height: 230px;
height: calc((100vw - 117px)/3);
/* height: calc((100vw - 100px)/3); */
}
/* switch to two tiles when it gets really small */
@media all and (max-width: 545px) { @media all and (max-width: 545px) {
.link_tiles_grid {
.link_tiles_grid>a, display: grid;
.link_tiles_grid>a>img { grid-template-columns: 1fr 1fr;
width: calc((100vw - 102px)/2);
/* width: calc((100vw - 85px)/2); */
}
.link_tiles_grid>a>img {
height: calc((100vw - 117px)/2);
/* height: calc((100vw - 100px)/2); */
} }
} }
} }