updated code styles to support scrolling on pre elementts, improved ipad display with meta view port on all layouts
This commit is contained in:
parent
bc93883499
commit
e616fa1ea8
@ -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)
|
||||
|
||||
|
@ -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;
|
||||
})();
|
||||
})();*/
|
||||
|
@ -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; }
|
||||
}
|
||||
|
@ -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; }
|
||||
|
@ -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; } }
|
||||
|
@ -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; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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; }
|
||||
|
@ -1,2 +1,20 @@
|
||||
- render 'main' do
|
||||
- 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"
|
||||
<script type="text/javascript">SyntaxHighlighter.all();</script>
|
||||
|
||||
|
@ -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
|
||||
|
@ -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")
|
||||
|
@ -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
|
||||
|
@ -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"}
|
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user