Footer structure modified + styling changed

diff --git a/static/css/style.css b/static/css/style.css
index ad49939b4ea8210a8d97213fe5ded68be27db6a9..7a37d78697db19b914f7b6c8b492b579dd1fdd6c 100644 (file)
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -328,19 +328,23 @@ a.hchild:hover,a.hchild:active {
 .footer {
     background: var(--jumbotron-bg);
     color: var(--footer-text-color);
+    width: 100%;
     margin-top: 2vh;
+    box-shadow: 0 -3px 5px rgba(150,150,150,.36);
+    min-height: 9.5rem;
+}
+
+.footer-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: flex-start;
-    box-shadow: 0 -3px 5px rgba(150,150,150,.36);
-    min-height: 9.5rem;
+    margin: 0 auto;
 }
 
 .footerchild {
+    margin: 0 2em;
     margin-top: .5em;
-    flex: 1 1 1px;
-    min-width: 12rem;
 }
 
 .footerchild:last-child {
@@ -354,12 +358,11 @@ a.hchild:hover,a.hchild:active {
     }
 }
 
-.footer-link,
-.footer a {
+footer a {
     color: var(--footer-link-color);
 }
 
-.footer a:hover {
+footer a:hover {
     color: #fff;
 }
 
@@ -441,7 +444,7 @@ a.hchild:hover,a.hchild:active {
     }
 }
 
-.footer h2,.footer h3 {
+.footer h2, .footer h3 {
     margin-left: 10px;
     margin-right: 10px;
 }
@@ -472,6 +475,10 @@ footer.copyright div {
     line-height: 1.5rem;
 }
 
+.copyright .fa {
+    height: 100%;
+}
+
 .copyright .footer-link {
     height: 28px;
     margin-right: .5em;

diff --git a/templates/footer.html b/templates/footer.html
index 34c9850af106c89ff4834c5e6703f8e1bbd295b3..9a17349d0a86c13084556d7c13aa30cdc102bf8a 100644 (file)
--- a/templates/footer.html
+++ b/templates/footer.html
@@ -1,4 +1,5 @@
 <footer class="footer">
+    <div class="footer-container">
     <div class="footerchild">
         <h2>About freenode</h2>
         <ul>
@@ -80,11 +81,12 @@
         </ul>
         </div>
     </div>
+    </div>
 </footer>
 <footer class="copyright">
     <div>
     {%- if config.GITHUB_URL is defined %}
-    <a class="footer-link" href="{{ config.GITHUB_URL }}"><i class="fa fa-github fa-lg"></i></a>&nbsp;
+    <a href="{{ config.GITHUB_URL }}"><i class="fa fa-github fa-lg"></i></a>&nbsp;
     {% endif -%}
     <a class="copyright" href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target= "_blank">
         <img alt="CC by-nc-sa" src="{{ url_for("static/img/by-nc-sa.svg") }}">