Add spacing and changer footer height on smaller screen sizes

static/css/custom-variables.less

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

static/css/elegant.less

@@ -101,6 +101,15 @@ html {
 
 body {
     margin-bottom: @page-footer-height;
+    @media (max-width: @screen-md) {
+        margin-bottom: @page-footer-height + @page-footer-height-subset * 1;
+    }
+    @media (max-width: @screen-sm) {
+        margin-bottom: @page-footer-height + @page-footer-height-subset * 2;
+    }
+    @media (max-width: @screen-xs) {
+        margin-bottom: @page-footer-height + @page-footer-height-subset * 3;
+    }
 }
 
 footer {
@@ -110,14 +119,33 @@ footer {
     bottom: 0;
     display: flex;
     height: @page-footer-height;
+    @media (max-width: @screen-md) {
+        height: @page-footer-height + @page-footer-height-subset * 1;
+    }
+    @media (max-width: @screen-sm) {
+        height: @page-footer-height + @page-footer-height-subset * 2;
+    }
+    @media (max-width: @screen-xs) {
+        height: @page-footer-height + @page-footer-height-subset * 3;
+    }
     position: absolute;
     width: 100%;
     div {
         font-family: @font-family-sans-serif;
         font-size: 0.8em;
         text-align: left;
-        &:last-child {
+        &:only-child {
+            text-align: right; // if only elegant license is present
+        }
+        @media (min-width: @screen-md) {
+            &:last-child {
                     text-align: right;
+            }
+        }
+        @media (max-width: @screen-md) {
+             &:nth-last-child(2), &:nth-last-child(3) {
+                margin-bottom: 4px;
+            }
         }
     }
 }