Fix footer

Convert code into less.
Remove redundant classes and ids.

static/css/custom-variables.less

@@ -0,0 +1,3 @@
+@page-footer-border-top: 1px solid  rgba(0, 0, 0, .2);
+@page-footer-color: #f5f5f5;
+@page-footer-height: 50px;

static/css/elegant.css

@@ -39,49 +39,6 @@ img {
 .top-menu li a {
     font-weight: bold;
 }
-/* Sticky footer styles
--------------------------------------------------- */
-/* from http://getbootstrap.com/examples/sticky-footer/ */
-html {
-    position: relative;
-    min-height: 100%;
-}
-body {
-    /* Margin bottom by footer height */
-    margin-bottom: 60px;
-}
-.footer {
-  /* background-color: #f5f5f5; */
-    bottom: 0;
-    /* Set the fixed height of the footer here */
-    height: 60px;
-    position: absolute;
-    width: 100%;
-}
-#footer {
-    border-top: 1px solid  rgba(0, 0, 0, .2);
-    font: .8em Calibri, Tahoma, Arial, Sans-Serif;
-}
-ul.footer-content {
-    display: table;
-    list-style: none;
-    margin: 20px 0;
-    width: 100%;
-}
-ul.footer-content li {
-    display: table-cell;
-    height: 100%;
-    vertical-align: middle;
-}
-.elegant-power {
-    text-align: right;
-}
-.elegant-license {
-    text-align: left;
-}
-.elegant-subtitle {
-    text-align: left;
-}
 /* comment */
 #comment-message,
 #post-share-links:not(a) {

static/css/elegant.less

@@ -1,5 +1,6 @@
 @import "../bootstrap/less/bootstrap.less";
 @import "../bootstrap/less/utilities.less";
+@import "custom-variables.less";
 
 @import url(http://fonts.googleapis.com/css?family=Open+Sans);
 @import url(http://fonts.googleapis.com/css?family=Roboto);
@@ -91,3 +92,43 @@ h1, h2, h3, h4, h5, h6 {
     margin-top: 10px;
     padding-left: 5px;
 }
+
+// footer code is taken from http://getbootstrap.com/examples/sticky-footer-navbar/
+html {
+    min-height: 100%;
+    position: relative;
+}
+
+body {
+    margin-bottom: @page-footer-height;
+}
+
+footer {
+    align-items: center;
+    background-color: @page-footer-color;
+    border-top: @page-footer-border-top;//1px solid  rgba(0, 0, 0, .2);
+    bottom: 0;
+    display: flex;
+    height: @page-footer-height;
+    position: absolute;
+    width: 100%;
+    div {
+        font-family: @font-family-sans-serif;
+        font-size: 0.8em;
+        ul {
+            display: table;
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            li {
+                display: table-cell;
+                height: 100%;
+                text-align: left;
+                &:last-child {
+                    text-align: right;
+                }
+            }
+        }
+    }
+}

templates/_includes/footer.html

@@ -1,15 +1,15 @@
-<footer class="footer">
-    <div id="footer" class="container">
-        <ul class="footer-content">
+<footer>
+    <div class="container">
+        <ul>
             {% from '_includes/_defaults.html' import SITESUBTITLE with context %}
             {% if SITESUBTITLE %}
-            <li class="elegant-subtitle"><span class="site-name">{{ SITENAME }}</span> - {{ SITESUBTITLE }}</li>
+            <li><span class="site-name">{{ SITENAME }}</span> - {{ SITESUBTITLE }}</li>
             {% endif %}
             {% from '_includes/_defaults.html' import SITE_LICENSE with context %}
             {% if SITE_LICENSE %}
-            <li class="elegant-license">{{ SITE_LICENSE }}</li>
+            <li>{{ SITE_LICENSE }}</li>
             {% endif %}
-            <li class="elegant-power">Powered by <a href="http://getpelican.com/" title="Pelican Home Page">Pelican</a>. Theme: <a href="http://oncrashreboot.com/pelican-elegant" title="Theme Elegant Home Page">Elegant</a> by <a href="http://oncrashreboot.com" title="Talha Mansoor Home Page">Talha Mansoor</a></li>
+            <li>Powered by <a href="http://getpelican.com/" title="Pelican Home Page">Pelican</a>. Theme: <a href="http://oncrashreboot.com/pelican-elegant" title="Theme Elegant Home Page">Elegant</a> by <a href="http://oncrashreboot.com" title="Talha Mansoor Home Page">Talha Mansoor</a></li>
         </ul>
     </div>
 </footer>