Fix styling for banners

- Put banners in center of container
- Set minimum size of page and elements to make room for banners

3 files changed, 11 insertions, 9 deletions

diff --git a/app/assets/stylesheets/_color_scheme.scss b/app/assets/stylesheets/_color_scheme.scss
index bec9288..2b9cd79 100644
--- a/app/assets/stylesheets/_color_scheme.scss
+++ b/app/assets/stylesheets/_color_scheme.scss
@@ -31,4 +31,6 @@ $body-bg: black;
 
 $spacing: 10px;
 $sidebar-width: 200px;
-
+$sidebar-margin: $sidebar-width + 2 * $spacing;
+$min-center-width: 500px;
+$min-page-width: 2 * $sidebar-margin + $min-center-width + 4 * $spacing;
diff --git a/app/assets/stylesheets/hmno_banners.scss b/app/assets/stylesheets/hmno_banners.scss
new file mode 100644
index 0000000..205b7c9
--- /dev/null
+++ b/app/assets/stylesheets/hmno_banners.scss
@@ -0,0 +1,3 @@
+#slider {
+  text-align: center;
+}
diff --git a/app/assets/stylesheets/hmno_page.scss b/app/assets/stylesheets/hmno_page.scss
index 132724b..deda694 100644
--- a/app/assets/stylesheets/hmno_page.scss
+++ b/app/assets/stylesheets/hmno_page.scss
@@ -2,25 +2,22 @@
 
 #page_container {
     background: $bg;
-
-    margin: {
-        left: 5em;
-        right: 5em;
-    }
+    min-width: $min-page-width;
 
     #page {
         position: relative;
         min-height: 1000px;
-        padding: $spacing;
+        padding: $spacing / 2;
 
         #body_content {
+            min-width: $min-center-width;
             margin: {
                 left: $sidebar-width + 3 * $spacing;
                 right: $sidebar-width + 3 * $spacing;
             }
             padding: {
-                left: 0.5em;
-                right: 0.5em;
+                left: $spacing / 2;
+                right: $spacing / 2;
             }
         }