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-bottom: 5px * 2;
|
||||||
*margin-left: -7px;
|
*margin-left: -7px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: $textcolor;
|
color: $text-color;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-bottom: 1px solid lighten($black, 80);
|
border-bottom: 1px solid mix(#fff, #000, 80%);
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
|
|
@ -45,13 +45,13 @@ button,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
font-family: $serif;
|
font-family: $serif;
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
label {
|
label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 10px / 8;
|
margin-bottom: 10px / 8;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $textcolor;
|
color: $text-color;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
input,
|
input,
|
||||||
textarea,
|
textarea,
|
||||||
|
|
@ -66,11 +66,11 @@ select {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
margin-bottom: 5px / 4;
|
margin-bottom: 5px / 4;
|
||||||
background-color: $white;
|
background-color: #fff;
|
||||||
border: 1px solid lighten($black, 80);
|
border: 1px solid mix(#fff, #000, 80%);
|
||||||
color: $textcolor;
|
color: $text-color;
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: lighten($accentcolor, 50);
|
border-color: mix(#fff, $accent-color, 50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.input-mini {
|
.input-mini {
|
||||||
|
|
@ -89,19 +89,19 @@ input[type="radio"] {
|
||||||
*margin-top: 0;
|
*margin-top: 0;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@include rounded(0);
|
border-radius: 0;
|
||||||
border: 0 \9;
|
border: 0 \9;
|
||||||
}
|
}
|
||||||
input[type="checkbox"],
|
input[type="checkbox"],
|
||||||
input[type="radio"] {
|
input[type="radio"] {
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
*width: 13px;
|
*width: 13px;
|
||||||
*height: 13px;
|
*height: 13px;
|
||||||
}
|
}
|
||||||
input[type="image"] {
|
input[type="image"] {
|
||||||
border: 0;
|
border: 0;
|
||||||
@include box-shadow(none);
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
input[type="file"] {
|
input[type="file"] {
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|
@ -110,57 +110,57 @@ input[type="file"] {
|
||||||
border: initial;
|
border: initial;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-color: initial;
|
background-color: initial;
|
||||||
@include box-shadow(none);
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
input[type="button"],
|
input[type="button"],
|
||||||
input[type="reset"],
|
input[type="reset"],
|
||||||
input[type="submit"] {
|
input[type="submit"] {
|
||||||
width : auto;
|
width: auto;
|
||||||
height : auto;
|
height: auto;
|
||||||
cursor : pointer;
|
cursor: pointer;
|
||||||
*overflow : visible;
|
*overflow: visible;
|
||||||
}
|
}
|
||||||
select,
|
select,
|
||||||
input[type="file"] {
|
input[type="file"] {
|
||||||
*margin-top : 4px;
|
*margin-top: 4px;
|
||||||
}
|
}
|
||||||
select {
|
select {
|
||||||
width : auto;
|
width: auto;
|
||||||
background-color : $white;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
select[multiple],
|
select[multiple],
|
||||||
select[size] {
|
select[size] {
|
||||||
height : auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
textarea {
|
textarea {
|
||||||
@include resize(vertical);
|
resize: vertical;
|
||||||
height : auto;
|
height: auto;
|
||||||
overflow : auto;
|
overflow: auto;
|
||||||
vertical-align : top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
input[type="hidden"] {
|
input[type="hidden"] {
|
||||||
display : none;
|
display: none;
|
||||||
}
|
}
|
||||||
.radio,
|
.radio,
|
||||||
.checkbox {
|
.checkbox {
|
||||||
padding-left : 18px;
|
padding-left: 18px;
|
||||||
font-weight : normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
.radio input[type="radio"],
|
.radio input[type="radio"],
|
||||||
.checkbox input[type="checkbox"] {
|
.checkbox input[type="checkbox"] {
|
||||||
float : left;
|
float: left;
|
||||||
margin-left : -18px;
|
margin-left: -18px;
|
||||||
}
|
}
|
||||||
.radio.inline,
|
.radio.inline,
|
||||||
.checkbox.inline {
|
.checkbox.inline {
|
||||||
display : inline-block;
|
display: inline-block;
|
||||||
padding-top : 5px;
|
padding-top: 5px;
|
||||||
margin-bottom : 0;
|
margin-bottom: 0;
|
||||||
vertical-align : middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
.radio.inline + .radio.inline,
|
.radio.inline + .radio.inline,
|
||||||
.checkbox.inline + .checkbox.inline {
|
.checkbox.inline + .checkbox.inline {
|
||||||
margin-left : 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -173,8 +173,8 @@ textarea[disabled],
|
||||||
input[readonly],
|
input[readonly],
|
||||||
select[readonly],
|
select[readonly],
|
||||||
textarea[readonly] {
|
textarea[readonly] {
|
||||||
@include opacity(.5);
|
opacity: 0.5;
|
||||||
cursor : not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -183,15 +183,15 @@ textarea[readonly] {
|
||||||
|
|
||||||
input:focus,
|
input:focus,
|
||||||
textarea:focus {
|
textarea:focus {
|
||||||
border-color : $accentcolor;
|
border-color: $accent-color;
|
||||||
outline : 0;
|
outline: 0;
|
||||||
outline : thin dotted \9;
|
outline: thin dotted \9;
|
||||||
}
|
}
|
||||||
input[type="file"]:focus,
|
input[type="file"]:focus,
|
||||||
input[type="radio"]:focus,
|
input[type="radio"]:focus,
|
||||||
input[type="checkbox"]:focus,
|
input[type="checkbox"]:focus,
|
||||||
select:focus {
|
select:focus {
|
||||||
@include box-shadow(none);
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -200,17 +200,17 @@ select:focus {
|
||||||
|
|
||||||
.help-block,
|
.help-block,
|
||||||
.help-inline {
|
.help-inline {
|
||||||
color : lighten($black, 50);
|
color: mix(#fff, #000, 50%);
|
||||||
}
|
}
|
||||||
.help-block {
|
.help-block {
|
||||||
display : block;
|
display: block;
|
||||||
margin-bottom : 1em;
|
margin-bottom: 1em;
|
||||||
line-height : 1em;
|
line-height: 1em;
|
||||||
}
|
}
|
||||||
.help-inline {
|
.help-inline {
|
||||||
display : inline-block;
|
display: inline-block;
|
||||||
vertical-align : middle;
|
vertical-align: middle;
|
||||||
padding-left : 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -220,24 +220,24 @@ select:focus {
|
||||||
.form-inline input,
|
.form-inline input,
|
||||||
.form-inline textarea,
|
.form-inline textarea,
|
||||||
.form-inline select {
|
.form-inline select {
|
||||||
display : inline-block;
|
display: inline-block;
|
||||||
margin-bottom : 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
.form-inline label {
|
.form-inline label {
|
||||||
display : inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.form-inline .radio,
|
.form-inline .radio,
|
||||||
.form-inline .checkbox,
|
.form-inline .checkbox,
|
||||||
.form-inline .radio {
|
.form-inline .radio {
|
||||||
padding-left : 0;
|
padding-left: 0;
|
||||||
margin-bottom : 0;
|
margin-bottom: 0;
|
||||||
vertical-align : middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
.form-inline .radio input[type="radio"],
|
.form-inline .radio input[type="radio"],
|
||||||
.form-inline .checkbox input[type="checkbox"] {
|
.form-inline .checkbox input[type="checkbox"] {
|
||||||
float : left;
|
float: left;
|
||||||
margin-left : 0;
|
margin-left: 0;
|
||||||
margin-right : 3px; }
|
margin-right: 3px; }
|
||||||
|
|
||||||
/*
|
/*
|
||||||
.form-search
|
.form-search
|
||||||
|
|
@ -246,28 +246,28 @@ select:focus {
|
||||||
.form-search input,
|
.form-search input,
|
||||||
.form-search textarea,
|
.form-search textarea,
|
||||||
.form-search select {
|
.form-search select {
|
||||||
display : inline-block;
|
display: inline-block;
|
||||||
margin-bottom : 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
.form-search .search-query {
|
.form-search .search-query {
|
||||||
padding-left : 14px;
|
padding-left: 14px;
|
||||||
padding-right : 14px;
|
padding-right: 14px;
|
||||||
margin-bottom : 0;
|
margin-bottom: 0;
|
||||||
@include rounded(14px);
|
border-radius: 14px;
|
||||||
}
|
}
|
||||||
.form-search label {
|
.form-search label {
|
||||||
display : inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.form-search .radio,
|
.form-search .radio,
|
||||||
.form-search .checkbox,
|
.form-search .checkbox,
|
||||||
.form-inline .radio {
|
.form-inline .radio {
|
||||||
padding-left : 0;
|
padding-left: 0;
|
||||||
margin-bottom : 0;
|
margin-bottom: 0;
|
||||||
vertical-align : middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
.form-search .radio input[type="radio"],
|
.form-search .radio input[type="radio"],
|
||||||
.form-search .checkbox input[type="checkbox"] {
|
.form-search .checkbox input[type="checkbox"] {
|
||||||
float : left;
|
float: left;
|
||||||
margin-left : 0;
|
margin-left: 0;
|
||||||
margin-right : 3px;
|
margin-right: 3px;
|
||||||
}
|
}
|
||||||
|
|
@ -2,15 +2,6 @@
|
||||||
Grid mixins
|
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(){
|
@mixin container(){
|
||||||
margin:0 auto;
|
margin:0 auto;
|
||||||
width:$width;
|
width:$width;
|
||||||
|
|
|
||||||
|
|
@ -1,376 +1,111 @@
|
||||||
/* ==========================================================================
|
/* ==========================================================================
|
||||||
Utility mixins
|
MIXINS
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
/*
|
%tab-focus {
|
||||||
Clearfix
|
// Default
|
||||||
For clearing floats like a boss h5bp.com/q
|
outline: thin dotted $warning-color;
|
||||||
========================================================================== */
|
// Webkit
|
||||||
|
outline: 5px auto $warning-color;
|
||||||
@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;
|
|
||||||
outline-offset: -2px;
|
outline-offset: -2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Center-align a block level element
|
em function
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
@mixin center-block() {
|
@function em($target, $context: $doc-font-size) {
|
||||||
display: block;
|
@return ($target / $context) * 1em;
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
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
|
Bourbon clearfix
|
||||||
example: @include rounded(4px);
|
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
@mixin rounded($radius:4px) {
|
// Provides an easy way to include a clearfix for containing floats.
|
||||||
border-radius : $radius;
|
//
|
||||||
|
// @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)
|
Grid
|
||||||
example: @include border-radius(4px, 0, 0, 4px);
|
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
@mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) {
|
@mixin container() {
|
||||||
border-top-right-radius: $topright;
|
margin: 0 auto;
|
||||||
border-bottom-right-radius: $bottomright;
|
width: $width;
|
||||||
border-bottom-left-radius: $bottomleft;
|
|
||||||
border-top-left-radius: $topleft;
|
|
||||||
-webkit-background-clip: padding-box;
|
|
||||||
-moz-background-clip: padding;
|
|
||||||
background-clip: padding-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
// Works out the width of elements based on total number of columns and width
|
||||||
Box shadow
|
// number of columns being displayed. Removes 20px for margins.
|
||||||
example: @include box-shadow(HORIZONTAL VERTICAL BLUR COLOR));
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
|
@mixin grid($grid:$def_grid,$cols:'',$float:left,$display:inline) {
|
||||||
-webkit-box-shadow: $shadow;
|
display: $display;
|
||||||
-moz-box-shadow: $shadow;
|
float: $float;
|
||||||
box-shadow: $shadow;
|
width: (100%/$grid * $cols) - ($margin * 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
// Add x amount of column padding before an element
|
||||||
Drop shadow
|
// Example: @include prefix(1,12);
|
||||||
example: @include drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) {
|
@mixin prefix($grid:$def_grid,$cols:'') {
|
||||||
-webkit-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
|
margin-left: (100%/$grid * $cols);
|
||||||
-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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
// Add x amount of column padding after an element
|
||||||
Text shadow
|
// Example: @include suffix(2,12);
|
||||||
example: @include text-shadow(0 2px 3px rgba(0,0,0,.25));
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) {
|
@mixin suffix($grid:$def_grid,$cols:'') {
|
||||||
text-shadow: $shadow; }
|
margin-right: (100%/$grid * $cols);
|
||||||
|
|
||||||
/*
|
|
||||||
Opacity
|
|
||||||
example: @include opacity(0.5); // 50% opacity
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin opacity($opacity: 0.5) {
|
|
||||||
opacity: $opacity;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ==========================================================================
|
// Remove left margin
|
||||||
Transformations
|
// Example: @include first;
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/*
|
@mixin first() {
|
||||||
@include rotate(VALUEdeg);
|
margin-left: 0;
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin rotate($deg) {
|
|
||||||
-webkit-transform: rotate($deg);
|
|
||||||
-moz-transform: rotate($deg);
|
|
||||||
-ms-transform: rotate($deg);
|
|
||||||
-o-transform: rotate($deg);
|
|
||||||
transform: rotate($deg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
// Remove right margin
|
||||||
@include scale(VALUE);
|
// Example: @include last;
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin scale($ratio) {
|
@mixin last() {
|
||||||
-webkit-transform: scale($ratio);
|
margin-right: 0;
|
||||||
-moz-transform: scale($ratio);
|
|
||||||
-ms-transform: scale($ratio);
|
|
||||||
-o-transform: scale($ratio);
|
|
||||||
transform: scale($ratio);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
// Push an element x amount of column(s) to the right
|
||||||
@include skew(VALUE, VALUE);
|
// Example: @include push(2,12);
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin skew($x: 0, $y: 0) {
|
@mixin push($grid:$def_grid,$move:'') {
|
||||||
-webkit-transform: skew($x, $y);
|
position: relative;
|
||||||
-moz-transform: skew($x, $y);
|
left: (100%/$grid * $move);
|
||||||
-ms-transform: skew($x, $y);
|
|
||||||
-o-transform: skew($x, $y);
|
|
||||||
transform: skew($x, $y);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
// Pull an element x amount of column(s) to the left
|
||||||
@include transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
|
// Example: @include pull(1,12);
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin transition($transition) {
|
@mixin pull($grid:$def_grid,$move:'') {
|
||||||
-webkit-transition: $transition;
|
position: relative;
|
||||||
-moz-transition: $transition;
|
left: (100%/$grid * $move) * -1;
|
||||||
-ms-transition: $transition;
|
|
||||||
-o-transition: $transition;
|
|
||||||
transition: $transition;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
@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 {
|
body {
|
||||||
background-color: $bodycolor;
|
background-color: $body-color;
|
||||||
font-family: $serif;
|
font-family: $serif;
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
}
|
}
|
||||||
|
|
@ -29,12 +29,12 @@ body {
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
float: none;
|
float: none;
|
||||||
display: block;
|
display: block;
|
||||||
@include font-rem(24);
|
font-size: 24px;
|
||||||
@include breakpoint($small) {
|
@include breakpoint($small) {
|
||||||
@include grid(12,2);
|
@include grid(12,2);
|
||||||
@include prefix(12,0.5);
|
@include prefix(12,0.5);
|
||||||
@include suffix(12,0.5);
|
@include suffix(12,0.5);
|
||||||
@include font-rem(16);
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
@include breakpoint($x-large) {
|
@include breakpoint($x-large) {
|
||||||
@include grid(12,1.5);
|
@include grid(12,1.5);
|
||||||
|
|
@ -67,9 +67,9 @@ body {
|
||||||
li {
|
li {
|
||||||
display: block;
|
display: block;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
border-bottom: 1px solid lighten($black,80);
|
border-bottom: 1px solid lighten(#000,80);
|
||||||
border-bottom: 1px solid fade($black,10);
|
border-bottom: 1px solid fade(#000,10);
|
||||||
@include font-rem(16);
|
font-size: 16px;
|
||||||
&:last-child {
|
&:last-child {
|
||||||
border-bottom: 0 solid transparent;
|
border-bottom: 0 solid transparent;
|
||||||
}
|
}
|
||||||
|
|
@ -84,7 +84,6 @@ body {
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
decoration: none;
|
decoration: none;
|
||||||
border-bottom: 0 solid transparent;
|
border-bottom: 0 solid transparent;
|
||||||
@include transition(all .2s);
|
|
||||||
@include breakpoint($small) {
|
@include breakpoint($small) {
|
||||||
display: inline;
|
display: inline;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -100,32 +99,24 @@ body {
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
clear: both;
|
clear: both;
|
||||||
margin-top: 2em;
|
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 breakpoint($large) {
|
||||||
@include container;
|
@include grid(12,6);
|
||||||
@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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
figcaption {
|
@include breakpoint($x-large) {
|
||||||
padding-top: 10px;
|
@include grid(12,5);
|
||||||
@include font(14);
|
|
||||||
line-height: 1.3;
|
|
||||||
color: lighten($text-color, 10);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -150,22 +141,18 @@ body {
|
||||||
h3 {
|
h3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-bottom: .5em;
|
padding-bottom: .5em;
|
||||||
@include font-rem(28);
|
font-size: 28px;
|
||||||
border-bottom: 1px solid lighten($black,70);
|
border-bottom: 1px solid mix(#fff, #000, 70%);
|
||||||
}
|
}
|
||||||
article {
|
article {
|
||||||
h2 {
|
h2 {
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
@include font-rem(20);
|
font-size: 20px;
|
||||||
&.link-post {
|
|
||||||
margin-bottom: 0px + $doc-line-height;
|
|
||||||
margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
@include font-rem(14);
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
p+p {
|
p + p {
|
||||||
text-indent: 0;
|
text-indent: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -185,7 +172,7 @@ body {
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
border: 10px solid transparent;
|
border: 10px solid transparent;
|
||||||
border-bottom-color: $bodycolor;
|
border-bottom-color: $body-color;
|
||||||
@include breakpoint($small) {
|
@include breakpoint($small) {
|
||||||
left: 25%;
|
left: 25%;
|
||||||
}
|
}
|
||||||
|
|
@ -245,21 +232,21 @@ body {
|
||||||
}
|
}
|
||||||
.author-avatar {
|
.author-avatar {
|
||||||
max-width: 110px;
|
max-width: 110px;
|
||||||
@include rounded(150px);
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
.author-social {
|
.author-social {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
@include font-rem(14);
|
font-size: 14px;
|
||||||
color: $black;
|
color: #000;
|
||||||
&:visited {
|
&:visited {
|
||||||
color: $black;
|
color: #000;
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
@include scale(1.1);
|
transform: scale(1.1);
|
||||||
}
|
}
|
||||||
&:active {
|
&:active {
|
||||||
@include translate(0, 2px);
|
transform: translate(0, 2px);
|
||||||
}
|
}
|
||||||
.fa {
|
.fa {
|
||||||
margin-right: 5px;
|
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 - not used */
|
||||||
.image-grid {
|
.image-grid {
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
|
|
@ -403,59 +320,9 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Social sharing links */
|
/* Social sharing links */
|
||||||
/* Social media brand buttons */
|
|
||||||
.social-share {
|
.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 {
|
h4 {
|
||||||
@include font-rem(14);
|
font-size: 14px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
@ -469,7 +336,7 @@ body {
|
||||||
clear: both;
|
clear: both;
|
||||||
padding-bottom: 3em;
|
padding-bottom: 3em;
|
||||||
.copyright {
|
.copyright {
|
||||||
@include font-rem(14);
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
footer {
|
footer {
|
||||||
@include grid(12,10);
|
@include grid(12,10);
|
||||||
|
|
@ -539,13 +406,13 @@ body {
|
||||||
margin: 0 0 2em 0;
|
margin: 0 0 2em 0;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: $white;
|
color: #fff;
|
||||||
a {
|
a {
|
||||||
color: $white;
|
color: #fff;
|
||||||
border-bottom: 1px dotted $white;
|
border-bottom: 1px dotted #fff;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
&:hover {
|
&:hover {
|
||||||
border-bottom: 1px solid $white;
|
border-bottom: 1px solid #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -570,13 +437,13 @@ body {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
padding: 8px 20px;
|
padding: 8px 20px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@include font-rem(14);
|
font-size: 14px;
|
||||||
background-color: $white;
|
background-color: #fff;
|
||||||
color: $black;
|
color: #000;
|
||||||
border-width: 2px !important;
|
border-width: 2px !important;
|
||||||
border-style: solid !important;
|
border-style: solid !important;
|
||||||
border-color: lighten($black,50);
|
border-color: lighten(#000,50);
|
||||||
@include rounded(3px);
|
border-radius: $border-radius;
|
||||||
}
|
}
|
||||||
#goog-wm-sb {
|
#goog-wm-sb {
|
||||||
@extend .btn;
|
@extend .btn;
|
||||||
|
|
@ -605,7 +472,7 @@ body {
|
||||||
|
|
||||||
.pagination {
|
.pagination {
|
||||||
padding-top: 0.5em;
|
padding-top: 0.5em;
|
||||||
border-top: 1px solid lighten($black,70);
|
border-top: 1px solid mix(#fff, #000, 70%);
|
||||||
ul {
|
ul {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 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 {
|
::-moz-selection {
|
||||||
background-color: lighten($basecolor, 65%);
|
background-color: mix(#fff, $base-color, 65%);
|
||||||
color: $basecolor;
|
color: $base-color;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
::selection {
|
::selection {
|
||||||
background-color: lighten($basecolor, 65%);
|
background-color: mix(#fff, $base-color, 65%);
|
||||||
color: $basecolor;
|
color: $base-color;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -61,12 +61,4 @@
|
||||||
li {
|
li {
|
||||||
list-style-type: none;
|
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 {
|
div.highlighter-rouge {
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid $border-color;
|
||||||
border-radius: $border-radius;
|
border-radius: $border-radius;
|
||||||
.highlight {
|
.highlight {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: $monospace;
|
font-family: $monospace;
|
||||||
@include font-rem(12);
|
font-size: 12px;
|
||||||
line-height: 1.5;
|
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
|
Typography
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
$doc-font-size: 16;
|
$doc-font-size : 16;
|
||||||
$doc-line-height: 26;
|
$doc-line-height : 26;
|
||||||
$paragraph-indent: true !default;
|
$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
|
Colors
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
$bodycolor : #fff;
|
$gray : #4c4c4c;
|
||||||
$body-color : $bodycolor;
|
$dark-gray : #191413;
|
||||||
$textcolor : #333332;
|
$light-gray : #e2e2e2;
|
||||||
$text-color : $textcolor;
|
$lighter-gray : #f9f9f9;
|
||||||
$border-color : $text-color;
|
|
||||||
$basecolor : #343434;
|
$body-color : #fff;
|
||||||
$compcolor : spin($basecolor, 180);
|
$background-color : #fff;
|
||||||
$bordercolor : $basecolor;
|
$text-color : #333332;
|
||||||
$white : #fff;
|
$border-color : $light-gray;
|
||||||
$black : #111;
|
$base-color : #343434;
|
||||||
$accentcolor : $black;
|
$comp-color : spin($base-color, 180);
|
||||||
|
$accent-color : #000;
|
||||||
|
|
||||||
/* buttons */
|
/* buttons */
|
||||||
$primary : $black;
|
$primary-color : #000;
|
||||||
$success : #5cb85c;
|
$success-color : #5cb85c;
|
||||||
$warning : #dd8338;
|
$warning-color : #dd8338;
|
||||||
$danger : #C64537;
|
$danger-color : #C64537;
|
||||||
$info : #308cbc;
|
$info-color : #308cbc;
|
||||||
|
|
||||||
/* brands */
|
/* brands */
|
||||||
$facebook-color : #3b5998;
|
$facebook-color : #3b5998;
|
||||||
|
|
@ -53,13 +56,22 @@ $vimeo-color : #1ab7ea;
|
||||||
$youtube-color : #ff3333;
|
$youtube-color : #ff3333;
|
||||||
|
|
||||||
/* links */
|
/* links */
|
||||||
$linkcolor : #343434;
|
$link-color : #343434;
|
||||||
$link-color : $linkcolor;
|
$link-color-hover : darken($link-color, 10);
|
||||||
$linkcolorhover : darken($linkcolor, 10);
|
$link-color-visited : lighten($link-color-hover, 20);
|
||||||
$linkcolorvisited : lighten($linkcolorhover, 20);
|
$link-color-focus : darken($link-color-visited, 10);
|
||||||
$linkcolorfocus : darken($linkcolorvisited, 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
|
Breakpoints
|
||||||
|
|
@ -67,8 +79,8 @@ $border-radius : 4px;
|
||||||
|
|
||||||
@include breakpoint-set("to ems", true);
|
@include breakpoint-set("to ems", true);
|
||||||
|
|
||||||
$micro : 480px;
|
$micro : 480px;
|
||||||
$small : 600px;
|
$small : 600px;
|
||||||
$medium : 768px;
|
$medium : 768px;
|
||||||
$large : 992px;
|
$large : 992px;
|
||||||
$x-large : 1382px;
|
$x-large : 1382px;
|
||||||
|
|
@ -9,13 +9,15 @@
|
||||||
|
|
||||||
@import "vendor/breakpoint/breakpoint"; // media query mixins
|
@import "vendor/breakpoint/breakpoint"; // media query mixins
|
||||||
@import "variables";
|
@import "variables";
|
||||||
@import "grid";
|
|
||||||
@import "mixins";
|
@import "mixins";
|
||||||
@import "normalize";
|
|
||||||
@import "site";
|
@import "reset";
|
||||||
@import "typography";
|
@import "base";
|
||||||
|
@import "utilities";
|
||||||
|
@import "buttons";
|
||||||
|
@import "toc"; // table of contents
|
||||||
|
|
||||||
@import "syntax";
|
@import "syntax";
|
||||||
@import "elements";
|
|
||||||
@import "forms";
|
@import "forms";
|
||||||
@import "page";
|
@import "page";
|
||||||
@import "vendor/font-awesome/font-awesome";
|
@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_previous: "Previous"
|
||||||
pagination_next: "Next"
|
pagination_next: "Next"
|
||||||
toc_label: "Overview"
|
toc_label: "Overview"
|
||||||
|
ext_link_label: "Direct Link"
|
||||||
share_on: "Share on"
|
share_on: "Share on"
|
||||||
date_label: "Last Updated:"
|
date_label: "Last Updated:"
|
||||||
related_label: "You May Also Enjoy"
|
related_label: "You May Also Enjoy"
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,6 @@
|
||||||
<div class="social-share">
|
<div class="social-share">
|
||||||
<h4>{{ site.data.ui-text[site.locale].share_on }}</h4>
|
<h4>{{ site.data.ui-text[site.locale].share_on }}</h4>
|
||||||
<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>
|
||||||
<li>
|
<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://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>
|
<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>
|
||||||
</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>
|
|
||||||
</div><!-- /.social-share -->
|
</div><!-- /.social-share -->
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<section id="table-of-contents" class="toc">
|
<section 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>
|
<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>
|
||||||
<div id="drawer" markdown="1">
|
<nav markdown="1">
|
||||||
* Auto generated table of contents
|
* Auto generated table of contents
|
||||||
{:toc}
|
{:toc .toc__menu}
|
||||||
</div>
|
</nav>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -4,22 +4,19 @@ layout: default
|
||||||
|
|
||||||
{% include base_path %}
|
{% 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.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.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 %}
|
{% if page.modified %}<meta itemprop="dateModified" content="{{ page.modified | date: "%B %d, %Y" }}">{% endif %}
|
||||||
|
|
||||||
<div class="article-wrap">
|
<div class="article-wrap">
|
||||||
<header>
|
<header>
|
||||||
{% if page.link %}
|
<h1 itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1>
|
||||||
<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 %}
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section itemprop="text">
|
<section itemprop="text">
|
||||||
{{ content }}
|
{{ content }}
|
||||||
|
{% if page.link %}<div><a href="{{ page.link }}" class="btn">{{ site.data.ui-text[site.locale].ext_link_label }}</a></div>{% endif %}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue