updated code styles to support scrolling on pre elementts, improved ipad display with meta view port on all layouts

doc-src/Gemfile.lock

@@ -14,7 +14,7 @@ GIT
 PATH
   remote: ..
   specs:
-    compass (0.11.alpha.4.354beb9)
+    compass (0.11.alpha.4.bc93883)
       chunky_png (~> 0.10.3)
       sass (>= 3.1.0.alpha.50)
 

doc-src/assets/javascripts/fixups.js

@@ -9,7 +9,7 @@ $(function(){
   });
 });
 
-;(function()
+/*;(function()
 {
 	typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
 	function Brush(){};
@@ -19,4 +19,4 @@ $(function(){
 	SyntaxHighlighter.brushes.Sass = Brush;
 
 	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
-})();
+})();*/

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

@@ -30,7 +30,9 @@ a[rel="github-source"] {
 
 pre {
   margin: 1.5em 0;
-  .code-block:first-child { padding: .6em; }
+  overflow: auto;
+  .code-block:first-child { padding: .6em; display: block; }
+  .code-block:first-child { width: 100%; @include box-sizing(border-box); overflow: auto; }
 }
 
 .code-block { @extend .round-corners-4; @extend .fixed-font;
@@ -98,8 +100,9 @@ h2 + a[rel="view source"]{ margin-top: 6px;}
   .toolbar { position: absolute; right: 1px; top: 1px; width: 11px; height: 11px; font-size: 10px; z-index: 10;
     span.title { display: inline; }
     a { display: block; text-align: center; text-decoration: none; padding-top: 1px; } }
-
+}
-  &::-webkit-scrollbar { width: 12px; height: 12px; }
+.syntaxhighlighter, pre .code-block:first-child, pre {
+  &::-webkit-scrollbar { height: 12px; }
   &::-webkit-scrollbar-button { &:start:decrement, &:end:increment { display: block; width: 0; height: 0; } }
   &::-webkit-scrollbar-thumb:horizontal { -webkit-border-radius: 5px; -webkit-background-clip: padding-box; }
 }

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

@@ -1,4 +1,4 @@
-$min-width: 530px;
+$min-width: 680px;
 $side-nav-width: 150px;
 $main-min-width: $min-width - $side-nav-width;
 
@@ -11,11 +11,11 @@ body {
 }
 
 #wrap { @extend .group; padding: 0 20px 20px; }
-#page { @extend .group; padding-bottom: 30px; overflow: visible;}
+#page { @extend .group; padding-bottom: 30px; }
 footer { @extend .group; clear: both; padding-top: 20px;}
 header { padding: 22px 0 0; position: relative; }
 #page aside + article { padding-left: $side-nav-width + 45px;}
 aside { float: left; width: $side-nav-width; position: relative; z-index: 2;}
 
 body#home #page article { padding-left: 0;}
-body.site { max-width: 1024px; }
+body.site, body#changelog { max-width: 1024px; }

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

@@ -11,7 +11,6 @@ nav .selected a:hover { text-decoration: none;}
 header { @extend .group;
   font-size: 1.3em; @extend .heading-font; border-width: 4px;}
 #main-nav {
-  width: 79%;
   display: inline-block;
   padding-bottom: 10px;
   ul {
@@ -73,7 +72,11 @@ body.support #module-nav li.support,
 }
 
 #search-docs {
-  position: absolute; top: 29px; right: 0;
+  width: 170px;
+  float: right;
+  position: relative;
+  top: .3em;
+  //position: absolute; top: 29px; right: 0;
   &:before {
     content: "s";
     display: block;
@@ -87,7 +90,7 @@ body.support #module-nav li.support,
   }
   input { @extend .sans-font; @include round-corners;
     @include box-sizing(border-box);
-    max-width: 200px; min-width: 75px; border: 0; margin: 0; padding: 5px 8px 5px 26px;
+    width: 170px; border: 0; margin: 0; padding: 5px 8px 5px 26px;
     font-size: .8em;
     float: right;
     position: relative; } }

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

@@ -10,7 +10,9 @@
 
   body#home #main-nav a[rel=home],
   body#help #main-nav a[rel=help],
+  body.tutorial #main-nav a[rel=help],
   body.reference #main-nav a[rel=documentation],
+  body#changelog #main-nav a[rel=documentation],
   body#get-involved #main-nav a[rel=get-involved]{ color: $main-nav-selected; }
 
   #search-docs input {
@@ -161,8 +163,12 @@
 
   @if($docs){
     @include docs-theme(dark, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected);
-    .syntaxhighlighter::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .5) 0 0 3px 1px inset; background: rgba(#000, .2); }
+    .syntaxhighlighter, pre, pre .code-block:first-child {
-    .syntaxhighlighter::-webkit-scrollbar-thumb:horizontal { background: -webkit(linear-gradient(rgba(#fff, .3), rgba(#fff, 0))) #000; -webkit-box-shadow: rgba(black, 0.8) 0px 0 0 1px inset; }
+      &::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .5) 0 0 3px 1px inset; background: rgba(#000, .2); }
+    }
+    .syntaxhighlighter, pre, pre .code-block:first-child {
+      &::-webkit-scrollbar-thumb:horizontal { background: -webkit(linear-gradient(rgba(#fff, .3), rgba(#fff, 0))) #000; -webkit-box-shadow: rgba(black, 0.8) 0px 0 0 1px inset; }
+    }
   }
 }
 

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

@@ -38,3 +38,6 @@ em { font-style: italic; }
   hr + h2 { padding-top: 0; }
   hr + h3, h4, h5 { margin-top: 0; }
 }
+
+dl.table dt, dl.table dd { display: inline-block; }
+dg { display: block; }

doc-src/layouts/article.haml

@@ -1,2 +1,20 @@
-- render 'main' do
+- render 'basic' do
-  %article= yield
+  #wrap
+    = render "partials/main-navigation"
+    #page
+      #docs_panel
+        #theme_pref
+          %a{:href => "#", :rel => "theme", :title => "switch theme" } Q
+        -#syntax_pref
+          %a{:href => "#", :rel => "scss" } scss
+          %a{:href => "#", :rel => "sass" } sass
+        #version
+          Version:
+          %a.number(href="/CHANGELOG/")= compass_version
+      %article= yield
+      -#comments= render "partials/disqus_comments"
+    %footer(role="contentinfo")= render "partials/footer"
+  = @item[:content_for_javascripts]
+  = render "partials/analytics"
+  <script type="text/javascript">SyntaxHighlighter.all();</script>
+

doc-src/layouts/basic.haml

@@ -4,6 +4,7 @@
   %head
     %meta{:charset => "utf-8"}/
     %meta{:content => "chrome=1", "http-equiv" => "X-UA-Compatible"}
+    %meta(name="viewport" content="width=780")
     %link(rel="shortcut icon" type="image/png" href="/images/compass_icon.png")
     %title
       #{@item[:title]} | Compass Documentation

doc-src/layouts/default.haml

@@ -4,6 +4,7 @@
     %title
       #{@item[:title]} - Compass
     %meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
+    %meta(name="viewport" content="width=780")
     - if @item[:meta_description]
       %meta{:name => "description", :content => @item[:meta_description]}
     %link(rel="shortcut icon" type="image/png" href="/images/compass_icon.png")

doc-src/layouts/homepage.haml

@@ -4,6 +4,7 @@
   %head
     %meta{:charset => "utf-8"}/
     %meta{:content => "chrome=1", "http-equiv" => "X-UA-Compatible"}
+    %meta(name="viewport" content="width=810")
     %link(rel="shortcut icon" type="image/png" href="/images/compass_icon.png")
     %title
       #{@item[:title]} | Compass Documentation
@@ -25,4 +26,4 @@
             %a{:href => "#", :rel => "theme", :title => "switch theme" } Q
         = yield
       %footer(role="contentinfo")= render "partials/footer"
-    = render "partials/analytics"
+    = render "partials/analytics"

doc-src/layouts/partials/main-navigation.haml

@@ -1,4 +1,7 @@
 %header#banner{:role => "banner"}
+  %form#search-docs{:action => "/search/", :method => "GET"}
+    %input#search{:name => "q", :type => "text", :value => "", :placeholder => "Search the docs"}
+
   %nav#main-nav{:role => "navigation"}
     %ul
       %li.vcard
@@ -6,9 +9,6 @@
       %li
         %a{:href => "/reference/compass/", :rel => "documentation"} Docs
       %li
-        %a{:href => "/help", :rel=> "help"} Get Help
+        %a{:href => "/help", :rel=> "help"} Help
       %li
         %a{:href => "/get-involved", :rel=> "get-involved"} Get Involved
-          
-  %form#search-docs{:action => "/search/", :method => "GET"}
-    %input#search{:name => "q", :type => "text", :value => "", :placeholder => "Search the docs"}

doc-src/layouts/site.haml

@@ -4,6 +4,7 @@
   %head
     %meta{:charset => "utf-8"}/
     %meta{:content => "chrome=1", "http-equiv" => "X-UA-Compatible"}
+    %meta(name="viewport" content="width=780")
     %link(rel="shortcut icon" type="image/png" href="/images/compass_icon.png")
     %title
       #{@item[:title]} | Compass Documentation
@@ -30,6 +31,9 @@
         #docs_panel
           #theme_pref
             %a{:href => "#", :rel => "theme", :title => "switch theme" } Q
+          #version
+            Version:
+            %a.number(href="/CHANGELOG/")= compass_version
         = yield
       %footer(role="contentinfo")= render "partials/footer"
     = render "partials/analytics"