Add white Card

This puts pages on white cards.
This lets the footer float underneath content instead of bottom of the page.
This should fix issues with MR !1335

Reviewed-by: Joseph Nuthalapati <njoseph@thoughtworks.com>

plinth/modules/help/templates/help_index.html

@@ -23,7 +23,7 @@
 {% load static %}
 
 {% block content %}
-
+<div id="container-wrapper" class="container thumbnail">
   <h2>{% trans "Help" %}</h2>
 
   <p>
@@ -59,7 +59,7 @@
       #freedombox</a> channel using the IRC web interface.
     {% endblocktrans %}
   </p>
-
+</div>
 {% endblock %}
 
 

plinth/templates/base.html

@@ -219,10 +219,8 @@
   </div>
 
   {% block container %}
-    <div id="container-wrapper" class="container">
-      <div class="row">
+    <div id="container-wrapper" class="container thumbnail">
         {% block content_row %}
-          <div class="col-md-8 col-md-offset-2">
             {% block subsubmenu %}
               {% if subsubmenu %}
                 {% show_subsubmenu subsubmenu %}
@@ -234,14 +232,11 @@
             {% block content %}
               {# main content goes here #}
             {% endblock %}
-          </div>
         {% endblock %}
-      </div>
     </div>
   {% endblock %}
 
   <footer>
-    <hr>
     <div class="container">
       {% block footer_block %}
         <div class="license-info">

plinth/templates/cards.html

@@ -55,13 +55,11 @@
   </div>
 
   <div id="container-wrapper" class="container">
-    <div class="row">
-      <div class="col-md-8 col-md-offset-2">
+
         {% block content %}
         {# main content goes here #}
         {% endblock %}
-      </div>
-    </div>
+
   </div>
 
 {% endblock %}

static/themes/default/css/plinth.css

@@ -150,7 +150,9 @@ body {
 /* Sticky footer styles
 -------------------------------------------------- */
 footer .license-info {
-    opacity: 0.75;
+    opacity: 0.5;
+    margin-right: 20px;
+    text-align: right;
 }
 
 .footer-logo {
@@ -175,14 +177,13 @@ html {
   max-width: 1000px;
 }
 
-#container-wrapper {
-    /*covers for footer height */
-    padding-bottom: 150px;
+.container.thumbnail {
+    padding: 5px 50px 50px;
 }
 
 footer {
     text-align: center;
-    position: absolute;
+    position: relative;
     bottom: 0;
     width: 100%;
     height: 150px;
@@ -374,6 +375,10 @@ a.menu_link_active {
     font-size: 80px;
 }
 
+.container.thumbnail {
+  padding: 5px 50px 50px;
+}
+
 /* Button table - Tables with a list of actions as buttons on top */
 .button-table > .button-row + .table {
     margin-top: 10px;