scssVariables.md

Template SCSS Variables

The most commonly configured SCSS variables are:

• $banner-image
• $banner-background-color
• $banner-title
• $primary

See Site Configuration for information about configuring these variables.

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. Default is #205493.

$primary-text-color

Text color for $banner-title. Default is #ffffff.

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

$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