From bbf217120b3e733c87b60fdac690118d303420b5 Mon Sep 17 00:00:00 2001
From: Brent Jackson <jacksonblack@gmail.com>
Date: Mon, 10 Mar 2014 20:31:20 -0400
Subject: [PATCH 01/13] Better cylon

---
 index.html            |  4 ++--
 loading-cylon-red.svg | 11 +++++++++++
 site/_theme.scss      |  1 +
 site/style.css        |  2 +-
 4 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 loading-cylon-red.svg

diff --git a/index.html b/index.html
index e3f6822..755c09d 100644
--- a/index.html
+++ b/index.html
@@ -46,9 +46,9 @@ <h1 class="h1 mt2 mb0">wtf</h1>
     </div>
   </div>
 
-  <div class="table min-h100 center bg-mid-gray">
+  <div class="table min-h100 center bg-dark-gray">
     <div class="table-cell">
-      <img src="http://github.com/loading-cylon.svg" width="64" height="64" />
+      <img src="http://github.com/loading-cylon-red.svg" width="256" height="256" />
       <h1 class="h1 mt2 mb0">frak me</h1>
     </div>
   </div>
diff --git a/loading-cylon-red.svg b/loading-cylon-red.svg
new file mode 100644
index 0000000..034075d
--- /dev/null
+++ b/loading-cylon-red.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="#f20" opacity=".8">
+  <path transform="translate(0 0)" d="M0 14 V18 H8 V14z">
+    <animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="1.5s" begin="0" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
+  </path>
+  <path opacity="0.5" transform="translate(0 0)" d="M0 14 V18 H8 V14z">
+    <animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="1.5s" begin="0.1s" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
+  </path>
+  <path opacity="0.25" transform="translate(0 0)" d="M0 14 V18 H8 V14z">
+    <animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="1.5s" begin="0.2s" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
+  </path>
+</svg>
diff --git a/site/_theme.scss b/site/_theme.scss
index 74c3521..f17d884 100644
--- a/site/_theme.scss
+++ b/site/_theme.scss
@@ -5,6 +5,7 @@ $blue: #3ad;
 $light-gray: #f9fcff;
 $mid-gray: #a9acac;
 $dark-gray: #30393f;
+$dark-gray: #292c2f;
 
 //$red: #f43;
 $red: #f54;
diff --git a/site/style.css b/site/style.css
index 5d878eb..3a7a6e1 100644
--- a/site/style.css
+++ b/site/style.css
@@ -1 +1 @@
-body,button,input,select,textarea,pre{margin:0}h1,h2,h3,h4,h5,h6,p,dl,ol,ul{margin-top:0;margin-bottom:1rem}button,input,select,textarea{font-family:inherit;font-size:100%}article,aside,details,figcaption,figure,footer,header,main,nav,section,summary{display:block}body{font-family:'Helvetica Neue', Helvetica, sans-serif;line-height:1.5rem;font-weight:400}h1,.h1,.f1{font-size:2rem;line-height:3rem}h2,.h2,.f2{font-size:1.5rem;line-height:2rem}h3,.h3,.f3{font-size:1.25rem;line-height:2rem}p,.p,.f4,h4,h5,h6,dl,ol,ul{font-size:1.125rem;line-height:1.5rem}small,.small,.f5{font-size:.875rem;line-height:1.5rem}@media screen and (min-width: 48em){.h1{font-size:4rem;line-height:5rem}.h2{font-size:2rem;line-height:3rem}.h3{font-size:1.5rem;line-height:2rem}.p{font-size:1.25rem;line-height:2rem}.small{font-size:1rem}}@media screen and (min-width: 64em){.h1{font-size:6rem;line-height:8rem}.h2{font-size:3rem;line-height:4rem}}strong,.bold{font-weight:bold}.regular{font-weight:normal}.italic{font-style:italic}.caps{text-transform:uppercase;letter-spacing:.2em}.center{text-align:center}.right-align{text-align:right}.measure{max-width:48rem}.measure-narrow{max-width:32rem}.measure-wide{max-width:60rem}.leading-1{line-height:1.5rem}.leading-2{line-height:2rem}.leading-3{line-height:3rem}.leading-4{line-height:4rem}.m0{margin:0}.mb0{margin-bottom:0}.m1{margin:1rem}.mt1{margin-top:1rem}.mr1{margin-right:1rem}.mb1{margin-bottom:1rem}.ml1{margin-left:1rem}.m2{margin:2rem}.mt2{margin-top:2rem}.mr2{margin-right:2rem}.mb2{margin-bottom:2rem}.ml2{margin-left:2rem}.m3{margin:3rem}.mt3{margin-top:3rem}.mr3{margin-right:3rem}.mb3{margin-bottom:3rem}.ml3{margin-left:3rem}.m4{margin:4rem}.mt4{margin-top:4rem}.mr4{margin-right:4rem}.mb4{margin-bottom:4rem}.ml4{margin-left:4rem}.wrap{margin-right:auto;margin-left:auto}.m-responsive{margin:2rem}.mt-responsive{margin-top:2rem}.mr-responsive{margin-right:2rem}.mb-responsive{margin-bottom:2rem}.ml-responsive{margin-left:2rem}@media screen and (min-width: 48em) and (max-width: 64em){.m-responsive{margin:3rem}.mt-responsive{margin-top:3rem}.mr-responsive{margin-right:3rem}.mb-responsive{margin-bottom:3rem}.ml-responsive{margin-left:3rem}}@media screen and (min-width: 64em){.m-responsive{margin:4rem}.mt-responsive{margin-top:4rem}.mr-responsive{margin-right:4rem}.mb-responsive{margin-bottom:4rem}.ml-responsive{margin-left:4rem}}.p1{padding:1rem}.px1{padding-right:1rem;padding-left:1rem}.py1{padding-top:1rem;padding-bottom:1rem}.p2{padding:2rem}.px2{padding-right:2rem;padding-left:2rem}.py2{padding-top:2rem;padding-bottom:2rem}.p3{padding:3rem}.px3{padding-right:3rem;padding-left:3rem}.py3{padding-top:3rem;padding-bottom:3rem}.p4{padding:4rem}.px4{padding-right:4rem;padding-left:4rem}.py4{padding-top:4rem;padding-bottom:4rem}.p-responsive{padding:1.5rem}.px-responsive{padding-right:1.5rem;padding-left:1.5rem}.py-responsive{padding-top:1.5rem;padding-bottom:1.5rem}@media screen and (min-width: 48em) and (max-width: 64em){.p-responsive{padding:3rem}.px-responsive{padding-right:3rem;padding-left:3rem}.py-responsive{padding-top:3rem;padding-bottom:3rem}}@media screen and (min-width: 64em){.p-responsive{padding:4rem}.px-responsive{padding-right:4rem;padding-left:4rem}.py-responsive{padding-top:4rem;padding-bottom:4rem}}html,body{height:100%}.min-h100{min-height:100%}.table{display:table;width:100%}.table-cell{display:table-cell;vertical-align:middle}.inline{display:inline}.block{display:block}.inline-block{display:inline-block}.oh{overflow:hidden}.left{float:left}.right{float:right}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.fit{max-width:100%}.full-width{width:100%}.half-width{width:50%}.mobile-show{display:none}@media screen and (max-width: 48em){.mobile-show,.mobile-block{display:block}.mobile-block{width:100%}.mobile-hide{display:none}.mobile-center{text-align:center}}.button{font-family:inherit;text-decoration:none;cursor:pointer;border:none;-webkit-appearance:none;appearance:none;white-space:nowrap;display:inline-block;line-height:2rem;height:auto;min-height:2rem;padding:.5rem 1rem}.button-big{padding:1rem 1.5rem}.button-small{padding:0 1rem}.bg-red{background-color:#f54}.bg-purple{background-color:#f49}.bg-slate{background-color:#769}.white{color:#fff}.blue{color:#3ad}.light-gray{color:#f9fcff}.mid-gray{color:#a9acac}.dark-gray{color:#30393f}.red{color:#f54}.bg-white{background-color:#fff}.bg-blue{background-color:#3ad}.bg-light-gray{background-color:#f9fcff}.bg-mid-gray{background-color:#a9acac}.bg-dark-gray{background-color:#30393f}.fill-white{fill:#fff}.fill-blue{fill:#3ad}.fill-light-gray{fill:#f9fcff}.fill-mid-gray{fill:#a9acac}.fill-dark-gray{fill:#30393f}.fill-white-alpha{fill:rgba(255,255,255,0.8)}.stroke-mid-gray{stroke:#a9acac}.stroke-light-gray{stroke:#f9fcff}body{color:#30393f;background-color:#f9fcff}a{color:#fff}a:hover{color:rgba(0,0,0,0.6)}.button{border-radius:.25rem;transition-duration:.2s;transition-timing-function:ease;transition-property:box-shadow , background-color}.button:focus{outline:none}.button-box-white{color:#fff;fill:#fff;box-shadow:inset 0 0 0 2px #fff}.button-box-white:focus,.button-box-white:hover{color:#f54;fill:#f54;background-color:#fff}.button-box-blue{color:#3ad;fill:#3ad;box-shadow:inset 0 0 0 2px #3ad}.button-box-blue:focus,.button-box-blue:hover{color:#fff;fill:#fff;background-color:#3ad}.rounded{border-radius:.25rem}.gradient{background-image:linear-gradient(to bottom left, rgba(255,102,0,0.05), rgba(0,102,255,0.05))}.gradient-grid{background-image:url(http://github.com/site/grid.svg),linear-gradient(to bottom left, rgba(255,102,0,0.1), rgba(0,102,255,0.1));background-position:top center}.bg-grid{background-image:url(http://github.com/dev/bg-grid.svg)}.bg-grid-big{background-size:16rem 16rem;background-position:top center}.bg-cover{background-size:cover}.geomicon{width:1em;height:1em;vertical-align:-0.125em}
+body,button,input,select,textarea,pre{margin:0}h1,h2,h3,h4,h5,h6,p,dl,ol,ul{margin-top:0;margin-bottom:1rem}button,input,select,textarea{font-family:inherit;font-size:100%}article,aside,details,figcaption,figure,footer,header,main,nav,section,summary{display:block}body{font-family:'Helvetica Neue', Helvetica, sans-serif;line-height:1.5rem;font-weight:400}h1,.h1,.f1{font-size:2rem;line-height:3rem}h2,.h2,.f2{font-size:1.5rem;line-height:2rem}h3,.h3,.f3{font-size:1.25rem;line-height:2rem}p,.p,.f4,h4,h5,h6,dl,ol,ul{font-size:1.125rem;line-height:1.5rem}small,.small,.f5{font-size:.875rem;line-height:1.5rem}@media screen and (min-width: 48em){.h1{font-size:4rem;line-height:5rem}.h2{font-size:2rem;line-height:3rem}.h3{font-size:1.5rem;line-height:2rem}.p{font-size:1.25rem;line-height:2rem}.small{font-size:1rem}}@media screen and (min-width: 64em){.h1{font-size:6rem;line-height:8rem}.h2{font-size:3rem;line-height:4rem}}strong,.bold{font-weight:bold}.regular{font-weight:normal}.italic{font-style:italic}.caps{text-transform:uppercase;letter-spacing:.2em}.center{text-align:center}.right-align{text-align:right}.measure{max-width:48rem}.measure-narrow{max-width:32rem}.measure-wide{max-width:60rem}.leading-1{line-height:1.5rem}.leading-2{line-height:2rem}.leading-3{line-height:3rem}.leading-4{line-height:4rem}.m0{margin:0}.mb0{margin-bottom:0}.m1{margin:1rem}.mt1{margin-top:1rem}.mr1{margin-right:1rem}.mb1{margin-bottom:1rem}.ml1{margin-left:1rem}.m2{margin:2rem}.mt2{margin-top:2rem}.mr2{margin-right:2rem}.mb2{margin-bottom:2rem}.ml2{margin-left:2rem}.m3{margin:3rem}.mt3{margin-top:3rem}.mr3{margin-right:3rem}.mb3{margin-bottom:3rem}.ml3{margin-left:3rem}.m4{margin:4rem}.mt4{margin-top:4rem}.mr4{margin-right:4rem}.mb4{margin-bottom:4rem}.ml4{margin-left:4rem}.wrap{margin-right:auto;margin-left:auto}.m-responsive{margin:2rem}.mt-responsive{margin-top:2rem}.mr-responsive{margin-right:2rem}.mb-responsive{margin-bottom:2rem}.ml-responsive{margin-left:2rem}@media screen and (min-width: 48em) and (max-width: 64em){.m-responsive{margin:3rem}.mt-responsive{margin-top:3rem}.mr-responsive{margin-right:3rem}.mb-responsive{margin-bottom:3rem}.ml-responsive{margin-left:3rem}}@media screen and (min-width: 64em){.m-responsive{margin:4rem}.mt-responsive{margin-top:4rem}.mr-responsive{margin-right:4rem}.mb-responsive{margin-bottom:4rem}.ml-responsive{margin-left:4rem}}.p1{padding:1rem}.px1{padding-right:1rem;padding-left:1rem}.py1{padding-top:1rem;padding-bottom:1rem}.p2{padding:2rem}.px2{padding-right:2rem;padding-left:2rem}.py2{padding-top:2rem;padding-bottom:2rem}.p3{padding:3rem}.px3{padding-right:3rem;padding-left:3rem}.py3{padding-top:3rem;padding-bottom:3rem}.p4{padding:4rem}.px4{padding-right:4rem;padding-left:4rem}.py4{padding-top:4rem;padding-bottom:4rem}.p-responsive{padding:1.5rem}.px-responsive{padding-right:1.5rem;padding-left:1.5rem}.py-responsive{padding-top:1.5rem;padding-bottom:1.5rem}@media screen and (min-width: 48em) and (max-width: 64em){.p-responsive{padding:3rem}.px-responsive{padding-right:3rem;padding-left:3rem}.py-responsive{padding-top:3rem;padding-bottom:3rem}}@media screen and (min-width: 64em){.p-responsive{padding:4rem}.px-responsive{padding-right:4rem;padding-left:4rem}.py-responsive{padding-top:4rem;padding-bottom:4rem}}html,body{height:100%}.min-h100{min-height:100%}.table{display:table;width:100%}.table-cell{display:table-cell;vertical-align:middle}.inline{display:inline}.block{display:block}.inline-block{display:inline-block}.oh{overflow:hidden}.left{float:left}.right{float:right}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.fit{max-width:100%}.full-width{width:100%}.half-width{width:50%}.mobile-show{display:none}@media screen and (max-width: 48em){.mobile-show,.mobile-block{display:block}.mobile-block{width:100%}.mobile-hide{display:none}.mobile-center{text-align:center}}.button{font-family:inherit;text-decoration:none;cursor:pointer;border:none;-webkit-appearance:none;appearance:none;white-space:nowrap;display:inline-block;line-height:2rem;height:auto;min-height:2rem;padding:.5rem 1rem}.button-big{padding:1rem 1.5rem}.button-small{padding:0 1rem}.bg-red{background-color:#f54}.bg-purple{background-color:#f49}.bg-slate{background-color:#769}.white{color:#fff}.blue{color:#3ad}.light-gray{color:#f9fcff}.mid-gray{color:#a9acac}.dark-gray{color:#292c2f}.red{color:#f54}.bg-white{background-color:#fff}.bg-blue{background-color:#3ad}.bg-light-gray{background-color:#f9fcff}.bg-mid-gray{background-color:#a9acac}.bg-dark-gray{background-color:#292c2f}.fill-white{fill:#fff}.fill-blue{fill:#3ad}.fill-light-gray{fill:#f9fcff}.fill-mid-gray{fill:#a9acac}.fill-dark-gray{fill:#292c2f}.fill-white-alpha{fill:rgba(255,255,255,0.8)}.stroke-mid-gray{stroke:#a9acac}.stroke-light-gray{stroke:#f9fcff}body{color:#292c2f;background-color:#f9fcff}a{color:#fff}a:hover{color:rgba(0,0,0,0.6)}.button{border-radius:.25rem;transition-duration:.2s;transition-timing-function:ease;transition-property:box-shadow , background-color}.button:focus{outline:none}.button-box-white{color:#fff;fill:#fff;box-shadow:inset 0 0 0 2px #fff}.button-box-white:focus,.button-box-white:hover{color:#f54;fill:#f54;background-color:#fff}.button-box-blue{color:#3ad;fill:#3ad;box-shadow:inset 0 0 0 2px #3ad}.button-box-blue:focus,.button-box-blue:hover{color:#fff;fill:#fff;background-color:#3ad}.rounded{border-radius:.25rem}.gradient{background-image:linear-gradient(to bottom left, rgba(255,102,0,0.05), rgba(0,102,255,0.05))}.gradient-grid{background-image:url(http://github.com/site/grid.svg),linear-gradient(to bottom left, rgba(255,102,0,0.1), rgba(0,102,255,0.1));background-position:top center}.bg-grid{background-image:url(http://github.com/dev/bg-grid.svg)}.bg-grid-big{background-size:16rem 16rem;background-position:top center}.bg-cover{background-size:cover}.geomicon{width:1em;height:1em;vertical-align:-0.125em}

From 133d3e68a0cf3e135940ffe31d96ac6080734b93 Mon Sep 17 00:00:00 2001
From: jxnblk <jackson@kickstarter.com>
Date: Tue, 11 Mar 2014 10:54:26 -0400
Subject: [PATCH 02/13] Color edits

---
 index.html            | 11 ++++++-----
 loading-cylon-red.svg | 12 ++++++------
 site/_theme.scss      | 23 ++++++++++++++++++-----
 site/style.css        |  2 +-
 4 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index 755c09d..c1712c1 100644
--- a/index.html
+++ b/index.html
@@ -25,30 +25,30 @@ <h1 class="h1 mt2 mb0">Loading...</h1>
     </div>
   </div>
 
-  <div class="table min-h100 center bg-slate">
+  <div class="table min-h100 center bg-purple">
     <div class="table-cell">
       <img src="http://github.com/loading-spinning-bubbles.svg" width="64" height="64" />
       <h1 class="h1 mt2 mb0">still loading...</h1>
     </div>
   </div>
 
-  <div class="table min-h100 center bg-red">
+  <div class="table min-h100 center bg-blue">
     <div class="table-cell">
       <img src="http://github.com/loading-spokes.svg" width="64" height="64" />
       <h1 class="h1 mt2 mb0">seriously?</h1>
     </div>
   </div>
 
-  <div class="table min-h100 center bg-blue">
+  <div class="table min-h100 center bg-green">
     <div class="table-cell">
       <img src="http://github.com/loading-bars.svg" width="64" height="64" />
       <h1 class="h1 mt2 mb0">wtf</h1>
     </div>
   </div>
 
-  <div class="table min-h100 center bg-dark-gray">
+  <div class="table min-h100 center bg-dark">
     <div class="table-cell">
-      <img src="http://github.com/loading-cylon-red.svg" width="256" height="256" />
+      <img src="http://github.com/loading-cylon-red.svg" width="256" height="64" />
       <h1 class="h1 mt2 mb0">frak me</h1>
     </div>
   </div>
@@ -71,3 +71,4 @@ <h1 class="h1 mt2">i give up</h1>
   </div>
 </body>
 </html>
+
diff --git a/loading-cylon-red.svg b/loading-cylon-red.svg
index 034075d..e841a4e 100644
--- a/loading-cylon-red.svg
+++ b/loading-cylon-red.svg
@@ -1,11 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="#f20" opacity=".8">
-  <path transform="translate(0 0)" d="M0 14 V18 H8 V14z">
-    <animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="1.5s" begin="0" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 12 32 20" width="32" height="8" fill="#f20" preserveAspectRatio="none">
+  <path opacity="0.8" transform="translate(0 0)" d="M2 12 V20 H6 V12z">
+    <animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="2s" begin="0" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
   </path>
-  <path opacity="0.5" transform="translate(0 0)" d="M0 14 V18 H8 V14z">
-    <animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="1.5s" begin="0.1s" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
+  <path opacity="0.5" transform="translate(0 0)" d="M0 13 V19 H8 V13z">
+    <animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="2s" begin="0.1s" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
   </path>
   <path opacity="0.25" transform="translate(0 0)" d="M0 14 V18 H8 V14z">
-    <animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="1.5s" begin="0.2s" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
+    <animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="2s" begin="0.2s" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
   </path>
 </svg>
diff --git a/site/_theme.scss b/site/_theme.scss
index f17d884..0593c16 100644
--- a/site/_theme.scss
+++ b/site/_theme.scss
@@ -7,14 +7,28 @@ $mid-gray: #a9acac;
 $dark-gray: #30393f;
 $dark-gray: #292c2f;
 
-//$red: #f43;
+$mid-gray: #afb99f;
+
+$cream: #dfe9cf;
 $red: #f54;
-$purple: #f49;
-$slate: #769;
+$purple: #aa4f80;
+$blue: #40bfc0;
+$green: #50cf77;
+$orange: #efaf50;
+$dark: #202c2f;
+
 
 .bg-red { background-color: $red; }
 .bg-purple { background-color: $purple; }
-.bg-slate { background-color: $slate; }
+.bg-blue { background-color: $blue; }
+.bg-green { background-color: $green; }
+.bg-orange { background-color: $orange; }
+.bg-dark { background-color: $dark; }
+.bg-cream { background-color: $cream; }
+
+.dark { color: $dark; }
+
+.cream { color: $cream; }
 
 .white { color: #fff; }
 .blue { color: $blue; }
@@ -25,7 +39,6 @@ $slate: #769;
 .red { color: $red; }
 
 .bg-white { background-color: #fff; }
-.bg-blue { background-color: $blue; }
 .bg-light-gray { background-color: $light-gray; }
 .bg-mid-gray { background-color: $mid-gray; }
 .bg-dark-gray { background-color: $dark-gray; }
diff --git a/site/style.css b/site/style.css
index 3a7a6e1..e578580 100644
--- a/site/style.css
+++ b/site/style.css
@@ -1 +1 @@
-body,button,input,select,textarea,pre{margin:0}h1,h2,h3,h4,h5,h6,p,dl,ol,ul{margin-top:0;margin-bottom:1rem}button,input,select,textarea{font-family:inherit;font-size:100%}article,aside,details,figcaption,figure,footer,header,main,nav,section,summary{display:block}body{font-family:'Helvetica Neue', Helvetica, sans-serif;line-height:1.5rem;font-weight:400}h1,.h1,.f1{font-size:2rem;line-height:3rem}h2,.h2,.f2{font-size:1.5rem;line-height:2rem}h3,.h3,.f3{font-size:1.25rem;line-height:2rem}p,.p,.f4,h4,h5,h6,dl,ol,ul{font-size:1.125rem;line-height:1.5rem}small,.small,.f5{font-size:.875rem;line-height:1.5rem}@media screen and (min-width: 48em){.h1{font-size:4rem;line-height:5rem}.h2{font-size:2rem;line-height:3rem}.h3{font-size:1.5rem;line-height:2rem}.p{font-size:1.25rem;line-height:2rem}.small{font-size:1rem}}@media screen and (min-width: 64em){.h1{font-size:6rem;line-height:8rem}.h2{font-size:3rem;line-height:4rem}}strong,.bold{font-weight:bold}.regular{font-weight:normal}.italic{font-style:italic}.caps{text-transform:uppercase;letter-spacing:.2em}.center{text-align:center}.right-align{text-align:right}.measure{max-width:48rem}.measure-narrow{max-width:32rem}.measure-wide{max-width:60rem}.leading-1{line-height:1.5rem}.leading-2{line-height:2rem}.leading-3{line-height:3rem}.leading-4{line-height:4rem}.m0{margin:0}.mb0{margin-bottom:0}.m1{margin:1rem}.mt1{margin-top:1rem}.mr1{margin-right:1rem}.mb1{margin-bottom:1rem}.ml1{margin-left:1rem}.m2{margin:2rem}.mt2{margin-top:2rem}.mr2{margin-right:2rem}.mb2{margin-bottom:2rem}.ml2{margin-left:2rem}.m3{margin:3rem}.mt3{margin-top:3rem}.mr3{margin-right:3rem}.mb3{margin-bottom:3rem}.ml3{margin-left:3rem}.m4{margin:4rem}.mt4{margin-top:4rem}.mr4{margin-right:4rem}.mb4{margin-bottom:4rem}.ml4{margin-left:4rem}.wrap{margin-right:auto;margin-left:auto}.m-responsive{margin:2rem}.mt-responsive{margin-top:2rem}.mr-responsive{margin-right:2rem}.mb-responsive{margin-bottom:2rem}.ml-responsive{margin-left:2rem}@media screen and (min-width: 48em) and (max-width: 64em){.m-responsive{margin:3rem}.mt-responsive{margin-top:3rem}.mr-responsive{margin-right:3rem}.mb-responsive{margin-bottom:3rem}.ml-responsive{margin-left:3rem}}@media screen and (min-width: 64em){.m-responsive{margin:4rem}.mt-responsive{margin-top:4rem}.mr-responsive{margin-right:4rem}.mb-responsive{margin-bottom:4rem}.ml-responsive{margin-left:4rem}}.p1{padding:1rem}.px1{padding-right:1rem;padding-left:1rem}.py1{padding-top:1rem;padding-bottom:1rem}.p2{padding:2rem}.px2{padding-right:2rem;padding-left:2rem}.py2{padding-top:2rem;padding-bottom:2rem}.p3{padding:3rem}.px3{padding-right:3rem;padding-left:3rem}.py3{padding-top:3rem;padding-bottom:3rem}.p4{padding:4rem}.px4{padding-right:4rem;padding-left:4rem}.py4{padding-top:4rem;padding-bottom:4rem}.p-responsive{padding:1.5rem}.px-responsive{padding-right:1.5rem;padding-left:1.5rem}.py-responsive{padding-top:1.5rem;padding-bottom:1.5rem}@media screen and (min-width: 48em) and (max-width: 64em){.p-responsive{padding:3rem}.px-responsive{padding-right:3rem;padding-left:3rem}.py-responsive{padding-top:3rem;padding-bottom:3rem}}@media screen and (min-width: 64em){.p-responsive{padding:4rem}.px-responsive{padding-right:4rem;padding-left:4rem}.py-responsive{padding-top:4rem;padding-bottom:4rem}}html,body{height:100%}.min-h100{min-height:100%}.table{display:table;width:100%}.table-cell{display:table-cell;vertical-align:middle}.inline{display:inline}.block{display:block}.inline-block{display:inline-block}.oh{overflow:hidden}.left{float:left}.right{float:right}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.fit{max-width:100%}.full-width{width:100%}.half-width{width:50%}.mobile-show{display:none}@media screen and (max-width: 48em){.mobile-show,.mobile-block{display:block}.mobile-block{width:100%}.mobile-hide{display:none}.mobile-center{text-align:center}}.button{font-family:inherit;text-decoration:none;cursor:pointer;border:none;-webkit-appearance:none;appearance:none;white-space:nowrap;display:inline-block;line-height:2rem;height:auto;min-height:2rem;padding:.5rem 1rem}.button-big{padding:1rem 1.5rem}.button-small{padding:0 1rem}.bg-red{background-color:#f54}.bg-purple{background-color:#f49}.bg-slate{background-color:#769}.white{color:#fff}.blue{color:#3ad}.light-gray{color:#f9fcff}.mid-gray{color:#a9acac}.dark-gray{color:#292c2f}.red{color:#f54}.bg-white{background-color:#fff}.bg-blue{background-color:#3ad}.bg-light-gray{background-color:#f9fcff}.bg-mid-gray{background-color:#a9acac}.bg-dark-gray{background-color:#292c2f}.fill-white{fill:#fff}.fill-blue{fill:#3ad}.fill-light-gray{fill:#f9fcff}.fill-mid-gray{fill:#a9acac}.fill-dark-gray{fill:#292c2f}.fill-white-alpha{fill:rgba(255,255,255,0.8)}.stroke-mid-gray{stroke:#a9acac}.stroke-light-gray{stroke:#f9fcff}body{color:#292c2f;background-color:#f9fcff}a{color:#fff}a:hover{color:rgba(0,0,0,0.6)}.button{border-radius:.25rem;transition-duration:.2s;transition-timing-function:ease;transition-property:box-shadow , background-color}.button:focus{outline:none}.button-box-white{color:#fff;fill:#fff;box-shadow:inset 0 0 0 2px #fff}.button-box-white:focus,.button-box-white:hover{color:#f54;fill:#f54;background-color:#fff}.button-box-blue{color:#3ad;fill:#3ad;box-shadow:inset 0 0 0 2px #3ad}.button-box-blue:focus,.button-box-blue:hover{color:#fff;fill:#fff;background-color:#3ad}.rounded{border-radius:.25rem}.gradient{background-image:linear-gradient(to bottom left, rgba(255,102,0,0.05), rgba(0,102,255,0.05))}.gradient-grid{background-image:url(http://github.com/site/grid.svg),linear-gradient(to bottom left, rgba(255,102,0,0.1), rgba(0,102,255,0.1));background-position:top center}.bg-grid{background-image:url(http://github.com/dev/bg-grid.svg)}.bg-grid-big{background-size:16rem 16rem;background-position:top center}.bg-cover{background-size:cover}.geomicon{width:1em;height:1em;vertical-align:-0.125em}
+body,button,input,select,textarea,pre{margin:0}h1,h2,h3,h4,h5,h6,p,dl,ol,ul{margin-top:0;margin-bottom:1rem}button,input,select,textarea{font-family:inherit;font-size:100%}article,aside,details,figcaption,figure,footer,header,main,nav,section,summary{display:block}body{font-family:'Helvetica Neue', Helvetica, sans-serif;line-height:1.5rem;font-weight:400}h1,.h1,.f1{font-size:2rem;line-height:3rem}h2,.h2,.f2{font-size:1.5rem;line-height:2rem}h3,.h3,.f3{font-size:1.25rem;line-height:2rem}p,.p,.f4,h4,h5,h6,dl,ol,ul{font-size:1.125rem;line-height:1.5rem}small,.small,.f5{font-size:.875rem;line-height:1.5rem}@media screen and (min-width: 48em){.h1{font-size:4rem;line-height:5rem}.h2{font-size:2rem;line-height:3rem}.h3{font-size:1.5rem;line-height:2rem}.p{font-size:1.25rem;line-height:2rem}.small{font-size:1rem}}@media screen and (min-width: 64em){.h1{font-size:6rem;line-height:8rem}.h2{font-size:3rem;line-height:4rem}}strong,.bold{font-weight:bold}.regular{font-weight:normal}.italic{font-style:italic}.caps{text-transform:uppercase;letter-spacing:.2em}.center{text-align:center}.right-align{text-align:right}.measure{max-width:48rem}.measure-narrow{max-width:32rem}.measure-wide{max-width:60rem}.leading-1{line-height:1.5rem}.leading-2{line-height:2rem}.leading-3{line-height:3rem}.leading-4{line-height:4rem}.m0{margin:0}.mb0{margin-bottom:0}.m1{margin:1rem}.mt1{margin-top:1rem}.mr1{margin-right:1rem}.mb1{margin-bottom:1rem}.ml1{margin-left:1rem}.m2{margin:2rem}.mt2{margin-top:2rem}.mr2{margin-right:2rem}.mb2{margin-bottom:2rem}.ml2{margin-left:2rem}.m3{margin:3rem}.mt3{margin-top:3rem}.mr3{margin-right:3rem}.mb3{margin-bottom:3rem}.ml3{margin-left:3rem}.m4{margin:4rem}.mt4{margin-top:4rem}.mr4{margin-right:4rem}.mb4{margin-bottom:4rem}.ml4{margin-left:4rem}.wrap{margin-right:auto;margin-left:auto}.m-responsive{margin:2rem}.mt-responsive{margin-top:2rem}.mr-responsive{margin-right:2rem}.mb-responsive{margin-bottom:2rem}.ml-responsive{margin-left:2rem}@media screen and (min-width: 48em) and (max-width: 64em){.m-responsive{margin:3rem}.mt-responsive{margin-top:3rem}.mr-responsive{margin-right:3rem}.mb-responsive{margin-bottom:3rem}.ml-responsive{margin-left:3rem}}@media screen and (min-width: 64em){.m-responsive{margin:4rem}.mt-responsive{margin-top:4rem}.mr-responsive{margin-right:4rem}.mb-responsive{margin-bottom:4rem}.ml-responsive{margin-left:4rem}}.p1{padding:1rem}.px1{padding-right:1rem;padding-left:1rem}.py1{padding-top:1rem;padding-bottom:1rem}.p2{padding:2rem}.px2{padding-right:2rem;padding-left:2rem}.py2{padding-top:2rem;padding-bottom:2rem}.p3{padding:3rem}.px3{padding-right:3rem;padding-left:3rem}.py3{padding-top:3rem;padding-bottom:3rem}.p4{padding:4rem}.px4{padding-right:4rem;padding-left:4rem}.py4{padding-top:4rem;padding-bottom:4rem}.p-responsive{padding:1.5rem}.px-responsive{padding-right:1.5rem;padding-left:1.5rem}.py-responsive{padding-top:1.5rem;padding-bottom:1.5rem}@media screen and (min-width: 48em) and (max-width: 64em){.p-responsive{padding:3rem}.px-responsive{padding-right:3rem;padding-left:3rem}.py-responsive{padding-top:3rem;padding-bottom:3rem}}@media screen and (min-width: 64em){.p-responsive{padding:4rem}.px-responsive{padding-right:4rem;padding-left:4rem}.py-responsive{padding-top:4rem;padding-bottom:4rem}}html,body{height:100%}.min-h100{min-height:100%}.table{display:table;width:100%}.table-cell{display:table-cell;vertical-align:middle}.inline{display:inline}.block{display:block}.inline-block{display:inline-block}.oh{overflow:hidden}.left{float:left}.right{float:right}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.fit{max-width:100%}.full-width{width:100%}.half-width{width:50%}.mobile-show{display:none}@media screen and (max-width: 48em){.mobile-show,.mobile-block{display:block}.mobile-block{width:100%}.mobile-hide{display:none}.mobile-center{text-align:center}}.button{font-family:inherit;text-decoration:none;cursor:pointer;border:none;-webkit-appearance:none;appearance:none;white-space:nowrap;display:inline-block;line-height:2rem;height:auto;min-height:2rem;padding:.5rem 1rem}.button-big{padding:1rem 1.5rem}.button-small{padding:0 1rem}.bg-red{background-color:#f54}.bg-purple{background-color:#aa4f80}.bg-blue{background-color:#40bfc0}.bg-green{background-color:#50cf77}.bg-orange{background-color:#efaf50}.bg-dark{background-color:#202c2f}.bg-cream{background-color:#dfe9cf}.dark{color:#202c2f}.cream{color:#dfe9cf}.white{color:#fff}.blue{color:#40bfc0}.light-gray{color:#f9fcff}.mid-gray{color:#afb99f}.dark-gray{color:#292c2f}.red{color:#f54}.bg-white{background-color:#fff}.bg-light-gray{background-color:#f9fcff}.bg-mid-gray{background-color:#afb99f}.bg-dark-gray{background-color:#292c2f}.fill-white{fill:#fff}.fill-blue{fill:#40bfc0}.fill-light-gray{fill:#f9fcff}.fill-mid-gray{fill:#afb99f}.fill-dark-gray{fill:#292c2f}.fill-white-alpha{fill:rgba(255,255,255,0.8)}.stroke-mid-gray{stroke:#afb99f}.stroke-light-gray{stroke:#f9fcff}body{color:#292c2f;background-color:#f9fcff}a{color:#fff}a:hover{color:rgba(0,0,0,0.6)}.button{border-radius:.25rem;transition-duration:.2s;transition-timing-function:ease;transition-property:box-shadow , background-color}.button:focus{outline:none}.button-box-white{color:#fff;fill:#fff;box-shadow:inset 0 0 0 2px #fff}.button-box-white:focus,.button-box-white:hover{color:#f54;fill:#f54;background-color:#fff}.button-box-blue{color:#40bfc0;fill:#40bfc0;box-shadow:inset 0 0 0 2px #40bfc0}.button-box-blue:focus,.button-box-blue:hover{color:#fff;fill:#fff;background-color:#40bfc0}.rounded{border-radius:.25rem}.gradient{background-image:linear-gradient(to bottom left, rgba(255,102,0,0.05), rgba(0,102,255,0.05))}.gradient-grid{background-image:url(http://github.com/site/grid.svg),linear-gradient(to bottom left, rgba(255,102,0,0.1), rgba(0,102,255,0.1));background-position:top center}.bg-grid{background-image:url(http://github.com/dev/bg-grid.svg)}.bg-grid-big{background-size:16rem 16rem;background-position:top center}.bg-cover{background-size:cover}.geomicon{width:1em;height:1em;vertical-align:-0.125em}

From 5de70b0ebb42d2c5419fb4ad184d189a4b40848d Mon Sep 17 00:00:00 2001
From: jxnblk <jackson@kickstarter.com>
Date: Tue, 11 Mar 2014 12:00:27 -0400
Subject: [PATCH 03/13] Adjust cylon

---
 index.html            | 2 +-
 loading-cylon-red.svg | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index c1712c1..a6262d7 100644
--- a/index.html
+++ b/index.html
@@ -48,7 +48,7 @@ <h1 class="h1 mt2 mb0">wtf</h1>
 
   <div class="table min-h100 center bg-dark">
     <div class="table-cell">
-      <img src="http://github.com/loading-cylon-red.svg" width="256" height="64" />
+      <img src="http://github.com/loading-cylon-red.svg" width="256" height="32" />
       <h1 class="h1 mt2 mb0">frak me</h1>
     </div>
   </div>
diff --git a/loading-cylon-red.svg b/loading-cylon-red.svg
index e841a4e..67140a4 100644
--- a/loading-cylon-red.svg
+++ b/loading-cylon-red.svg
@@ -1,8 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 12 32 20" width="32" height="8" fill="#f20" preserveAspectRatio="none">
-  <path opacity="0.8" transform="translate(0 0)" d="M2 12 V20 H6 V12z">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 14 32 18" width="32" height="4" fill="#f20" preserveAspectRatio="none">
+  <path opacity="0.8" transform="translate(0 0)" d="M2 14 V18 H6 V14z">
     <animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="2s" begin="0" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
   </path>
-  <path opacity="0.5" transform="translate(0 0)" d="M0 13 V19 H8 V13z">
+  <path opacity="0.5" transform="translate(0 0)" d="M0 14 V18 H8 V14z">
     <animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="2s" begin="0.1s" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
   </path>
   <path opacity="0.25" transform="translate(0 0)" d="M0 14 V18 H8 V14z">

From e019a429110ba70ffbd4513aab5129eaa637d60a Mon Sep 17 00:00:00 2001
From: jxnblk <jackson@kickstarter.com>
Date: Tue, 11 Mar 2014 12:01:56 -0400
Subject: [PATCH 04/13] Colors

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index a6262d7..b27c252 100644
--- a/index.html
+++ b/index.html
@@ -53,7 +53,7 @@ <h1 class="h1 mt2 mb0">frak me</h1>
     </div>
   </div>
 
-  <div class="table min-h100 center bg-red">
+  <div class="table min-h100 center bg-mid-gray">
     <div class="table-cell">
       <img src="http://github.com/loading-spin.svg" width="64" height="64" />
       <h1 class="h1 mt2">i give up</h1>

From 72cddd9e93e91400f83acbc8759c6bf4b64f3b4c Mon Sep 17 00:00:00 2001
From: jxnblk <jackson@kickstarter.com>
Date: Tue, 11 Mar 2014 12:03:22 -0400
Subject: [PATCH 05/13] Padding

---
 index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index b27c252..a34ab2b 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
 <body class="white bg-red">
   
   <div class="table min-h100 center bg-red">
-    <div class="table-cell">
+    <div class="table-cell py4">
       <img src="http://github.com/loading-bubbles.svg" width="64" height="64" />
       <h1 class="h1 mt2 mb0">Loading...</h1>
       <p class="small mb2">This could take a while</p>
@@ -26,35 +26,35 @@ <h1 class="h1 mt2 mb0">Loading...</h1>
   </div>
 
   <div class="table min-h100 center bg-purple">
-    <div class="table-cell">
+    <div class="table-cell py4">
       <img src="http://github.com/loading-spinning-bubbles.svg" width="64" height="64" />
       <h1 class="h1 mt2 mb0">still loading...</h1>
     </div>
   </div>
 
   <div class="table min-h100 center bg-blue">
-    <div class="table-cell">
+    <div class="table-cell py4">
       <img src="http://github.com/loading-spokes.svg" width="64" height="64" />
       <h1 class="h1 mt2 mb0">seriously?</h1>
     </div>
   </div>
 
   <div class="table min-h100 center bg-green">
-    <div class="table-cell">
+    <div class="table-cell py4">
       <img src="http://github.com/loading-bars.svg" width="64" height="64" />
       <h1 class="h1 mt2 mb0">wtf</h1>
     </div>
   </div>
 
   <div class="table min-h100 center bg-dark">
-    <div class="table-cell">
+    <div class="table-cell py4">
       <img src="http://github.com/loading-cylon-red.svg" width="256" height="32" />
       <h1 class="h1 mt2 mb0">frak me</h1>
     </div>
   </div>
 
   <div class="table min-h100 center bg-mid-gray">
-    <div class="table-cell">
+    <div class="table-cell py4">
       <img src="http://github.com/loading-spin.svg" width="64" height="64" />
       <h1 class="h1 mt2">i give up</h1>
         <a href="https://github.com/jxnblk/loading" class="button button-box-white mr1">View on Github</a>

From 5734bd9de3f4c8bfea9014c293c92078e26b5c8f Mon Sep 17 00:00:00 2001
From: Brent Jackson <jxnblk@gmail.com>
Date: Mon, 17 Mar 2014 10:09:31 -0400
Subject: [PATCH 06/13] Leading zero for Firefox

---
 loading-spin.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/loading-spin.svg b/loading-spin.svg
index 2432775..a5f7a7b 100644
--- a/loading-spin.svg
+++ b/loading-spin.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="white">
   <path opacity=".25" d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"/>
   <path d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z">
-    <animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur=".8s" repeatCount="indefinite" />
+    <animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.8s" repeatCount="indefinite" />
   </path>
 </svg>

From 62f9caf38751125579e60e76b8b17db53142ee37 Mon Sep 17 00:00:00 2001
From: Bruno Wego <brunowego@gmail.com>
Date: Wed, 6 May 2015 20:14:02 -0300
Subject: [PATCH 07/13] Add bower.json file

---
 bower.json | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 bower.json

diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..d1a621a
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,21 @@
+{
+  "name": "loading",
+  "version": "0.0.0",
+  "homepage": "https://github.com/jxnblk/loading",
+  "main": [
+    "./loading-balls.svg",
+    "./loading-bars.svg",
+    "./loading-bubbles.svg",
+    "./loading-cubes.svg",
+    "./loading-cylon.svg",
+    "./loading-spin.svg",
+    "./loading-spinning-bubbles.svg",
+    "./loading-spokes.svg"
+  ],
+  "keywords": [
+    "loading",
+    "ajax",
+    "svg"
+  ],
+  "license": "MIT"
+}

From 4547f1d43204e569fb535e52b8506476a744b3be Mon Sep 17 00:00:00 2001
From: jxnblk <jacksonblack@gmail.com>
Date: Sun, 7 Jun 2015 15:29:17 -0400
Subject: [PATCH 08/13] Add stars button, tweet button, and ad

---
 index.html | 111 ++++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 88 insertions(+), 23 deletions(-)

diff --git a/index.html b/index.html
index e3f6822..dfa7821 100644
--- a/index.html
+++ b/index.html
@@ -7,67 +7,132 @@
   <meta name="description" content="This could take a while">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="http://github.com/site/style.css" />
+  <style>
+    .y100 { min-height: 100vh }
+  </style>
 </head>
 <body class="white bg-red">
   
-  <div class="table min-h100 center bg-red">
+  <div class="table y100 center bg-red">
     <div class="table-cell">
       <img src="http://github.com/loading-bubbles.svg" width="64" height="64" />
       <h1 class="h1 mt2 mb0">Loading...</h1>
       <p class="small mb2">This could take a while</p>
-      <a href="https://github.com/jxnblk/loading" class="button button-box-white mr1">View on Github</a>
-      <a href="https://twitter.com/intent/tweet?text=Loading:%20this%20could%20take%20a%20while.%20&url=http://jxnblk.github.io/loading&via=jxnblk" target="_blank" class="button button-box-white">
-        <svg class="geomicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
-          <path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"/>
-        </svg>
-        Tweet
-      </a>
+      <div class="table mb3">
+        <div class="table-cell half-width"></div>
+        <div class="table-cell">
+          <iframe src="https://ghbtns.com/github-btn.html?user=jxnblk&repo=loading&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
+        </div>
+        <div class="table-cell">
+          <a href="https://twitter.com/share"
+            class="twitter-share-button"
+            data-text="Loading... this could take a while"
+            data-via="jxnblk"
+            data-size="large">
+              Tweet
+          </a>
+        </div>
+        <div class="table-cell half-width"></div>
+      </div>
+
+    <div id="ad-container" style="bottom:0;right:0;"
+      class="center sm-fixed p1">
+      <script async type="text/javascript" src="http://cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&placement=jxnblkcom" id="_carbonads_js"></script>
+      <style>
+        #carbonads {
+          display: inline-block;
+          font-size: 14px;
+          line-height: 1.25;
+          text-align: left;
+          max-width: 320px;
+        }
+        #carbonads a,
+        #carbonads a:hover {
+          text-decoration: none;
+          color: inherit;
+        }
+        #carbonads span { display: block }
+        #carbonads > span::before,
+        #carbonads > span::after {
+          content: '';
+          display: table;
+        }
+        #carbonads > span::after {
+          clear: both;
+        }
+        .carbon-img {
+          float: left;
+          margin-right: .5em;
+        }
+        .carbon-img > img { display: block }
+        .carbon-text { overflow: hidden }
+        .carbon-poweredby {
+          float: left;
+          margin-top: .25em;
+          opacity: 0.5;
+        }
+        @media (min-width: 40em) {
+          .sm-fixed { position: fixed }
+        }
+      </style>
+    </div>
+
     </div>
   </div>
 
-  <div class="table min-h100 center bg-slate">
+  <div class="table y100 center bg-slate">
     <div class="table-cell">
       <img src="http://github.com/loading-spinning-bubbles.svg" width="64" height="64" />
       <h1 class="h1 mt2 mb0">still loading...</h1>
     </div>
   </div>
 
-  <div class="table min-h100 center bg-red">
+  <div class="table y100 center bg-red">
     <div class="table-cell">
       <img src="http://github.com/loading-spokes.svg" width="64" height="64" />
       <h1 class="h1 mt2 mb0">seriously?</h1>
     </div>
   </div>
 
-  <div class="table min-h100 center bg-blue">
+  <div class="table y100 center bg-blue">
     <div class="table-cell">
       <img src="http://github.com/loading-bars.svg" width="64" height="64" />
       <h1 class="h1 mt2 mb0">wtf</h1>
     </div>
   </div>
 
-  <div class="table min-h100 center bg-mid-gray">
+  <div class="table y100 center bg-mid-gray">
     <div class="table-cell">
       <img src="http://github.com/loading-cylon.svg" width="64" height="64" />
       <h1 class="h1 mt2 mb0">frak me</h1>
     </div>
   </div>
 
-  <div class="table min-h100 center bg-red">
+  <div class="table y100 center bg-red">
     <div class="table-cell">
       <img src="http://github.com/loading-spin.svg" width="64" height="64" />
       <h1 class="h1 mt2">i give up</h1>
-        <a href="https://github.com/jxnblk/loading" class="button button-box-white mr1">View on Github</a>
-        <a href="https://twitter.com/intent/tweet?text=Loading:%20this%20could%20take%20a%20while.%20&url=http://jxnblk.github.io/loading&via=jxnblk" target="_blank" class="button button-box-white">
-          <svg class="geomicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
-            <path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"/>
-          </svg>
-          Tweet
-        </a>
-      <p class="small mt1">Made with love by
-        <a href="http://jxnblk.com/">Jxnblk</a>
-      </p>
+      <div class="table">
+        <div class="table-cell half-width"></div>
+        <div class="table-cell">
+          <iframe src="https://ghbtns.com/github-btn.html?user=jxnblk&repo=loading&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
+        </div>
+        <div class="table-cell">
+          <a href="https://twitter.com/share"
+            class="twitter-share-button"
+            data-text="Loading... this could take a while"
+            data-via="jxnblk"
+            data-size="large">
+              Tweet
+          </a>
+        </div>
+        <div class="table-cell half-width"></div>
+      </div>
+      <a href="https://github.com/jxnblk/loading" class="bold mt2 block">GitHub</a>
+      <a href="http://jxnblk.com/" class="bold mt2 block">Made by Jxnblk</a>
     </div>
   </div>
+
+  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
 </body>
 </html>

From d584ffb01fb0ed0b8a5cd15f014713150752f540 Mon Sep 17 00:00:00 2001
From: jxnblk <jacksonblack@gmail.com>
Date: Sun, 7 Jun 2015 15:37:22 -0400
Subject: [PATCH 09/13] Add GA script

---
 index.html | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index f933165..7f04208 100644
--- a/index.html
+++ b/index.html
@@ -133,7 +133,17 @@ <h1 class="h1 mt2">i give up</h1>
     </div>
   </div>
 
-  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
+<script>
+(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+ga('create', 'UA-4603832-6', 'auto');
+ga('send', 'pageview');
+</script>
+
+<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
+
 </body>
 </html>
 

From d77fd9845ca14e27919803a3e8bd802737683aca Mon Sep 17 00:00:00 2001
From: jxnblk <jacksonblack@gmail.com>
Date: Sun, 7 Jun 2015 15:41:54 -0400
Subject: [PATCH 10/13] Update link in readme

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index bddc6f9..e2e17a0 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 # Loading...
 This could take a while
 
-http://jxnblk.github.io/loading
+http://jxnblk.com/loading
 
 ## Usage
 

From 93b63bce1224445b6bc14fc7575c4b3b58a8bc40 Mon Sep 17 00:00:00 2001
From: jxnblk <jacksonblack@gmail.com>
Date: Mon, 6 Jul 2015 10:26:37 -0400
Subject: [PATCH 11/13] npm init

---
 package.json | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 package.json

diff --git a/package.json b/package.json
new file mode 100644
index 0000000..2b3ea6f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "loading-svg",
+  "version": "1.0.0",
+  "description": "Animated SVG loading indicators",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jxnblk/loading.git"
+  },
+  "keywords": [
+    "svg",
+    "loading",
+    "ajax",
+    "ui"
+  ],
+  "author": "Brent Jackson",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/jxnblk/loading/issues"
+  },
+  "homepage": "https://github.com/jxnblk/loading#readme"
+}

From f8a068d4104bf1cf4b9c9a53b4f173ae849f70e6 Mon Sep 17 00:00:00 2001
From: jxnblk <jacksonblack@gmail.com>
Date: Mon, 6 Jul 2015 10:28:06 -0400
Subject: [PATCH 12/13] Update readme

---
 README.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/README.md b/README.md
index e2e17a0..984a6b5 100644
--- a/README.md
+++ b/README.md
@@ -3,6 +3,18 @@ This could take a while
 
 http://jxnblk.com/loading
 
+## Getting Started
+
+```bash
+npm install loading-svg
+```
+
+*Or*
+
+```bash
+bower install loading
+```
+
 ## Usage
 
 ```html

From 1e2e1183a65eff3d818849fee0a14aaf7900a594 Mon Sep 17 00:00:00 2001
From: Alexander Haniotis <alexander@affirm.com>
Date: Tue, 11 Aug 2015 15:31:22 -0700
Subject: [PATCH 13/13] Correct loading spokes loader timing

---
 loading-spokes.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/loading-spokes.svg b/loading-spokes.svg
index d950104..bc07038 100644
--- a/loading-spokes.svg
+++ b/loading-spokes.svg
@@ -15,7 +15,7 @@
     <animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.5s"/>
   </path>
   <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(225 16 16)">
-    <animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.675s"/>
+    <animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.625s"/>
   </path>
   <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(270 16 16)">
     <animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.75s"/>