Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
193 lines (159 sloc) 4.65 KB
//====================================================
// Typography
//====================================================
@font-face { font-family: 'Office Code Pro'; src: url('../fonts/OfficeCodePro-Regular.woff'); }
$base-font: 'Helvetica Neue', Helvetica, sans-serif !default;
$mono-font: 'Office Code Pro', Monaco, Consolas, monospace !default;
$base-font-size: 1rem !default;
$base-line-height: 1.6 !default;
$h1: $base-font-size * 2.25 !default;
$h2: $base-font-size * 1.75 !default;
$h3: $base-font-size * 1.5 !default;
$h4: $base-font-size * 1.25 !default;
$h5: $base-font-size * 1.125 !default;
$h6: $base-font-size !default;
::selection {
background: $black;
color: $accent;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
margin-bottom: 1rem;
}
h1, .h1 { font-size: $h1; line-height: 1.2; }
h2, .h2 { font-size: $h2; line-height: 1.3; }
h3, .h3 { font-size: $h3; line-height: 1.4; }
h4, .h4 { font-size: $h4; line-height: 1.5; }
h5, .h5 { font-size: $h5; }
h6, .h6 { font-size: $h6; }
body {
font-size: $base-font-size;
background-color: $white;
color: $black;
font-family: $base-font;
line-height: $base-line-height;
}
a,
.link {
color: $accent;
text-decoration: none;
transition: color 200ms;
cursor: pointer;
}
a:hover {
color: $accent;
}
h1 a, .h1 a,
h2 a, .h2 a,
h3 a, .h3 a {
color: inherit;
text-decoration: underline;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
//====================================================
// Lists
//====================================================
li ul, li ol { margin: 0 1rem; }
ul { list-style-type: disc; }
ol { list-style-type: decimal; }
ol ol { list-style: lower-alpha; }
ol ol ol { list-style: lower-roman; }
ol ol ol ol { list-style: lower-alpha; }
//====================================================
// Code
//====================================================
pre, code, samp, style { font-family: $mono-font; }
pre {
background-color: $black;
color: $white;
font-size: 0.875rem;
padding: $padding * 2;
overflow: auto;
}
pre code {
background-color: inherit;
border-radius: 0;
color: inherit;
padding: 0;
}
code {
background-color: $silver;
border-radius: 3px;
font-size: 0.875rem;
padding: 0.15em 0.4em;
}
.bg-silver code,
.bg-grey code {
background-color: $black;
color: $white;
}
hr {
border: 0;
border-bottom: 1px solid fade-out($trueblack, 0.9);
}
//====================================================
// Text Length & Alignment
//====================================================
.optimal-length { max-width: 70ch; }
.text-align-center { text-align: center; }
.text-align-left { text-align: left; }
.text-align-right { text-align: right; }
//====================================================
// Styles & Transforms
//====================================================
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.italic { font-style: italic; }
.tracked { letter-spacing: 4px; }
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }
.list-style-none { list-style-type: none; }
.list-inline li { display: inline; }
.thin {font-weight: 200; }
.regular {font-weight: 400; }
.bold {font-weight: 700; }
//====================================================
// Styles & Transforms
//====================================================
@include large {
.two-columns { column-count: 2; }
.three-columns { column-count: 3; }
.four-columns { column-count: 4; }
.five-columns { column-count: 5; }
}
//====================================================
// Letter Spacing
//====================================================
.ls0 { letter-spacing: 0px !important; }
.ls1 { letter-spacing: 1px; }
.ls2 { letter-spacing: 2px; }
.ls3 { letter-spacing: 3px; }
.ls4 { letter-spacing: 4px; }
.ls5 { letter-spacing: 5px; }
//====================================================
// Line-Height
//====================================================
.lh0 { line-height: 0; }
.lh1 { line-height: 1; }
.lh2 { line-height: 1.2; }
.lh3 { line-height: 1.3; }
.lh4 { line-height: 1.4; }
.lh5 { line-height: 1.5; }
.lh6 { line-height: 1.6; }
.lh7 { line-height: 1.7; }
.lh8 { line-height: 1.8; }
.lh9 { line-height: 1.9; }
//====================================================
// Font Sizing
//====================================================
.fs-base { font-size: $base-font-size; }
.fs-xsmall { font-size: 50%; }
.fs-small { font-size: 75%; }
.fs-large { font-size: 125%; }
.fs-xlarge { font-size: 150%; }
.fs-xxlarge { font-size: 175%; }
.fs-double { font-size: 200%; }