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, 10 insertions, 4 deletions

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%;