Resize and reposition ads to be less obtrusive

_config.yml

@@ -71,10 +71,12 @@ defaults:
       type: core_docs
     values:
       layout: docs
+      show_ads: true
   -
     # Use the plugin_docs layout for all plugin doc sections by default
     scope:
       path: ""
       type: plugin_docs
     values:
       layout: docs
+      show_ads: true

_layouts/default.html

@@ -10,12 +10,13 @@
 
     {% include header.html %}
 
-    {% include ads.html %}
 
     <main>
       {{ content }}
     </main>
 
+    {% include ads.html %}
+
     {% include footer.html %}
 
   </body>

_sass/_containers.scss

@@ -32,7 +32,7 @@ summary {
 main {
   display: inline-block;
   position: relative;
-  max-width: 750px;
+  max-width: $main-max-width;
   margin-left: auto;
   margin-right: auto;
   padding-bottom: 10px;
@@ -102,31 +102,43 @@ canvas {
 }
 
 // Google ads
-$ad-height: 100px;
+
+// Normal ad size
+$ad-width: 160px;
+$ad-height: 600px;
 #ad-container {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  z-index: 999;
-  width: 100%;
-  background-color: rgba(#fff, 0.25);
+  display: inline-block;
+  vertical-align: top;
+  margin-top: $h1-margin-top;
 }
 .adsbygoogle {
   display: block;
-  width: 100%;
-  max-height: $ad-height;
+  width: $ad-width;
+  height: $ad-height;
   margin: 0 auto;
 }
-#ad-container + main {
-  margin-bottom: $ad-height;
-}
-@include layout(compact) {
-  $ad-height: 100px;
-  #ad-container + main {
-    margin-bottom: $ad-height;
+
+// Ad styles for maller viewport widths
+@media (max-width: $main-max-width + $ad-width) {
+  // Attach ad to bottom of viewport
+  #ad-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 999;
+    width: 100%;
+    margin-top: 0;
+    background-color: rgba(#fff, 0.25);
   }
+  // Set smaller, unobtrusive ad size
+  $ad-width: 234px;
+  $ad-height: 60px;
   .adsbygoogle {
-    width: 320px;
-    max-height: $ad-height;
+    width: $ad-width;
+    height: $ad-height;
+  }
+  // Ensure that content at bottom of page is not obscured by floating ad
+  main {
+    margin-bottom: $ad-height;
   }
 }

_sass/_headings.scss

@@ -1,4 +1,5 @@
 h1 {
+  margin-top: $h1-margin-top;
   margin-bottom: 0;
   font-size: 2em;
   text-align: center;

_sass/_variables.scss

@@ -10,6 +10,9 @@ $layout-widths: (
   hybrid: 800px
 );
 
+// The maximum width of the site's main content area
+$main-max-width: 750px;
+
 // Border radius for syntax-highlighted code example
 $code-block-border-radius: 5px;
 
@@ -19,3 +22,6 @@ $code-blue: #25b;
 $code-orange: #c30;
 $code-green: #085;
 $code-purple: #909;
+
+// The top margin for page headings (stored as a variable)
+$h1-margin-top: 30px;