Homepage ad.

doc-src/content/index.haml

@@ -7,21 +7,23 @@ layout: homepage
 %h1#logo Compass
 %h2 <strong>Compass</strong> is an open-source <em>CSS Authoring Framework</em>.
 .overview
-  .compass
+  .info-box.compass
     %h4 Why designers love Compass.
     %ol
       %li Experience cleaner markup without presentational classes.
-      %li It’s chock full of the web’s best reusable patterns.
+      %li It’s chock full of the web’s best <a href="/reference/compass/">reusable patterns</a>.
       %li It makes creating <a href="/help/tutorials/spriting/">sprites</a> a breeze.
-      %li Compass mixins make CSS3 easy.
+      %li Compass mixins make <a href="/reference/compass/css3/">CSS3</a> easy.
+      %li Create beautiful <a href="/reference/compass/typography/vertical_rhythm/">typographic rhythms</a>.
       %li Download and create extensions with ease.
-  .sass
+  .info-box.sass
     %h4 Compass uses Sass.
     %p
       <a href="http://sass-lang.com/">Sass</a> is an extension of CSS3 which
       adds nested rules, variables, mixins, selector inheritance, and more.
       Sass generates well formatted CSS and makes your stylesheets
       easier to organize and maintain.
+  = render 'partials/ad'
 %h3 Brilliant people use Compass, including these <em>wildly talented</em> folks:
 %ul#featured_sites
   %li

doc-src/content/stylesheets/home.scss

@@ -10,6 +10,7 @@
 @import "partials/typography";
 @import "partials/main";
 @import "partials/home";
+@import "partials/ads";
 
 html.dark { @include dark-theme; }
 html.light { @include light-theme; }

doc-src/content/stylesheets/partials/_ads.scss

@@ -3,7 +3,7 @@
   text-align: center;
   line-height: 1.1em !important;
   @include opacity(0);
-  @include transition(opacity 1s ease-in 3s);
+  @include transition(opacity 1s ease-in 1.5s);
   &.visible {
     @include opacity(1);
   }
@@ -26,4 +26,17 @@
    a:not(.pagerankspam) { color: #222}
    img:hover { @include single-box-shadow(#222); }
  }
+ #home & {
+   float: right;
+   width: 380px;
+   margin-top: 11px;
+   .fusionimg {
+     margin: 6px 8px;
+     float: left;
+   }
+   .fusiontext {
+     padding-top: 6px;
+   }
+ }
 }
+

doc-src/layouts/partials/ad.haml

@@ -0,0 +1,4 @@
+.advertisement
+  <script type="text/javascript">(function(){ var fusion = document.createElement('script'); fusion.src = window.location.protocol + '//adn.fusionads.net/api/1.0/ad.js?zoneid=158&rand=' + Math.floor(Math.random()*9999999); fusion.async = true; (document.head || document.getElementsByTagName('head')[0]).appendChild(fusion); })(); $(function(){ $(".advertisement").addClass("visible")});</script>
+  #fusion_ad
+    %a.pagerankspam(href="http://fusionads.net") Powered by Fusion

doc-src/layouts/partials/sidebar.haml

@@ -4,7 +4,5 @@
   - sidebar_item ||= reference_item(:stylesheet => @default_stylesheet)
   %ul= item_tree(sidebar_item, :depth => 1, :omit_self => get_var(:omit_self){true}, :heading_level => get_var(:heading_level){1}, :heading_depth => get_var(:heading_depth){10})
 
-.advertisement
-  <script type="text/javascript">(function(){ var fusion = document.createElement('script'); fusion.src = window.location.protocol + '//adn.fusionads.net/api/1.0/ad.js?zoneid=158&rand=' + Math.floor(Math.random()*9999999); fusion.async = true; (document.head || document.getElementsByTagName('head')[0]).appendChild(fusion); })(); $(function(){ $(".advertisement").addClass("visible")});</script>
-  #fusion_ad
-    %a.pagerankspam(href="http://fusionads.net") Powered by Fusion
+
+= render 'partials/ad'