From e616fa1ea8a6efdefe200a508b631d4ea06e044d Mon Sep 17 00:00:00 2001 From: Brandon Mathis Date: Sat, 11 Dec 2010 14:37:09 -0600 Subject: [PATCH] updated code styles to support scrolling on pre elementts, improved ipad display with meta view port on all layouts --- doc-src/Gemfile.lock | 2 +- doc-src/assets/javascripts/fixups.js | 4 ++-- .../content/stylesheets/partials/_code.scss | 9 +++++--- .../content/stylesheets/partials/_layout.scss | 6 ++--- .../content/stylesheets/partials/_nav.scss | 9 +++++--- .../content/stylesheets/partials/_theme.scss | 10 +++++++-- .../stylesheets/partials/_typography.scss | 3 +++ doc-src/layouts/article.haml | 22 +++++++++++++++++-- doc-src/layouts/basic.haml | 1 + doc-src/layouts/default.haml | 1 + doc-src/layouts/homepage.haml | 3 ++- doc-src/layouts/partials/main-navigation.haml | 8 +++---- doc-src/layouts/site.haml | 4 ++++ 13 files changed, 61 insertions(+), 21 deletions(-) diff --git a/doc-src/Gemfile.lock b/doc-src/Gemfile.lock index 67f962b0..75417ca8 100644 --- a/doc-src/Gemfile.lock +++ b/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) diff --git a/doc-src/assets/javascripts/fixups.js b/doc-src/assets/javascripts/fixups.js index 72a4aaec..3263c69e 100644 --- a/doc-src/assets/javascripts/fixups.js +++ b/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; -})(); +})();*/ diff --git a/doc-src/content/stylesheets/partials/_code.scss b/doc-src/content/stylesheets/partials/_code.scss index 22a9bf61..6c5e4a40 100644 --- a/doc-src/content/stylesheets/partials/_code.scss +++ b/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; } } diff --git a/doc-src/content/stylesheets/partials/_layout.scss b/doc-src/content/stylesheets/partials/_layout.scss index 8cbbdabf..3c04f4be 100644 --- a/doc-src/content/stylesheets/partials/_layout.scss +++ b/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; } diff --git a/doc-src/content/stylesheets/partials/_nav.scss b/doc-src/content/stylesheets/partials/_nav.scss index c8798dad..f03f4ae5 100644 --- a/doc-src/content/stylesheets/partials/_nav.scss +++ b/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; } } diff --git a/doc-src/content/stylesheets/partials/_theme.scss b/doc-src/content/stylesheets/partials/_theme.scss index 625b63d3..b2ee864c 100644 --- a/doc-src/content/stylesheets/partials/_theme.scss +++ b/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::-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; } + .syntaxhighlighter, pre, pre .code-block:first-child { + &::-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; } + } } } diff --git a/doc-src/content/stylesheets/partials/_typography.scss b/doc-src/content/stylesheets/partials/_typography.scss index ff5cb94f..efcd0081 100644 --- a/doc-src/content/stylesheets/partials/_typography.scss +++ b/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; } diff --git a/doc-src/layouts/article.haml b/doc-src/layouts/article.haml index 17fea84e..89da0430 100644 --- a/doc-src/layouts/article.haml +++ b/doc-src/layouts/article.haml @@ -1,2 +1,20 @@ -- render 'main' do - %article= yield \ No newline at end of file +- render 'basic' do + #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" + + diff --git a/doc-src/layouts/basic.haml b/doc-src/layouts/basic.haml index 2201517d..372df280 100644 --- a/doc-src/layouts/basic.haml +++ b/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 diff --git a/doc-src/layouts/default.haml b/doc-src/layouts/default.haml index 818d0523..9676f54c 100644 --- a/doc-src/layouts/default.haml +++ b/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") diff --git a/doc-src/layouts/homepage.haml b/doc-src/layouts/homepage.haml index b3604488..658aa7c6 100644 --- a/doc-src/layouts/homepage.haml +++ b/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" \ No newline at end of file + = render "partials/analytics" diff --git a/doc-src/layouts/partials/main-navigation.haml b/doc-src/layouts/partials/main-navigation.haml index b1363bf1..93fb6ab6 100644 --- a/doc-src/layouts/partials/main-navigation.haml +++ b/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"} \ No newline at end of file diff --git a/doc-src/layouts/site.haml b/doc-src/layouts/site.haml index 5ac517fe..b4dffb1c 100644 --- a/doc-src/layouts/site.haml +++ b/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"