general typography improvements

This commit is contained in:
Brandon Mathis 2010-12-08 23:02:20 -06:00
parent 4ab7a6ca9d
commit 7f7b3c5ff8
16 changed files with 99 additions and 50 deletions

View File

@ -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)

View File

@ -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

View File

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

View File

@ -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)

View File

@ -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: "[" ; }
&:after{ content: "]" ; } }
}
&:before { 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 {

View File

@ -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; }

View File

@ -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;
}

View File

@ -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;

View File

@ -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}; }
h3 { @extend .heading-panel-#{$theme}; } }
h1 { @extend .horizontal-rule-#{$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; }

View File

@ -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; }
h2 { font-size: 22px; margin: 15px 0 8px; padding-bottom: 6px;}
h1 { font-size: 35px; margin-bottom: 15px; 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; }
}

View File

@ -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}

View File

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

View File

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

View File

@ -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"

View File

@ -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