Add support for social link icons in footer

This uses https://github.com/drinchev/monosocialiconsfont font
for the icons.

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+### 2015/7/12
+#### Social link icons
+
+Social links with icons can be enabled replacing the copyright field in footer. Configure the style and links in `config.toml`.
+
 ### 2015/26/11
 
 Hugo v0.15 is required in order to run the theme with the changes listed below:

README.md

@@ -41,6 +41,10 @@ Use the about page to introduce yourself to your visitors. You can customize the
 
 This theme features a comment system powered by Disqus too. Just add your Disqus-shortname to the [`config.toml`](//github.com/digitalcraftsman/hugo-cactus-theme/blob/dev/exampleSite/config.toml) and let readers respond to your blog posts.
 
+## Social link icons
+
+You can add a social link panel in the footer by adding entries to the [`config.toml`](//github.com/digitalcraftsman/hugo-cactus-theme/blob/dev/exampleSite/config.toml). The icons uses fonts from the [mono social icons](https://github.com/drinchev/monosocialiconsfont) project. There are 3 styles of icon - circle, rounded, or default(empty).
+
 ## Nearly finished
 
 In order to see your site in action, run Hugo's built-in local server. 

exampleSite/config.toml

@@ -35,3 +35,14 @@ disqusShortname = "spf13"
 	# 404 page
 	title404 = ""
 	subtitle404 = ""
+
+    # Social icons style - circle, rounded, or empty
+    socialIconStyle = "circle"
+
+# Add additional social link entries underneath
+[social]
+    twitter = "http://www.twitter.com/"
+    facebook = "http://www.facebook.com/"
+    github = "http://www.github.com/"
+    dribble = "http://www.dribbble.com/"
+

layouts/partials/footer.html

@@ -1,7 +1,13 @@
 <footer id="footer">
-    <p class="small">{{ with .Site.Params.copyright }}
+    {{ if .Site.Social }}
+        {{ partial "social.html" . }}
+    {{ else }}
+        <p class="small">
+        {{ with .Site.Params.copyright }}
             {{ . | markdownify }}
         {{ else }}
             © Copyright {{.Now.Format "2006"}} {{ .Site.Params.name }}
-    {{ end }}</p>
+        {{ end }}
+        </p>
+    {{ end }}
 </footer>

layouts/partials/head.html

@@ -11,6 +11,7 @@
 		<link rel="shortcut icon" href="{{ .Site.BaseURL }}images/favicon.ico">
 		<link rel="stylesheet" href="{{ .Site.BaseURL }}css/style.css">
 		<link rel="stylesheet" href="{{ .Site.BaseURL }}css/highlight.css">
+		<link rel="stylesheet" href="{{ .Site.BaseURL }}css/monosocialiconsfont.css">
 		{{ if .Site.Params.enableRSS }}
 		<link href="{{ .Site.RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />
 		{{ end }}

layouts/partials/social.html

@@ -0,0 +1,8 @@
+{{ $iconStyle := .Site.Params.socialIconStyle }}
+<div id="social">
+    {{ range $key, $val := .Site.Social }}
+    <a class="symbol" href="{{$val}}">
+        {{ $iconStyle }}{{ if eq $key "twitter" }}twitterbird{{ else }}{{ $key }}{{ end }}
+    </a>
+    {{ end }}
+</div>

static/css/monosocialiconsfont.css

@@ -0,0 +1,36 @@
+@font-face {
+    font-family: 'Mono Social Icons Font';
+    src: url('../fonts/MonoSocialIconsFont-1.10.eot');
+    src: url('../fonts/MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/MonoSocialIconsFont-1.10.woff') format('woff'),
+         url('../fonts/MonoSocialIconsFont-1.10.ttf') format('truetype'),
+         url('../fonts/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
+    src: url('../fonts/MonoSocialIconsFont-1.10.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+.symbol, a.symbol:before {
+    font-family: 'Mono Social Icons Font';
+    -webkit-text-rendering: optimizeLegibility;
+    -moz-text-rendering: optimizeLegibility;
+    -ms-text-rendering: optimizeLegibility;
+    -o-text-rendering: optimizeLegibility;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-font-smoothing: antialiased;
+    -ms-font-smoothing: antialiased;
+    -o-font-smoothing: antialiased;
+    font-smoothing: antialiased;
+}
+
+a.symbol {
+    color: #cdd4da;
+    font-size: 2rem;
+    text-decoration: none;
+    margin-right: 0.3rem;
+}
+
+a.symbol:hover {
+    color: #BCD4DA;
+}

static/css/style.css

@@ -622,6 +622,12 @@ h2.month {
   margin-left: 2px;
 }
 
+#social {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
 /* Media Queries */
 @media screen and (max-width: 540px) {
 	#wrapper { padding:20px 20px 20px 20px;}