hazdev-template/docs/scssVariables.md

Template for HazDev web sites.

Template SCSS Variables
=======================

The most commonly configured SCSS variables are:
- [$banner-image](#banner-image)
- [$banner-background-color](#banner-background-color)
- [$banner-title](#banner-title)
- [$primary](#primary)

See [Site Configuration](siteConfiguration.md) for information about configuring these variables.


## Template Header

<img src="images/templateHeader.png" alt="image of template header"/>

### $banner-image

The banner image to the right of the USGS logo.
Default is '/theme/images/usgs-banner.jpg'.

### $banner-background-color

The background color of the banner section.
Default is #000000.

### $banner-title

Name of site.
Default is 'U.S. Geological Survey'.

### $primary

Background color for [$banner-title](#banner-title).
Default is #205493.

### $primary-text-color

Text color for [$banner-title](#banner-title).
Default is #ffffff.


## Section Navigation

<img src="images/navigationExample.png" alt="image of section navigation"/>

### $secondary-text-color

Text color for section navigation.
Default is #333333.

### $secondary-lighter

Background color for section navigation.
Hover text color for section navigation.
Default is #f4f4f4.

### $secondary

Border color for section navigation.
Default is #e0e0e0.


## Site Navigation

<img src="images/siteNavigation.png" alt="image of site navigation"/>

### $primary-text-color

Text color for site navigation.
Default is #ffffff.

### $primary

Background color for site navigation.
Default is #205493.

### $primary-darker

Hover background color for site navigation.
Default is #112e51.


## General Layout

### $spacing

Used as padding and margin of many elements.
Default is 1em.

### $breakpoint-stacking

Width of page when content formatted using the flexible grid starts to stack.
Default is 560px.

### $breakpoint-offcanvas

Width of page when OffCanvas is disabled.
Default is 768px.


## Colors

### $text-color

Default is #333333.

### $gray

Default is #e0e0e0.

### $gray-lighter

Default is #0071bc.

### $gray-darker

Default is #757575.

## Fonts

### $font-code

Default is Consolas, monospace, serif.

### $font-sans

Default is 'Source Sans Pro', Helvetica, Arial, sans-serif.

### $font-serif

Default is 'Merriweather', Times, serif.

### $font-bold

Default is 700.

### $font-normal

Default is 400.

### $font-thin

Default is 300.


## Link

### $link-color

Default link color is #306ac2

### $link-color-active

Default active link color is #c23030