Make landing page responsive.

app/assets/stylesheets/landing.css.scss

@@ -0,0 +1,44 @@
+.landing_columns {
+  & > div {
+    border-style: solid;
+    border-color: black;
+    border-width: 0;
+    text-align: center;
+    @media screen and (min-width: 48em) {
+      border-width: 0 1px;
+      padding: 1em 3em;
+      &:first-child {
+        text-align: right;
+        border-left: 0;
+      }
+      &:last-child {
+        text-align: left;
+        border-right: 0;
+      }
+
+      a.login-button {
+        margin: 2em 2em 0 0;
+      }
+    }
+  }
+}
+
+a.login-button {
+  font-size: 200%;
+}
+
+.full-table {
+  width: 100%;
+}
+
+.landing-column {
+  padding: 1em;
+}
+
+.columns-title {
+  text-align: center;
+}
+
+.shame-percentage {
+  text-align: right
+}

app/assets/stylesheets/pages.css.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the pages controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/

app/assets/stylesheets/pages.scss

@@ -1,35 +0,0 @@
-// Place all the styles related to the pages controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
-.shame-percentage {
-  text-align: right
-}
-
-a.login-button {
-  font-size: 200%;
-  margin: 2em;
-}
-
-.columns-title {
-  text-align: center;
-}
-
-.left-column {
-  text-align: right;
-  padding: 1em 3em;
-  border-right: 1px solid black;
-}
-
-.right-column {
-  text-align: left;
-  padding: 1em 3em;
-  border-left: 1px solid black;
-}
-
-.full-table {
-  width: 100%;
-}
-
-.landing-column {
-  padding: 1em;
-}

app/views/application/_menu.html.haml

@@ -0,0 +1,9 @@
+.pure-u-1
+  .pure-menu.pure-menu-horizontal
+    = link_to "Tab", root_path, class: "pure-menu-heading pure-menu-link"
+    %ul.pure-menu-list
+      %li.pure-menu-item
+        = link_to current_user.name.capitalize, current_user, class: "pure-menu-link"
+        - if current_user.penning
+          %li.pure-menu-item
+            =link_to "Zeus", User.zeus, class: "pure-menu-link"

app/views/layouts/application.html.haml

@@ -2,22 +2,14 @@
 %html
   %head
     %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
+    %meta{:name => "viewport", :content => "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"}
     %title Tab
     = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
     = javascript_include_tag 'application', 'data-turbolinks-track' => true
     = csrf_meta_tags
   %body
     .pure-g
-      - if current_user
+      = render 'menu' if current_user
-        .pure-u-1
-          .pure-menu.pure-menu-horizontal
-            = link_to "Tab", root_path, class: "pure-menu-heading pure-menu-link"
-            %ul.pure-menu-list
-              %li.pure-menu-item
-                = link_to current_user.name.capitalize, current_user, class: "pure-menu-link"
-              - if current_user.penning
-                %li.pure-menu-item
-                  =link_to "Zeus", User.zeus, class: "pure-menu-link"
       .pure-u-1
-        = render 'partials/flash'
+        = render 'flash'
         = yield

app/views/pages/landing.html.haml

@@ -1,18 +1,18 @@
 %h1.columns-title Tab
 = javascript_include_tag "//www.google.com/jsapi", "chartkick"
 - unless user_signed_in?
-  .pure-g
+  .pure-g.landing_columns
-    .pure-u-1-2.left-column
+    .pure-u-1.pure-u-md-1-2
       %h2 Authentication
       %p Log een keer in en betaal uw schulden!
       %p= link_to "Log in met Zeus WPI", user_omniauth_authorize_path(:zeuswpi), class: "pure-button pure-button-primary login-button"
-    .pure-u-1-2.right-column
+    .pure-u-1.pure-u-md-1-2
       %h2 Pie of Shame
       = pie_chart @statistics.shamehash
 - else
   %h2.columns-title Cute Little Statistics
   .pure-g
-    .pure-u-1-2.landing-column
+    .pure-u-1.pure-u-md-1-2.landing-column
       %h3.columns-title Pie of Shame
       = pie_chart @statistics.shamehash
       %h3.columns-title Table of Shame
@@ -27,7 +27,7 @@
               // Won't divide by zero because there won't be any users with
               // a shameful debt if the total debt is zero.
               %td.shame-percentage= "#{-100 * user.balance / @statistics.total_debt}%"
-    .pure-u-1-2.landing-column
+    .pure-u-1.pure-u-md-1-2.landing-column
       %h3.columns-title Distribution of Debt Sources
       = pie_chart @statistics.by_issuer
       %h3.columns-title Top Debt Creators