templates: use bootstrap grid system for centered panels (login page etc.)

The bootstrap grid system rearranges the elements so that the pages look
good an small screens as well. (i.e. no vertical scrolling)

kallithea/public/less/style.less

@@ -497,12 +497,6 b' div.form div.form-group div.highlight,'
   margin: 6px 0 0;
   padding: 0;
 }
-#login,
-#register {
-  width: 520px;
-  margin: 10% auto 0;
-  padding: 0;
-}
 .ac .match {
   font-weight: 700;
   padding-top: 5px;
@@ -702,9 +696,10 b' div.comment-prev-next-links div.next-com'
   .make-xs-column(11);
 }
 
-/* use bootstrap grid columns for centered forms */
-#login,
-#register {
+/* use bootstrap grid columns for centered columns */
+.centered-column {
+  .make-sm-column-offset(3);
+  .make-sm-column(6);
   .form {
     .form-horizontal;
     .form-group > label {

kallithea/templates/login.html

@@ -6,6 +6,9 b''
 </%block>
 
 <%include file="/base/flash_msg.html"/>
+<div class="container">
+<div class="row">
+<div class="centered-column">
 <div id="login" class="panel panel-primary">
     <div class="panel-heading">
       <h5>
@@ -68,3 +71,6 b''
         </script>
     </div>
 </div>
+</div>
+</div>
+</div>

kallithea/templates/password_reset.html

@@ -6,6 +6,9 b''
 </%block>
 
 <%include file="/base/flash_msg.html"/>
+<div class="container">
+<div class="row">
+<div class="centered-column">
 <div id="register" class="panel panel-primary">
     <div class="panel-heading">
         %if c.site_name:
@@ -62,3 +65,6 b''
         </script>
     </div>
 </div>
+</div>
+</div>
+</div>

kallithea/templates/password_reset_confirmation.html

@@ -7,6 +7,9 b''
 
 <%include file="/base/flash_msg.html"/>
 
+<div class="container">
+<div class="row">
+<div class="centered-column">
 <div id="register" class="panel panel-primary">
     <div class="panel-heading">
         %if c.site_name:
@@ -52,3 +55,6 b''
         ${h.end_form()}
     </div>
    </div>
+</div>
+</div>
+</div>

kallithea/templates/register.html

@@ -7,6 +7,9 b''
 
 <%include file="/base/flash_msg.html"/>
 
+<div class="container">
+<div class="row">
+<div class="centered-column">
 <div id="register" class="panel panel-primary">
     <div class="panel-heading">
         %if c.site_name:
@@ -100,3 +103,6 b''
         </script>
     </div>
  </div>
+ </div>
+ </div>
+ </div>