diff --git a/README.md b/README.md index 162581c0..63d5d42a 100644 --- a/README.md +++ b/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: diff --git a/assets/images/gratipay-bw.png b/assets/images/gratipay-bw.png deleted file mode 100644 index 9333f7c5..00000000 Binary files a/assets/images/gratipay-bw.png and /dev/null differ diff --git a/assets/images/gratipay-bw@2x.png b/assets/images/gratipay-bw@2x.png deleted file mode 100644 index 5e1f1db1..00000000 Binary files a/assets/images/gratipay-bw@2x.png and /dev/null differ diff --git a/assets/images/shopify-bw.png b/assets/images/shopify-bw.png new file mode 100644 index 00000000..da8743d6 Binary files /dev/null and b/assets/images/shopify-bw.png differ diff --git a/assets/images/shopify-bw@2x.png b/assets/images/shopify-bw@2x.png new file mode 100644 index 00000000..ef63dc25 Binary files /dev/null and b/assets/images/shopify-bw@2x.png differ diff --git a/assets/images/shopify.png b/assets/images/shopify.png new file mode 100644 index 00000000..01bb7286 Binary files /dev/null and b/assets/images/shopify.png differ diff --git a/assets/images/shopify@2x.png b/assets/images/shopify@2x.png new file mode 100644 index 00000000..fd588024 Binary files /dev/null and b/assets/images/shopify@2x.png differ diff --git a/assets/javascripts/templates/pages/about_tmpl.coffee b/assets/javascripts/templates/pages/about_tmpl.coffee index caeeb5de..3b139ec0 100644 --- a/assets/javascripts/templates/pages/about_tmpl.coffee +++ b/assets/javascripts/templates/pages/about_tmpl.coffee @@ -13,7 +13,8 @@ app.templates.aboutPage = -> """

DevDocs combines multiple API documentations in a fast, organized, and searchable interface.

diff --git a/assets/javascripts/templates/pages/root_tmpl.coffee.erb b/assets/javascripts/templates/pages/root_tmpl.coffee.erb index 0d292830..914aa2f7 100644 --- a/assets/javascripts/templates/pages/root_tmpl.coffee.erb +++ b/assets/javascripts/templates/pages/root_tmpl.coffee.erb @@ -1,7 +1,21 @@ +maxcdnLink = (className) -> """ + + + MaxCDN has been supporting DevDocs since day one. They provide CDN solutions that make DevDocs and countless other sites faster. + +""" + +shopifyLink = (className) -> """ + + + 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… + +""" + app.templates.splash = """
DevDocs
- Sponsored by MaxCDN - Support on Gratipay + #{maxcdnLink '_splash-sponsor'} + #{shopifyLink '_splash-sponsor'} """ <% if App.development? %> @@ -24,7 +38,8 @@ app.templates.intro = """ LICENSE files.
  • If you like the app, please consider supporting the project on Gratipay. Thanks! - Sponsored by +

    + Thanks to#{shopifyLink '_intro-sponsor'} #{maxcdnLink '_intro-sponsor'}

    That's all. Happy coding! """ @@ -47,7 +62,8 @@ app.templates.intro = """

  • If you like the app, please consider supporting the project on Gratipay. Thanks! - Sponsored by +

    + Thanks to#{shopifyLink '_intro-sponsor'} #{maxcdnLink '_intro-sponsor'}

    That's all. Happy coding! """ @@ -74,7 +90,7 @@ app.templates.mobileIntro = """

  • DevDocs is open source

    That's all. Happy coding! -

    Sponsored by

    +

    #{shopifyLink '_intro-sponsor'} #{maxcdnLink '_intro-sponsor'}

    Stop showing this message """ diff --git a/assets/stylesheets/application.css.scss b/assets/stylesheets/application.css.scss index eedd9700..d3fa1833 100644 --- a/assets/stylesheets/application.css.scss +++ b/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'; diff --git a/assets/stylesheets/components/_content.scss b/assets/stylesheets/components/_content.scss index 48c5040c..7fcd782d 100644 --- a/assets/stylesheets/components/_content.scss +++ b/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'); } } diff --git a/assets/stylesheets/components/_mobile.scss b/assets/stylesheets/components/_mobile.scss index 875da987..d348ad08 100644 --- a/assets/stylesheets/components/_mobile.scss +++ b/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; } } diff --git a/assets/stylesheets/components/_notif.scss b/assets/stylesheets/components/_notif.scss index 2e4c3e6a..575fedf7 100644 --- a/assets/stylesheets/components/_notif.scss +++ b/assets/stylesheets/components/_notif.scss @@ -1,4 +1,4 @@ -._notif { +._notif, %notif { position: absolute; z-index: 2; top: 1rem; diff --git a/assets/stylesheets/global/_variables.scss b/assets/stylesheets/global/_variables.scss index aa66ac78..a2fc51b3 100644 --- a/assets/stylesheets/global/_variables.scss +++ b/assets/stylesheets/global/_variables.scss @@ -18,7 +18,7 @@ $focusBorder: #d4d4d4; $focusText: #000; $loadingText: #e6e6e6; -$splashText: #ddd; +$splashText: #d7d7d7; $promoText: #bbb; $selectionBackground: #398df0; diff --git a/lib/app.rb b/lib/app.rb index 69f13c82..9b5e9ed3 100644 --- a/lib/app.rb +++ b/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 diff --git a/views/manifest.erb b/views/manifest.erb index 8a09629c..c8b474d4 100644 --- a/views/manifest.erb +++ b/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" %>