Add Shopify as a sponsor

README.md

@@ -3,7 +3,8 @@
 DevDocs combines multiple API documentations in a fast, organized, and searchable interface.
 
 * Created by [Thibaut Courouble](http://thibaut.me)
-* Sponsored by [MaxCDN](http://www.maxcdn.com)
+* Made at [Shopify](http://devdocs.io/s/shopify)
+* Powered by [MaxCDN](http://devdocs.io/s/maxcdn)
 
 Keep track of development and community news:
 

assets/javascripts/templates/pages/about_tmpl.coffee

@@ -13,7 +13,8 @@ app.templates.aboutPage = -> """
   <p>DevDocs combines multiple API documentations in a fast, organized, and searchable interface.
   <ul>
     <li>Created and maintained by <a href="http://thibaut.me">Thibaut Courouble</a>
-    <li>Sponsored by <a href="http://www.maxcdn.com" title="Content Delivery Network Services">MaxCDN</a>&mdash;content delivery that developers love
+    <li>Made at <a href="http://devdocs.io/s/shopify">Shopify</a> &mdash; one of the best software companies in the world
+    <li>Powered by <a href="http://devdocs.io/s/maxcdn" title="Content Delivery Network Services">MaxCDN</a> &mdash; content delivery that developers love
     <li>Free and <a href="https://github.com/Thibaut/devdocs">open source</a>
         <iframe class="_github-btn" src="http://ghbtns.com/github-btn.html?user=Thibaut&repo=devdocs&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
   </ul>

assets/javascripts/templates/pages/root_tmpl.coffee.erb

@@ -1,7 +1,21 @@
+maxcdnLink = (className) -> """
+  <a href="http://devdocs.io/s/maxcdn" class="#{className}">
+    <span class="_logo-thx _maxcdn-logo">MaxCDN</span>
+    <span class="_logo-info">MaxCDN has been supporting DevDocs since day one. They provide CDN solutions that make DevDocs and countless other sites faster.</span>
+  </a>
+"""
+
+shopifyLink = (className) -> """
+  <a href="http://devdocs.io/s/shopify" class="#{className}">
+    <span class="_logo-thx _shopify-logo">Shopify</span>
+    <span class="_logo-info">Interested in working on one of the biggest commerce platform in the world, in a delightful work environment? We're hiring developers, ops engineers, designers&hellip;</span>
+  </a>
+"""
+
 app.templates.splash = """
   <div class="_splash-title">DevDocs</div>
-  <a href="http://www.maxcdn.com" class="_splash-maxcdn">Sponsored by<span class="_maxcdn-logo-bw"> MaxCDN</span></a>
-  <a href="https://gratipay.com/Thibaut/" class="_splash-gratipay">Support on<span class="_gratipay-logo-bw"> Gratipay</span></a>
+  #{maxcdnLink '_splash-sponsor'}
+  #{shopifyLink '_splash-sponsor'}
 """
 
 <% if App.development? %>
@@ -24,7 +38,8 @@ app.templates.intro = """
           <a href="https://github.com/Thibaut/devdocs/blob/master/LICENSE">LICENSE</a> files.
       <li>If you like the app, please consider supporting the project on <a href="https://gratipay.com/Thibaut/">Gratipay</a>. Thanks!
     </ol>
-    <a href="http://www.maxcdn.com" class="_intro-maxcdn">Sponsored by<span class="_maxcdn-logo"> MaxCDN</span></a>
+    <p class="_intro-sponsors">
+      Thanks to#{shopifyLink '_intro-sponsor'} #{maxcdnLink '_intro-sponsor'}
     <p>That's all. Happy coding!
   </div></div>
 """
@@ -47,7 +62,8 @@ app.templates.intro = """
           <iframe class="_github-btn" src="http://ghbtns.com/github-btn.html?user=Thibaut&repo=devdocs&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
       <li>If you like the app, please consider supporting the project on <a href="https://gratipay.com/Thibaut/">Gratipay</a>. Thanks!
     </ol>
-    <a href="http://www.maxcdn.com" class="_intro-maxcdn">Sponsored by<span class="_maxcdn-logo"> MaxCDN</span></a>
+    <p class="_intro-sponsors">
+      Thanks to#{shopifyLink '_intro-sponsor'} #{maxcdnLink '_intro-sponsor'}
     <p>That's all. Happy coding!
   </div></div>
 """
@@ -74,7 +90,7 @@ app.templates.mobileIntro = """
       <li>DevDocs is <a href="https://github.com/Thibaut/devdocs">open source</a>
     </ol>
     <p>That's all. Happy coding!
-    <p class="_intro-maxcdn">Sponsored by <a href="http://www.maxcdn.com" class="_intro-maxcdn-logo">MaxCDN</a></p>
+    <p class="_intro-sponsors">#{shopifyLink '_intro-sponsor'} #{maxcdnLink '_intro-sponsor'}</p>
     <a class="_intro-hide" data-hide-intro>Stop showing this message</a>
   </div>
 """

assets/stylesheets/application.css.scss

@@ -18,12 +18,12 @@
 
 @import 'components/app',
         'components/header',
+        'components/notif',
         'components/sidebar',
         'components/content',
         'components/page',
         'components/fail',
         'components/notice',
-        'components/notif',
         'components/path',
         'components/prism',
         'components/mobile';

assets/stylesheets/components/_content.scss

@@ -71,30 +71,24 @@
   @extend ._booting:before, %user-select-none;
 }
 
-%splash-promo {
+._splash-sponsor {
   position: absolute;
+  display: block;
   bottom: 1.25rem;
-  line-height: 1rem;
-  color: $promoText;
-
-  &:hover { color: $linkColor; }
-}
-
-._splash-maxcdn {
-  left: .75rem;
-  @extend %splash-promo;
+  right: 1rem;
 
-  > ._maxcdn-logo-bw { opacity: .2; }
-  &:hover > ._maxcdn-logo-bw { opacity: .5; }
-}
+  ._logo-thx { opacity: .25; }
+  &:hover ._logo-thx { opacity: .5; }
 
-._splash-gratipay {
-  right: 1.25rem;
-  -webkit-margin-end: -.5rem;
-  @extend %splash-promo;
+  & + & {
+    left: 1rem;
+    right: auto;
 
-  > ._gratipay-logo-bw { opacity: .35; }
-  &:hover > ._gratipay-logo-bw { opacity: .65; }
+    ._logo-info {
+      right: auto;
+      left: 0;
+    }
+  }
 }
 
 //
@@ -132,14 +126,20 @@
 
 ._intro-link { cursor: pointer; }
 
-._intro-maxcdn {
+._intro-sponsors {
   position: absolute;
   bottom: 1rem;
   right: 1rem;
   margin: 0;
-  color: $textColorLight;
+  line-height: 1.5rem;
+}
 
-  &:hover { color: $linkColor; }
+._intro-sponsor {
+  display: inline-block;
+  vertical-align: top;
+  margin-left: .5em;
+
+  &:hover { text-decoration: none; }
 }
 
 //
@@ -323,44 +323,63 @@
   margin-left: .25rem;
 }
 
-%maxcdn-logo {
+._logo-thx {
+  position: relative;
   display: inline-block;
   vertical-align: top;
-  width: 6.25rem;
-  margin-left: .5rem;
+  height: 1.5rem;
   overflow: hidden;
   text-indent: -20rem;
   background-position: center center;
   background-repeat: no-repeat;
-  background-size: 6.25rem 1rem;
+}
+
+._logo-info {
+  top: auto;
+  bottom: 100%;
+  right: 0;
+  max-width: 18.25rem;
+  margin-bottom: .75rem;
+  padding: .5rem .75rem;
+  line-height: 1.375rem;
+  pointer-events: none;
+  @extend %notif;
+
+  :hover > & { opacity: 1; }
 }
 
 ._maxcdn-logo {
+  width: 6.25rem;
   background-image: image-url('maxcdn.png');
-  @extend %maxcdn-logo;
+  background-size: 6.25rem 1rem;
 
   @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
     background-image: image-url('maxcdn@2x.png');
   }
 }
 
-._maxcdn-logo-bw {
+._splash-sponsor > ._maxcdn-logo {
   background-image: image-url('maxcdn-bw.png');
-  @extend %maxcdn-logo;
 
   @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
     background-image: image-url('maxcdn-bw@2x.png');
   }
 }
 
-._gratipay-logo-bw {
-  width: 3.75rem;
-  margin-left: .25rem;
-  background-size: 3.75rem 1rem;
-  background-image: image-url('gratipay-bw.png');
-  @extend %maxcdn-logo;
+._shopify-logo {
+  width: 5.5rem;
+  background-image: image-url('shopify.png');
+  background-size: 5.5rem 1.5rem;
+
+  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
+    background-image: image-url('shopify@2x.png');
+  }
+}
+
+._splash-sponsor > ._shopify-logo {
+  background-image: image-url('shopify-bw.png');
 
   @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
-    background-image: image-url('gratipay-bw@2x.png');
+    background-image: image-url('shopify-bw@2x.png');
   }
 }

assets/stylesheets/components/_mobile.scss

@@ -113,16 +113,6 @@
     max-width: none;
     margin-left: 0;
   }
-
-  // Splash
-
-  ._splash-maxcdn, ._splash-gratipay {
-    left: 0;
-    right: 0;
-    text-align: center;
-  }
-
-  ._splash-gratipay { margin-bottom: 2.25rem; }
 }
 
 //
@@ -197,11 +187,13 @@
   > ._intro-list { padding-left: 1.5rem; }
 
   > ._intro-hide,
-  > ._intro-maxcdn {
+  > ._intro-sponsors {
     position: static;
     float: none;
     display: block;
     margin-top: 1.25rem;
     text-align: center;
   }
+
+  ._intro-sponsor { margin: 0 1em; }
 }

assets/stylesheets/components/_notif.scss

@@ -1,4 +1,4 @@
-._notif {
+._notif, %notif {
   position: absolute;
   z-index: 2;
   top: 1rem;

assets/stylesheets/global/_variables.scss

@@ -18,7 +18,7 @@ $focusBorder: #d4d4d4;
 $focusText: #000;
 
 $loadingText: #e6e6e6;
-$splashText: #ddd;
+$splashText: #d7d7d7;
 $promoText: #bbb;
 
 $selectionBackground: #398df0;

lib/app.rb

@@ -136,6 +136,14 @@ class App < Sinatra::Application
     200
   end
 
+  get '/s/maxcdn' do
+    redirect 'https://www.maxcdn.com/?utm_source=devdocs&utm_medium=banner&utm_campaign=devdocs'
+  end
+
+  get '/s/shopify' do
+    redirect 'http://www.shopify.com/careers?utm_source=devdocs&utm_medium=banner&utm_campaign=devdocs'
+  end
+
   get '/feed' do
     content_type 'application/atom+xml'
     settings.news_feed

views/manifest.erb

@@ -10,8 +10,10 @@ CACHE:
 <%= image_path 'maxcdn@2x.png' %>
 <%= image_path 'maxcdn-bw.png' %>
 <%= image_path 'maxcdn-bw@2x.png' %>
-<%= image_path 'gratipay-bw.png' %>
-<%= image_path 'gratipay-bw@2x.png' %>
+<%= image_path 'shopify.png' %>
+<%= image_path 'shopify@2x.png' %>
+<%= image_path 'shopify-bw.png' %>
+<%= image_path 'shopify-bw@2x.png' %>
 <%= asset_path 'docs.js' %>
 <%= doc_index_urls.join "\n" %>