Remove compass-rails and just use the few images without a sprite

Fixes #6433

Gemfile

@@ -62,7 +62,6 @@ gem "rack-cors", "1.1.1", require: "rack/cors"
 gem "autoprefixer-rails",     "10.4.7.0"
 gem "bootstrap-sass",         "3.4.1"
 gem "bootstrap-switch-rails", "3.3.3" # 3.3.4 and 3.3.5 is broken, see https://github.com/Bttstrp/bootstrap-switch/issues/691
-gem "compass-rails",          "3.1.0"
 gem "sass-rails",             "5.0.7"
 gem "sprockets-rails",        "3.4.2"
 

Gemfile.lock

@@ -123,22 +123,6 @@ GEM
     chunky_png (1.4.0)
     citrus (3.0.2)
     coderay (1.1.3)
-    compass (1.0.3)
-      chunky_png (~> 1.2)
-      compass-core (~> 1.0.2)
-      compass-import-once (~> 1.0.5)
-      rb-fsevent (>= 0.9.3)
-      rb-inotify (>= 0.9)
-      sass (>= 3.3.13, < 3.5)
-    compass-core (1.0.3)
-      multi_json (~> 1.0)
-      sass (>= 3.3.0, < 3.5)
-    compass-import-once (1.0.5)
-      sass (>= 3.2, < 3.5)
-    compass-rails (3.1.0)
-      compass (~> 1.0.0)
-      sass-rails (< 5.1)
-      sprockets (< 4.0)
     concurrent-ruby (1.1.10)
     configurate (0.5.0)
     connection_pool (2.2.5)
@@ -805,7 +789,6 @@ DEPENDENCIES
   capybara (= 3.35.3)
   carrierwave (= 2.2.2)
   chrome_remote (= 0.3.0)
-  compass-rails (= 3.1.0)
   configurate (= 0.5.0)
   cucumber-api-steps (= 0.14)
   cucumber-rails (= 2.5.1)

app/assets/stylesheets/_application.scss

@@ -11,7 +11,6 @@
 @import 'icons';
 @import 'animations';
 @import 'flash_messages';
-@import 'sprites';
 @import 'hovercard';
 @import 'base';
 @import 'interactions';

app/assets/stylesheets/login.scss

@@ -5,9 +5,9 @@
   padding-top: 25px;
 
   .logos-asterisk {
+    background: image-url('branding/logos/asterisk.png') no-repeat;
     height: 154px;
-    margin: auto;
-    margin-bottom: 12px;
+    margin: auto auto 12px;
     width: 154px;
   }
 

app/assets/stylesheets/navbar_left.scss

@@ -202,10 +202,23 @@
     .social-media-logos-twitter-24x24,
     .social-media-logos-tumblr-24x24,
     .social-media-logos-wordpress-24x24 {
+      background-repeat: no-repeat;
       height: 24px;
       width: 24px;
     }
 
+    .social-media-logos-twitter-24x24 {
+      background-image: image-url('social-media-logos/twitter-24x24.png');
+    }
+
+    .social-media-logos-tumblr-24x24 {
+      background-image: image-url('social-media-logos/tumblr-24x24.png');
+    }
+
+    .social-media-logos-wordpress-24x24 {
+      background-image: image-url('social-media-logos/wordpress-24x24.png');
+    }
+
     a {
       display: inline-block;
     }

app/assets/stylesheets/publisher.scss

@@ -43,6 +43,7 @@
         .btn.btn-link.question_mark:hover .entypo-cog { color: $black; }
         .dim { opacity: 0.3; }
         .social-media-logos-wordpress-16x16 {
+          background: image-url('social-media-logos/wordpress-16x16.png') no-repeat;
           display: inline-block;
           height: 16px;
           width: 16px;

app/assets/stylesheets/sprites.scss

@@ -1,5 +0,0 @@
-/* ===== sprites ===== */
-@import 'branding/logos/*.png';
-@import 'social-media-logos/*.png';
-@include all-logos-sprites;
-@include all-social-media-logos-sprites;