Split doc icon sprite

assets/stylesheets/application-dark.css.scss

@@ -1,7 +1,9 @@
 //= depend_on icons.png
 //= depend_on icons@2x.png
-//= depend_on docs.png
-//= depend_on docs@2x.png
+//= depend_on docs-1.png
+//= depend_on docs-1@2x.png
+//= depend_on docs-2.png
+//= depend_on docs-2@2x.png
 
 /*!
  * Copyright 2013-2017 Thibaut Courouble and other contributors

assets/stylesheets/application.css.scss

@@ -1,7 +1,9 @@
 //= depend_on icons.png
 //= depend_on icons@2x.png
-//= depend_on docs.png
-//= depend_on docs@2x.png
+//= depend_on docs-1.png
+//= depend_on docs-1@2x.png
+//= depend_on docs-2.png
+//= depend_on docs-2@2x.png
 
 /*!
  * Copyright 2013-2017 Thibaut Courouble and other contributors

assets/stylesheets/global/_icons.scss

@@ -7,21 +7,23 @@
   background-size: 4rem 3rem;
 }
 
-@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
-  %icon { background-image: image-url('icons@2x.png'); }
-}
-
 %doc-icon {
   content: '';
   display: block;
   width: 1rem;
   height: 1rem;
-  background-image: image-url('docs.png');
-  background-size: 10rem 12rem;
+  background-image: image-url('docs-1.png');
+  background-size: 10rem 10rem;
+}
+
+%doc-icon-2 {
+  background-image: image-url('docs-2.png');
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
-  %doc-icon { background-image: image-url('docs@2x.png'); }
+  %icon { background-image: image-url('icons@2x.png'); }
+  %doc-icon { background-image: image-url('docs-1@2x.png'); }
+  %doc-icon-2 { background-image: image-url('docs-2@2x.png'); }
 }
 
 %darkIconFix {
@@ -148,23 +150,24 @@
 ._icon-flow:before          { background-position: -7rem -9rem; }
 ._icon-relay:before         { background-position: -8rem -9rem; }
 ._icon-phoenix:before       { background-position: -9rem -9rem; }
-._icon-tcl_tk:before        { background-position: 0 -10rem; }
-._icon-erlang:before        { background-position: -1rem -10rem; }
-._icon-chef:before          { background-position: -2rem -10rem; }
-._icon-ramda:before         { background-position: -3rem -10rem; @extend %darkIconFix !optional; }
-._icon-codeigniter:before   { background-position: -4rem -10rem; @extend %darkIconFix !optional; }
-._icon-influxdata:before    { background-position: -5rem -10rem; @extend %darkIconFix !optional; }
-._icon-tensorflow:before    { background-position: -6rem -10rem; }
-._icon-haxe:before          { background-position: -7rem -10rem; }
-._icon-ansible:before       { background-position: -8rem -10rem; @extend %darkIconFix !optional; }
-._icon-typescript:before    { background-position: -9rem -10rem; }
-._icon-browser_support_tables:before { background-position: 0rem -11rem; }
-._icon-gnu_fortran:before   { background-position: -1rem -11rem; }
-._icon-gcc:before           { background-position: -2rem -11rem; }
-._icon-perl:before          { background-position: -3rem -11rem; }
-._icon-apache_pig:before    { background-position: -4rem -11rem; }
-._icon-numpy:before         { background-position: -5rem -11rem; }
-._icon-kotlin:before        { background-position: -6rem -11rem; }
-._icon-padrino:before       { background-position: -7rem -11rem; }
-._icon-angular:before       { background-position: -8rem -11rem; }
-._icon-love:before          { background-position: -9rem -11rem; }
+
+._icon-tcl_tk:before        { background-position: 0 0; @extend %doc-icon-2; }
+._icon-erlang:before        { background-position: -1rem 0; @extend %doc-icon-2; }
+._icon-chef:before          { background-position: -2rem 0; @extend %doc-icon-2; }
+._icon-ramda:before         { background-position: -3rem 0; @extend %doc-icon-2; @extend %darkIconFix !optional; }
+._icon-codeigniter:before   { background-position: -4rem 0; @extend %doc-icon-2; @extend %darkIconFix !optional; }
+._icon-influxdata:before    { background-position: -5rem 0; @extend %doc-icon-2; @extend %darkIconFix !optional; }
+._icon-tensorflow:before    { background-position: -6rem 0; @extend %doc-icon-2; }
+._icon-haxe:before          { background-position: -7rem 0; @extend %doc-icon-2; }
+._icon-ansible:before       { background-position: -8rem 0; @extend %doc-icon-2; @extend %darkIconFix !optional; }
+._icon-typescript:before    { background-position: -9rem 0; @extend %doc-icon-2; }
+._icon-browser_support_tables:before { background-position: 0rem -1rem; @extend %doc-icon-2; }
+._icon-gnu_fortran:before   { background-position: -1rem -1rem; @extend %doc-icon-2; }
+._icon-gcc:before           { background-position: -2rem -1rem; @extend %doc-icon-2; }
+._icon-perl:before          { background-position: -3rem -1rem; @extend %doc-icon-2; }
+._icon-apache_pig:before    { background-position: -4rem -1rem; @extend %doc-icon-2; }
+._icon-numpy:before         { background-position: -5rem -1rem; @extend %doc-icon-2; }
+._icon-kotlin:before        { background-position: -6rem -1rem; @extend %doc-icon-2; }
+._icon-padrino:before       { background-position: -7rem -1rem; @extend %doc-icon-2; }
+._icon-angular:before       { background-position: -8rem -1rem; @extend %doc-icon-2; }
+._icon-love:before          { background-position: -9rem -1rem; @extend %doc-icon-2; }

views/manifest.erb

@@ -8,8 +8,10 @@ CACHE:
 <%= stylesheet_path 'application-dark' %>
 <%= image_path 'icons.png' %>
 <%= image_path 'icons@2x.png' %>
-<%= image_path 'docs.png' %>
-<%= image_path 'docs@2x.png' %>
+<%= image_path 'docs-1.png' %>
+<%= image_path 'docs-1@2x.png' %>
+<%= image_path 'docs-2.png' %>
+<%= image_path 'docs-2@2x.png' %>
 <%= asset_path 'docs.js' %>
 <%= doc_index_urls.join "\n" %>