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.

7 files changed, 31 insertions, 29 deletions

diff --git a/app/assets/stylesheets/_color_scheme.scss b/app/assets/stylesheets/_color_scheme.scss
index b69a2ea..9b94189 100644
--- a/app/assets/stylesheets/_color_scheme.scss
+++ b/app/assets/stylesheets/_color_scheme.scss
@@ -49,3 +49,4 @@ $sidebar-width: 200px;
 $sidebar-margin: $sidebar-width + 2 * $spacing;
 $min-center-width: 500px;
 $min-page-width: 2 * $sidebar-margin + $min-center-width + 4 * $spacing;
+$max-page-width: 25cm;
diff --git a/app/assets/stylesheets/hmno_banners.scss b/app/assets/stylesheets/hmno_banners.scss
index f54a7fa..1cfb1c2 100644
--- a/app/assets/stylesheets/hmno_banners.scss
+++ b/app/assets/stylesheets/hmno_banners.scss
@@ -16,10 +16,6 @@
 @import "color_scheme";
 
 #slider {
-  margin: {
-    left: $sidebar-margin;
-    right: $sidebar-margin;
-  }
   text-align: center;
   a {
     display: block;
diff --git a/app/assets/stylesheets/hmno_header.scss b/app/assets/stylesheets/hmno_header.scss
index 4f722fd..32e2760 100644
--- a/app/assets/stylesheets/hmno_header.scss
+++ b/app/assets/stylesheets/hmno_header.scss
@@ -16,6 +16,8 @@
 @import "color_scheme";
 
 #header {
+    display: flex;
+
     background: {
         color: $header-bg;
         image: image_url("header-metal-bg.jpg");
@@ -27,13 +29,11 @@
     margin-bottom: $spacing;
 
     #logo {
-        width: 200px;
-        float: left;
+        flex: 0 0 200px;
     }
 
     #merchlink {
-        width: 200px;
-        float: right;
+        flex: 0 0 200px;
         text-align: center;
 
         img {
@@ -47,6 +47,12 @@
         }
     }
 
+    #menu-area {
+        display: flex;
+        flex-direction: column-reverse;
+        flex-grow: 1;
+    }
+
     #menu {
         text-align: center;
         font-size: 120%;
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;
         }
 
     }
diff --git a/app/assets/stylesheets/hmno_sidebars.scss b/app/assets/stylesheets/hmno_sidebars.scss
index c196ac2..dbc68ab 100644
--- a/app/assets/stylesheets/hmno_sidebars.scss
+++ b/app/assets/stylesheets/hmno_sidebars.scss
@@ -27,13 +27,9 @@
 }
 
 #left_sidebar, #right_sidebar {
-    position: absolute;
     width: 200px;
-    top: 0;
-    bottom: $spacing;
     border: 1px groove $dark-border-fg;
     background-color: $bg2;
-    overflow: auto;
     h2 {
         @include sidebar-headers;
     }
@@ -57,11 +53,11 @@
 }
 
 #left_sidebar {
-    left: $spacing;
+    margin-right: $spacing;
 }
 
 #right_sidebar {
-    right: $spacing;
+    margin-left: $spacing;
 }
 
 .sidebar_module {
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 726ccae..a1ecaff 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -26,8 +26,10 @@
       </header>
       <section id="page">
         <%= render 'common/left_sidebar' %>
-        <%= render :partial => 'refinery/banners/shared/banners' %>
-        <%= yield %>
+        <div id="page-content-area">
+          <%= render :partial => 'refinery/banners/shared/banners' %>
+          <%= yield %>
+        </div>
         <%= render 'common/right_sidebar' %>
       </section>
       <footer>
diff --git a/app/views/refinery/_header.html.erb b/app/views/refinery/_header.html.erb
index a1a146c..4dbdfc2 100644
--- a/app/views/refinery/_header.html.erb
+++ b/app/views/refinery/_header.html.erb
@@ -17,8 +17,10 @@
 <div id='logo'>
   <%= link_to image_tag("logo.png", :alt => "Heavymetal.no"), refinery.root_path %>
 </div>
+<div id="menu-area">
+  <%= Refinery::Pages::MenuPresenter.new(refinery_menu_pages, self).to_html %>
+</div>
 <div id="merchlink">
   <%= link_to image_tag("hypestore-logo.png", alt: "Hypestore", size: '197x75'), 'https://hypestore.no/collections/artistmerch-1' %>
   <%= link_to "HMNO Merch!", 'https://hypestore.no/collections/artistmerch-1' %>
 </div>
-<%= Refinery::Pages::MenuPresenter.new(refinery_menu_pages, self).to_html %>