From e916231560d2b7bbf809e654fccc1403b3a4a2f4 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 20 Jan 2015 15:25:57 -0500 Subject: [PATCH] Clean up comments in Sass partials --- _sass/coderay.scss | 6 +- _sass/elements.scss | 44 ++++- _sass/forms.scss | 36 +++- _sass/grid.scss | 61 ++++-- _sass/mixins.scss | 423 ++++++++++++++++++++++++++---------------- _sass/pygments.scss | 6 +- _sass/site.scss | 28 ++- _sass/typography.scss | 58 ++++-- _sass/variables.scss | 23 ++- 9 files changed, 477 insertions(+), 208 deletions(-) diff --git a/_sass/coderay.scss b/_sass/coderay.scss index 200fd8ca..55dd71bc 100644 --- a/_sass/coderay.scss +++ b/_sass/coderay.scss @@ -1,3 +1,7 @@ +/* ========================================================================== + Coderay syntax highlighting + ========================================================================== */ + .CodeRay { background-color: #efefef; font-family: $code-font; @@ -130,4 +134,4 @@ ol.CodeRay li { white-space: pre } .CodeRay .insert .insert { color: #080; font-weight:bold } .CodeRay .delete .delete { color: #800; font-weight:bold } .CodeRay .change .change { color: #66f; } -.CodeRay .head .head { color: #f4f; } \ No newline at end of file +.CodeRay .head .head { color: #f4f; } diff --git a/_sass/elements.scss b/_sass/elements.scss index 18b8c152..689ad633 100644 --- a/_sass/elements.scss +++ b/_sass/elements.scss @@ -1,3 +1,7 @@ +/* + Rules + ========================================================================== */ + hr { display: block; margin: 1em 0; @@ -7,10 +11,15 @@ hr { border-top: 1px solid #ccc; border-bottom: 1px solid #fff; } -/* Figures and images ==================================== */ + +/* + Figures and images + ========================================================================== */ + figure { margin-bottom: $indent-var; } + article img { max-width: 100%; height: auto; @@ -18,9 +27,13 @@ article img { vertical-align: middle; -ms-interpolation-mode: bicubic; } + svg:not(:root) { overflow: hidden; } + +/* 2 images of equal dimensions in a row */ + .half { @include container; @include clearfix; @@ -33,6 +46,9 @@ svg:not(:root) { } } } + +/* 3 images of equal dimensions in a row */ + .third { @include container; @include clearfix; @@ -45,7 +61,13 @@ svg:not(:root) { } } } -/* Buttons ============================================== */ + +/* + Buttons + ========================================================================== */ + +/* Default button */ + .btn { display: inline-block; margin-bottom: 20px; @@ -68,6 +90,9 @@ svg:not(:root) { color: $primary; } } + +/* Success button */ + .btn-success { background-color: $success; color: $white; @@ -80,6 +105,9 @@ svg:not(:root) { color: $success; } } + +/* Warning button */ + .btn-warning { background-color: $warning; color: $white; @@ -92,6 +120,9 @@ svg:not(:root) { color: $warning; } } + +/* Danger button */ + .btn-danger { background-color: $danger; color: $white; @@ -104,6 +135,9 @@ svg:not(:root) { color: $danger; } } + +/* Information button */ + .btn-info { background-color: $info; color: $white; @@ -116,7 +150,11 @@ svg:not(:root) { color: $info; } } -/* Well ================================================= */ + +/* + Wells + ========================================================================== */ + .well { min-height: 20px; padding: 19px; diff --git a/_sass/forms.scss b/_sass/forms.scss index 19c1b3b0..8ce8c67a 100644 --- a/_sass/forms.scss +++ b/_sass/forms.scss @@ -1,3 +1,7 @@ +/* ========================================================================== + Forms + ========================================================================== */ + btnform { margin: 0 0 5px 0; fieldset { @@ -158,7 +162,11 @@ input[type="hidden"] { .checkbox.inline + .checkbox.inline { margin-left : 10px; } -/* disabled ==================================== */ + +/* + Disabled state + ========================================================================== */ + input[disabled], select[disabled], textarea[disabled], @@ -168,7 +176,11 @@ textarea[readonly] { @include opacity(.5); cursor : not-allowed; } -/* focus and active ============================ */ + +/* + Focus & active state + ========================================================================== */ + input:focus, textarea:focus { border-color : $accentcolor; @@ -181,7 +193,11 @@ input[type="checkbox"]:focus, select:focus { @include box-shadow(none); } -/* help text ==================================== */ + +/* + Help text + ========================================================================== */ + .help-block, .help-inline { color : lighten($black, 50); @@ -196,7 +212,11 @@ select:focus { vertical-align : middle; padding-left : 5px; } -/* .form-inline ================================= */ + +/* + .form-inline + ========================================================================== */ + .form-inline input, .form-inline textarea, .form-inline select { @@ -218,7 +238,11 @@ select:focus { float : left; margin-left : 0; margin-right : 3px; } -/* .form-search ================================= */ + +/* + .form-search + ========================================================================== */ + .form-search input, .form-search textarea, .form-search select { @@ -246,4 +270,4 @@ select:focus { float : left; margin-left : 0; margin-right : 3px; -} \ No newline at end of file +} diff --git a/_sass/grid.scss b/_sass/grid.scss index ffb89e7a..4f8d4666 100644 --- a/_sass/grid.scss +++ b/_sass/grid.scss @@ -1,5 +1,12 @@ -// Defining number of columns in the grid. -// Common Values would be 12, 16 or 24 +/* ========================================================================== + Grid mixins + ========================================================================== */ + +/* + Define number of columns in the grid + Common values would be 12, 16 or 24 + ========================================================================== */ + $width: 100%; $def_grid: 12; $margin: 0; @@ -8,40 +15,70 @@ $margin: 0; margin:0 auto; width:$width; } - -// Works out the width of elements based -// on total number of columns and width -// number of columns being displayed. -// Removes 20px for margins + +/* + Works out the width of elements based on total number of columns and width + number of columns being displayed. Removes 20px for margins. + ========================================================================== */ + @mixin grid($grid:$def_grid,$cols:'',$float:left,$display:inline){ display:$display; float:$float; width:(100%/$grid * $cols) - ($margin * 2); } -// Allows for padding before element +/* + Add x amount of column padding before an element + Example: @include prefix(1,12); + ========================================================================== */ + @mixin prefix($grid:$def_grid,$cols:''){ margin-left:(100%/$grid * $cols); } -// Allows for padding after element + +/* + Add x amount of column padding after an element + Example: @include suffix(2,12); + ========================================================================== */ + @mixin suffix($grid:$def_grid,$cols:''){ margin-right:(100%/$grid * $cols); } -// Removes left margin + +/* + Remove left margin + Example: @include first; + ========================================================================== */ + @mixin first(){ margin-left:0; } -// Removes right margin + +/* + Remove right margin + Example: @include last; + ========================================================================== */ + @mixin last(){ margin-right:0; } +/* + Push an element x amount of column(s) to the right + Example: @include push(2,12); + ========================================================================== */ + @mixin push($grid:$def_grid,$move:'') { position:relative; left:(100%/$grid * $move); } +/* + Pull an element x amount of column(s) to the left + Example: @include pull(1,12); + ========================================================================== */ + @mixin pull($grid:$def_grid,$move:''){ position:relative; left:(100%/$grid * $move) * -1; -} \ No newline at end of file +} diff --git a/_sass/mixins.scss b/_sass/mixins.scss index ac952d98..1d244115 100644 --- a/_sass/mixins.scss +++ b/_sass/mixins.scss @@ -1,17 +1,20 @@ -// UTILITY MIXINS -// -------------------------------------------------- +/* ========================================================================== + Utility mixins + ========================================================================== */ + +/* + Clearfix + For clearing floats like a boss h5bp.com/q + ========================================================================== */ -// Clearfix -// -------------------- -// For clearing floats like a boss h5bp.com/q @mixin clearfix { *zoom: 1; &:before, &:after { display: table; content: ""; - // Fixes Opera/contenteditable bug: - // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 + /* Fixes Opera/contenteditable bug: */ + /* http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 */ line-height: 0; } &:after { @@ -19,29 +22,38 @@ } } -// Webkit-style focus -// -------------------- +/* + Webkit-style focus + ========================================================================== */ + @mixin tab-focus() { - // Default + /* Default */ outline: thin dotted #333; - // Webkit + /* Webkit */ outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } -// Center-align a block level element -// ---------------------------------- +/* + Center-align a block level element + ========================================================================== */ + @mixin center-block() { display: block; margin-left: auto; margin-right: auto; } -// TYPOGRAPHY -// -------------------------------------------------- +/* ========================================================================== + Typography related mixins + ========================================================================== */ + +/* + Maintains vertical rhythm by setting a font-sizes proportional to + line-height and bottom margin + example: @font-size(16); + ========================================================================== */ -// Full-fat vertical rhythm -// ------------------------ @mixin font-size($size) { font-size: 0px + $size; font-size: 0rem + $size / $doc-font-size; @@ -50,153 +62,225 @@ margin-bottom: 0rem + ($doc-line-height / $doc-font-size); } -// Just the REMs -// ------------- +/* + Just font-size (REMs + pixel fallback) + example: @include font-rem(16); + ========================================================================== */ + @mixin font-rem($size) { font-size: 0px + $size; font-size: 0rem + $size / $doc-font-size; } -// Just font-size and line-height -// ------------------------------ +/* + Just font-size (REMs + pixel fallback) and line-height + @include font(16); + ========================================================================== */ + @mixin font($size) { font-size: 0px + $size; font-size: 0rem + $size / $doc-font-size; line-height: 0 + round($doc-line-height / $size*10000) / 10000; } +/* + Hide text overflow and end with ... + ========================================================================== */ + @mixin text-overflow() { -overflow: hidden; -text-overflow: ellipsis; -white-space: nowrap; } + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Indentation variable */ $indent-var: 0rem + ($doc-line-height / $doc-font-size); -// GRADIENTS -// -------------------------------------------------- +/* ========================================================================== + Gradient mixins + ========================================================================== */ @mixin horizontal($startColor : $white, $endColor : $lightergrey) { -background-color: $endColor; -background-image : -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+ -background-image : -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+ -background-image : -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+ -background-image : -ms-linear-gradient(left, $startColor, $endColor); // IE10 -background-image : -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10 -background-image : linear-gradient(left, $startColor, $endColor); // W3C -background-repeat : repeat-x; } + background-color: $endColor; + background-image : -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+ + background-image : -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+ + background-image : -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+ + background-image : -ms-linear-gradient(left, $startColor, $endColor); // IE10 + background-image : -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10 + background-image : linear-gradient(left, $startColor, $endColor); // W3C + background-repeat : repeat-x; + } @mixin vertical($startColor : $white, $endColor: $lightergrey) { -background-image : -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+ -background-image : -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+ -background-color : $endColor; -background-image : -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+ -background-image : -ms-linear-gradient(top, $startColor, $endColor); // IE10 -background-image : -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10 -background-image : linear-gradient(top, $startColor, $endColor); // W3C -background-repeat : repeat-x; } + background-image : -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+ + background-image : -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+ + background-color : $endColor; + background-image : -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+ + background-image : -ms-linear-gradient(top, $startColor, $endColor); // IE10 + background-image : -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10 + background-image : linear-gradient(top, $startColor, $endColor); // W3C + background-repeat : repeat-x; +} @mixin directional($startColor : $white, $endColor : $lightergrey, $deg : 45deg) { -background-color : $endColor; -background-image : -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+ -background-image : -ms-linear-gradient($deg, $startColor, $endColor); // IE10 -background-image : -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+ -background-image : -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10 -background-image : linear-gradient($deg, $startColor, $endColor); // W3C -background-repeat : repeat-x; } + background-color : $endColor; + background-image : -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+ + background-image : -ms-linear-gradient($deg, $startColor, $endColor); // IE10 + background-image : -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+ + background-image : -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10 + background-image : linear-gradient($deg, $startColor, $endColor); // W3C + background-repeat : repeat-x; +} // .bordered(COLOR, COLOR, COLOR, COLOR); @mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) { -border-top : solid 1px $top-color; -border-left : solid 1px $left-color; -border-right : solid 1px $right-color; -border-bottom : solid 1px $bottom-color; } + border-top : solid 1px $top-color; + border-left : solid 1px $left-color; + border-right : solid 1px $right-color; + border-bottom : solid 1px $bottom-color; +} -// ROUND CORNERS -// -------------------------------------------------- +/* ========================================================================== + Rounded corners + ========================================================================== */ + + + +/* + Round all corners + example: @include rounded(4px); + ========================================================================== */ -// .rounded(VALUE); @mixin rounded($radius:4px) { -border-radius : $radius; } + border-radius : $radius; +} + +/* + Round individual corners (top right, bottom right, bottom left, top left) + example: @include border-radius(4px, 0, 0, 4px); + ========================================================================== */ -// .border-radius(VALUE,VALUE,VALUE,VALUE); @mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) { -border-top-right-radius : $topright; -border-bottom-right-radius : $bottomright; -border-bottom-left-radius : $bottomleft; -border-top-left-radius : $topleft; --webkit-background-clip : padding-box; --moz-background-clip : padding; -background-clip : padding-box; } + border-top-right-radius: $topright; + border-bottom-right-radius: $bottomright; + border-bottom-left-radius: $bottomleft; + border-top-left-radius: $topleft; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} + +/* + Box shadow + example: @include box-shadow(HORIZONTAL VERTICAL BLUR COLOR)); + ========================================================================== */ -// .box-shadow(HORIZONTAL VERTICAL BLUR COLOR)) @mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) { --webkit-box-shadow : $shadow; --moz-box-shadow : $shadow; -box-shadow : $shadow; } + -webkit-box-shadow: $shadow; + -moz-box-shadow: $shadow; + box-shadow: $shadow; +} + +/* + Drop shadow + example: @include drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA); + ========================================================================== */ -// .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA); @mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) { --webkit-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); --moz-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); -box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); } + -webkit-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); + -moz-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); + box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); +} + +/* + Text shadow + example: @include text-shadow(0 2px 3px rgba(0,0,0,.25)); + ========================================================================== */ -// .text-shadow(); @mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) { -text-shadow : $shadow; } +text-shadow: $shadow; } -// .opacity(VALUE); -@mixin opacity($opacity : .5) { -opacity : $opacity; } +/* + Opacity + example: @include opacity(0.5); // 50% opacity + ========================================================================== */ -// TRANSFORMATIONS -// -------------------------------------------------- +@mixin opacity($opacity: 0.5) { + opacity: $opacity; +} + +/* ========================================================================== + Transformations + ========================================================================== */ + +/* + @include rotate(VALUEdeg); + ========================================================================== */ -// .rotate(VALUEdeg); @mixin rotate($deg) { --webkit-transform : rotate($deg); --moz-transform : rotate($deg); --ms-transform : rotate($deg); --o-transform : rotate($deg); -transform : rotate($deg); } + -webkit-transform: rotate($deg); + -moz-transform: rotate($deg); + -ms-transform: rotate($deg); + -o-transform: rotate($deg); + transform: rotate($deg); +} + +/* + @include scale(VALUE); + ========================================================================== */ -// .scale(VALUE); @mixin scale($ratio) { --webkit-transform : scale($ratio); --moz-transform : scale($ratio); --ms-transform : scale($ratio); --o-transform : scale($ratio); -transform : scale($ratio); } + -webkit-transform: scale($ratio); + -moz-transform: scale($ratio); + -ms-transform: scale($ratio); + -o-transform: scale($ratio); + transform: scale($ratio); +} + +/* + @include skew(VALUE, VALUE); + ========================================================================== */ -// .skew(VALUE, VALUE); @mixin skew($x: 0, $y: 0) { --webkit-transform : skew($x, $y); --moz-transform : skew($x, $y); --ms-transform : skew($x, $y); --o-transform : skew($x, $y); -transform : skew($x, $y); } + -webkit-transform: skew($x, $y); + -moz-transform: skew($x, $y); + -ms-transform: skew($x, $y); + -o-transform: skew($x, $y); + transform: skew($x, $y); +} + +/* + @include transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); + ========================================================================== */ -// .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); @mixin transition($transition) { --webkit-transition : $transition; --moz-transition : $transition; --ms-transition : $transition; --o-transition : $transition; -transition : $transition; } + -webkit-transition: $transition; + -moz-transition: $transition; + -ms-transition: $transition; + -o-transition: $transition; + transition: $transition; +} + +/* + @include translate(VALUE, VALUE); + ========================================================================== */ -// .translate(VALUE, VALUE) @mixin translate($x: 0, $y: 0) { --webkit-transform : translate($x, $y); --moz-transform : translate($x, $y); --ms-transform : translate($x, $y); --o-transform : translate($x, $y); -transform : translate($x, $y); } + -webkit-transform: translate($x, $y); + -moz-transform: translate($x, $y); + -ms-transform: translate($x, $y); + -o-transform: translate($x, $y); + transform: translate($x, $y); +} @mixin translate3d($x: 0, $y: 0, $z: 0) { --webkit-transform : translate($x, $y, $z); --moz-transform : translate($x, $y, $z); --ms-transform : translate($x, $y, $z); --o-transform : translate($x, $y, $z); -transform : translate($x, $y, $z); } + -webkit-transform: translate($x, $y, $z); + -moz-transform: translate($x, $y, $z); + -ms-transform: translate($x, $y, $z); + -o-transform: translate($x, $y, $z); + transform: translate($x, $y, $z); +} @mixin animation($name, $duration: 300ms, $delay: 0, $ease: ease) { -webkit-animation: $name $duration $delay $ease; @@ -204,68 +288,89 @@ transform : translate($x, $y, $z); } -ms-animation: $name $duration $delay $ease; } -// BACKGROUND -// -------------------------------------------------- +/* ========================================================================== + Background + ========================================================================== */ + +/* + @include background-alpha(VALUE VALUE); + ========================================================================== */ -// .background-alpha(VALUE VALUE); @mixin background-alpha($color: $white, $alpha: 1) { -background-color : hsla(hue($color), saturation($color), lightness($color), $alpha); } + background-color: hsla(hue($color), saturation($color), lightness($color), $alpha); +} + +/* + @include background-size(VALUE VALUE); + ========================================================================== */ -// .background-size(VALUE VALUE); @mixin background-size($size){ --webkit-background-size : $size; --moz-background-size : $size; --o-background-size : $size; -background-size : $size; } + -webkit-background-size: $size; + -moz-background-size: $size; + -o-background-size: $size; + background-size: $size; +} -// .background-clip(VALUE); (border-box, padding-box, content-box) -@mixin background-clip($clip) { --webkit-background-clip : $clip; --moz-background-clip : $clip; -background-clip : $clip; } +/* + Box-sizing + example: @include box-sizing(VALUE); //(border-box, padding-box, content-box) + ========================================================================== */ -// .box-sizing(VALUE); (border-box, padding-box, content-box) @mixin box-sizing($boxsize: border-box) { --webkit-box-sizing : $boxsize; --moz-box-sizing : $boxsize; --ms-box-sizing : $boxsize; -box-sizing : $boxsize; } + -webkit-box-sizing: $boxsize; + -moz-box-sizing: $boxsize; + -ms-box-sizing: $boxsize; + box-sizing: $boxsize; +} + +/* ========================================================================== + Image replacement + ========================================================================== */ -// For image replacement @mixin hide-text() { -text-indent : 100%; -white-space : nowrap; -overflow : hidden; } + text-indent: 100%; + white-space: nowrap; + overflow: hidden; +} + +/* + Hide from visual and speaking browsers + ========================================================================== */ -// Hide from visual and speaking browsers @mixin hidden { display: none; visibility: hidden; } -// Hide but maintain layout +/* + Hide but maintain layout + ========================================================================== */ + @mixin invisible() { -visibility : hidden; } + visibility: hidden; +} + +/* + Resize + example: @include resize(VALUE); //(none, both, horizontal, vertical, inherit) + + ========================================================================== */ -// .resize(VALUE) (none, both, horizontal, vertical, inherit) @mixin resize($direction: both) { -resize : $direction; -overflow : auto; } + resize: $direction; + overflow: auto; +} -// .userselect(VALUE) (all, element, none, text) -@mixin user-select($select) { --webkit-user-select : $select; --moz-user-select : $select; --o-user-select : $select; -user-select : $select; } +/* + Hidden but available to speaking browsers + ========================================================================== */ -// Hidden but available to speaking browsers @mixin visuallyhidden() { -overflow : hidden; -position : absolute; -clip : rect(0 0 0 0); -height : 1px; -width : 1px; -margin : -1px; -padding : 0; -border : 0; } \ No newline at end of file +overflow: hidden; +position: absolute; +clip: rect(0 0 0 0); +height: 1px; +width: 1px; +margin: -1px; +padding: 0; +border: 0; } \ No newline at end of file diff --git a/_sass/pygments.scss b/_sass/pygments.scss index 0cec2fc4..ae684f64 100644 --- a/_sass/pygments.scss +++ b/_sass/pygments.scss @@ -1,3 +1,7 @@ +/* ========================================================================== + Pygments.rb syntax highlighting + ========================================================================== */ + .highlight { background-color: #efefef; font-family: $code-font; @@ -72,4 +76,4 @@ .vg { color: #008080 } /* Name.Variable.Global */ .vi { color: #008080 } /* Name.Variable.Instance */ .il { color: #009999 } /* Literal.Number.Integer.Long */ -} \ No newline at end of file +} diff --git a/_sass/site.scss b/_sass/site.scss index 0ddfa3c1..7ba3eff0 100644 --- a/_sass/site.scss +++ b/_sass/site.scss @@ -1,4 +1,11 @@ -/* Selection ============================================= */ +/* ========================================================================== + Site wide styles + ========================================================================== */ + +/* + Selection + ========================================================================== */ + ::-moz-selection { background-color: lighten($basecolor, 65%); color: $basecolor; @@ -10,13 +17,21 @@ text-shadow: none; } -/* Global Classes ======================================== */ +/* + Global classes + ========================================================================== */ + +/* Capitalize */ .all-caps { text-transform: uppercase; } + +/* Float left */ .pull-left { float: left; } + +/* Float right */ .pull-right { float: right; } @@ -24,6 +39,8 @@ float: right; margin-top: 0; } + +/* Clearfix */ .clearfix { *zoom: 1; &:before, @@ -35,6 +52,8 @@ clear: both; } } + +/* Remove bullets and indentation from list */ .unstyled-list { list-style: none; margin-left: 0; @@ -44,7 +63,10 @@ } } -/* Global Transition ==================================== */ +/* + Global transition + ========================================================================== */ + b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a { @include transition(all .2s ease); } \ No newline at end of file diff --git a/_sass/typography.scss b/_sass/typography.scss index 17da453d..75f863b3 100644 --- a/_sass/typography.scss +++ b/_sass/typography.scss @@ -1,5 +1,11 @@ -// Headings -// -------------------------------------------------- +/* ========================================================================== + Typography + ========================================================================== */ + +/* + Headings + ========================================================================== */ + h1, h2, h3, h4, h5, h6 { font-family: $heading-font; } @@ -22,8 +28,10 @@ h6 { @include font-size(14); } -// Links -// -------------------------------------------------- +/* + Links + ========================================================================== */ + a { text-decoration: none; color: $link-color; @@ -43,8 +51,10 @@ a { } } -// Figures -// -------------------------------------------------- +/* + Figure captions + ========================================================================== */ + figcaption { padding-top: 10px; @include font(14); @@ -52,8 +62,10 @@ figcaption { color: lighten($text-color, 10); } -// Feature Image Caption -// -------------------------------------------------- +/* + Feature image captions + ========================================================================== */ + .image-credit { @include grid(12,10); @include prefix(12,1); @@ -77,8 +89,10 @@ figcaption { } } -// Note text -// -------------------------------------------------- +/* + Notices + ========================================================================== */ + .notice { margin-top: 1.5em; padding: .5em 1em; @@ -89,8 +103,10 @@ figcaption { @include rounded(3px); } -// Blockquotes -// -------------------------------------------------- +/* + Blockquotes + ========================================================================== */ + blockquote { margin-left: -28px; padding-left: 20px; @@ -99,8 +115,10 @@ blockquote { font-style: italic; } -// Footnotes -// -------------------------------------------------- +/* + Footnotes + ========================================================================== */ + .footnotes { ol, li, p { margin-bottom: 0; @@ -108,8 +126,10 @@ blockquote { } } -// Paragraphs -// -------------------------------------------------- +/* + Paragraphs + ========================================================================== */ + p { margin: 0 0 $indent-var; // sibling indentation @@ -121,8 +141,10 @@ p { } } -// Code -// -------------------------------------------------- +/* + Code snippets + ========================================================================== */ + tt, code, kbd, samp, pre { font-family: $code-font; } diff --git a/_sass/variables.scss b/_sass/variables.scss index 440ad8f0..a0d832c9 100644 --- a/_sass/variables.scss +++ b/_sass/variables.scss @@ -1,4 +1,11 @@ -// TYPOGRAPHY ================================================ +/* ========================================================================== + Sass variables + ========================================================================== */ + +/* + Typography + ========================================================================== */ + $doc-font-size: 16; $doc-line-height: 26; $paragraph-indent: true !default; @@ -7,7 +14,10 @@ $heading-font: 'PT Sans Narrow', sans-serif; $code-font: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; $alt-font: $base-font; -// COLOR ====================================================== +/* + Colors + ========================================================================== */ + $bodycolor : #fff; $body-color : $bodycolor; $textcolor : #333332; @@ -20,21 +30,24 @@ $white : #fff; $black : #111; $accentcolor : $black; -// Buttons +/* buttons */ $primary : $black; $success : #5cb85c; $warning : #dd8338; $danger : #C64537; $info : #308cbc; -// Links +/* links */ $linkcolor : #343434; $link-color : $linkcolor; $linkcolorhover : darken($linkcolor, 10); $linkcolorvisited : lighten($linkcolorhover, 20); $linkcolorfocus : darken($linkcolorvisited, 10); -// Media Queries +/* + Breakpoints + ========================================================================== */ + $micro : "only screen and (min-width: 30em)"; $small : "only screen and (min-width: 37.5em)"; $medium : "only screen and (min-width: 48em)";