cadence/breezewiki
2
4
Fork 4
Code Issues Pull requests 1 Releases Wiki Activity

Mobile layout improvements

Browse source 
- Images must fit within the screen
- Attempt to make horizontal page footers vertical on mobile
This commit is contained in:
Cadence Ember 2022-09-09 23:17:21 +12:00
parent 62e1cb33c8
commit 660ec56e73
Signed by: cadence
GPG key ID: BC1C2C61CF521B17
1 changed files with 33 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
static/main.css
View file

@ -64,11 +64,6 @@ p {
.custom-footer__cols { .custom-footer__cols {
display: grid; display: grid;
} }
@media (min-width: 560px) {
.custom-footer__cols {
grid-template-columns: 1fr 1fr;
}
}
.my-logo { .my-logo {
margin-bottom: 8px; margin-bottom: 8px;
} }
@ -115,6 +110,13 @@ p {
display: none; display: none;
} }
/* don't allow images to extend past the edge of the page */
img {
max-width: 100%;
width: auto;
height: auto;
}
/* allow tables to scroll horizontally if needed */ /* allow tables to scroll horizontally if needed */
.table-scroller { .table-scroller {
overflow: auto; overflow: auto;
@ -178,13 +180,6 @@ figcaption, .lightbox-caption, .thumbcaption {
display: block; display: block;
} }
/* category list columns */
@media (min-width: 700px) {
.my-category-list {
columns: 3;
}
}
/* animated slots */ /* animated slots */
#mw-content-text .animated > :not(.animated-active), #mw-content-text .animated > .animated-subframe > :not(.animated-active) { #mw-content-text .animated > :not(.animated-active), #mw-content-text .animated > .animated-subframe > :not(.animated-active) {
display: inline-block; display: inline-block;
@ -221,3 +216,29 @@ figcaption, .lightbox-caption, .thumbcaption {
color: var(--theme-page-text-color--hover); color: var(--theme-page-text-color--hover);
margin-left: 1.2em; margin-left: 1.2em;
} }
/* media queries */
/* for reference, cell phone screens are generally 400 px wide, definitely less than 500 px */
@media (min-width: 700px) { /* wider than 700 px */
/* category list columns */
.my-category-list {
columns: 3;
}
}
@media (min-width: 560px) { /* wider than 560 px */
/* footer columns */
.custom-footer__cols {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 559px) { /* narrower than 560 px */
/* attempt to make horizontal wiki page footers vertical instead - see /nfs/wiki/Need_for_Speed_Wiki */
[style*="width:calc(100%"] {
width: auto !important;
text-align: center !important;
}
}