Add Pico's social icons to default theme

CHANGELOG.md

@@ -1,6 +1,13 @@
 Pico Changelog
 ==============
 
+### Version 1.0.4
+Released: -
+
+```
+* [New] Add Pico's social icons to default theme
+```
+
 ### Version 1.0.3
 Released: 2016-05-11
 

content-sample/index.md

@@ -1,6 +1,16 @@
 ---
 Title: Welcome
 Description: Pico is a stupidly simple, blazing fast, flat file CMS.
+social:
+    - title: Visit us on GitHub
+      url: https://github.com/picocms/Pico
+      icon: octocat
+    - title: Check us out on Twitter
+      url: https://twitter.com/gitpicocms
+      icon: birdy
+    - title: Join us on Freenode IRC Webchat
+      url: https://webchat.freenode.net/?channels=%23picocms
+      icon: chat
 ---
 
 ## Welcome to Pico

themes/default/font/LICENSE.txt

@@ -0,0 +1,22 @@
+Icon fonts generator
+
+## Fontello
+
+    Copyright (C) 2011 by Vitaly Puzrin
+
+    Author:     Vitaly Puzrin
+    License:    The MIT License <https://github.com/fontello/fontello/blob/master/LICENSE>
+    Homepage:   http://fontello.com/
+
+
+
+Font license info
+
+## Font Awesome
+
+    Copyright (C) 2012 by Dave Gandy
+
+    Author:     Dave Gandy
+    License:    SIL OFL 1.1 <http://scripts.sil.org/OFL>
+    Homepage:   http://fortawesome.github.com/Font-Awesome/
+

themes/default/font/fontello.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2016 by original authors @ fontello.com</metadata>
+<defs>
+<font id="fontello" horiz-adv-x="1000" >
+<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="chat" unicode="&#xe800;" d="M786 421q0-77-53-143t-143-104-197-38q-48 0-98 9-70-49-155-72-21-5-48-9h-2q-6 0-12 5t-6 12q-1 1-1 3t1 4 1 3l1 3t2 3 2 3 3 3 2 2q3 3 13 14t15 16 12 17 14 21 11 25q-69 40-108 98t-40 125q0 78 53 144t143 104 197 38 197-38 143-104 53-144z m214-142q0-67-40-126t-108-98q5-14 11-25t14-21 13-16 14-17 13-14q0 0 2-2t3-3 2-3 2-3l1-3t1-3 1-4-1-3q-2-8-7-13t-13-4q-27 4-48 9-85 23-155 72-50-9-98-9-151 0-263 74 32-3 49-3 90 0 172 25t148 72q69 52 107 119t37 141q0 43-13 85 72-39 114-99t42-128z" horiz-adv-x="1000" />
+
+<glyph glyph-name="twitter" unicode="&#xf099;" d="M904 622q-37-54-90-93 0-8 0-23 0-73-21-145t-64-139-103-117-144-82-181-30q-151 0-276 81 19-2 43-2 126 0 224 77-59 1-105 36t-64 89q19-3 34-3 24 0 48 6-63 13-104 62t-41 115v2q38-21 82-23-37 25-59 64t-22 86q0 49 25 91 68-83 164-133t208-55q-5 21-5 41 0 75 53 127t127 53q79 0 132-57 61 12 114 44-20-64-79-100 52 6 104 28z" horiz-adv-x="928.6" />
+
+<glyph glyph-name="github" unicode="&#xf09b;" d="M857 350q0-140-82-252t-211-155q-15-3-22 4t-7 17v118q0 54-29 79 32 3 57 10t53 22 45 37 30 58 11 84q0 68-44 115 21 51-5 114-15 5-45-6t-51-25l-21-13q-52 15-107 15t-108-15q-8 6-23 15t-47 22-48 7q-24-63-4-114-44-47-44-115 0-47 12-83t29-59 45-37 52-22 57-10q-22-20-27-58-12-5-25-8t-32-3-36 12-31 35q-11 18-27 29t-28 14l-11 1q-12 0-16-2t-3-7 5-8 7-6l4-3q12-6 24-21t18-29l5-13q8-21 25-34t37-17 39-4 31 2l13 3q0-22 0-50t1-30q0-10-8-17t-22-4q-129 43-211 155t-82 252q0 117 58 215t155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+</font>
+</defs>
+</svg>

themes/default/fontello.css

@@ -0,0 +1,60 @@
+@font-face {
+    font-family: 'fontello';
+    src: url('font/fontello.eot?13793670');
+    src: url('font/fontello.eot?13793670#iefix') format('embedded-opentype'),
+         url('font/fontello.woff2?13793670') format('woff2'),
+         url('font/fontello.woff?13793670') format('woff'),
+         url('font/fontello.ttf?13793670') format('truetype'),
+         url('font/fontello.svg?13793670#fontello') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+    @font-face {
+        font-family: 'fontello';
+        src: url('../font/fontello.svg?13793670#fontello') format('svg');
+    }
+}
+*/
+
+[class^="icon-"]:before, [class*=" icon-"]:before {
+    font-family: "fontello";
+    font-style: normal;
+    font-weight: normal;
+    speak: none;
+
+    display: inline-block;
+    text-decoration: inherit;
+    width: 1em;
+    margin-right: .2em;
+    text-align: center;
+    /* opacity: .8; */
+
+    /* For safety - reset parent styles, that can break glyph codes*/
+    font-variant: normal;
+    text-transform: none;
+
+    /* fix buttons height, for twitter bootstrap */
+    line-height: 1em;
+
+    /* Animation center compensation - margins should be symmetric */
+    /* remove if not needed */
+    margin-left: .2em;
+
+    /* you can be more comfortable with increased icons size */
+    /* font-size: 120%; */
+
+    /* Font smoothing. That was taken from TWBS */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    /* Uncomment for 3D effect */
+    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+
+.icon-chat:before { content: '\e800'; } /* '' */
+.icon-birdy:before { content: '\f099'; } /* '' */
+.icon-octocat:before { content: '\f09b'; } /* '' */

themes/default/index.twig

@@ -12,6 +12,7 @@
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" type="text/css" />
     <link rel="stylesheet" href="{{ theme_url }}/style.css" type="text/css" />
+    <link rel="stylesheet" href="{{ theme_url }}/fontello.css" type="text/css" />
 
     <script src="{{ theme_url }}/scripts/modernizr-2.6.1.min.js"></script>
 </head>
@@ -41,6 +42,11 @@
 
     <footer id="footer">
         <div class="inner">
+            <div class="social">
+                {% for social in meta.social %}
+                    <a href="{{ social.url }}" title="{{ social.title }}"><span class="icon-{{ social.icon }}"></span></a>
+                {% endfor %}
+            </div>
             <a href="http://picocms.org/">Pico</a> was made by <a href="http://gilbert.pellegrom.me">Gilbert Pellegrom</a>
             and is maintained by <a href="https://github.com/picocms/Pico/graphs/contributors">The Pico Community</a>.
             Released under the <a href="https://github.com/picocms/Pico/blob/master/LICENSE.md">MIT license</a>.

themes/default/style.css

@@ -271,6 +271,11 @@ dd {
     margin-top: 80px;
     color: #C0C0C0;
 }
+#footer .social {
+    float: right;
+    margin: 0 0 0.5em 1em;
+    font-size: 200%;
+}
 #footer a { color: #ddd; }
 #footer a:hover { color: #fff; }