paritybit.ca

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

commit c2e2a14ca7eaf1d368b5da482741f7c5f1271edd
parent 21ae8137bb48f22276b4addfc604f35165d099ca
Author: Jake Bauer <jbauer@paritybit.ca>
Date:   Fri,  5 Apr 2019 13:48:53 -0400

Improve layout of all pages

Shrink the width of text content so it spans a reasonable section of
the webpage rather than stretching the width of the screen. Also
improve the way the menu gets laid out on mobile devices of differing
screen sizes.

Diffstat:
Mbuild/base.css | 38+++++++++++++++++++++++++++-----------
1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/build/base.css b/build/base.css @@ -1,7 +1,7 @@ body { font-family: "Liberation Mono", monospace; background-color: #1c1c1c; - color: #dddddd; + color: #ededed; line-height: 1.5em; width: 98%; margin: auto; @@ -92,13 +92,12 @@ ul.inline { color: #dddddd; } -#title-img { - max-width: 100%; - max-height: 100%; +#content { + padding: 0 10% 0 10%; } -#content { - padding: 0 5% 0 5%; +#content > p, #content > ul, #content > ol, #content > pre { + max-width: 60%; } #footer { @@ -118,7 +117,7 @@ ul.inline { float: right; width: 25%; border: 10px #585858 groove; - margin: 0 5% 5px 5px; + margin: 0 10% 20px 20px; text-align: left; background-color: #2c2c2c; box-sizing: border-box; @@ -182,14 +181,31 @@ ul.inline { } /* Ensure proper scaling with differently-sized displays */ - -@media all and (max-width: 600px) { +@media all and (max-width: 800px) { #side-bar { - float: left; - width: 97%; + float: center; + width: 50%; clear: both; + margin: 0% 25% 30px 25%; } #content { border-right: 0; + padding: 0 5% 0 5%; + } + #content > p, #content > ul, #content > ol, #content > pre { + max-width: 100%; + } + .wrap { + max-width: 100%; + padding-right: 0; + } +} + +@media all and (max-width: 550px) { + #side-bar { + float: center; + width: 90%; + clear: both; + margin: 0% 5% 30px 5%; } }