Issue 5740 - Implemented new abp.org footer styles

templates/default.tmpl

Index: templates/default.tmpl
===================================================================
--- a/templates/default.tmpl
+++ b/templates/default.tmpl
@@ -150,61 +150,79 @@
         {% endif %}
       {% endif %}
 
       {% block body %}
       {{body|safe}}
       {% endblock %}
     </div>
 
-    <footer id="footer-main">
-      <div id="footer-content">
-        <nav>
-          <section class="first">
-            <h1>{{get_string("resources", "menu")}}</h1>
+    <footer id="footer" class="content">
+      <div class="container">
+        <div class="row">
+          <nav class="column one-fourth">
+            <h5>{{ get_string("resources", "menu") }}</h5>
             <ul>
-              {% for name in ["acceptable-ads", "documentation", "deployments", "terms", "privacy", "impressum"] %}
-                {{pageitem(name)}}
+              {% for pagename in ["acceptable-ads", "documentation", "deployments"] %}
+                <li>{{ pagename | linkify }}{{ get_string(pagename, "menu") }}</a></li>
               {% endfor %}
             </ul>
-          </section>
-
-          <section>
-            <h1>{{get_string("community", "menu")}}</h1>
+          </nav>
+          <nav class="column one-fourth">
+            <h5>{{ get_string("community", "menu") }}</h5>
             <ul>
               <li><a href="/releases/" hreflang="en">{{get_string("releases", "menu")}}</a></li>
               <li><a href="/blog/" hreflang="en">{{get_string("blog", "menu")}}</a></li>
               <li><a href="/forum/" hreflang="en">{{get_string("forum", "menu")}}</a></li>
-              {{pageitem("development-builds")}}
+              {{ pageitem("development-builds") }}
             </ul>
-          </section>
-
-          <section>
-            <h1>{{get_string("development", "menu")}}</h1>
+          </nav>
+          <nav class="column one-fourth">
+            <h5>{{get_string("development", "menu")}}</h5>
             <ul>
-              {{pageitem("source")}}
-              <li><a href="https://issues.adblockplus.org/report/13" hreflang="en">{{get_string("roadmap", "menu")}}</a></li>
-              {{pageitem("tools")}}
-              <li><a href="https://eyeo.com/jobs/" hreflang="en">{{get_string("jobs", "menu")}}</a></li>
+              {{ pageitem("source") }}
+              <li><a href="https://issues.adblockplus.org/report/13" hreflang="en">{{ get_string("roadmap", "menu") }}</a></li>
+              {{ pageitem("tools") }}
+              <li><a href="https://eyeo.com/jobs/" hreflang="en">{{ get_string("jobs", "menu") }}</a></li>
             </ul>
-          </section>
-        </nav>
-
-        <section id="social">
-          <h1>{{get_string("follow-us", "menu")}}</h1>
-          <ul id="social-list">
-            <li class="social-entry">
-              <a rel="nofollow" id="social-facebook" class="sprite" href="https://www.facebook.com/adblockplus"></a>
-            </li>
-            <li class="social-entry">
-              <a rel="nofollow" id="social-twitter" class="sprite" href="https://twitter.com/adblockplus"></a>
-            </li>
-            <li class="social-entry">
-              <a rel="nofollow" id="social-gplus" class="sprite" href="https://plus.google.com/110020691898167279887"></a>
-            </li>
+          </nav>
+          <nav id="social-list" class="column one-fourth">
+            <h5>{{get_string("follow-us", "menu")}}</h5>
+            <ul>
+              <li>
+                <a href="https://twitter.com/AdblockPlus" target="_blank">
+                  <img
+                    src="/img/footer-twitter-glyphicon.png"
+                    alt="{{ "Twitter" | translate("twitter-alt", "Twitter glyphicon alt text")}}">
+                </a>
+              </li>
+              <li>
+                <a href="https://www.youtube.com/user/AdblockPlusOfficial" target="_blank">
+                  <img src="/img/footer-youtube-glyphicon.png">
+                </a>
+              </li>
+              <li>
+                <a href="https://www.facebook.com/adblockplus" target="_blank">
+                  <img src="/img/footer-facebook-glyphicon.png">
+                </a>
+              </li>
+              <li>
+                <a href="https://www.instagram.com/adblockplus/" target="_blank">
+                  <img src="/img/footer-instagram-glyphicon.png">
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div> {# .row #}
+        <div id="footer-legal">
+          <p id="copyright-notice">{{ "Copyright © 2017 All rights reserved. Adblock Plus<sup>®</sup> is a registered trademark of <a href='https://eyeo.com'>eyeo GmbH</a>." | translate("copyright-notice", "Footer copyright notice") }}</p>
+          <ul id="legal-list">
+            {% for pagename in ["terms", "privacy", "impressum"] %}
+              <li>{{ pagename | linkify }}{{ get_string(pagename, "menu") }}</a></li>
+            {% endfor %}
           </ul>
-        </section>
-      </div>
-    </footer>
+        </div> {# #footer-legal #}
+      </div> {# .container #}
+    </footer> {# #footer #}
 
     <script src="/js/main.js"></script>
   </body>
 </html>