Permalink
Browse files

fix(colors): putting a dash in and adding the typography

  • Loading branch information...
ddprrt committed Jul 21, 2016
1 parent 4b7eb4c commit e51abf766b3feec0d1516f9f86b06c064f56594e
View
@@ -17,11 +17,11 @@ body {
a {
text-decoration: none;
color: $blue500;
color: $blue-500;
transition: color 100ms ease-out;
}
a:hover {
color: $blue600;
color: $blue-600;
text-decoration: underline;
}
View
@@ -1,28 +1,251 @@
h1,
h2,
h3,
h4 {
margin-top: 0;
font-weight: 300;
@import "../common/variables";
/**
* Typecsset
*
* Typecsset is a small, unopinionated library for creating beautifully set type
* on the web. Typecsset gives perfect vertical rhythm at any configurable font
* size, as well as many other typographical niceties.
*/
//------------------------------------\\
// SETTINGS
//------------------------------------\\
// Typecsset needs some variables setting before it can get started. Some of
// these variables can be overriden by developers, others need to remain
// untouched because Typecsset will assign them automatically based on what
// you’ve told it.
// What would you like your base font-size to be? Define in pixels; the library
// will convert measurements to the most appropriate units (rems or unitless).
$typecsset-base-font-size: 16px !default;
$typecsset-base-line-height: 24px !default;
// Heading sizes
$typecsset-h1-size: (xs: 32px, sm: 36px, md: 40px, lg: 44px, xl: 48px);
$typecsset-h2-size: (xs: 24px, sm: 28px, md: 32px, lg: 32px, xl: 32px);
$typecsset-h3-size: (xs: 20px, sm: 24px, md: 24px, lg: 24px, xl: 24px);
$typecsset-h4-size: 16px !default;
$typecsset-h5-size: 16px !default;
$typecsset-h6-size: 16px !default;
$typecsset-lead-size: 18px !default;
$typecsset-meta-size: 12px !default;
// Would you like indented (rather than spaced) paragraph delimiting?
$typecsset-indented-paragraphs: false !default;
// Would you like to show a baseline grid? This is handy during development.
$typecsset-show-baseline: false !default;
// Do not modify these variables; they are internal settings upon which the
// library depends.
$typecsset-magic-number: $typecsset-base-line-height;
$typecsset-magic-ratio: $typecsset-base-line-height / $typecsset-base-font-size;
//------------------------------------\\
// TOOLS
//------------------------------------\\
// Typecsset has a number of its own tools which it uses to generate its CSS
// more efficiently.
// Quickly generate a font-size in rems, with a pixel fallback, based on the
// value we pass into the mixin, e.g.:
//
// h1 {
// @include typecsset-font-size(24px);
// }
//
@mixin typecsset-font-size($font-size, $line-height: true) {
font-size: $font-size;
font-size: ($font-size / $typecsset-base-font-size) * 1rem;
@if $line-height == true {
line-height: ceil($font-size / $typecsset-base-line-height) * ($typecsset-base-line-height / $font-size);
}
}
// Space elements by an amount based on your magic number. Pass in the property
// to be indented as a paramater, e.g.:
//
//
@mixin typecsset-space($property) {
#{$property}: 2 * $typecsset-magic-ratio + rem;
}
// A small, internally-used function to remove the units from a given value.
@function typecsset-strip-units($number) {
@return $number / ($number * 0 + 1);
}
/*------------------------------------*\
#SHARED
\*------------------------------------*/
/**
* A lot of elements in Typecsset need to share some declarations (mainly for
* vertical rhythm), so we `@extend` some silent classes.
*/
%typecsset-reset {
margin: 0;
padding: 0;
}
%typecsset-vertical-rhythm {
@extend %typecsset-reset;
margin-bottom: $typecsset-magic-ratio + rem;
}
/*------------------------------------*\
#BASE
\*------------------------------------*/
/**
* 1. Set the base element’s `font-size` to the value of your choosing. Set in
* ems, assuming a browser default of 16px.
* 2. Work out the unitless `line-height` for your project based around your
* desired `line-height` (defined previously in pixels), and your project’s
* base font size.
*/
html {
font-size: $typecsset-base-font-size / 16px + em; /* [1] */
line-height: $typecsset-base-line-height / $typecsset-base-font-size; /* [2] */
}
/*------------------------------------*\
#HEADINGS
\*------------------------------------*/
h1 {
font-size: 2rem;
font-weight: 300;
@extend %typecsset-vertical-rhythm;
@include typecsset-font-size(map-get($typecsset-h1-size, xs));
}
h2 {
font-size: 1.8rem;
font-weight: 300;
@extend %typecsset-vertical-rhythm;
@include typecsset-font-size(map-get($typecsset-h2-size, xs));
}
h3 {
font-size: 1.5rem;
font-weight: 300;
@extend %typecsset-vertical-rhythm;
@include typecsset-font-size(map-get($typecsset-h3-size, xs));
}
@media (min-width: $screen-sm) {
h1 {
@include typecsset-font-size(map-get($typecsset-h1-size, sm));
}
h2 {
@include typecsset-font-size(map-get($typecsset-h2-size, sm));
}
h3 {
@include typecsset-font-size(map-get($typecsset-h3-size, sm));
}
}
@media (min-width: $screen-md) {
h1 {
@include typecsset-font-size(map-get($typecsset-h1-size, md));
}
h2 {
@include typecsset-font-size(map-get($typecsset-h2-size, md));
}
h3 {
@include typecsset-font-size(map-get($typecsset-h3-size, md));
}
}
@media (min-width: $screen-lg) {
h1 {
@include typecsset-font-size(map-get($typecsset-h1-size, lg));
}
h2 {
@include typecsset-font-size(map-get($typecsset-h2-size, lg));
}
h3 {
@include typecsset-font-size(map-get($typecsset-h3-size, lg));
}
}
@media (min-width: $screen-lg) {
h1 {
@include typecsset-font-size(map-get($typecsset-h1-size, xl));
}
h2 {
@include typecsset-font-size(map-get($typecsset-h2-size, xl));
}
h3 {
@include typecsset-font-size(map-get($typecsset-h3-size, xl));
}
}
h4,
h5,
h6 {
@extend %typecsset-vertical-rhythm;
@include typecsset-font-size($typecsset-h4-size);
}
/*------------------------------------*\
#LISTS
\*------------------------------------*/
ul,
ol {
margin-left: 1rem;
@extend %typecsset-vertical-rhythm;
}
h4 {
font-size: 1.3rem;
li > ul,
li > ol {
margin-bottom: 0;
}
em,
strong {
font-weight: bold;
/*------------------------------------*\
#PARAGRAPHS
\*------------------------------------*/
p {
@extend %typecsset-vertical-rhythm;
}
Oops, something went wrong.

0 comments on commit e51abf7

Please sign in to comment.