Added icons and minor aesthetic improvements.

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);
+  }
+}

css/instagram-feed.css

@@ -19,6 +19,13 @@ body{
   text-align:center;
 }
 
+a i{
+  color: #29e;
+  font-size: 36px;
+  padding: 3px;
+  line-height: 3em;
+}
+
 .button{
   border-radius:1em;
   padding:1em;
@@ -50,6 +57,7 @@ input.hashtag{
   box-shadow:none;
   border:none;
   border-bottom:1px dotted #555;
+  max-width:90%;
 }
 /*****************
 Title Banner
@@ -157,6 +165,7 @@ Lightbox
   display: inline-block;
   position: relative;
   bottom: .8em;
+  color: #3E8BE0;
 }
 .block-list {
   padding: 1em;
@@ -180,87 +189,8 @@ Lightbox
 Media Queries
 *****************/
 
-@media (max-width: 1200px) {
-  .title {
-    font-size:.75em;
-    letter-spacing:0;
-  }
-  .title h2.quote1{
-    top:100px;
-  }
-  .title h2.quote2{
-    top:180px;
-  }
-  .title h2.quote3{
-    top:350px;
-  }
-  h2.quote1.animated {
-    right: 60px;
-  }
-  h2.quote2.animated {
-    right: -10px;
-  }
-  h2.quote3.animated {
-    right: 15px;
-  }
-}
 @media (max-width: 767px) {
-  .title{
-    background-image: url('../img/mayor-tall.png');
-    min-height: 600px;
-  }
-  .bottom{
-    top:600px;
-  }
-  .title{
-    font-size:.9em;
-  }
-  .title .top-logo img{
-    width: 50%;
-    margin-right: 10px;
-  }
-  .title > h2.quote{
-    font-size:1.5em;
-    letter-spacing:0;
-  }
-  .title h2.quote1{
-    top:220px;
-  }
-  .title h2.quote2{
-    top:270px;
-  }
-  .title h2.quote3{
-    bottom:2em;
-    top:auto;
-  }
-  h2.quote1.animated {
-    right: 40px;
-  }
-  h2.quote2.animated {
-    right: -30px;
-  }
-  h2.quote3.animated {
-    right: 15px;
-  }
-  .instructions div{
-    padding: 0;
-  }
-}
-@media (max-width: 500px) {
-  .title h1{
-    font-size:1.6em;
-  }
-  .title .top-logo img{
-    width:75%;
-  }
-  .title > h2.quote{
-    font-size:1.2em;
-    letter-spacing:0;
-  }
-  h2.quote1.animated {
-  right: 20px;
-  }
-  h2.quote2.animated {
-  padding-right: 50px;
+  .title .heading-text{
+    font-size:36px;
   }
 }

css/social-codes.css

@@ -0,0 +1,10 @@
+
+.icon-spin6:before { content: '\e831'; } /* '' */
+.icon-heart:before { content: '\e800'; } /* '' */
+.icon-cancel-circled:before { content: '\e806'; } /* '' */
+.icon-link:before { content: '\e805'; } /* '' */
+.icon-facebook:before { content: '\e802'; } /* '' */
+.icon-github:before { content: '\e832'; } /* '' */
+.icon-gplus:before { content: '\e803'; } /* '' */
+.icon-instagramm:before { content: '\e801'; } /* '' */
+.icon-twitter:before { content: '\e833'; } /* '' */

css/social-ie7-codes.css

@@ -0,0 +1,10 @@
+
+.icon-spin6 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-heart { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-cancel-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-link { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-facebook { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-github { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-gplus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-instagramm { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-twitter { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

css/social-ie7.css

@@ -0,0 +1,21 @@
+[class^="icon-"], [class*=" icon-"] {
+  font-family: 'social';
+  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-spin6 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-heart { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-cancel-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-link { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-facebook { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-github { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-gplus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-instagramm { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-twitter { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

css/social.css

@@ -0,0 +1,61 @@
+@font-face {
+  font-family: 'social';
+  src: url('../font/social.eot?29772394');
+  src: url('../font/social.eot?29772394#iefix') format('embedded-opentype'),
+       url('../font/social.woff?29772394') format('woff'),
+       url('../font/social.ttf?29772394') format('truetype'),
+       url('../font/social.svg?29772394#social') 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: 'social';
+    src: url('../font/social.svg?29772394#social') format('svg');
+  }
+}
+*/
+
+ [class^="icon-"]:before, [class*=" icon-"]:before {
+  font-family: "social";
+  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-spin6:before { content: '\e831'; } /* '' */
+.icon-heart:before { content: '\e800'; } /* '' */
+.icon-cancel-circled:before { content: '\e806'; } /* '' */
+.icon-link:before { content: '\e805'; } /* '' */
+.icon-facebook:before { content: '\e802'; } /* '' */
+.icon-github:before { content: '\e832'; } /* '' */
+.icon-gplus:before { content: '\e803'; } /* '' */
+.icon-instagramm:before { content: '\e801'; } /* '' */
+.icon-twitter:before { content: '\e833'; } /* '' */

index.html

@@ -51,12 +51,9 @@
         <link rel="stylesheet" href="css/main.css">
         <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/grids-min.css">
         <link rel="stylesheet" href="css/instagram-feed.css">
-        <link rel="stylesheet" href="fontello/css/social.css">
-        <link rel="stylesheet" href="fontello/css/animation.css">
         <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,200' rel='stylesheet' type='text/css'>
-        <!--[if IE 7]>
-        <link rel="stylesheet" href="fontello/css/social-ie7.css">
-        <![endif]-->
+        <link rel="stylesheet" href="css/social.css">
+    <link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/social-ie7.css"><![endif]-->
         <script src="js/vendor/modernizr-2.6.2.min.js"></script>
         <script type="text/javascript">
           (function(d) {