paritybit.ca

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:
M
build/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%;
     }
 }