Introduce new footer

2 files changed, 66 insertions, 9 deletions

diff --git a/index.html b/index.html
index edd08dd..bdbdff3 100644
--- a/index.html
+++ b/index.html
@@ -18,9 +18,9 @@
               <div class="btn-group btn-group-sm">
                 <a href="http://get.gentoo.org/" role="button" class="btn get-gentoo"><span class="fa fa-download"></span> <strong>Get Gentoo!</strong></a>
                 <div class="btn-group btn-group-sm">
-                  <button type="button" class="btn gentoo-org-sites dropdown-toggle" data-toggle="dropdown">
+                  <a class="btn gentoo-org-sites dropdown-toggle" data-toggle="dropdown" data-target="#" href="#more-gentoo">
                     <span class="glyphicon glyphicon-globe"></span> gentoo.org sites <span class="caret"></span>
-                  </button>
+                  </a>
                   <ul class="dropdown-menu">
                     <li><a href="http://www.gentoo.org/" title="Main Gentoo website"><span class="fa fa-home fa-fw"></span> gentoo.org</a></li>
                     <li><a href="http://wiki.gentoo.org/" title="Find and contribute documentation"><span class="fa fa-file-text fa-fw"></span> Wiki</a></li>
@@ -255,11 +255,23 @@
     <footer>
       <div class="container">
         <div class="row">
-          <div class="col-xs-12 col-md-8">
-            Sitemap
+          <div class="col-xs-12 col-md-3">
+            <h3 class="footerhead" id="more-gentoo">More Gentoo Websites</h3>
+              <ul class="footerlinks">
+                <li><a href="http://www.gentoo.org/" title="Main Gentoo website"><span class="fa fa-home fa-fw"></span> gentoo.org</a></li>
+                <li><a href="http://wiki.gentoo.org/" title="Find and contribute documentation"><span class="fa fa-file-text fa-fw"></span> Wiki</a></li>
+                <li><a href="https://bugs.gentoo.org/" title="Report issues and find common issues"><span class="fa fa-bug fa-fw"></span> Bugs</a></li>
+                <li><a href="http://forums.gentoo.org/" title="Discuss with the community"><span class="fa fa-comments-o fa-fw"></span> Forums</a></li>
+                <li><a href="http://planet.gentoo.org/" title="Find out what's going on in the developer community"><span class="fa fa-rss fa-fw"></span> Planet</a></li>
+                <li class="divider"></li>
+                <li><a href="http://twitter.com/gentoo" title="Get the latest Gentoo news"><span class="fa fa-twitter fa-fw"></span> Twitter</a></li>
+                <li><a href="https://plus.google.com/+Gentoo" title="Get the latest Gentoo news"><span class="fa fa-google-plus fa-fw"></span> Google+</a></li>
+                <li><a href="https://www.facebook.com/gentoo.org" title="Get updates on the services provided by Gentoo"><span class="fa fa-facebook fa-fw"></span> Facebook</a></li>
+              </ul>
           </div>
-          <div class="col-xs-12 col-md-4">
-            <strong>Questions or comments?</strong><br />
+          <div class="col-xs-12 col-md-offset-1 col-md-8">
+            <!-- Application Footer goes here, nowhere else please -->
+            <h3 class="footerhead">Questions or comments?</h3>
             Please feel free to <a href="http://www.gentoo.org/main/en/contact.xml">contact us</a>.
           </div>
         </div>
diff --git a/sources/css/tyrian/less/footer.less b/sources/css/tyrian/less/footer.less
index f3a3fab..6530fec 100644
--- a/sources/css/tyrian/less/footer.less
+++ b/sources/css/tyrian/less/footer.less
@@ -1,11 +1,29 @@
 footer {
-  background-color: @gray-lighter;
-  padding-top: 1em;
+  background-color: @gentoo-purple;
+  color: white;
+  border-top: 4px solid @gentoo-purple-light;
+  padding-top: 0.5em;
   padding-bottom: 1em;
   .box-shadow(~"inset 0 -1px 15px 0 rgba(0,0,0,.15)");
   background-image: url('black-thing.png'), url('znurt.png');
   background-position: right bottom, right top;
   background-repeat: no-repeat;
+
+  a:link, a:visited, a:active {
+    color: white;
+    border-bottom: 1px solid lighten(@gentoo-purple-light, 10%);
+  }
+
+  a:hover {
+    border-bottom: 1px solid white;
+    text-decoration: none;
+  }
+
+  .footerhead {
+    margin-top: 1em;
+    font-family: @font-family-sans-serif;
+    font-weight: bold;
+  }
 }
 
 @media all and (-webkit-min-device-pixel-ratio: 1.5) {
@@ -16,9 +34,36 @@ footer {
 }
 
 footer .row {
-  margin-top: @line-height-base / 2;
+  margin-bottom: 1em;
 } 
 
 footer small {
   font-size: 80%;
 }
+
+
+ul.footerlinks {
+  padding: 0;
+  margin: 0;
+
+  li {
+    list-style-type: none;
+
+    a:link {
+      border: none;
+      display: block;
+      padding: 10px 15px;
+    }
+
+    a:hover, a:active {
+      background-color: @gentoo-purple-light;
+      text-decoration: none;
+    }
+  }
+
+  li.divider {
+    border-top: 1px solid @gentoo-purple-light;
+    margin-top: 5px;
+    padding-bottom: 5px;
+  }
+}
\ No newline at end of file