"This is a fancy blockquote. Not sure if we'll have any particular use for it, but hey, here it is."
This is an H1. It is reserved for the logo type.
This is an H2. It is reserved for the value proposition on the homepage.
This is an H3. It is the main content header.
This is an H4. I'm not sure specifically what we'll use it for.
This is an H5. I'm not sure specifically what we'll use it for.
The current highlight colors are marked below, with shades and tints of each so we can maintain a consistent brand even if a specific use case necessitates a darker or lighter color.
In most simple cases, however, a direct modification of the highlight color should be used for simplicity and consistency. Example: Links are $primary, and the :hover and :focus states are $primary - 68.
$primary + 136
$primary + 68
$primary + 34
$primary + 17
$primary - 17
$primary - 34
$primary - 68
$primary - 136
$highlight + 136
$highlight + 68
$highlight + 34
$highlight + 17
$highlight - 17
$highlight - 34
$highlight - 68
$highlight - 136
I'm just using FontAwesome for the time being. When we actually take the time to design a new logo and build out branding so we know what a "FontDarwin" will need, we'll create it with Font Custom.
$serif-font-stack: 'Cardo', Georgia, Times, 'Times New Roman', serif;
@mixin boxshadow (Accepts two arguments, controlling the opacity of the two shadows in the mixin. Both default to "0.125".) A darker shadow should only be used if necessary to create greater contrast on a busy background (e.g., the search bar on the homepage).
@mixin background-rgba (Accepts two arguments: a color hex value and an opacity. The opacity defaults to "0.9".)
Media Breaks, Responsive Columns, and Offsets
The break points are:
The responsive grid is based on a responsive grid system with sixteen columns. The default resolution is between 960px and 1279px, to accommodate the IE8 lowest common demoninator.