Add footer and social links

.gitignore

@@ -60,4 +60,4 @@ target/
 # Pelican stuff
 output/
 theme/static/build/
-plugins/
+pelican_plugins/

pelicanconf.py

@@ -2,6 +2,9 @@
 # -*- coding: utf-8 -*- #
 from __future__ import unicode_literals
 
+import sys, os
+sys.path.insert(0, os.path.realpath('./plugins'))
+
 AUTHOR = 'Jake Howard'
 SITENAME = 'TheOrangeOne'
 SITEURL = 'http://theorangeone.net'
@@ -26,10 +29,11 @@ LINKS = (('Pelican', 'http://getpelican.com/'),
          ('You can modify those links in your config file', '#'),)
 
 # Social widget
-SOCIAL = (('You can add links in your config file', '#'),
+import social
-          ('Another social link', '#'),)
+SOCIAL = social.generate()
 
-DEFAULT_PAGINATION = 15
+
+DEFAULT_PAGINATION = False
 DELETE_OUTPUT_DIRECTORY = True
 
 
@@ -67,9 +71,12 @@ ARCHIVES_SAVE_AS = "blog/archive/index.html"
 CATEGORY_SAVE_AS = False
 CATEGORIES_SAVE_AS = False
 
-PLUGIN_PATHS = ["plugins"]
+PLUGIN_PATHS = ["pelican_plugins"]
 PLUGINS = ['sitemap']
 
 SITEMAP = {
     'format': 'xml'
 }
+
+
+# Extra context

plugins/social.py

@@ -0,0 +1,14 @@
+from collections import namedtuple
+
+
+SocialLink = namedtuple('SocialLink', ['name', 'url', 'icon'])
+
+
+def generate():
+    return {
+        "github": SocialLink("GitHub", "https://github.com/RealOrangeOne", "fa-github"),
+        "twitter": SocialLink("Twitter", "https://twitter.com/RealOrangeOne", "fa-twitter"),
+        "reddit": SocialLink("Reddit", "https://reddit.com/user/RealOrangeOne", "fa-reddit"),
+        "instagram": SocialLink("Instagram", "https://instagram.com/RealOrangeOne", "fa-instagram"),
+        "youtube": SocialLink("YouTube", "https://youtube.com/user/TheOrangeOneOfficial", "fa-youtube")
+    }

theme/static/src/scss/footer.scss

@@ -0,0 +1,45 @@
+footer {
+  background-color: $brand-grey-dark;
+  padding-top: 30px;
+  width: 100%;
+  height: $footer-height;
+  text-align: center;
+  color: $white;
+
+  a {
+    color: $brand-orange;
+
+    &:hover {
+      text-decoration: none;
+      color: inherit;
+    }
+  }
+
+  .bar-links {
+    margin: 0 7px;
+  }
+
+  .powered-by {
+    font-size: $font-size-h6;
+  }
+
+  .social {
+    margin: 0;
+    padding: 7px;
+    font-size: 23px;
+
+    a {
+      margin: 0 4px;
+      color: $white;
+
+      &:hover {
+        color: $brand-orange;
+      }
+    }
+  }
+
+  .ci-badge {
+    margin-top: 10px;
+    height: $font-size-h4;
+  }
+}

theme/static/src/scss/index.scss

@@ -26,3 +26,4 @@ $fa-font-path: "../fonts";
 
 
 @import "homepage";
+@import "footer";

theme/static/src/scss/variables.scss

@@ -2,9 +2,13 @@ $brand-orange: #F05F40;
 $brand-orange-dark: darken($brand-orange, 10%);
 $brand-grey-dark: #333;
 
+/* @group General Colours */
+
 $white: #FFF;
 
+/* @end General Colours */
 
+$footer-height: 250px;
 $font-family-heading: "Open Sans", "Helvetica Neue", Arial, sans-serif;
 
 /* @group Bootstrap Overrides */

theme/templates/base.html

@@ -39,6 +39,40 @@
 
     {% block content %}{% endblock %}
 
+    <footer>
+      <div class="container">
+        <div class="row">
+          <div class="col-xs-12">
+            <p class="social">
+              {% for key, link in SOCIAL.items()|sort %}
+                <a href="{{ link.url }}"><i class="fa {{ link.icon }}"></i></a>
+              {% endfor %}
+            </p>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-xs-12">
+            <p class="bar-links">
+              <a href="/about/">About</a> |
+              <a href="">View Source</a>
+            </p>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-xs-12 powered-by">
+            <p>Powered by</p>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-xs-12">
+            <a href="https://circleci.com">
+              <img class="ci-badge" src="https://circleci.com" alt="CI Badge" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+
     <script src="/static/js/jquery.js"></script>
     <script src="/static/js/libs.js"></script>
     <script src="/static/js/app.js"></script>