Stop text from wrapping to a new line with icon

Fixes #112

assets/css/screen.css

@@ -117,7 +117,7 @@ table { border-collapse: collapse; border-spacing: 0; }
 }
 
 /* Apply these base styles to all icons */
-[class^="icon-"], [class*=" icon-"] {
+[class^="icon-"]:before, [class*=" icon-"]:before {
     font-family: "icons", "Open Sans", sans-serif;
     speak: none;
     font-style: normal;
@@ -489,6 +489,11 @@ margin on the iframe, cause it breaks stuff. */
     margin: 0 0 30px 0;
 }
 
+.main-nav a {
+    text-decoration: none;
+    font-family: 'Open Sans', sans-serif;
+}
+
 /* Create a bouncing scroll-down arrow on homepage with cover image */
 .scroll-down {
     display: block;
@@ -501,6 +506,7 @@ margin on the iframe, cause it breaks stuff. */
     height: 34px;
     font-size: 34px;
     text-align: center;
+    text-decoration: none;
     color: rgba(255,255,255,0.7);
     transform: rotate(-90deg);
     -webkit-animation: bounce 4s 2s infinite;
@@ -1140,10 +1146,9 @@ body:not(.post-template) .post-title {
     font-size: 1.7rem;
 }
 .author-meta span {
-    margin-left: 2rem;
-}
-.author-meta span:first-child {
-    margin-left: 0;
+    display: inline-block;
+    margin: 0 2rem 1rem 0;
+    word-wrap: break-word;
 }
 .author-meta a {
     text-decoration: none;

author.hbs

@@ -18,8 +18,8 @@
     <h1 class="author-title">{{author.name}}</h1>
     <h2 class="author-bio">{{author.bio}}</h2>
     <div class="author-meta">
-        {{#if author.location}}<span class="author-location"><i class="icon-location"></i> {{author.location}}</span>{{/if}}
-        {{#if author.website}}<span class="author-link"><i class="icon-link"></i> <a href="{{author.website}}">{{author.website}}</a></span>{{/if}}
+        {{#if author.location}}<span class="author-location icon-location">{{author.location}}</span>{{/if}}
+        {{#if author.website}}<span class="author-link icon-link"><a href="{{author.website}}">{{author.website}}</a></span>{{/if}}
         <span class="author-stats"><i class="icon-stats"></i> {{plural pagination.total empty='No posts' singular='% post' plural='% posts'}}</span>
     </div>
 </section>

post.hbs

@@ -32,7 +32,7 @@
 
             {{#if image}}
             <figure class="author-image">
-                <a class="img" href="{{url}}" style="background-image: url({{image}})"><span class="hidden">{{name}}'s Picture</span></a>
+                <A class="img" href="{{url}}" style="background-image: url({{image}})"><span class="hidden">{{name}}'s Picture</span></a>
             </figure>
             {{/if}}
 
@@ -45,8 +45,8 @@
                     <p>Read <a href="{{url}}">more posts</a> by this author.</p>
                 {{/if}}
                 <div class="author-meta">
-                    {{#if location}}<span class="author-location"><i class="icon-location"></i> {{location}}</span>{{/if}}
-                    {{#if website}}<span class="author-link"><i class="icon-link"></i> <a href="{{website}}">{{website}}</a></span>{{/if}}
+                    {{#if location}}<span class="author-location icon-location">{{location}}</span>{{/if}}
+                    {{#if website}}<span class="author-link icon-link"><a href="{{website}}">{{website}}</a></span>{{/if}}
                 </div>
             </section>