Add Twitter icon to the home page, linking to @official_php.

I've deliberately implemented this in such a way as to allow for further social
media buttons down the track if we want. I've also kept it intentionally
unobtrusive: it's there (previously, we only mentioned the Twitter account on
the mailing lists page, which was weird), but pretty subtle in the sidebar.

There's one additional dependency: a one glyph subset of Font Awesome (created
using Fontello) containing the Twitter icon. (Should we later want to include
other icons from Font Awesome, fonts/Font-Awesome/config.json can be fed back
into Fontello as a starting point.) The additional style sheet and font file
are cached correctly, and once loaded by the user, shouldn't need to be loaded
again, as with Fira Sans. On a cold page load, this adds two requests and just
under 3 kB to the page load.

I consider all of this reasonable, both technically and in terms of promoting
@official_php a little more, but I won't be terribly offended if someone wants
to revert this.

fonts/Font-Awesome/LICENSE.txt

@@ -0,0 +1,12 @@
+Font license info
+
+
+## Font Awesome
+
+   Copyright (C) 2012 by Dave Gandy
+
+   Author:    Dave Gandy
+   License:   SIL ()
+   Homepage:  http://fortawesome.github.com/Font-Awesome/
+
+

fonts/Font-Awesome/config.json

@@ -0,0 +1,16 @@
+{
+  "name": "",
+  "css_prefix_text": "icon-",
+  "css_use_suffix": false,
+  "hinting": true,
+  "units_per_em": 1000,
+  "ascent": 850,
+  "glyphs": [
+    {
+      "uid": "627abcdb627cb1789e009c08e2678ef9",
+      "css": "twitter",
+      "code": 59392,
+      "src": "fontawesome"
+    }
+  ]
+}

fonts/Font-Awesome/css/animation.css

@@ -0,0 +1,85 @@
+/*
+   Animation example, for spinners
+*/
+.animate-spin {
+  -moz-animation: spin 2s infinite linear;
+  -o-animation: spin 2s infinite linear;
+  -webkit-animation: spin 2s infinite linear;
+  animation: spin 2s infinite linear;
+  display: inline-block;
+}
+@-moz-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-webkit-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-o-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-ms-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}

fonts/Font-Awesome/css/fontello-codes.css

@@ -0,0 +1,2 @@
+
+.icon-twitter:before { content: '\e800'; } /* '' */

fonts/Font-Awesome/css/fontello-ie7-codes.css

@@ -0,0 +1,2 @@
+
+.icon-twitter { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

fonts/Font-Awesome/css/fontello-ie7.css

@@ -0,0 +1,13 @@
+[class^="icon-"], [class*=" icon-"] {
+  font-family: 'fontello';
+  font-style: normal;
+  font-weight: normal;
+ 
+  /* fix buttons height */
+  line-height: 1em;
+ 
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+}
+ 
+.icon-twitter { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

fonts/Font-Awesome/css/fontello.css

@@ -0,0 +1,53 @@
+@font-face {
+  font-family: 'fontello';
+  src: url('/fonts/Font-Awesome/font/fontello.eot?60964435');
+  src: url('/fonts/Font-Awesome/font/fontello.eot?60964435#iefix') format('embedded-opentype'),
+       url('/fonts/Font-Awesome/font/fontello.woff?60964435') format('woff'),
+       url('/fonts/Font-Awesome/font/fontello.ttf?60964435') format('truetype'),
+       url('/fonts/Font-Awesome/font/fontello.svg?60964435#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('/fonts/Font-Awesome/font/fontello.svg?60964435#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%; */
+ 
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+ 
+.icon-twitter:before { content: '\e800'; } /* '' */

fonts/Font-Awesome/font/fontello.svg

@@ -0,0 +1,12 @@
+<?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) 2014 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="twitter" unicode="&#xe800;" d="m25 74q19-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 67-83 164-133t208-55q-5 21-5 41 0 75 53 127t127 53q78 0 132-57 61 12 114 44-20-64-79-100 52 6 104 28-37-54-90-93 0-8 0-23 0-73-21-145t-64-139-103-117-144-82-181-30q-151 0-276 81z" horiz-adv-x="928.6" />
+</font>
+</defs>
+</svg>

include/header.inc

@@ -1,6 +1,6 @@
 <?php
 /* $Id$ */
-$cssfiles = array('/fonts/Fira/fira.css', '/styles/theme-base.css', '/styles/theme-medium.css');
+$cssfiles = array('/fonts/Fira/fira.css', '/fonts/Font-Awesome/css/fontello.css', '/styles/theme-base.css', '/styles/theme-medium.css');
 if (isset($config['css'])) {
     $cssfiles = array_merge($cssfiles, (array) $config['css']);
 }

index.php

@@ -171,6 +171,11 @@ $SIDEBAR = <<< SIDEBAR_DATA
 $announcements
     <p class='panel'><a href='/cal.php'>User Group Events</a></p>
     <p class='panel'><a href='/thanks.php'>Special Thanks</a></p>
+    <p class='panel social-media'>
+      <a class='headline' href="https://twitter.com/official_php">
+        <i class="icon-twitter"></i>
+      </a>
+    </p>
 
 SIDEBAR_DATA;
 

styles/home.css

@@ -120,4 +120,17 @@ p.archive {
     #intro .blurb, #layout-content {
         width:70%;
     }
-}
+}
+
+/* Social media buttons. */
+aside.tips .social-media a {
+    border-bottom: 0;
+}
+
+aside.tips .panel.social-media > a:after {
+    display: none;
+}
+
+aside.tips .social-media .headline {
+    font-size: 1.5em;
+}