You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

396 lines
7.5 KiB

/* ==========================================================================
Base
========================================================================== */
/*
Typography
========================================================================== */
body {
font-family: $base-font;
color: $text-color;
@include font-size(16);
}
p {
@include font-size(18,yes,28);
}
li {
@include font-size(16,12,24);
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
font-family: $heading-font;
text-rendering: optimizeLegibility; // Fix the character spacing for headings
}
h1 {
@include font-size(36);
}
h2 {
@include font-size(32);
}
h3 {
@include font-size(28);
}
h4 {
@include font-size(24);
}
h5 {
@include font-size(20);
}
h6 {
@include font-size(18);
}
/* Underlined text */
u,
ins {
text-decoration: none;
border-bottom: 1px solid $text-color;
}
/* Links */
a {
color: $link-color;
&:hover {
color: darken($link-color, 20);
}
&:focus {
@extend %tab-focus;
}
&:hover,
&:active {
outline: 0;
}
}
/* Quoted text */
blockquote {
padding-left: $gutter;
padding-right: $gutter;
border-left: 6px solid $info-color;
p {
font-family: $alt-font;
@include font-size(24);
}
cite {
font-family: $base-font;
font-weight: 700;
font-style: normal;
@include font-size(18);
}
}
// Code
tt, code, kbd, samp, pre {
font-family: $code-font;
}
pre {
overflow-x: auto; // add scrollbars to wide code blocks
}
p code,
li code {
@include font-size(16,no);
color: $text-color;
white-space: nowrap;
margin: 0 2px;
padding: 0 5px;
border: 1px solid $border-color;
background-color: lighten($primary-color, 95);
border-radius: $border-radius;
}
/*
Media and embeds
========================================================================== */
/* Figures and images */
figure {
margin-left: -1 * $gutter;
margin-right: -1 * $gutter;
// full width figures on small screens
@include media($small) {
margin-left: 0;
margin-right: 0;
position: relative;
}
@include clearfix;
img,
.fluid-width-video-wrapper,
.palette {
margin-bottom: (0px + $doc-line-height) / 2;
// margin-bottom: (0rem + ($doc-line-height / $doc-font-size)) / 2;
}
a {
img {
/* Image hover animation */
@include transition(box-shadow 0.3s);
&:hover {
box-shadow: 0 0 10px rgba($black, .20);
}
}
}
&.half {
@include outer-container;
@include media($small) {
a,
> img {
@include span-columns(6);
@include omega(2n);
}
figcaption {
clear: left;
}
}
}
&.third {
@include outer-container;
@include media($small) {
a,
> img {
@include span-columns(4);
@include omega(3n);
}
figcaption {
clear: left;
}
}
}
}
/* Figure captions */
figcaption {
padding-left: $gutter;
padding-right: $gutter;
@include media($small) {
padding-left: 0;
padding-right: 0;
}
font-family: $alt-font;
@include font-size(14,yes);
color: $caption-color;
clear: both;
a {
color: $caption-color;
text-decoration: none;
border-bottom: 1px dotted $caption-color;
&:hover {
border-bottom-style: solid;
}
}
}
.half,
.third {
& figcaption { /* Remove caption indents */
padding-left: 0;
padding-right: 0;
}
}
/* Fix IE9 SVG bug */
svg:not(:root) {
overflow: hidden;
}
/*
Tables
========================================================================== */
table {
border-collapse: collapse;
margin: ((0px + $doc-line-height) / 2) 0;
margin: ((0rem + ($doc-line-height / $doc-font-size)) / 2) 0;
width: 100%;
}
tbody {
tr:hover > td, tr:hover > th {
background-color: $table-hover-color;
}
}
thead {
tr:first-child td {
border-bottom: 2px solid $table-border-color;
}
}
th {
padding: (0px + $doc-line-height) / 2;
padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
font-family: $alt-font;
font-weight: bold;
text-align: left;
background-color: $table-header-color;
border-bottom: 1px solid darken($border-color, 15%);
}
td {
border-bottom: 1px solid $border-color;
padding: (0px + $doc-line-height) / 2;
padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
}
tr, td, th {
vertical-align: middle;
}
/*
Horizontal rules
========================================================================== */
hr {
display: block;
position: relative;
margin: 0px + (2 * $doc-line-height) 0;
margin: 0rem + ((2 * $doc-line-height) / $doc-font-size) 0;
padding: 0;
height: 5px;
border: 0;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 2 * $column;
height: 1px;
background: $border-color;
}
}
/*
Forms
========================================================================== */
fieldset {
background: lighten($border-color, 10);
border: 1px solid $border-color;
margin-bottom: 0px + $doc-line-height;
margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
padding: $gutter;
border-radius: $border-radius;
}
input,
label,
select {
display: block;
@include font-size($form-font-size,no);
}
label {
font-weight: bold;
font-family: $alt-font;
margin-bottom: (0px + $doc-line-height) / 4;
margin-bottom: (0rem + ($doc-line-height / $doc-font-size)) / 4;
&.required:after {
content: "*";
}
abbr {
display: none;
}
}
textarea,
#{$all-text-inputs},
select,
select[multiple=multiple] {
@include box-sizing(border-box);
@include transition(border-color);
background-color: white;
border-radius: $form-border-radius;
border: 1px solid $form-border-color;
box-shadow: $form-box-shadow;
font-family: $form-font-family;
font-size: $form-font-size;
margin-bottom: (0px + $doc-line-height) / 2;
margin-bottom: (0rem + ($doc-line-height / $doc-font-size)) / 2;
padding: ((0px + $doc-line-height) / 3) ((0px + $doc-line-height) / 3);
padding: ((0rem + ($doc-line-height / $doc-font-size)) / 3) ((0rem + ($doc-line-height / $doc-font-size)) / 3);
width: 100%;
&:hover {
border-color: $form-border-color-hover;
}
&:focus {
border-color: $form-border-color-focus;
box-shadow: $form-box-shadow-focus;
outline: none;
}
}
textarea {
resize: vertical;
}
input[type="search"] {
@include appearance(none);
}
input[type="checkbox"], input[type="radio"] {
display: inline;
margin-right: (0px + $doc-line-height) / 4;
margin-right: (0rem + ($doc-line-height / $doc-font-size)) / 4;
}
input[type="file"] {
width: 100%;
}
select {
width: auto;
max-width: 100%;
margin-bottom: 0px + $doc-line-height;
margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
}
form button,
input[type="submit"] {
@extend .btn;
@include appearance(none);
cursor: pointer;
user-select: none;
vertical-align: middle;
white-space: nowrap;
}
/*
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, .highlight {
@include transition (color 0.2s ease-out, opacity 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out);
}