From 404ddf26e5e36951cbf9f212ce685896ec714a08 Mon Sep 17 00:00:00 2001
From: Ben Abbott <jaminscript@gmail.com>
Date: Wed, 12 Nov 2014 16:42:00 +1300
Subject: Change how SVG icons are included in pages

Normally you include a .html file containing SVG data to show social
media icons on the page, but this means adding up to 27KB of bloat to
every single page.

With this commit I have moved the SVG data into a .scss file and
converted them into Data URIs so they work on multiple browsers. This
means the CSS file will contain the SVG data rather than each and every
page on the site.
---
 style.scss | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

(limited to 'style.scss')

diff --git a/style.scss b/style.scss
index 155e32c..33749f8 100755
--- a/style.scss
+++ b/style.scss
@@ -34,7 +34,7 @@ h1, h2, h3, h4, h5, h6 {
   font-family: $helveticaNeue;
   color: $darkerGray;
   font-weight: bold;
-  
+
   line-height: 1.7;
   margin: 1em 0 15px;
   padding: 0;
@@ -43,23 +43,23 @@ h1, h2, h3, h4, h5, h6 {
     line-height: 1.4;
   }
 }
-  
-h1 {  
+
+h1 {
   font-size: 30px;
   a {
     color: inherit;
   }
 }
 
-h2 {  
+h2 {
   font-size: 24px;
 }
 
-h3 {  
+h3 {
   font-size: 20px;
 }
 
-h4 {  
+h4 {
   font-size: 18px;
   color: $gray;
 }
@@ -152,7 +152,7 @@ img {
 .masthead {
   padding: 20px 0;
   border-bottom: 1px solid $lightGray;
-  
+
   @include mobile {
     text-align: center;
   }
@@ -189,7 +189,7 @@ img {
   margin: 0;
   color: $darkGray;
   cursor: pointer;
-  font-family: $helveticaNeue; 
+  font-family: $helveticaNeue;
   font-weight: 300;
   font-size: 28px;
   letter-spacing: 1px;
@@ -199,7 +199,7 @@ img {
   margin: -5px 0 0 0;
   color: $gray;
   font-size: 16px;
-  
+
   @include mobile {
     margin: 3px 0;
   }
@@ -208,9 +208,9 @@ img {
 nav {
   float: right;
   margin-top: 23px; // @TODO: Vertically middle align
-  font-family: $helveticaNeue; 
+  font-family: $helveticaNeue;
   font-size: 18px;
-  
+
   @include mobile {
     float: none;
     margin-top: 9px;
@@ -246,7 +246,7 @@ nav {
   border-bottom: none;
 }
 
-.post { 
+.post {
   blockquote {
     margin: 1.8em .8em;
     border-left: 2px solid $gray;
@@ -280,4 +280,5 @@ footer {
 
 // Settled on moving the import of syntax highlighting to the bottom of the CSS
 // ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start
-@import "_highlights";
\ No newline at end of file
+@import "_highlights";
+@import "_svg-icons";
-- 
cgit v1.2.3