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

make page buttons scale better on mobile

Browse Source
This commit is contained in:
jonathan
2023-03-04 02:32:00 +10:30
parent 58daa042a1
commit efc4dd046a
1 changed files with 28 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/_includes/styles.css
View File

@ -147,6 +147,19 @@ nav {
z-index: -1; z-index: -1;
} }
.link_tiles_grid {
display: flex;
width: 100%;
flex-wrap: wrap;
gap: 15px;
}
.link_tiles_grid>a,
.link_tiles_grid>a>img {
width: 230px;
}
@media all and (max-width: 1100px) { @media all and (max-width: 1100px) {
body { body {
flex-direction: column-reverse; flex-direction: column-reverse;
@ -198,6 +211,21 @@ nav {
aside>a:hover { aside>a:hover {
transform: none; transform: none;
} }
.link_tiles_grid>a,
.link_tiles_grid>a>img {
max-width: 230px;
width: calc((100vw - 100px)/3);
}
/* switch to two tiles when it gets really small */
@media all and (max-width: 545px) {
.link_tiles_grid>a,
.link_tiles_grid>a>img {
max-width: 230px;
width: calc((100vw - 85px)/2);
}
}
} }
article>p { article>p {
@ -230,17 +258,6 @@ footer {
margin-top: 25px; margin-top: 25px;
} }
.link_tiles_grid {
display: flex;
width: 100%;
flex-wrap: wrap;
gap: 15px;
}
.link_tiles_grid>a,
.link_tiles_grid>a>img {
width: 230px;
}
.nav-buttons { .nav-buttons {
display: flex; display: flex;