Variablen

Das Aussehen des Themes wird maßgeblich über eine Vielzahl von SASS-Variablen gesteuert:

wiederkehrende und Basis-Variablen sind in der _variables.scss zu finden
objekt- und komponentenspezifische Variablen sind im Kopfbereich der jeweiligen Dateien (z.B. _navigation.scss) hinterlegt
weitere Variablen werden in dem zugrundeliegenden Basis-Framework Nutshell verwendet und können über die _variables.scss oder die jeweiligen objektspezifischen Dateien überschrieben werden.

Farbschema

--color-blue
--color-brand-primary
--color-highlight
--links-color
--button-background

--color-blue-darker
--color-brand-secondary
--article-dark-background

--color-gray-dark
--color-text
--article-dark-background

--color-gray-light
--color-tint
--article-tint-background

--color-gray-lighter
--color-page-background
--nav-mobile-submenu-background

--color-white
--color-text-inverted
--button-color

--base-overlay-background
rgba(0,0,0,0.7)

--base-overlay-background-2
rgba(255, 255, 255, 0.2)

Typografie

--base-font-size: 1rem;
--base-line-height: 1.625;

--base-font-size-xs: 0.875rem;
--base-font-size-lg: 1.125rem;
--base-font-size-xl: 1.25rem;

--base-font-family-1: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
--base-font-family-2: 'Raleway', 'Helvetica Neue', sans-serif;

--base-font-family: var(--base-font-family-1);

Abstände

--base-spacing-unit: 1rem;

Variablen aus der Nutshell:

--base-spacing-unit-xs: calc(--base-spacing-unit / 4);
--base-spacing-unit-sm: calc(--base-spacing-unit / 2);
--base-spacing-unit-lg: calc(--base-spacing-unit * 2);
--base-spacing-unit-xl: calc(--base-spacing-unit * 4);

Rahmen

--base-border-radius: 4px;
--base-border-width: 1px;
--base-border-color: #D0D0D0;

Variablen aus der Nutshell:

--base-border: var(--base-border-width) solid var(--base-border-color);