Add fastly as a sponsor

rubygems · Dec 18, 2014 · 410f262 · 410f262
1 parent 4e65c3f
commit 410f262
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 22 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -134,31 +134,35 @@
         <div class="footer__sponsors">
           <a class="footer__sponsor" href="http://rubycentral.org/" target="_blank">
             Supported by
-            <img alt="Ruby Central" class="footer__sponsor__logo" src="/images/logos/ruby-central.png">
+            <span class="t-hidden">Ruby Central</span>
           </a>
           <a class="footer__sponsor" href="https://www.bluebox.net/" target="_blank">
             Hosted by
-            <img alt="Blue Box" class="footer__sponsor__logo" src="/images/logos/bluebox.png">
+            <span class="t-hidden">Blue Box</span>
           </a>
           <a class="footer__sponsor" href="http://dockyard.com/" target="_blank">
             Designed by
-            <img alt="DockYard" class="footer__sponsor__logo" src="/images/logos/dockyard.png">
+            <span class="t-hidden">DockYard</span>
           </a>
           <a class="footer__sponsor" href="https://dnsimple.com/" target="_blank">
             Resolved with
-            <img alt="DNSimple" class="footer__sponsor__logo" src="/images/logos/dnsimple.png">
+            <span class="t-hidden">DNSimple</span>
           </a>
           <a class="footer__sponsor" href="http://newrelic.com/" target="_blank">
             Optimized by
-            <img alt="New Relic" class="footer__sponsor__logo" src="/images/logos/new-relic.png">
+            <span class="t-hidden">New Relic</span>
           </a>
           <a class="footer__sponsor" href="http://get.gaug.es/" target="_blank">
             Tracking by
-            <img alt="Gauges" class="footer__sponsor__logo" src="/images/logos/gauges.png">
+            <span class="t-hidden">Gauges</span>
           </a>
           <a class="footer__sponsor" href="https://www.runscope.com/" target="_blank">
             Monitored by
-            <img alt="Runscope" class="footer__sponsor__logo" src="/images/logos/runscope.png">
+            <span class="t-hidden">Runscope</span>
+          </a>
+          <a class="footer__sponsor" href="http://www.fastly.com/" target="_blank">
+            Gems served by
+            <span class="t-hidden">Fastly</span>
           </a>
         </div>
       </div>

diff --git a/images/red.jpg b/images/red.jpg
diff --git a/images/sponsors.png b/images/sponsors.png
diff --git a/stylesheets/application.css b/stylesheets/application.css
diff --git a/stylesheets/application.css.map b/stylesheets/application.css.map
diff --git a/stylesheets/modules/_footer.scss b/stylesheets/modules/_footer.scss
@@ -73,6 +73,11 @@
 .footer__sponsor {
   margin-bottom: 36px;
   float: left;
+  height: 100px;
+  background: {
+    image: url(/images/sponsors.png);
+    size: 100%;
+  }
   font: {
     style: italic;
     weight: 300;
@@ -89,20 +94,66 @@
   &:focus {
     outline: none;
   }
+  &:nth-child(1) {
+    background-position: 0 20px;
+  }
   @media (max-width: 579px) {
-    width: 100px;
     &:nth-child(odd) {
       margin-right: 18%;
     }
   }
   @media (min-width: 580px) {
-    width: 10%;
     &:not(:last-child) {
-      margin-right: 5%;
+      margin-right: 30px;
+    }
+  }
+  @media (max-width: 1039px) {
+    width: 100px;
+    &:nth-child(2) {
+      background-position: 0 -84px;
+    }
+    &:nth-child(3) {
+      background-position: 0 -174px;
+    }
+    &:nth-child(4) {
+      background-position: 0 -264px;
+    }
+    &:nth-child(5) {
+      background-position: 0 -355px;
+    }
+    &:nth-child(6) {
+      background-position: 0 108px;
+    }
+    &:nth-child(7) {
+      background-position: 0 -456px;
+    }
+    &:nth-child(8) {
+      background-position: 0 210px;
     }
   }
-  @media (min-width: 580px) and (max-width: 859px) {
-    min-width: 100px;
+  @media (min-width: 1040px) {
+    width: 90px;
+    &:nth-child(2) {
+      background-position: 0 -72px;
+    }
+    &:nth-child(3) {
+      background-position: 0 -153px;
+    }
+    &:nth-child(4) {
+      background-position: 0 -236px;
+    }
+    &:nth-child(5) {
+      background-position: 0 -314px;
+    }
+    &:nth-child(6) {
+      background-position: 0 100px;
+    }
+    &:nth-child(7) {
+      background-position: 0 -409px;
+    }
+    &:nth-child(8) {
+      background-position: 0 192px;
+    }
   }
 }