general typography improvements

doc-src/Gemfile.lock

@@ -14,7 +14,7 @@ GIT
 PATH
   remote: /Users/bmathis/Documents/Workspace/compass-projects/compass
   specs:
-    compass (0.11.alpha.3.caafd96)
+    compass (0.11.alpha.3.4ab7a6c)
       chunky_png (~> 0.10.3)
       sass (>= 3.1.0.alpha.50)
 

doc-src/content/help/tutorials/best_practices.markdown

@@ -8,6 +8,9 @@ classnames:
 
 # Best Practices
 
+Here are some best practices for making your projects easier to build and
+simpler to maintain.
+
 ## Use a Base stylesheet file
 
 Create a `_base.scss` [partial][1] to initialize your stylesheets with common

doc-src/content/reference/compass.haml

@@ -16,10 +16,8 @@ layout: core
     other frameworks and extensions.
 
 %h2 Non Imported Modules
-
+%em You can import these yourself if you want to use them.
-%p
+%ol
-  You can import these yourself if you want to use them.
+  %li= render "partials/reference/import", :import => "compass/_layout.scss"
-%ul
+  %li= render "partials/reference/import", :import => "compass/_reset.scss"
-  = render "partials/reference/import", :import => "compass/_layout.scss"
-  = render "partials/reference/import", :import => "compass/_reset.scss"
 

doc-src/content/stylesheets/core/_clearing-classes.sass

@@ -11,3 +11,7 @@
   display: none
 .clear-box-shadow
   +box-shadow(none)
+.clear-border-radius
+  @extend .clear-rounded-corners
+.clear-rounded-corners
+  +border-radius(0)

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

@@ -12,6 +12,12 @@ html .syntaxhighlighter {
   //a.help { font-size: 1.5em; @extend .pictos; color: #aaa; position: relative; right: 6px; top: 2px; }
   }
 
+a[rel="github-source"] {
+  position: relative;
+  float: right;
+  top: 1.1em;
+}
+
 pre {
   margin: 1.5em 0;
   .code-block:first-child { padding: .6em; }
@@ -44,12 +50,12 @@ h3.mixin { @include round-top-corners; margin-bottom: 2px;}
   padding: 0 2px;
   &[data-default-value] {
     font-style: italic;
-    &:before{ content: "[" ; }
+    &:before { content: "[" ; }
-    &:after{ content: "]" ; } }
+    &:after { content: "]" ; }}
-  }
+}
 
 a[rel="view source"]{ float: right; padding: 9px 15px; margin-top: 20px; position: relative; z-index: 2; font-size: .8em; @include hover-link;}
-h2 + a[rel="view source"]{ margin-top: 12px;}
+h2 + a[rel="view source"]{ margin-top: 6px;}
 
 .syntaxhighlighter {
   a, div, code, table, table td, table tr, table tbody, table thead, table caption, textarea {

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

@@ -11,10 +11,11 @@ body {
 }
 
 #wrap { @extend .group; padding: 0 20px 20px; }
-#page { @extend .group; padding-bottom: 30px; overflow: hidden;}
+#page { @extend .group; padding-bottom: 30px; overflow: visible;}
 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; }
+aside { float: left; width: $side-nav-width; position: relative; z-index: 2;}
 
 body#home #page article { padding-left: 0;}
+body.site { max-width: 1024px; }

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

@@ -25,6 +25,9 @@ footer {
     li {padding-top: 3px;}
     li:last-child {border: 0; @include box-shadow(none); } } }
 }
+#page article h2 {
+  margin-top: 1.5em;
+}
 h2 a.help {
   text-indent: -9999px;
   display: inline-block;
@@ -42,3 +45,10 @@ h2 a.help {
     font-size: .85em;
   }
 }
+hr {
+  height: 0px;
+  border: 0;
+  border-bottom-width: 4px;
+  margin: 3em 0;
+  background: transparent;
+}

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

@@ -8,6 +8,7 @@ aside {
     line-height: 1.45em;
     padding-bottom: .2em;
     margin-bottom: .4em;
+    @extend .clear-border-radius;
   }
   h3 {
     padding: 0 0 .5em; line-height: 1.1em;

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

@@ -20,11 +20,13 @@
     strong { color: $main-nav-selected; }
     em { color: $code; } }
 
-  h2 { @extend .horizontal-rule-#{$theme}; }
+  #page > article h2 { @extend .horizontal-rule-top-#{$theme}; }
-
+  hr { @extend .horizontal-rule-#{$theme};
+    border-bottom-width: 8px}
+  body#home h2 { @extend .horizontal-rule-#{$theme}; }
   aside { @extend .vertical-rule-#{$theme};
     h2 a { color: $strong-text; }
-    h3 { @extend .horizontal-rule-#{$theme}; }}
+    h2, h3 { @extend .horizontal-rule-#{$theme}; }}
 
   footer .links li { @extend .vertical-rule-#{$theme}; }
   code { @extend .code-block-#{$theme}; color: $code; }
@@ -40,8 +42,13 @@
 @mixin docs-theme($theme, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected){
 
   #page > article {
-    h1, h2 { @extend .horizontal-rule-#{$theme}; }
+    h1 { @extend .horizontal-rule-#{$theme}; }
-    h3 { @extend .heading-panel-#{$theme}; } }
+    h2 { @extend .horizontal-rule-top-#{$theme}; }
+    h3 { @extend .heading-panel-#{$theme}; }
+    h1 + h2, hr + h2 {
+      @extend .clear-box-shadow; border-top: 0;
+    margin-top: 0;}
+  }
 
   #sub-nav { @extend .horizontal-rule-#{$theme}; }
   #docs-nav { @extend .vertical-rule-#{$theme}; }
@@ -81,6 +88,10 @@
   @include box-shadow(rgba(#fff, .07) 0 1px 0);
   border-bottom: 1px solid #121212; }
 
+.horizontal-rule-top-dark {
+  @include box-shadow(rgba(#fff, .07) 0 1px 0 inset);
+  border-top: 1px solid #121212; }
+
 .vertical-rule-dark {
   @include box-shadow(rgba(#fff, .07) 1px 0 0);
   border-right: 1px solid #121212; }

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

@@ -18,14 +18,23 @@
   ul, ol, dl { margin-bottom: 1.5em;}
   p { margin-bottom: 1.2em;}
   #{headings(1,2)}{ @extend .heading-font; line-height: 1.2em; }
-  h1 { font-size: 30px; }
+  h1 { font-size: 35px; margin-bottom: 15px; padding-bottom: 6px; }
-  h2 { font-size: 22px; margin: 15px 0 8px; padding-bottom: 6px;}
+  h2 { font-size: 26px; margin: 1em 0 15px; padding-bottom: 6px; }
   h3 { font-size: 18px; }
-  h1 { padding-bottom: 6px; margin-bottom: 9px; }
+  h4 { font-size: 18px; margin: .4em 0; }
   ul { list-style: inside disc; }
   dt { font-weight: bold; }
 }
 #page aside {
   ul { list-style: none; margin-bottom: 1em;}
-  h2 { line-height: 1.4em; margin-top: 0;}
+  h2 { line-height: 1.3em; margin-top: 0; padding-top: 3px;}
+}
+em { font-style: italic; }
+
+#page > article {
+  position: relative;
+  h2 { font-size: 26px; margin: .5em 0 .6em;
+    padding: 1em 0 6px;}
+  hr + h2 { padding-top: 0; }
+  hr + h3, h4, h5 { margin-top: 0; }
 }

doc-src/layouts/partials/reference/import-few.haml

@@ -0,0 +1,4 @@
+- if path = reference_path(:stylesheet => import)
+  - imported_item = reference_item(:stylesheet => import)
+  <a href="#{path}" title="@import #{import}">#{imported_item[:crumb] || imported_item[:title]}</a>#{"," unless @last}
+

doc-src/layouts/partials/reference/import.haml

@@ -1,8 +1,7 @@
-%li
+- if path = reference_path(:stylesheet => import)
-  - if path = reference_path(:stylesheet => import)
+  - imported_item = reference_item(:stylesheet => import)
-    - imported_item = reference_item(:stylesheet => import)
+  %a{:href => path, :title => "@import #{import}"}= imported_item[:crumb] || imported_item[:title]
-    %a{:href => path, :title => "@import #{import}"}= imported_item[:crumb] || imported_item[:title]
+  - if imported_item[:meta_description]
-    - if imported_item[:meta_description]
+    – #{imported_item[:meta_description]}
-      – #{imported_item[:meta_description]}
+- else
-  - else
+  = import
-    = import

doc-src/layouts/partials/reference/imports.haml

@@ -1,7 +1,12 @@
 - if (imported_libs = imports(@item)).any?
-  %h2 Imports
+  - if imported_libs.size == 1000
-  %p
+    %p
-    The following sass files are automatically imported when you import this file:
+      Automatically imports:
-  %ol
+      - imported_libs.each do |import|
-    - imported_libs.each do |import|
+        = render "partials/reference/import-few", :import => import, :last => import == imported_libs.last
-      = render "partials/reference/import", :import => import
+  - else
+    %h2 Imports
+    %ol
+      - imported_libs.each do |import|
+        %li= render "partials/reference/import", :import => import
+

doc-src/layouts/reference.haml

@@ -1,3 +1,7 @@
+- gh_url = "http://github.com/chriseppstein/compass/blob/stable/frameworks/"
+- gh_url << "#{item[:framework]}/stylesheets/#{item[:stylesheet]}"
+%a{:href => gh_url, :rel=>"github-source", :title=>"view source for this module on github"} Source on Github
+
 %h1= item[:title]
 
 - if item[:beta]
@@ -10,12 +14,6 @@
   This file can be imported using:
   %code @import "#{departialize(item[:stylesheet][0..-6])}"
 
-%p
-  - gh_url = "http://github.com/chriseppstein/compass/blob/stable/frameworks/"
-  - gh_url << "#{item[:framework]}/stylesheets/#{item[:stylesheet]}"
-  View the
-  %a{:href => gh_url} Source for this module on Github.
-
 = render "partials/reference/examples"
 
 = render "partials/reference/imports"

doc-src/layouts/site.haml

@@ -12,7 +12,7 @@
     %script(src="/javascripts/jquery.cookie.js" type="text/javascript")
     %script(src="/javascripts/site.js" type="text/javascript")
     %script(src="/javascripts/modernizr-1.6.min.js" type="text/javascript")
-  %body{body_attributes(@item)}
+  %body.site{body_attributes(@item)}
     #wrap
       = render "partials/main-navigation"
       #sub-nav