Moving the ad "above the fold"

nathansmith · Jan 3, 2014 · 0e88f43 · 0e88f43
1 parent 45eccdf
commit 0e88f43
Show file tree

Hide file tree

Showing 17 changed files with 66 additions and 46 deletions.
diff --git a/public/stylesheets/adapt-base-rtl.css b/public/stylesheets/adapt-base-rtl.css
diff --git a/public/stylesheets/adapt-base.css b/public/stylesheets/adapt-base.css
diff --git a/public/stylesheets/application-rtl.css b/public/stylesheets/application-rtl.css
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
diff --git a/public/stylesheets/ie-rtl.css b/public/stylesheets/ie-rtl.css
diff --git a/public/stylesheets/ie.css b/public/stylesheets/ie.css
diff --git a/sass/partials/_site.sass b/sass/partials/_site.sass
@@ -325,10 +325,9 @@ footer[role="contentinfo"]
   clear: both
   display: none
   font-size: 11px
-  margin-bottom: 30px
+  margin-bottom: 20px
   padding: 25px 10px 0
   position: relative
-  top: 10px
 
 #fusion_ad a
   text-decoration: none
@@ -337,6 +336,8 @@ footer[role="contentinfo"]
   background: #fff
   float: left
   margin-right: 10px
+  width: auto
+  height: auto
 
 #fusion_ad .fusionentire
   display: block
@@ -363,6 +364,20 @@ footer[role="contentinfo"]
 //
 // Prevent awkward line wrapping
 //
+@media screen and (min-width: $media-desktop)
+  #fusion_ad.fusion_mini
+    text-align: center
+
+  #fusion_ad.fusion_mini .fusionimg
+    display: block
+    float: none
+    margin: 0 auto 10px
+
+  .fusion_mini #powered-by-fusion
+    left: 0
+    right: 0
+    width: auto
+
 @media screen and (min-width: $media-mobile + 1px) and (max-width: 1100px)
   #fusion_ad
     text-align: center

diff --git a/views/about.html.erb b/views/about.html.erb
@@ -67,7 +67,7 @@
   </ul>
 </article>
 <aside class="grid-30">
-  <hr class="hide-on-desktop" />
+  <%= render "/partials/fusion_ad" %>
   <h2>
     Thanks to <a href="http://projekt202.com/">projekt202</a>
   </h2>
@@ -80,5 +80,4 @@
   <p>
     Hopefully it goes without saying&hellip; If you have a software design project that you think would be a good fit, we'd be happy to talk to you about it &mdash; <a href="http://projekt202.com/company/contact-us">drop us a line</a>.
   </p>
-  <%= render "/partials/fusion_ad" %>
 </aside>
diff --git a/views/css-documentation.html.erb b/views/css-documentation.html.erb
@@ -3,7 +3,7 @@
   @title = "CSS Documentation"
   @page = "css_documentation"
 %>
-<article class="grid-70 push-30" id="documentation">
+<%= render "/partials/table_of_contents" %>
+<article class="grid-70" id="documentation">
   <%= render "/partials/css_documentation" %>
-</article>
-<%= render "/partials/table_of_contents" %>
+</article>
diff --git a/views/demo-adapt-rtl.html.erb b/views/demo-adapt-rtl.html.erb
@@ -5,7 +5,10 @@
   @adapt_js = true
   @page = "adapt_rtl"
 %>
-<div class="grid-100 align-center">
+<div class="grid-20">
+  <%= render "/partials/fusion_ad_mini" %>
+</div>
+<div class="grid-80 align-center">
   <%= render "/partials/demo_top" %>
   <p>
     <b>View grid CSS&hellip;</b>
@@ -22,8 +25,4 @@
     </li>
   </ul>
 </div>
-<%= render "/partials/demo_grid" %>
-<hr />
-<div class="grid-33 prefix-33">
-  <%= render "/partials/fusion_ad" %>
-</div>
+<%= render "/partials/demo_grid" %>
diff --git a/views/demo-adapt.html.erb b/views/demo-adapt.html.erb
@@ -4,7 +4,10 @@
   @adapt_js = true
   @page = "adapt_ltr"
 %>
-<div class="grid-100 align-center">
+<div class="grid-20 push-80">
+  <%= render "/partials/fusion_ad_mini" %>
+</div>
+<div class="grid-80 pull-20 align-center">
   <%= render "/partials/demo_top" %>
   <p>
     <b>View grid CSS&hellip;</b>
@@ -21,8 +24,4 @@
     </li>
   </ul>
 </div>
-<%= render "/partials/demo_grid" %>
-<hr />
-<div class="grid-33 prefix-33">
-  <%= render "/partials/fusion_ad" %>
-</div>
+<%= render "/partials/demo_grid" %>
diff --git a/views/demo-responsive-rtl.html.erb b/views/demo-responsive-rtl.html.erb
@@ -4,7 +4,10 @@
   @right_to_left = true
   @page = "responsive_rtl"
 %>
-<div class="grid-100 mobile-grid-100 align-center">
+<div class="grid-20">
+  <%= render "/partials/fusion_ad_mini" %>
+</div>
+<div class="grid-80 align-center">
   <%= render "/partials/demo_top" %>
   <p>
     <b>View grid CSS&hellip;</b>
@@ -13,8 +16,4 @@
     <a href="https://raw.github.com/nathansmith/unsemantic/master/assets/stylesheets/unsemantic-grid-responsive-rtl.css">unsemantic-grid-responsive-rtl.css</a>
   </p>
 </div>
-<%= render "/partials/demo_grid" %>
-<hr />
-<div class="grid-33 prefix-33">
-  <%= render "/partials/fusion_ad" %>
-</div>
+<%= render "/partials/demo_grid" %>
diff --git a/views/demo-responsive.html.erb b/views/demo-responsive.html.erb
@@ -3,7 +3,10 @@
   @title = "Responsive Demo - LTR"
   @page = "responsive_ltr"
 %>
-<div class="grid-100 mobile-grid-100 align-center">
+<div class="grid-20 push-80">
+  <%= render "/partials/fusion_ad_mini" %>
+</div>
+<div class="grid-80 pull-20 align-center">
   <%= render "/partials/demo_top" %>
   <p>
     <b>View grid CSS&hellip;</b>
@@ -12,8 +15,4 @@
     <a href="https://raw.github.com/nathansmith/unsemantic/master/assets/stylesheets/unsemantic-grid-responsive.css">unsemantic-grid-responsive.css</a>
   </p>
 </div>
-<%= render "/partials/demo_grid" %>
-<hr />
-<div class="grid-33 prefix-33">
-  <%= render "/partials/fusion_ad" %>
-</div>
+<%= render "/partials/demo_grid" %>
diff --git a/views/index.html.erb b/views/index.html.erb
@@ -10,7 +10,7 @@
   </p>
 </div>
 <hr class="hide-on-mobile" />
-<div class="grid-60">
+<div class="grid-40">
   <h2>
     What is it?
   </h2>
@@ -44,6 +44,12 @@
   &lt;/div&gt;
 &lt;/div&gt;</pre>
 </div>
+<div class="grid-20">
+  <h2 class="hide-on-mobile">
+    &nbsp;
+  </h2>
+  <%= render "/partials/fusion_ad_mini" %>
+</div>
 <hr class="hide-on-mobile" />
 <div class="grid-33">
   <h3>
@@ -127,6 +133,7 @@
   </p>
 </div>
 <hr />
-<div class="grid-33 prefix-33">
-  <%= render "/partials/fusion_ad" %>
-</div>
+<p class="mute align-center">
+  <br>
+  Note: If you reached this site by mistake, perhaps you are seeking Unsemantic's arch nemesis… <a href="http://semantic.com/">Semantic.com</a>
+</p>
diff --git a/views/partials/_fusion_ad_mini.html.erb b/views/partials/_fusion_ad_mini.html.erb
@@ -0,0 +1,3 @@
+<div id="fusion_ad" class="fusion_mini">
+  <p id="powered-by-fusion"><a href="http://fusionads.net/">Powered by Fusion</a></p>
+</div>
diff --git a/views/partials/_table_of_contents.html.erb b/views/partials/_table_of_contents.html.erb
@@ -1,4 +1,4 @@
-<aside class="grid-25 suffix-5 pull-70">
-  <dl id="table-of-contents" class="hide-on-mobile">&nbsp;</dl>
+<aside class="grid-25 suffix-5">
   <%= render "/partials/fusion_ad" %>
+  <dl id="table-of-contents" class="hide-on-mobile">&nbsp;</dl>
 </aside>
diff --git a/views/sass-documentation.html.erb b/views/sass-documentation.html.erb
@@ -3,7 +3,7 @@
   @title = "Sass Documentation"
   @page = "sass_documentation"
 %>
-<article class="grid-70 push-30" id="documentation">
+<%= render "/partials/table_of_contents" %>
+<article class="grid-70" id="documentation">
   <%= render "/partials/sass_documentation" %>
-</article>
-<%= render "/partials/table_of_contents" %>
+</article>