Created retina versions of all graphical assets.

This commit includes @2x versions of all graphical assets on the site except for the images in the Pro Git book. This includes the favicon, all icons, the branching illustration on the front page, the OS monitors, screenshots of the GUI apps, book covers, etc. I also recreated the images used in the About section. I created a new Sass mixin for showing @2x background images in the CSS. This will render the regular image unless it meets the media query criteria for Retina display. I also ran all of the PNGs through a compressor (tinypng.org) and reduced their sizes quite a bit.
git · Nov 12, 2012 · e640167 · e640167
1 parent 4e36626
commit e640167
Show file tree

Hide file tree

Showing 260 changed files with 136 additions and 128 deletions.
diff --git a/README.md b/README.md
@@ -72,5 +72,5 @@ accept.  If it involves code, please also write tests for it.
 This source code for the site is licensed under the MIT, which you can find in
 the MIT-LICENSE.txt file.
 
-All graphical assets are licensed under the 
+All graphical assets are licensed under the
 [Creative Commons Attribution 3.0 Unported License](http://creativecommons.org/licenses/by/3.0/).
diff --git a/app/assets/stylesheets/book.css.scss b/app/assets/stylesheets/book.css.scss
@@ -49,7 +49,7 @@
 }
 .webkit #flippy-book #book-cover {
   left: auto;
-  right: 6px;    
+  right: 6px;
   @include transform-style(preserve-3d);
   @include transition-duration(1.2s);
 }
@@ -65,7 +65,8 @@
   width: 298px;
   height: 398px;
   color: black;
-  background: #000102 url(/images/pro-git-298x398.jpg) 0 0 no-repeat;
+  @include background-image-2x(/images/pro-git-298x398, 298px, 398px, 0 0, no-repeat, jpg);
+  background-color: #000102;
   text-indent: -9999px;
   cursor: pointer;
 }
@@ -82,7 +83,7 @@
 }
 #flippy-book #book-cover-inside {
   width: 298px;
-  height: 398px;    
+  height: 398px;
   right: 4px;
   background: #fff url(/images/bg/flippy-book-inside-cover.png) 0 0 no-repeat;
 }
@@ -119,7 +120,7 @@
   font-size: 12px;
   color: $light-font-color;
   padding-left: 22px;
-  background: transparent url(/images/icons/info.png) 40px 0 no-repeat;
+  @include background-image-2x(/images/icons/info, 18px, 17px, 40px 1px);
   &.visible {
     @include inline-block;
   }
@@ -132,7 +133,7 @@ ol.book-toc {
     margin-bottom: 0.6em;
   }
   ol {
-    list-style: none; 
+    list-style: none;
   }
   h2 {
     color: $font-color;

diff --git a/app/assets/stylesheets/forms.css.scss b/app/assets/stylesheets/forms.css.scss
@@ -31,7 +31,8 @@ form#search {
   top: 10px;
   width: 262px;
   padding-left: 32px;
-  background: #fcfcfa url(/images/icons/search.png) 10px 50% no-repeat;
+  @include background-image-2x(/images/icons/search, 17px, 17px, 10px 50%);
+  background-color: #fcfcfa ! important;
   border: solid 1px #ceccc5;
   @include border-radius(20px);
   @include box-shadow(inset 0 1px 4px #ddd);

diff --git a/app/assets/stylesheets/front-page.css.scss b/app/assets/stylesheets/front-page.css.scss
@@ -1,7 +1,6 @@
 #front-content {
   @include clearfix;
   overflow: visible;
-//  height: 400px;
 
   #front-navigation {
     width: 618px;
@@ -108,7 +107,7 @@ $monitor-height: 271px;
 }
 
 .monitor {
-  background: transparent url(/images/monitor-default.png) top right no-repeat;
+  @include background-image-2x(/images/monitor-default, $monitor-width, $monitor-height);
   padding-top: 45px;
   padding-left: 40px;
   height: $monitor-height - 45;
@@ -142,7 +141,7 @@ $monitor-height: 271px;
     border-bottom: solid 1px #134143;
     text-align: center;
     color: #fff;
-    font-size: 16px; 
+    font-size: 16px;
     width: 224px;
     padding: 5px 0;
     @include border-radius(2px);
@@ -155,17 +154,17 @@ $monitor-height: 271px;
     }
   }
   &.mac {
-    background: transparent url(/images/monitor-mac.png) top right no-repeat;
+    @include background-image-2x(/images/monitor-mac, $monitor-width, $monitor-height);
     padding-top: 36px;
     padding-left: 40px;
     height: $monitor-height - 36;
     width: $monitor-width - 40;
   }
   &.windows {
-    background: transparent url(/images/monitor-windows.png) top right no-repeat;
+    @include background-image-2x(/images/monitor-windows, $monitor-width, $monitor-height);
   }
   &.linux {
-    background: transparent url(/images/monitor-linux.png) top right no-repeat;
+    @include background-image-2x(/images/monitor-linux, $monitor-width, $monitor-height);
   }
 }
 
@@ -199,58 +198,52 @@ $monitor-height: 271px;
         background-image: url(/images/company-project-logos/facebook.png);
       }
       &.google {
-        background-image: url(/images/company-project-logos/google.png);
+        @include background-image-2x(/images/company-project-logos/google, 108px, 65px);
       }
       &.twitter {
-        background-image: url(/images/company-project-logos/twitter.png);
+        @include background-image-2x(/images/company-project-logos/twitter, 108px, 65px);
       }
       &.microsoft {
-        background-image: url(/images/company-project-logos/microsoft.png);
-      }
-      &.blizzard {
-        background-image: url(/images/company-project-logos/blizzard.png);
+        @include background-image-2x(/images/company-project-logos/microsoft, 108px, 65px);
       }
       &.netflix {
-        background-image: url(/images/company-project-logos/netflix.png);
+        @include background-image-2x(/images/company-project-logos/netflix, 108px, 65px);
       }
       &.linked-in {
-        background-image: url(/images/company-project-logos/linked-in.png);
+        @include background-image-2x(/images/company-project-logos/linked-in, 108px, 65px);
       }
       &.linux {
-        background-image: url(/images/company-project-logos/linux.png);
+        @include background-image-2x(/images/company-project-logos/linux, 108px, 65px);
       }
       &.perl {
-        background-image: url(/images/company-project-logos/perl.png);
+        @include background-image-2x(/images/company-project-logos/perl, 108px, 65px);
       }
       &.postgresql {
-        background-image: url(/images/company-project-logos/postgresql.png);
+        @include background-image-2x(/images/company-project-logos/postgresql, 108px, 65px);
       }
       &.facebook {
-        background-image: url(/images/company-project-logos/facebook.png);
+        @include background-image-2x(/images/company-project-logos/facebook, 108px, 65px);
       }
       &.android {
-        background-image: url(/images/company-project-logos/android.png);
-      }
-      &.debian {
-        background-image: url(/images/company-project-logos/debian.png);
+        @include background-image-2x(/images/company-project-logos/android, 108px, 65px);
       }
       &.rails {
-        background-image: url(/images/company-project-logos/rails.png);
+        @include background-image-2x(/images/company-project-logos/rails, 108px, 65px);
       }
       &.qt {
-        background-image: url(/images/company-project-logos/qt.png);
+        @include background-image-2x(/images/company-project-logos/qt, 108px, 65px);
       }
       &.gnome {
-        background-image: url(/images/company-project-logos/gnome.png);
+        @include background-image-2x(/images/company-project-logos/gnome, 108px, 65px);
       }
       &.eclipse {
-        background-image: url(/images/company-project-logos/eclipse.png);
+        @include background-image-2x(/images/company-project-logos/eclipse, 108px, 65px);
       }
       &.kde {
-        background-image: url(/images/company-project-logos/kde.png);
+        @include background-image-2x(/images/company-project-logos/kde, 108px, 65px);
       }
       &.x {
-        background-image: url(/images/company-project-logos/x.png);
+        @include background-image-2x(/images/company-project-logos/x, 108px, 65px);
       }
     }
   }
@@ -262,27 +255,24 @@ a.icon {
   line-height: 36px;
   @include inline-block;
   &.gui {
-    background: transparent url(/images/icons/gui.png) 6px 0 no-repeat;
+    @include background-image-2x(/images/icons/gui, 18px, 24px, 6px 3px);
   }
   &.older-releases {
-    background: transparent url(/images/icons/box.png) 0 4px no-repeat;
+    @include background-image-2x(/images/icons/box, 22px, 20px, 0 6px);
   }
   &.windows {
-    background: transparent url(/images/icons/windows.png) 0 3px no-repeat;
+    @include background-image-2x(/images/icons/windows, 24px, 21px, 0 6px);
   }
   &.mac {
-    background: transparent url(/images/icons/apple.png) 5px 3px no-repeat;
-  }
-  &.debian {
-    background: transparent url(/images/icons/debian.png) 6px 4px no-repeat;
+    @include background-image-2x(/images/icons/apple, 17px, 21px, 5px 4px);
   }
   &.linux {
-    background: transparent url(/images/icons/linux.png) 6px 4px no-repeat;
+    @include background-image-2x(/images/icons/linux, 17px, 21px, 6px 6px);
   }
   &.solaris {
-    background: transparent url(/images/icons/solaris.png) 0 7px no-repeat;
+    @include background-image-2x(/images/icons/solaris, 25px, 12px, 0 10px);
   }
   &.source {
-    background: transparent url(/images/icons/source-code.png) 0 4px no-repeat;
+    @include background-image-2x(/images/icons/source-code, 25px, 20px, 0 6px);
   }
 }
diff --git a/app/assets/stylesheets/git-scm.css.scss b/app/assets/stylesheets/git-scm.css.scss
@@ -1,6 +1,7 @@
 @import "compass";
 @include global-reset;
 
+@import "mixins.css.scss";
 @import "variables.css.scss";
 @import "layout.css.scss";
 @import "typography.css.scss";

diff --git a/app/assets/stylesheets/layout.css.scss b/app/assets/stylesheets/layout.css.scss
@@ -70,7 +70,7 @@ aside {
   height: 295px;
   margin-top: -20px;
   margin-bottom: 2em;
-  background: #f4f4f1 url(/images/bg/isometric-grid.png) 0 0 repeat-x;
+  @include background-image-2x(/images/bg/isometric-grid, 35px, 21px, top right, repeat);
   .inner {
     padding-top: 20px;
     p {
@@ -262,7 +262,7 @@ footer {
   }
   .site-source {
     float: left;
-    background: transparent url(/images/icons/code.png) 0 2px no-repeat;
+    @include background-image-2x(/images/icons/code, 38px, 23px, 0 2px);
     padding-left: 46px;
   }
   .sfc-member {

diff --git a/app/assets/stylesheets/lists.css.scss b/app/assets/stylesheets/lists.css.scss
@@ -6,7 +6,7 @@
   }
   .description {
     font-size: 12px;
-    line-height: $base-line-height * 0.7; 
+    line-height: $base-line-height * 0.7;
   }
 }
 
@@ -75,9 +75,9 @@ ol#about-nav {
       font-size: 14px;
       line-height: 17px;
       color: $font-color;
-      background: transparent url(/images/icons/nav-circles.png) 0 0 no-repeat;
+      @include background-image-2x(/images/icons/nav-circles, 100px, 200px);
       &.current {
-        background: transparent url(/images/icons/nav-circles.png) 0 -100px no-repeat;
+        @include background-image-2x(/images/icons/nav-circles, 100px, 200px, 0 -100px);
         color: #fff;
         opacity: 1;
       }

diff --git a/app/assets/stylesheets/mixins.css.scss b/app/assets/stylesheets/mixins.css.scss
@@ -0,0 +1,10 @@
+@mixin background-image-2x($image_name, $w: auto, $h: auto, $pos: top right, $repeat: no-repeat, $ext: png) {
+  background: transparent url($image_name + '.' + $ext) $pos $repeat;
+  @media
+    only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (   min--moz-device-pixel-ratio: 2),
+    only screen and (     -o-min-device-pixel-ratio: 2/1) {
+      background: transparent url($image_name + '@2x.' + $ext) $pos $repeat;
+      background-size: $w $h;
+    }
+}
diff --git a/app/assets/stylesheets/reference.css.scss b/app/assets/stylesheets/reference.css.scss
@@ -2,55 +2,55 @@
   padding-left: 23px;
 }
 h3.setup {
-  background: transparent url(/images/icons/setup-sm.png) 0 3px no-repeat;
+  @include background-image-2x(/images/icons/setup-sm, 17px, 17px, 0 50%);
 }
 
 h3.projects {
-  background: transparent url(/images/icons/projects-sm.png) 0 7px no-repeat;
+  @include background-image-2x(/images/icons/projects-sm, 17px, 13px, 0 50%);
 }
 
 h3.snapshotting {
-  background: transparent url(/images/icons/camera-sm.png) 0 8px no-repeat;
+  @include background-image-2x(/images/icons/camera-sm, 17px, 12px, 0 50%);
 }
 
 h3.branching {
-  background: transparent url(/images/icons/branch-sm.png) 4px 4px no-repeat;
+  @include background-image-2x(/images/icons/branch-sm, 12px, 15px, 4px 50%);
 }
 
 h3.sharing {
-  background: transparent url(/images/icons/sharing-sm.png) 2px 5px no-repeat;
+  @include background-image-2x(/images/icons/sharing-sm, 14px, 14px, 2px 50%);
 }
 
 h3.inspection {
-  background: transparent url(/images/icons/inspection-sm.png) 1px 4px no-repeat;
+  @include background-image-2x(/images/icons/inspection-sm, 14px, 14px, 1px 50%);
 }
 
 h3.patching {
-  background: transparent url(/images/icons/patching-sm.png) 1px 8px no-repeat;
+  @include background-image-2x(/images/icons/patching-sm, 18px, 11px, 1px 50%);
 }
 
 h3.debugging {
-  background: transparent url(/images/icons/debugging-sm.png) 1px 5px no-repeat;
+  @include background-image-2x(/images/icons/debugging-sm, 17px, 16px, 1px 50%);
 }
 
 h3.email {
-  background: transparent url(/images/icons/email-sm.png) 0px 8px no-repeat;
+  @include background-image-2x(/images/icons/email-sm, 17px, 12px, 1px 50%);
 }
 
 h3.external {
-  background: transparent url(/images/icons/external-sm.png) 0px 5px no-repeat;
+  @include background-image-2x(/images/icons/external-sm, 17px, 15px, 0 50%);
 }
 
 h3.admin {
-  background: transparent url(/images/icons/admin-sm.png) 2px 5px no-repeat;
+  @include background-image-2x(/images/icons/admin-sm, 16px, 16px, 2px 50%);
 }
 
 h3.server-admin {
-  background: transparent url(/images/icons/server-admin-sm.png) 2px 5px no-repeat;
+  @include background-image-2x(/images/icons/server-admin-sm, 15px, 15px, 2px 50%);
 }
 
 h3.plumbing {
-  background: transparent url(/images/icons/plumbing-sm.png) 2px 5px no-repeat;
+  @include background-image-2x(/images/icons/plumbing-sm, 17px, 14px, 2px 50%);
 }
 
 #reference-version {
@@ -235,15 +235,16 @@ ol.reference-previous-versions {
 }
 
 .callout.quickref {
-  background: $callout-color url(/images/icons/document.png) 14px 7px no-repeat;
+  @include background-image-2x(/images/icons/document, 15px, 21px, 14px 7px);
   padding-left: 36px ! important;
   a {
     font-weight: bold;
   }
 }
 
 .callout.ref-manual {
-  background: $callout-color url(/images/icons/book.png) 24px 20px no-repeat;
+  @include background-image-2x(/images/icons/book, 54px, 72px, 24px 20px);
+  background-color: $callout-color;
   padding: 20px 30px 20px 100px !important;
   h3 {
     font-size: 18px;
@@ -255,7 +256,7 @@ ol.reference-previous-versions {
 }
 
 p.quickref {
-  background: transparent url(/images/icons/document.png) 0 0 no-repeat;
+  @include background-image-2x(/images/icons/document, 15px, 21px, 0 0);
   padding-left: 22px ! important;
   margin-top: -0.4em;
   margin-bottom: 1em;

diff --git a/app/assets/stylesheets/sidebar.css.scss b/app/assets/stylesheets/sidebar.css.scss
@@ -2,7 +2,7 @@ hr.sidebar {
   border: none ! important;
   height: 12px;
   width: 218px;
-  background: transparent url(/images/sidebar-divider.png) 0 0 no-repeat;
+  @include background-image-2x(/images/sidebar-divider, 218px, 12px);
   margin-bottom: 2em;
 }
 

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -24,8 +24,12 @@ def latest_relnote_url
 
   # overriding this because we're not using asset pipeline for images,
   # but jason is using image_tag
-  def image_tag(image)
-    raw "<img src=\"/images/" + image  + "\"/>"
+  def image_tag(image, options = {})
+    out = "<img src='/images/" + image + "'"
+    out += " width='" + options[:width].to_s + "'" if options[:width]
+    out += " height='" + options[:height].to_s + "'" if options[:height]
+    out += " />"
+    raw out
   end
 
 end