Move towards flexbox layout.

Main page and header now use flexbox instead of not quite working
floats and position relative/absolute. This really simplifies things.
Perhaps we'll even be able to make a mobile friendly site some day.

Various other cosmetic tweaks have snuch in too. The page now has a
max size of about 25cm, and some other minor tweaks.

1 files changed, 11 insertions, 12 deletions

diff --git a/app/assets/stylesheets/hmno_page.scss b/app/assets/stylesheets/hmno_page.scss
index 476da14..3a6c9d5 100644
--- a/app/assets/stylesheets/hmno_page.scss
+++ b/app/assets/stylesheets/hmno_page.scss
@@ -16,24 +16,23 @@
 @import "color_scheme";
 
 #page_container {
+    display: flex;
+    flex-direction: column;
     background: $bg;
     min-width: $min-page-width;
+    max-width: $max-page-width;
+    margin: {
+        left: auto;
+        right: auto;
+    }
 
     #page {
-        position: relative;
-        min-height: 1000px;
+        display: flex;
+        flex-direction: row;
         padding: $spacing / 2;
 
-        #body_content {
-            min-width: $min-center-width;
-            margin: {
-                left: $sidebar-width + 3 * $spacing;
-                right: $sidebar-width + 3 * $spacing;
-            }
-            padding: {
-                left: $spacing / 2;
-                right: $spacing / 2;
-            }
+        #page-content-area {
+            flex: 1 1 500px;
         }
 
     }