diff --git a/static/main.css b/static/main.css index 63dc408..fe8500a 100644 --- a/static/main.css +++ b/static/main.css @@ -64,11 +64,6 @@ p { .custom-footer__cols { display: grid; } -@media (min-width: 560px) { - .custom-footer__cols { - grid-template-columns: 1fr 1fr; - } -} .my-logo { margin-bottom: 8px; } @@ -115,6 +110,13 @@ p { 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 */ .table-scroller { overflow: auto; @@ -178,13 +180,6 @@ figcaption, .lightbox-caption, .thumbcaption { display: block; } -/* category list columns */ -@media (min-width: 700px) { - .my-category-list { - columns: 3; - } -} - /* animated slots */ #mw-content-text .animated > :not(.animated-active), #mw-content-text .animated > .animated-subframe > :not(.animated-active) { display: inline-block; @@ -221,3 +216,29 @@ figcaption, .lightbox-caption, .thumbcaption { color: var(--theme-page-text-color--hover); 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; + } +}