From f17f0a6670e599effa213b46d8cd66bf2b7d448d Mon Sep 17 00:00:00 2001
From: Maciej Jarczok <maciej.jarczok@gmail.com>
Date: Wed, 18 Nov 2015 09:43:19 +0100
Subject: [PATCH] Make sure that its usable on smaller screens as well

---
 app/styles/app.sass            |  1 +
 app/styles/layout/_footer.sass |  7 ++++---
 app/styles/layout/_main.sass   |  4 ++++
 app/styles/layout/_media.sass  |  4 ++--
 app/templates/index.hbs        | 18 +++++++++---------
 5 files changed, 20 insertions(+), 14 deletions(-)
 create mode 100644 app/styles/layout/_main.sass

diff --git a/app/styles/app.sass b/app/styles/app.sass
index d1e0f22..19c3750 100644
--- a/app/styles/app.sass
+++ b/app/styles/app.sass
@@ -11,5 +11,6 @@
 @import modules/popover
 
 @import layout/header
+@import layout/main
 @import layout/footer
 @import layout/media
diff --git a/app/styles/layout/_footer.sass b/app/styles/layout/_footer.sass
index c0013d1..d76a2be 100644
--- a/app/styles/layout/_footer.sass
+++ b/app/styles/layout/_footer.sass
@@ -4,7 +4,7 @@
   bottom: 0
   width: 100%
   height: 54px
-  background-color: rgba(white,.7)
+  background-color: rgba(white,.6)
   text-align: center
   color: #b0b0b0
   a
@@ -17,8 +17,9 @@
 
   .about
     display: inline-block
-    font-size: 1.2rem
-    line-height: 1.4em
+    font-size: 1.1rem
+    line-height: 1.4
+    margin-top: .2em
 
   .cowbell-labs
     position: absolute
diff --git a/app/styles/layout/_main.sass b/app/styles/layout/_main.sass
new file mode 100644
index 0000000..7984bbe
--- /dev/null
+++ b/app/styles/layout/_main.sass
@@ -0,0 +1,4 @@
+.l-content
+  position: relative
+  height: 100vh
+  min-height: 600px
diff --git a/app/styles/layout/_media.sass b/app/styles/layout/_media.sass
index 8b551f4..076a2a8 100644
--- a/app/styles/layout/_media.sass
+++ b/app/styles/layout/_media.sass
@@ -19,6 +19,8 @@
 
   .l-content
     padding: 80px 0 115px
+    min-height inherit
+    height: auto
   .user
     .peer
       position: relative
@@ -118,8 +120,6 @@
   .l-footer
     height: 100px
     padding: 15px
-    .about
-      font-size: 1.1rem
     .cowbell-labs
       > span
         display: none
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
index fea8900..b0bd03e 100644
--- a/app/templates/index.hbs
+++ b/app/templates/index.hbs
@@ -10,13 +10,13 @@
       {{user-widget user=you}}
     </div>
   {{/if}}
-</main>
 
-<svg class="circles" viewBox="-0.5 -0.5 1140 700">
-  <circle class="circle" cx="570" cy="570" r="30"  stroke="rgba(160,160,160, 1)" />
-  <circle class="circle" cx="570" cy="570" r="100" stroke="rgba(160,160,160,.9)" />
-  <circle class="circle" cx="570" cy="570" r="200" stroke="rgba(160,160,160,.8)" />
-  <circle class="circle" cx="570" cy="570" r="300" stroke="rgba(160,160,160,.7)" />
-  <circle class="circle" cx="570" cy="570" r="400" stroke="rgba(160,160,160,.6)" />
-  <circle class="circle" cx="570" cy="570" r="500" stroke="rgba(160,160,160,.5)" />
-</svg>
+  <svg class="circles" viewBox="-0.5 -0.5 1140 700">
+    <circle class="circle" cx="570" cy="570" r="30"  stroke="rgba(160,160,160, 1)" />
+    <circle class="circle" cx="570" cy="570" r="100" stroke="rgba(160,160,160,.9)" />
+    <circle class="circle" cx="570" cy="570" r="200" stroke="rgba(160,160,160,.8)" />
+    <circle class="circle" cx="570" cy="570" r="300" stroke="rgba(160,160,160,.7)" />
+    <circle class="circle" cx="570" cy="570" r="400" stroke="rgba(160,160,160,.6)" />
+    <circle class="circle" cx="570" cy="570" r="500" stroke="rgba(160,160,160,.5)" />
+  </svg>
+</main>