Cleanup SCSS
This commit is contained in:
Michael Rose
parent
dd6d29ba76
commit
caefcce729
21 changed files with 1114 additions and 1385 deletions
|
|
@ -1,166 +0,0 @@
|
|||
/*
|
||||
Rules
|
||||
========================================================================== */
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
|
||||
/*
|
||||
Figures and images
|
||||
========================================================================== */
|
||||
|
||||
figure {
|
||||
margin-bottom: $indent-var;
|
||||
}
|
||||
|
||||
article img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-width: 0;
|
||||
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;
|
||||
@include breakpoint($micro) {
|
||||
img {
|
||||
@include grid(12,6);
|
||||
}
|
||||
figcaption {
|
||||
@include grid(12,12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 3 images of equal dimensions in a row */
|
||||
|
||||
.third {
|
||||
@include container;
|
||||
@include clearfix;
|
||||
@include breakpoint($micro) {
|
||||
img {
|
||||
@include grid(12,4);
|
||||
}
|
||||
figcaption {
|
||||
@include grid(12,12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Buttons
|
||||
========================================================================== */
|
||||
|
||||
/* Default button */
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
padding: 8px 20px;
|
||||
@include font-rem(14);
|
||||
font-family: $sans-serif-narrow;
|
||||
font-weight: 700;
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
border-width: 2px !important;
|
||||
border-style: solid !important;
|
||||
border-color: $primary;
|
||||
text-decoration: none !important;
|
||||
@include rounded(3px);
|
||||
&:visited {
|
||||
color: $white;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $white;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
/* Success button */
|
||||
|
||||
.btn-success {
|
||||
background-color: $success;
|
||||
color: $white;
|
||||
border-color: $success;
|
||||
&:visited {
|
||||
color: $white;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $white;
|
||||
color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
/* Warning button */
|
||||
|
||||
.btn-warning {
|
||||
background-color: $warning;
|
||||
color: $white;
|
||||
border-color: $warning;
|
||||
&:visited {
|
||||
color: $white;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $white;
|
||||
color: $warning;
|
||||
}
|
||||
}
|
||||
|
||||
/* Danger button */
|
||||
|
||||
.btn-danger {
|
||||
background-color: $danger;
|
||||
color: $white;
|
||||
border-color: $danger;
|
||||
&:visited {
|
||||
color: $white;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $white;
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
/* Information button */
|
||||
|
||||
.btn-info {
|
||||
background-color: $info;
|
||||
color: $white;
|
||||
border-color: $info;
|
||||
&:visited {
|
||||
color: $white;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $white;
|
||||
color: $info;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Wells
|
||||
========================================================================== */
|
||||
|
||||
.well {
|
||||
min-height: 20px;
|
||||
padding: 19px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #e3e3e3;
|
||||
@include rounded(4px);
|
||||
@include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.05));
|
||||
}
|
||||
|
|
@ -15,9 +15,9 @@ btnform {
|
|||
margin-bottom: 5px * 2;
|
||||
*margin-left: -7px;
|
||||
padding: 0;
|
||||
color: $textcolor;
|
||||
color: $text-color;
|
||||
border: 0;
|
||||
border-bottom: 1px solid lighten($black, 80);
|
||||
border-bottom: 1px solid mix(#fff, #000, 80%);
|
||||
white-space: normal;
|
||||
}
|
||||
p {
|
||||
|
|
@ -45,13 +45,13 @@ button,
|
|||
select,
|
||||
textarea {
|
||||
font-family: $serif;
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 10px / 8;
|
||||
font-weight: bold;
|
||||
color: $textcolor;
|
||||
color: $text-color;
|
||||
cursor: pointer;
|
||||
input,
|
||||
textarea,
|
||||
|
|
@ -66,11 +66,11 @@ select {
|
|||
width: 100%;
|
||||
padding: 4px;
|
||||
margin-bottom: 5px / 4;
|
||||
background-color: $white;
|
||||
border: 1px solid lighten($black, 80);
|
||||
color: $textcolor;
|
||||
background-color: #fff;
|
||||
border: 1px solid mix(#fff, #000, 80%);
|
||||
color: $text-color;
|
||||
&:hover {
|
||||
border-color: lighten($accentcolor, 50);
|
||||
border-color: mix(#fff, $accent-color, 50%);
|
||||
}
|
||||
}
|
||||
.input-mini {
|
||||
|
|
@ -89,19 +89,19 @@ input[type="radio"] {
|
|||
*margin-top: 0;
|
||||
line-height: normal;
|
||||
cursor: pointer;
|
||||
@include rounded(0);
|
||||
border-radius: 0;
|
||||
border: 0 \9;
|
||||
}
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
*width: 13px;
|
||||
*height: 13px;
|
||||
}
|
||||
input[type="image"] {
|
||||
border: 0;
|
||||
@include box-shadow(none);
|
||||
box-shadow: none;
|
||||
}
|
||||
input[type="file"] {
|
||||
width: auto;
|
||||
|
|
@ -110,57 +110,57 @@ input[type="file"] {
|
|||
border: initial;
|
||||
background-color: transparent;
|
||||
background-color: initial;
|
||||
@include box-shadow(none);
|
||||
box-shadow: none;
|
||||
}
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
width : auto;
|
||||
height : auto;
|
||||
cursor : pointer;
|
||||
*overflow : visible;
|
||||
width: auto;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
*overflow: visible;
|
||||
}
|
||||
select,
|
||||
input[type="file"] {
|
||||
*margin-top : 4px;
|
||||
*margin-top: 4px;
|
||||
}
|
||||
select {
|
||||
width : auto;
|
||||
background-color : $white;
|
||||
width: auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
select[multiple],
|
||||
select[size] {
|
||||
height : auto;
|
||||
height: auto;
|
||||
}
|
||||
textarea {
|
||||
@include resize(vertical);
|
||||
height : auto;
|
||||
overflow : auto;
|
||||
vertical-align : top;
|
||||
resize: vertical;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
vertical-align: top;
|
||||
}
|
||||
input[type="hidden"] {
|
||||
display : none;
|
||||
display: none;
|
||||
}
|
||||
.radio,
|
||||
.checkbox {
|
||||
padding-left : 18px;
|
||||
font-weight : normal;
|
||||
padding-left: 18px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.radio input[type="radio"],
|
||||
.checkbox input[type="checkbox"] {
|
||||
float : left;
|
||||
margin-left : -18px;
|
||||
float: left;
|
||||
margin-left: -18px;
|
||||
}
|
||||
.radio.inline,
|
||||
.checkbox.inline {
|
||||
display : inline-block;
|
||||
padding-top : 5px;
|
||||
margin-bottom : 0;
|
||||
vertical-align : middle;
|
||||
display: inline-block;
|
||||
padding-top: 5px;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.radio.inline + .radio.inline,
|
||||
.checkbox.inline + .checkbox.inline {
|
||||
margin-left : 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -173,8 +173,8 @@ textarea[disabled],
|
|||
input[readonly],
|
||||
select[readonly],
|
||||
textarea[readonly] {
|
||||
@include opacity(.5);
|
||||
cursor : not-allowed;
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -183,15 +183,15 @@ textarea[readonly] {
|
|||
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
border-color : $accentcolor;
|
||||
outline : 0;
|
||||
outline : thin dotted \9;
|
||||
border-color: $accent-color;
|
||||
outline: 0;
|
||||
outline: thin dotted \9;
|
||||
}
|
||||
input[type="file"]:focus,
|
||||
input[type="radio"]:focus,
|
||||
input[type="checkbox"]:focus,
|
||||
select:focus {
|
||||
@include box-shadow(none);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -200,17 +200,17 @@ select:focus {
|
|||
|
||||
.help-block,
|
||||
.help-inline {
|
||||
color : lighten($black, 50);
|
||||
color: mix(#fff, #000, 50%);
|
||||
}
|
||||
.help-block {
|
||||
display : block;
|
||||
margin-bottom : 1em;
|
||||
line-height : 1em;
|
||||
display: block;
|
||||
margin-bottom: 1em;
|
||||
line-height: 1em;
|
||||
}
|
||||
.help-inline {
|
||||
display : inline-block;
|
||||
vertical-align : middle;
|
||||
padding-left : 5px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -220,24 +220,24 @@ select:focus {
|
|||
.form-inline input,
|
||||
.form-inline textarea,
|
||||
.form-inline select {
|
||||
display : inline-block;
|
||||
margin-bottom : 0;
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-inline label {
|
||||
display : inline-block;
|
||||
display: inline-block;
|
||||
}
|
||||
.form-inline .radio,
|
||||
.form-inline .checkbox,
|
||||
.form-inline .radio {
|
||||
padding-left : 0;
|
||||
margin-bottom : 0;
|
||||
vertical-align : middle;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.form-inline .radio input[type="radio"],
|
||||
.form-inline .checkbox input[type="checkbox"] {
|
||||
float : left;
|
||||
margin-left : 0;
|
||||
margin-right : 3px; }
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
margin-right: 3px; }
|
||||
|
||||
/*
|
||||
.form-search
|
||||
|
|
@ -246,28 +246,28 @@ select:focus {
|
|||
.form-search input,
|
||||
.form-search textarea,
|
||||
.form-search select {
|
||||
display : inline-block;
|
||||
margin-bottom : 0;
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-search .search-query {
|
||||
padding-left : 14px;
|
||||
padding-right : 14px;
|
||||
margin-bottom : 0;
|
||||
@include rounded(14px);
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
margin-bottom: 0;
|
||||
border-radius: 14px;
|
||||
}
|
||||
.form-search label {
|
||||
display : inline-block;
|
||||
display: inline-block;
|
||||
}
|
||||
.form-search .radio,
|
||||
.form-search .checkbox,
|
||||
.form-inline .radio {
|
||||
padding-left : 0;
|
||||
margin-bottom : 0;
|
||||
vertical-align : middle;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.form-search .radio input[type="radio"],
|
||||
.form-search .checkbox input[type="checkbox"] {
|
||||
float : left;
|
||||
margin-left : 0;
|
||||
margin-right : 3px;
|
||||
}
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
|
@ -2,15 +2,6 @@
|
|||
Grid mixins
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
Define number of columns in the grid
|
||||
Common values would be 12, 16 or 24
|
||||
========================================================================== */
|
||||
|
||||
$width: 100%;
|
||||
$def_grid: 12;
|
||||
$margin: 0;
|
||||
|
||||
@mixin container(){
|
||||
margin:0 auto;
|
||||
width:$width;
|
||||
|
|
|
|||
|
|
@ -1,376 +1,111 @@
|
|||
/* ==========================================================================
|
||||
Utility mixins
|
||||
MIXINS
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
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 */
|
||||
line-height: 0;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Webkit-style focus
|
||||
========================================================================== */
|
||||
|
||||
@mixin tab-focus() {
|
||||
/* Default */
|
||||
outline: thin dotted #333;
|
||||
/* Webkit */
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
%tab-focus {
|
||||
// Default
|
||||
outline: thin dotted $warning-color;
|
||||
// Webkit
|
||||
outline: 5px auto $warning-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/*
|
||||
Center-align a block level element
|
||||
em function
|
||||
========================================================================== */
|
||||
|
||||
@mixin center-block() {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@function em($target, $context: $doc-font-size) {
|
||||
@return ($target / $context) * 1em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Typography related mixins
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
Maintains vertical rhythm by setting a font-sizes proportional to
|
||||
line-height and bottom margin
|
||||
example: @font-size(16);
|
||||
========================================================================== */
|
||||
|
||||
@mixin font-size($size) {
|
||||
font-size: 0px + $size;
|
||||
font-size: 0rem + $size / $doc-font-size;
|
||||
line-height: 0 + round($doc-line-height / $size*10000) / 10000;
|
||||
margin-bottom: 0px + $doc-line-height;
|
||||
margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
|
||||
}
|
||||
|
||||
/*
|
||||
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 (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;
|
||||
}
|
||||
|
||||
/* Indentation variable */
|
||||
|
||||
$indent-var: 0rem + ($doc-line-height / $doc-font-size);
|
||||
|
||||
/* ==========================================================================
|
||||
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;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
// .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;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Rounded corners
|
||||
========================================================================== */
|
||||
|
||||
|
||||
|
||||
/*
|
||||
Round all corners
|
||||
example: @include rounded(4px);
|
||||
Bourbon clearfix
|
||||
========================================================================== */
|
||||
|
||||
@mixin rounded($radius:4px) {
|
||||
border-radius : $radius;
|
||||
// Provides an easy way to include a clearfix for containing floats.
|
||||
//
|
||||
// @link http://cssmojo.com/latest_new_clearfix_so_far/
|
||||
//
|
||||
// @example scss - Usage
|
||||
// .element {
|
||||
// @include clearfix;
|
||||
// }
|
||||
//
|
||||
// @example css - CSS Output
|
||||
// .element::after {
|
||||
// clear: both;
|
||||
// content: "";
|
||||
// display: table;
|
||||
// }
|
||||
|
||||
@mixin clearfix {
|
||||
&::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Round individual corners (top right, bottom right, bottom left, top left)
|
||||
example: @include border-radius(4px, 0, 0, 4px);
|
||||
Grid
|
||||
========================================================================== */
|
||||
|
||||
@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;
|
||||
@mixin container() {
|
||||
margin: 0 auto;
|
||||
width: $width;
|
||||
}
|
||||
|
||||
/*
|
||||
Box shadow
|
||||
example: @include box-shadow(HORIZONTAL VERTICAL BLUR COLOR));
|
||||
========================================================================== */
|
||||
// Works out the width of elements based on total number of columns and width
|
||||
// number of columns being displayed. Removes 20px for margins.
|
||||
|
||||
@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
|
||||
-webkit-box-shadow: $shadow;
|
||||
-moz-box-shadow: $shadow;
|
||||
box-shadow: $shadow;
|
||||
@mixin grid($grid:$def_grid,$cols:'',$float:left,$display:inline) {
|
||||
display: $display;
|
||||
float: $float;
|
||||
width: (100%/$grid * $cols) - ($margin * 2);
|
||||
}
|
||||
|
||||
/*
|
||||
Drop shadow
|
||||
example: @include drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
|
||||
========================================================================== */
|
||||
// Add x amount of column padding before an element
|
||||
// Example: @include prefix(1,12);
|
||||
|
||||
@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);
|
||||
@mixin prefix($grid:$def_grid,$cols:'') {
|
||||
margin-left: (100%/$grid * $cols);
|
||||
}
|
||||
|
||||
/*
|
||||
Text shadow
|
||||
example: @include text-shadow(0 2px 3px rgba(0,0,0,.25));
|
||||
========================================================================== */
|
||||
// Add x amount of column padding after an element
|
||||
// Example: @include suffix(2,12);
|
||||
|
||||
@mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) {
|
||||
text-shadow: $shadow; }
|
||||
|
||||
/*
|
||||
Opacity
|
||||
example: @include opacity(0.5); // 50% opacity
|
||||
========================================================================== */
|
||||
|
||||
@mixin opacity($opacity: 0.5) {
|
||||
opacity: $opacity;
|
||||
@mixin suffix($grid:$def_grid,$cols:'') {
|
||||
margin-right: (100%/$grid * $cols);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Transformations
|
||||
========================================================================== */
|
||||
// Remove left margin
|
||||
// Example: @include first;
|
||||
|
||||
/*
|
||||
@include rotate(VALUEdeg);
|
||||
========================================================================== */
|
||||
|
||||
@mixin rotate($deg) {
|
||||
-webkit-transform: rotate($deg);
|
||||
-moz-transform: rotate($deg);
|
||||
-ms-transform: rotate($deg);
|
||||
-o-transform: rotate($deg);
|
||||
transform: rotate($deg);
|
||||
@mixin first() {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
@include scale(VALUE);
|
||||
========================================================================== */
|
||||
// Remove right margin
|
||||
// Example: @include last;
|
||||
|
||||
@mixin scale($ratio) {
|
||||
-webkit-transform: scale($ratio);
|
||||
-moz-transform: scale($ratio);
|
||||
-ms-transform: scale($ratio);
|
||||
-o-transform: scale($ratio);
|
||||
transform: scale($ratio);
|
||||
@mixin last() {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
@include skew(VALUE, VALUE);
|
||||
========================================================================== */
|
||||
// Push an element x amount of column(s) to the right
|
||||
// Example: @include push(2,12);
|
||||
|
||||
@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);
|
||||
@mixin push($grid:$def_grid,$move:'') {
|
||||
position: relative;
|
||||
left: (100%/$grid * $move);
|
||||
}
|
||||
|
||||
/*
|
||||
@include transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
|
||||
========================================================================== */
|
||||
// Pull an element x amount of column(s) to the left
|
||||
// Example: @include pull(1,12);
|
||||
|
||||
@mixin transition($transition) {
|
||||
-webkit-transition: $transition;
|
||||
-moz-transition: $transition;
|
||||
-ms-transition: $transition;
|
||||
-o-transition: $transition;
|
||||
transition: $transition;
|
||||
@mixin pull($grid:$def_grid,$move:'') {
|
||||
position: relative;
|
||||
left: (100%/$grid * $move) * -1;
|
||||
}
|
||||
|
||||
/*
|
||||
@include 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);
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
|
||||
@mixin animation($name, $duration: 300ms, $delay: 0, $ease: ease) {
|
||||
-webkit-animation: $name $duration $delay $ease;
|
||||
-moz-animation: $name $duration $delay $ease;
|
||||
-ms-animation: $name $duration $delay $ease;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Background
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
@include background-alpha(VALUE VALUE);
|
||||
========================================================================== */
|
||||
|
||||
@mixin background-alpha($color: $white, $alpha: 1) {
|
||||
background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
||||
}
|
||||
|
||||
/*
|
||||
@include background-size(VALUE VALUE);
|
||||
========================================================================== */
|
||||
|
||||
@mixin background-size($size){
|
||||
-webkit-background-size: $size;
|
||||
-moz-background-size: $size;
|
||||
-o-background-size: $size;
|
||||
background-size: $size;
|
||||
}
|
||||
|
||||
/*
|
||||
Box-sizing
|
||||
example: @include 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;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Image replacement
|
||||
========================================================================== */
|
||||
|
||||
@mixin hide-text() {
|
||||
text-indent: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
Hide from visual and speaking browsers
|
||||
========================================================================== */
|
||||
|
||||
@mixin hidden {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
Hide but maintain layout
|
||||
========================================================================== */
|
||||
|
||||
@mixin invisible() {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
Resize
|
||||
example: @include resize(VALUE); //(none, both, horizontal, vertical, inherit)
|
||||
|
||||
========================================================================== */
|
||||
|
||||
@mixin resize($direction: both) {
|
||||
resize: $direction;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
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; }
|
||||
|
|
|
|||
|
|
@ -1,398 +0,0 @@
|
|||
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct `inline-block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Set default font family to sans-serif.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address `outline` inconsistency between Chrome and other browsers.
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct font family set oddly in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability of pre-formatted text in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set consistent quote types.
|
||||
*/
|
||||
|
||||
q {
|
||||
quotes: "\201C" "\201D" "\2018" "\2019";
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove border when inside `a` element in IE 8/9.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow displayed oddly in IE 9.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 8/9 and Safari 5.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct font family not being inherited in all browsers.
|
||||
* 2. Correct font size not being inherited in all browsers.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
|
||||
* Correct `select` style inheritance in Firefox 4+ and Opera.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9.
|
||||
* 2. Remove excess padding in IE 8/9.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove default vertical scrollbar in IE 8/9.
|
||||
* 2. Improve readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
margin-bottom: 1.5em;
|
||||
width: 100%; /* make full width */
|
||||
}
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
/* ==========================================================================
|
||||
Page layout
|
||||
SINGLE PAGE/POST
|
||||
========================================================================== */
|
||||
|
||||
body {
|
||||
background-color: $bodycolor;
|
||||
background-color: $body-color;
|
||||
font-family: $serif;
|
||||
color: $text-color;
|
||||
}
|
||||
|
|
@ -29,12 +29,12 @@ body {
|
|||
margin-bottom: 1em;
|
||||
float: none;
|
||||
display: block;
|
||||
@include font-rem(24);
|
||||
font-size: 24px;
|
||||
@include breakpoint($small) {
|
||||
@include grid(12,2);
|
||||
@include prefix(12,0.5);
|
||||
@include suffix(12,0.5);
|
||||
@include font-rem(16);
|
||||
font-size: 16px;
|
||||
}
|
||||
@include breakpoint($x-large) {
|
||||
@include grid(12,1.5);
|
||||
|
|
@ -67,9 +67,9 @@ body {
|
|||
li {
|
||||
display: block;
|
||||
list-style-type: none;
|
||||
border-bottom: 1px solid lighten($black,80);
|
||||
border-bottom: 1px solid fade($black,10);
|
||||
@include font-rem(16);
|
||||
border-bottom: 1px solid lighten(#000,80);
|
||||
border-bottom: 1px solid fade(#000,10);
|
||||
font-size: 16px;
|
||||
&:last-child {
|
||||
border-bottom: 0 solid transparent;
|
||||
}
|
||||
|
|
@ -84,7 +84,6 @@ body {
|
|||
padding: 10px 0;
|
||||
decoration: none;
|
||||
border-bottom: 0 solid transparent;
|
||||
@include transition(all .2s);
|
||||
@include breakpoint($small) {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
|
|
@ -100,32 +99,24 @@ body {
|
|||
@include clearfix;
|
||||
clear: both;
|
||||
margin-top: 2em;
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.page {
|
||||
@include container;
|
||||
@include grid(12,10);
|
||||
@include prefix(12,1);
|
||||
@include suffix(12,1);
|
||||
margin-bottom: 2em;
|
||||
@include breakpoint($small) {
|
||||
@include grid(12,8);
|
||||
@include prefix(12,0);
|
||||
@include suffix(12,0);
|
||||
}
|
||||
.post {
|
||||
@include container;
|
||||
@include grid(12,10);
|
||||
@include prefix(12,1);
|
||||
@include suffix(12,1);
|
||||
margin-bottom: 2em;
|
||||
@include breakpoint($small) {
|
||||
@include grid(12,8);
|
||||
@include prefix(12,0);
|
||||
@include suffix(12,0);
|
||||
}
|
||||
@include breakpoint($large) {
|
||||
@include grid(12,6);
|
||||
}
|
||||
@include breakpoint($x-large) {
|
||||
@include grid(12,5);
|
||||
}
|
||||
@include breakpoint($large) {
|
||||
@include grid(12,6);
|
||||
}
|
||||
figcaption {
|
||||
padding-top: 10px;
|
||||
@include font(14);
|
||||
line-height: 1.3;
|
||||
color: lighten($text-color, 10);
|
||||
@include breakpoint($x-large) {
|
||||
@include grid(12,5);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -150,22 +141,18 @@ body {
|
|||
h3 {
|
||||
margin: 0;
|
||||
padding-bottom: .5em;
|
||||
@include font-rem(28);
|
||||
border-bottom: 1px solid lighten($black,70);
|
||||
font-size: 28px;
|
||||
border-bottom: 1px solid mix(#fff, #000, 70%);
|
||||
}
|
||||
article {
|
||||
h2 {
|
||||
margin-bottom: 4px;
|
||||
@include font-rem(20);
|
||||
&.link-post {
|
||||
margin-bottom: 0px + $doc-line-height;
|
||||
margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
|
||||
}
|
||||
font-size: 20px;
|
||||
}
|
||||
p {
|
||||
@include font-rem(14);
|
||||
font-size: 14px;
|
||||
}
|
||||
p+p {
|
||||
p + p {
|
||||
text-indent: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -185,7 +172,7 @@ body {
|
|||
width: 0;
|
||||
height: 0;
|
||||
border: 10px solid transparent;
|
||||
border-bottom-color: $bodycolor;
|
||||
border-bottom-color: $body-color;
|
||||
@include breakpoint($small) {
|
||||
left: 25%;
|
||||
}
|
||||
|
|
@ -245,21 +232,21 @@ body {
|
|||
}
|
||||
.author-avatar {
|
||||
max-width: 110px;
|
||||
@include rounded(150px);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.author-social {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
@include font-rem(14);
|
||||
color: $black;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
&:visited {
|
||||
color: $black;
|
||||
color: #000;
|
||||
}
|
||||
&:hover {
|
||||
@include scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
&:active {
|
||||
@include translate(0, 2px);
|
||||
transform: translate(0, 2px);
|
||||
}
|
||||
.fa {
|
||||
margin-right: 5px;
|
||||
|
|
@ -289,76 +276,6 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
/* Table of contents */
|
||||
.toc {
|
||||
font-size: 95%;
|
||||
@include breakpoint($large) {
|
||||
display: block;
|
||||
@include grid(12,2);
|
||||
@include prefix(12,0.5);
|
||||
@include suffix(12,0.5);
|
||||
position: absolute;
|
||||
top: 5.5em;
|
||||
right: 0;
|
||||
background-color: $white;
|
||||
}
|
||||
header {
|
||||
background: lighten($black, 10);
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
padding: 5px 10px;
|
||||
color: $white;
|
||||
@include font-rem(16);
|
||||
text-transform: uppercase;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
margin: 2px 0 0;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
li {
|
||||
display: block;
|
||||
margin: 0 0 1px 0;
|
||||
padding: 0;
|
||||
font-family: $sans-serif-narrow;
|
||||
list-style-type: none;
|
||||
&:last-child {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
a {
|
||||
padding: 10px;
|
||||
display: block;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
background: lighten($black, 30);
|
||||
@include opacity(0.7);
|
||||
@include transition(opacity 0.2s ease-in-out);
|
||||
&:hover {
|
||||
@include opacity(1);
|
||||
}
|
||||
}
|
||||
ul {
|
||||
margin: 1px 0 0;
|
||||
li a {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* TOC trigger for collapsing */
|
||||
#drawer {
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
&.js-hidden {
|
||||
max-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Image grid - not used */
|
||||
.image-grid {
|
||||
@include clearfix;
|
||||
|
|
@ -403,59 +320,9 @@ body {
|
|||
}
|
||||
|
||||
/* Social sharing links */
|
||||
/* Social media brand buttons */
|
||||
.social-share {
|
||||
margin-bottom: 0px + $doc-line-height;
|
||||
margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
|
||||
ul, li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
$social:
|
||||
(facebook, $facebook-color),
|
||||
(flickr, $flickr-color),
|
||||
(foursquare, $foursquare-color),
|
||||
(google-plus, $google-plus-color),
|
||||
(instagram, $instagram-color),
|
||||
(linkedin, $linkedin-color),
|
||||
(pinterest, $pinterest-color),
|
||||
(rss, $rss-color),
|
||||
(tumblr, $tumblr-color),
|
||||
(twitter, $twitter-color),
|
||||
(vimeo, $vimeo-color),
|
||||
(youtube, $youtube-color);
|
||||
@each $socialnetwork, $color in $social {
|
||||
.#{$socialnetwork} {
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
padding: 8px 20px;
|
||||
text-decoration: none !important;
|
||||
text-transform: uppercase;
|
||||
@include font-rem(14);
|
||||
font-family: $sans-serif-narrow;
|
||||
font-weight: 700;
|
||||
color: $white;
|
||||
opacity: 0.8;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
span {
|
||||
display: none;
|
||||
@include breakpoint($medium) {
|
||||
display: inline;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
@include font-rem(14);
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
@ -469,7 +336,7 @@ body {
|
|||
clear: both;
|
||||
padding-bottom: 3em;
|
||||
.copyright {
|
||||
@include font-rem(14);
|
||||
font-size: 14px;
|
||||
}
|
||||
footer {
|
||||
@include grid(12,10);
|
||||
|
|
@ -539,13 +406,13 @@ body {
|
|||
margin: 0 0 2em 0;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
color: #fff;
|
||||
a {
|
||||
color: $white;
|
||||
border-bottom: 1px dotted $white;
|
||||
color: #fff;
|
||||
border-bottom: 1px dotted #fff;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
border-bottom: 1px solid $white;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -570,13 +437,13 @@ body {
|
|||
margin-bottom: 20px;
|
||||
padding: 8px 20px;
|
||||
display: inline-block;
|
||||
@include font-rem(14);
|
||||
background-color: $white;
|
||||
color: $black;
|
||||
font-size: 14px;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border-width: 2px !important;
|
||||
border-style: solid !important;
|
||||
border-color: lighten($black,50);
|
||||
@include rounded(3px);
|
||||
border-color: lighten(#000,50);
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
#goog-wm-sb {
|
||||
@extend .btn;
|
||||
|
|
@ -605,7 +472,7 @@ body {
|
|||
|
||||
.pagination {
|
||||
padding-top: 0.5em;
|
||||
border-top: 1px solid lighten($black,70);
|
||||
border-top: 1px solid mix(#fff, #000, 70%);
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
|
|||
170
_assets/css/_reset.scss
Normal file
170
_assets/css/_reset.scss
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
/* ==========================================================================
|
||||
STYLE RESETS
|
||||
========================================================================== */
|
||||
|
||||
html {
|
||||
/* apply a natural box layout model to all elements */
|
||||
box-sizing: border-box;
|
||||
background-color: $background-color;
|
||||
font-size: 15px;
|
||||
@include breakpoint($medium) {
|
||||
font-size: 16px;
|
||||
}
|
||||
@include breakpoint($large) {
|
||||
font-size: 18px;
|
||||
}
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
/* apply a natural box layout model to all elements */
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
/* Remove margin */
|
||||
|
||||
body { margin: 0; }
|
||||
|
||||
/* Selected elements */
|
||||
|
||||
::selection {
|
||||
color: #fff;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
/* Display HTML5 elements in IE6-9 and FF3 */
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Display block in IE6-9 and FF3 */
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
/* Prevents modern browsers from displaying 'audio' without controls */
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Remove blue color */
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Apply focus state */
|
||||
|
||||
a:focus {
|
||||
@extend %tab-focus;
|
||||
}
|
||||
|
||||
/* Remove outline from links */
|
||||
|
||||
a:hover,
|
||||
a:active {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Prevent sub and sup affecting line-height in all browsers */
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* img border in anchor's and image quality */
|
||||
|
||||
img {
|
||||
/* Responsive images (ensure images don't scale beyond their parents) */
|
||||
max-width: 100%; // part 1: Set a maximum relative to the parent
|
||||
width: auto\9; // IE7-8 need help adjusting responsive images
|
||||
height: auto; // part 2: Scale the height according to the width, otherwise you get stretching
|
||||
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
|
||||
/* Prevent max-width from affecting Google Maps */
|
||||
|
||||
#map_canvas img,
|
||||
.google-maps img {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* Consistent form font size in all browsers, margin changes, misc */
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
button,
|
||||
input {
|
||||
*overflow: visible; // inner spacing ie IE6/7
|
||||
line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
|
||||
}
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner { // inner padding and border oddities in FF3/4
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
button,
|
||||
html input[type="button"], // avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; // corrects inability to style clickable `input` types in iOS
|
||||
cursor: pointer; // improves usability and consistency of cursor style between image-type `input` and others
|
||||
}
|
||||
label,
|
||||
select,
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"],
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
cursor: pointer; // improves usability and consistency of cursor style between image-type `input` and others
|
||||
}
|
||||
input[type="search"] { // Appearance in Safari/Chrome
|
||||
box-sizing: content-box;
|
||||
-webkit-appearance: textfield;
|
||||
}
|
||||
input[type="search"]::-webkit-search-decoration,
|
||||
input[type="search"]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none; // inner-padding issues in Chrome OSX, Safari 5
|
||||
}
|
||||
textarea {
|
||||
overflow: auto; // remove vertical scrollbar in IE6-9
|
||||
vertical-align: top; // readability and alignment cross-browser
|
||||
}
|
||||
|
|
@ -7,13 +7,13 @@
|
|||
========================================================================== */
|
||||
|
||||
::-moz-selection {
|
||||
background-color: lighten($basecolor, 65%);
|
||||
color: $basecolor;
|
||||
background-color: mix(#fff, $base-color, 65%);
|
||||
color: $base-color;
|
||||
text-shadow: none;
|
||||
}
|
||||
::selection {
|
||||
background-color: lighten($basecolor, 65%);
|
||||
color: $basecolor;
|
||||
background-color: mix(#fff, $base-color, 65%);
|
||||
color: $base-color;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
|
@ -61,12 +61,4 @@
|
|||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Global transition
|
||||
========================================================================== */
|
||||
|
||||
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a {
|
||||
@include transition(all .2s ease);
|
||||
}
|
||||
}
|
||||
|
|
@ -5,12 +5,12 @@
|
|||
div.highlighter-rouge {
|
||||
margin-bottom: 1em;
|
||||
padding: 1em;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
.highlight {
|
||||
margin: 0;
|
||||
font-family: $monospace;
|
||||
@include font-rem(12);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
68
_assets/css/_toc.scss
Normal file
68
_assets/css/_toc.scss
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
/* ==========================================================================
|
||||
TABLE OF CONTENTS
|
||||
========================================================================== */
|
||||
|
||||
.toc {
|
||||
padding: 0 1em 1em;
|
||||
font-family: $sans-serif-narrow;
|
||||
border-top: 8px solid $gray;
|
||||
@include breakpoint($large) {
|
||||
display: block;
|
||||
@include grid(12,2);
|
||||
@include prefix(12,0.5);
|
||||
@include suffix(12,0.5);
|
||||
position: absolute;
|
||||
top: 5.5em;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.toc__title {
|
||||
margin: 1em 0;
|
||||
font-family: $serif;
|
||||
font-size: 18px;
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
.toc__menu {
|
||||
padding-left: 0;
|
||||
font-size: 14px;
|
||||
border-bottom: 2px solid #e2e2e2;
|
||||
ul {
|
||||
@include clearfix();
|
||||
> li {
|
||||
padding: 5px 0;
|
||||
font-weight: normal;
|
||||
&:before {
|
||||
content: "\2192";
|
||||
width: 20px;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $light-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
li {
|
||||
clear: both;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
&:before {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 5px;
|
||||
width: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
> li {
|
||||
padding: 5px 0;
|
||||
border-top: 2px solid $light-gray;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,151 +0,0 @@
|
|||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
Headings
|
||||
========================================================================== */
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: $serif;
|
||||
}
|
||||
h1 {
|
||||
@include font-size(32);
|
||||
}
|
||||
h2 {
|
||||
@include font-size(28);
|
||||
}
|
||||
h3 {
|
||||
@include font-size(24);
|
||||
}
|
||||
h4 {
|
||||
@include font-size(18);
|
||||
}
|
||||
h5 {
|
||||
@include font-size(16);
|
||||
}
|
||||
h6 {
|
||||
@include font-size(14);
|
||||
}
|
||||
|
||||
/*
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $link-color;
|
||||
&:visited {
|
||||
color: $linkcolorvisited;
|
||||
}
|
||||
&:hover {
|
||||
color: $linkcolorhover;
|
||||
}
|
||||
&:focus {
|
||||
outline: thin dotted;
|
||||
color: $linkcolorfocus;
|
||||
}
|
||||
&:hover,
|
||||
&:active {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Feature image captions
|
||||
========================================================================== */
|
||||
|
||||
.image-caption {
|
||||
@include grid(12,10);
|
||||
@include prefix(12,1);
|
||||
@include suffix(12,1);
|
||||
display: block;
|
||||
text-align: right;
|
||||
@include font(12);
|
||||
line-height: 1.3;
|
||||
font-style: italic;
|
||||
color: lighten($text-color, 30);
|
||||
@include breakpoint($small) {
|
||||
@include grid(12,9);
|
||||
@include prefix(12,0);
|
||||
@include suffix(12,0);
|
||||
}
|
||||
@include breakpoint($x-large) {
|
||||
@include grid(12,8.5);
|
||||
}
|
||||
a {
|
||||
color: lighten($text-color, 30);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Notices
|
||||
========================================================================== */
|
||||
|
||||
.notice {
|
||||
margin-top: 1.5em;
|
||||
padding: .5em 1em;
|
||||
text-indent: 0;
|
||||
@include font-rem(14);
|
||||
background-color: $body-color;
|
||||
border: 1px solid darken($body-color,20);
|
||||
@include rounded(3px);
|
||||
}
|
||||
|
||||
/*
|
||||
Blockquotes
|
||||
========================================================================== */
|
||||
|
||||
blockquote {
|
||||
margin-left: -28px;
|
||||
padding-left: 20px;
|
||||
border-left: 8px solid $border-color;
|
||||
font-family: $serif;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/*
|
||||
Footnotes
|
||||
========================================================================== */
|
||||
|
||||
.footnotes {
|
||||
ol, li, p {
|
||||
margin-bottom: 0;
|
||||
@include font-rem(14);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Paragraphs
|
||||
========================================================================== */
|
||||
|
||||
p {
|
||||
margin: 0 0 $indent-var;
|
||||
// sibling indentation
|
||||
@if $paragraph-indent == true {
|
||||
& + p {
|
||||
text-indent: $indent-var;
|
||||
margin-top: -($indent-var);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Code snippets
|
||||
========================================================================== */
|
||||
|
||||
tt, code, kbd, samp, pre {
|
||||
font-family: $monospace;
|
||||
}
|
||||
p,
|
||||
li {
|
||||
code {
|
||||
@include font-rem(12);
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
pre {
|
||||
@include font-rem(12);
|
||||
line-height: 1.5;
|
||||
overflow-x: auto;
|
||||
}
|
||||
200
_assets/css/_utilities.scss
Normal file
200
_assets/css/_utilities.scss
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
/* ==========================================================================
|
||||
UTILITY CLASSES
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
Visibility
|
||||
========================================================================== */
|
||||
|
||||
/* http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/ */
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* for preloading images */
|
||||
|
||||
.load {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.transparent {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html */
|
||||
|
||||
.visually-hidden,
|
||||
.screen-reader-text,
|
||||
.screen-reader-text span,
|
||||
.screen-reader-shortcut {
|
||||
position: absolute !important;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
border: 0 !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body:hover .visually-hidden a,
|
||||
body:hover .visually-hidden input,
|
||||
body:hover .visually-hidden button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* screen readers */
|
||||
|
||||
.screen-reader-text:focus,
|
||||
.screen-reader-shortcut:focus {
|
||||
clip: auto !important;
|
||||
height: auto !important;
|
||||
width: auto !important;
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
padding: 15px 23px 14px;
|
||||
background: #fff;
|
||||
z-index: 100000;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Skip links
|
||||
========================================================================== */
|
||||
|
||||
.skip-link {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
margin: 0;
|
||||
font-family: $sans-serif;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.skip-link li {
|
||||
height: 0;
|
||||
width: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Type
|
||||
========================================================================== */
|
||||
|
||||
/* center align */
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Alignment
|
||||
========================================================================== */
|
||||
|
||||
.float-left {
|
||||
clear: right;
|
||||
@include breakpoint($large) {
|
||||
float: left;
|
||||
clear: none;
|
||||
}
|
||||
}
|
||||
|
||||
.float-right {
|
||||
clear: left;
|
||||
@include breakpoint($large) {
|
||||
float: right;
|
||||
clear: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* clearfix */
|
||||
|
||||
.cf { clear: both; }
|
||||
|
||||
|
||||
/*
|
||||
Images
|
||||
========================================================================== */
|
||||
|
||||
/* image align left */
|
||||
|
||||
.image-left {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@include breakpoint($small) {
|
||||
float: left;
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
/* image align right */
|
||||
|
||||
.image-right {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@include breakpoint($small) {
|
||||
float: right;
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Icons
|
||||
========================================================================== */
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
fill: currentColor;
|
||||
width: 1em;
|
||||
height: 1.1em;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
top: -0.1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Sticky, fixed to top content
|
||||
========================================================================== */
|
||||
|
||||
.sticky {
|
||||
@include clearfix();
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Wells
|
||||
========================================================================== */
|
||||
|
||||
.well {
|
||||
min-height: 20px;
|
||||
padding: 19px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #e3e3e3;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Footnotes
|
||||
========================================================================== */
|
||||
|
||||
.footnotes {
|
||||
ol, li, p {
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,37 +6,40 @@
|
|||
Typography
|
||||
========================================================================== */
|
||||
|
||||
$doc-font-size: 16;
|
||||
$doc-line-height: 26;
|
||||
$paragraph-indent: true !default;
|
||||
$doc-font-size : 16;
|
||||
$doc-line-height : 26;
|
||||
$paragraph-indent : true !default;
|
||||
$indent-var : 0rem + ($doc-line-height / $doc-font-size);
|
||||
|
||||
$serif : "PT Serif", serif;
|
||||
$sans-serif : -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
|
||||
$sans-serif-narrow : "PT Sans Narrow", sans-serif;
|
||||
$monospace : Monaco, Consolas, "Lucida Console", monospace;
|
||||
|
||||
$serif : "PT Serif", serif;
|
||||
$sans-serif : -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
|
||||
$sans-serif-narrow : "PT Sans Narrow", sans-serif;
|
||||
$monospace : Monaco, Consolas, "Lucida Console", monospace;
|
||||
|
||||
/*
|
||||
Colors
|
||||
========================================================================== */
|
||||
|
||||
$bodycolor : #fff;
|
||||
$body-color : $bodycolor;
|
||||
$textcolor : #333332;
|
||||
$text-color : $textcolor;
|
||||
$border-color : $text-color;
|
||||
$basecolor : #343434;
|
||||
$compcolor : spin($basecolor, 180);
|
||||
$bordercolor : $basecolor;
|
||||
$white : #fff;
|
||||
$black : #111;
|
||||
$accentcolor : $black;
|
||||
$gray : #4c4c4c;
|
||||
$dark-gray : #191413;
|
||||
$light-gray : #e2e2e2;
|
||||
$lighter-gray : #f9f9f9;
|
||||
|
||||
$body-color : #fff;
|
||||
$background-color : #fff;
|
||||
$text-color : #333332;
|
||||
$border-color : $light-gray;
|
||||
$base-color : #343434;
|
||||
$comp-color : spin($base-color, 180);
|
||||
$accent-color : #000;
|
||||
|
||||
/* buttons */
|
||||
$primary : $black;
|
||||
$success : #5cb85c;
|
||||
$warning : #dd8338;
|
||||
$danger : #C64537;
|
||||
$info : #308cbc;
|
||||
$primary-color : #000;
|
||||
$success-color : #5cb85c;
|
||||
$warning-color : #dd8338;
|
||||
$danger-color : #C64537;
|
||||
$info-color : #308cbc;
|
||||
|
||||
/* brands */
|
||||
$facebook-color : #3b5998;
|
||||
|
|
@ -53,13 +56,22 @@ $vimeo-color : #1ab7ea;
|
|||
$youtube-color : #ff3333;
|
||||
|
||||
/* links */
|
||||
$linkcolor : #343434;
|
||||
$link-color : $linkcolor;
|
||||
$linkcolorhover : darken($linkcolor, 10);
|
||||
$linkcolorvisited : lighten($linkcolorhover, 20);
|
||||
$linkcolorfocus : darken($linkcolorvisited, 10);
|
||||
$link-color : #343434;
|
||||
$link-color-hover : darken($link-color, 10);
|
||||
$link-color-visited : lighten($link-color-hover, 20);
|
||||
$link-color-focus : darken($link-color-visited, 10);
|
||||
|
||||
$border-radius : 4px;
|
||||
|
||||
|
||||
/*
|
||||
Grid
|
||||
========================================================================== */
|
||||
|
||||
$width : 100%;
|
||||
$def_grid : 12; // define number of columns in the grid (eg. 12, 16...)
|
||||
$margin : 0;
|
||||
|
||||
$border-radius : 4px;
|
||||
|
||||
/*
|
||||
Breakpoints
|
||||
|
|
@ -67,8 +79,8 @@ $border-radius : 4px;
|
|||
|
||||
@include breakpoint-set("to ems", true);
|
||||
|
||||
$micro : 480px;
|
||||
$small : 600px;
|
||||
$medium : 768px;
|
||||
$large : 992px;
|
||||
$x-large : 1382px;
|
||||
$micro : 480px;
|
||||
$small : 600px;
|
||||
$medium : 768px;
|
||||
$large : 992px;
|
||||
$x-large : 1382px;
|
||||
|
|
@ -9,13 +9,15 @@
|
|||
|
||||
@import "vendor/breakpoint/breakpoint"; // media query mixins
|
||||
@import "variables";
|
||||
@import "grid";
|
||||
@import "mixins";
|
||||
@import "normalize";
|
||||
@import "site";
|
||||
@import "typography";
|
||||
|
||||
@import "reset";
|
||||
@import "base";
|
||||
@import "utilities";
|
||||
@import "buttons";
|
||||
@import "toc"; // table of contents
|
||||
|
||||
@import "syntax";
|
||||
@import "elements";
|
||||
@import "forms";
|
||||
@import "page";
|
||||
@import "vendor/font-awesome/font-awesome";
|
||||
|
|
|
|||
290
_base.scss
Normal file
290
_base.scss
Normal file
|
|
@ -0,0 +1,290 @@
|
|||
/* ==========================================================================
|
||||
BASE ELEMENTS
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: $text-color;
|
||||
font-family: $serif;
|
||||
line-height: 1.5;
|
||||
&.overflow--hidden {
|
||||
/* when primary navigation is visible, the content in the background won't scroll */
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
font-family: $sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
u,
|
||||
ins {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid $text-color;
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
del a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* paragraph indents */
|
||||
|
||||
p {
|
||||
margin: 0 0 $indent-var;
|
||||
// sibling indentation
|
||||
@if $paragraph-indent == true {
|
||||
& + p {
|
||||
text-indent: $indent-var;
|
||||
margin-top: -($indent-var);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* reduce orphans and widows when printing */
|
||||
|
||||
p, pre, blockquote, ul, ol, dl, figure, table, fieldset {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
/* Abbreviations */
|
||||
|
||||
abbr[title],
|
||||
abbr[data-original-title] {
|
||||
text-decoration: none;
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted $text-color;
|
||||
}
|
||||
|
||||
/* Blockquotes */
|
||||
|
||||
blockquote {
|
||||
margin: 2em 1em 2em 0;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
font-style: italic;
|
||||
border-left: 0.25em solid $accent-color;
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
cite {
|
||||
font-family: $sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
&:before {
|
||||
content: "\2014";
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Links */
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
&:focus {
|
||||
@extend %tab-focus;
|
||||
}
|
||||
&:hover,
|
||||
&:active {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
|
||||
ol, ul {
|
||||
@include breakpoint($small) {
|
||||
padding-left: 0;
|
||||
ol, ul {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Code */
|
||||
|
||||
tt, code, kbd, samp, pre {
|
||||
font-family: $monospace;
|
||||
font-size: 14px;
|
||||
}
|
||||
pre {
|
||||
overflow-x: auto; // add scrollbars to wide code blocks
|
||||
}
|
||||
p code,
|
||||
li code,
|
||||
figcaption code {
|
||||
padding-top: 0.1rem;
|
||||
padding-bottom: 0.1rem;
|
||||
background: mix(#fff, $light-gray, 40%);
|
||||
border: 1px solid $light-gray;
|
||||
border-radius: $border-radius;
|
||||
&:before, &:after {
|
||||
letter-spacing: -0.2em;
|
||||
content: "\00a0"; // non-breaking space
|
||||
}
|
||||
}
|
||||
|
||||
/* Horizontal rule */
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
border: 0;
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
|
||||
/*
|
||||
Media and embeds
|
||||
========================================================================== */
|
||||
|
||||
/* Figures and images */
|
||||
|
||||
figure {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
margin: 2em 0;
|
||||
img,
|
||||
iframe,
|
||||
.fluid-width-video-wrapper {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: $border-radius;
|
||||
transition: box-shadow 0.3s;
|
||||
}
|
||||
> a {
|
||||
display: block;
|
||||
// image hover animation
|
||||
&:hover {
|
||||
img {
|
||||
box-shadow: 0 0 10px rgba(#000, 0.20);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.half {
|
||||
> a,
|
||||
> img {
|
||||
@include breakpoint($small) {
|
||||
width: calc(50% - 0.5em);
|
||||
}
|
||||
}
|
||||
figcaption {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&.third {
|
||||
> a,
|
||||
> img {
|
||||
@include breakpoint($small) {
|
||||
width: calc(33.3333% - 0.5em);
|
||||
}
|
||||
}
|
||||
figcaption {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Figure captions */
|
||||
|
||||
figcaption {
|
||||
margin-bottom: 0.65rem;
|
||||
color: mix(#fff, $text-color, 25%);
|
||||
font-family: $sans-serif;
|
||||
font-size: 0.8rem;
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid $light-gray;
|
||||
transition: border 0.4s ease-in-out;
|
||||
&:hover {
|
||||
color: #000;
|
||||
border-bottom-color: #000;
|
||||
}
|
||||
}
|
||||
code {
|
||||
font-size: 0.64rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Fix IE9 SVG bug */
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Navigation lists
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Removes margins, padding, and bullet points from navigation lists
|
||||
*
|
||||
* Example usage:
|
||||
* <nav>
|
||||
* <ul>
|
||||
* <li><a href="#link-1">Link 1</a></li>
|
||||
* <li><a href="#link-2">Link 2</a></li>
|
||||
* <li><a href="#link-3">Link 3</a></li>
|
||||
* </ul>
|
||||
* </nav>
|
||||
*/
|
||||
|
||||
nav {
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Global animation transition
|
||||
========================================================================== */
|
||||
|
||||
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, form button, input[type="submit"], .btn, .highlight, .archive__item, .archive__item-thumb, .archive__item-body, .palette__swatch {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
127
_buttons.scss
Normal file
127
_buttons.scss
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
/* ==========================================================================
|
||||
BUTTONS
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
Default button
|
||||
========================================================================== */
|
||||
|
||||
.btn {
|
||||
/* default button */
|
||||
display: inline-block;
|
||||
margin-bottom: 0.25em;
|
||||
padding: 10px 20px;
|
||||
color: #fff !important;
|
||||
font-family: $sans-serif;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
background-color: #000;
|
||||
border: 0 !important;
|
||||
border-radius: $border-radius;
|
||||
cursor: pointer;
|
||||
&:active {
|
||||
// move button slightly on click
|
||||
transform: translateY(1px);
|
||||
}
|
||||
&:hover {
|
||||
background-color: mix(white, #000, 20%);
|
||||
}
|
||||
.icon {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.icon + .hidden {
|
||||
margin-left: -0.5em; // override for hidden text
|
||||
}
|
||||
|
||||
/* fills width of parent container */
|
||||
|
||||
&--block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
+ .btn--block {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
/* for dark backgrounds */
|
||||
|
||||
&--inverse {
|
||||
color: #000 !important;
|
||||
background-color: #fff;
|
||||
&:hover {
|
||||
background-color: mix(#000, #fff, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
/* light outline */
|
||||
|
||||
&--light-outline {
|
||||
border: 1px solid #fff !important; // override
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* information */
|
||||
|
||||
&--info {
|
||||
background-color: $info-color;
|
||||
&:hover {
|
||||
background-color: mix(#000, $info-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
/* warning */
|
||||
|
||||
&--warning {
|
||||
background-color: $warning-color;
|
||||
&:hover {
|
||||
background-color: mix(#000, $warning-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
/* success */
|
||||
|
||||
&--success {
|
||||
background-color: $success-color;
|
||||
&:hover {
|
||||
background-color: mix(#000, $success-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
/* danger */
|
||||
|
||||
&--danger {
|
||||
background-color: $danger-color;
|
||||
&:hover {
|
||||
background-color: mix(#000, $danger-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
/* disabled */
|
||||
|
||||
&--disabled {
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
filter: alpha(opacity=65);
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
/* social buttons */
|
||||
|
||||
$social:
|
||||
(facebook, $facebook-color),
|
||||
(twitter, $twitter-color),
|
||||
(google-plus, $google-plus-color);
|
||||
|
||||
@each $socialnetwork, $color in $social {
|
||||
&--#{$socialnetwork} {
|
||||
background-color: $color;
|
||||
&:hover {
|
||||
background-color: mix(#000, $color, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@ en: &DEFAULT_EN
|
|||
pagination_previous: "Previous"
|
||||
pagination_next: "Next"
|
||||
toc_label: "Overview"
|
||||
ext_link_label: "Direct Link"
|
||||
share_on: "Share on"
|
||||
date_label: "Last Updated:"
|
||||
related_label: "You May Also Enjoy"
|
||||
|
|
|
|||
|
|
@ -1,14 +1,6 @@
|
|||
<div class="social-share">
|
||||
<h4>{{ site.data.ui-text[site.locale].share_on }}</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://twitter.com/intent/tweet?text={{ base_path }}{{ page.url }}" class="twitter" title="Share on Twitter"><i class="fa fa-twitter"></i><span> Twitter</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.facebook.com/sharer/sharer.php?u={{ base_path }}{{ page.url }}" class="facebook" title="Share on Facebook"><i class="fa fa-facebook"></i><span> Facebook</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://plus.google.com/share?url={{ base_path }}{{ page.url }}" class="google-plus" title="Share on Google Plus"><i class="fa fa-google-plus"></i><span> Google+</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="https://twitter.com/intent/tweet?text={{ base_path }}{{ page.url }}" class="btn btn--twitter" title="Share on Twitter"><i class="fa fa-twitter"></i><span> Twitter</span></a>
|
||||
<a href="https://www.facebook.com/sharer/sharer.php?u={{ base_path }}{{ page.url }}" class="btn btn--facebook" title="Share on Facebook"><i class="fa fa-facebook"></i><span> Facebook</span></a>
|
||||
<a href="https://plus.google.com/share?url={{ base_path }}{{ page.url }}" class="btn btn--google-plus" title="Share on Google Plus"><i class="fa fa-google-plus"></i><span> Google+</span></a>
|
||||
</div><!-- /.social-share -->
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<section id="table-of-contents" class="toc">
|
||||
<header><h3><i class="fa fa-{{ include.icon | default: 'book' }}"></i> {{ include.title | default: site.data.ui-text[site.locale].toc_label }}</h3></header>
|
||||
<div id="drawer" markdown="1">
|
||||
<section class="toc">
|
||||
<header><h4 class="toc__title"><i class="fa fa-{{ include.icon | default: 'book' }}"></i> {{ include.title | default: site.data.ui-text[site.locale].toc_label }}</h4></header>
|
||||
<nav markdown="1">
|
||||
* Auto generated table of contents
|
||||
{:toc}
|
||||
</div>
|
||||
{:toc .toc__menu}
|
||||
</nav>
|
||||
</section>
|
||||
|
|
@ -4,22 +4,19 @@ layout: default
|
|||
|
||||
{% include base_path %}
|
||||
|
||||
<article class="post" itemscope itemtype="http://schema.org/CreativeWork">
|
||||
<article class="page" itemscope itemtype="http://schema.org/CreativeWork">
|
||||
{% if page.excerpt %}<meta itemprop="description" content="{{ page.excerpt | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
|
||||
{% if page.date %}<meta itemprop="datePublished" content="{{ page.date | date: "%B %d, %Y" }}">{% endif %}
|
||||
{% if page.modified %}<meta itemprop="dateModified" content="{{ page.modified | date: "%B %d, %Y" }}">{% endif %}
|
||||
|
||||
<div class="article-wrap">
|
||||
<header>
|
||||
{% if page.link %}
|
||||
<h1 itemprop="headline"><a href="{{ page.link }}">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</a></h1>
|
||||
{% else %}
|
||||
<h1 itemprop="headline"><a href="{{ base_path }}{{ page.url }}" rel="bookmark">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</a></h1>
|
||||
{% endif %}
|
||||
<h1 itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1>
|
||||
</header>
|
||||
|
||||
<section itemprop="text">
|
||||
{{ content }}
|
||||
{% if page.link %}<div><a href="{{ page.link }}" class="btn">{{ site.data.ui-text[site.locale].ext_link_label }}</a></div>{% endif %}
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue