1 #permalink Settings
Global variables
1.1 #1.colors Colors
Color variables and values used on the site. Local color variables should be used only in _settings.colors.scss.
Example
Brand
- Thunder
- $local-thunder
- Ash
- $local-ash
- Smoke
- $local-smoke
- Gold
- $local-gold
- Copper
- $local-copper
- Linnen
- $local-linnen
- purple
- $local-purple
Text
- Text
- $color-text
- Weak Text
- $color-text-weak
- Strong Text
- $color-text-strong
- Invert Text
- $color-text-invert
- Weak Invert Text
- $color-text-weak-invert
- Strong Invert Text
- $color-text-strong-invert
Links
- Link
- $color-link
- Focused Link
- $color-link-focus
- Hovered Link
- $color-link-hover
- Visited Link
- $color-link-visited
Alternate links
- Alternate Link
- $color-link-alt
- Alternate focused Link
- $color-link-alt-focus
- Alternate hovered Link
- $color-link-alt-hover
- Alternate visited Link
- $color-link-alt-visited
Shades of grey
- Grey 10%
- $color-grey-10
- Grey 20%
- $color-grey-20
- Grey 30%
- $color-grey-30
- Grey 40%
- $color-grey-40
- Grey 50%
- $color-grey-50
- Grey 60%
- $color-grey-60
- Grey 70%
- $color-grey-70
- Grey 80%
- $color-grey-80
- Grey 90%
- $color-grey-90
- Grey 100%
- $color-grey-100
Borders
- Weak Border
- $color-border-weak
- Normal Border
- $color-border-normal
- Strong Border
- $color-border-strong
Buttons
- Grey 10%
- $color-grey-10
Forms
- Regular Input
- $color-input-regular
- Focus Input
- $color-input-focus
- Success Input
- $color-input-success
- Error Input
- $color-input-error
- Required Input
- $color-input-required
- Checkbox
- $color-input-checkbox
- Active Checkbox
- $color-input-checkbox-active
- Radio
- $color-input-radio
- Active Radio
- $color-input-radio-active
<h3 class="cc-title">Brand</h3>
<div class="cc-group">
<dl class="cc cc--var-local-thunder">
<dt class="cc__title">Thunder</dt>
<dd class="cc__variable">$local-thunder</dd>
</dl>
<dl class="cc cc--var-local-ash">
<dt class="cc__title">Ash</dt>
<dd class="cc__variable">$local-ash</dd>
</dl>
<dl class="cc cc--var-local-smoke">
<dt class="cc__title">Smoke</dt>
<dd class="cc__variable">$local-smoke</dd>
</dl>
<dl class="cc cc--var-local-gold">
<dt class="cc__title">Gold</dt>
<dd class="cc__variable">$local-gold</dd>
</dl>
<dl class="cc cc--var-local-copper">
<dt class="cc__title">Copper</dt>
<dd class="cc__variable">$local-copper</dd>
</dl>
<dl class="cc cc--var-local-linnen">
<dt class="cc__title">Linnen</dt>
<dd class="cc__variable">$local-linnen</dd>
</dl>
<dl class="cc cc--var-local-purple">
<dt class="cc__title">purple</dt>
<dd class="cc__variable">$local-purple</dd>
</dl>
</div>
<h3 class="cc-title">Text</h3>
<div class="cc-group">
<dl class="cc cc--var-color-text">
<dt class="cc__title">Text</dt>
<dd class="cc__variable">$color-text</dd>
</dl>
<dl class="cc cc--var-color-text-weak">
<dt class="cc__title">Weak Text</dt>
<dd class="cc__variable">$color-text-weak</dd>
</dl>
<dl class="cc cc--var-color-text-strong">
<dt class="cc__title">Strong Text</dt>
<dd class="cc__variable">$color-text-strong</dd>
</dl>
<dl class="cc cc--var-color-text-invert">
<dt class="cc__title">Invert Text</dt>
<dd class="cc__variable">$color-text-invert</dd>
</dl>
<dl class="cc cc--var-color-text-weak-invert">
<dt class="cc__title">Weak Invert Text</dt>
<dd class="cc__variable">$color-text-weak-invert</dd>
</dl>
<dl class="cc cc--var-color-text-strong-invert">
<dt class="cc__title">Strong Invert Text</dt>
<dd class="cc__variable">$color-text-strong-invert</dd>
</dl>
</div>
<h3 class="cc-title">Links</h3>
<div class="cc-group">
<dl class="cc cc--var-color-link">
<dt class="cc__title">Link</dt>
<dd class="cc__variable">$color-link</dd>
</dl>
<dl class="cc cc--var-color-link-focus">
<dt class="cc__title">Focused Link</dt>
<dd class="cc__variable">$color-link-focus</dd>
</dl>
<dl class="cc cc--var-color-link-hover">
<dt class="cc__title">Hovered Link</dt>
<dd class="cc__variable">$color-link-hover</dd>
</dl>
<dl class="cc cc--var-color-link-visited">
<dt class="cc__title">Visited Link</dt>
<dd class="cc__variable">$color-link-visited</dd>
</dl>
</div>
<h3 class="cc-title">Alternate links</h3>
<div class="cc-group">
<dl class="cc cc--var-color-link-alt">
<dt class="cc__title">Alternate Link</dt>
<dd class="cc__variable">$color-link-alt</dd>
</dl>
<dl class="cc cc--var-color-link-alt-focus">
<dt class="cc__title">Alternate focused Link</dt>
<dd class="cc__variable">$color-link-alt-focus</dd>
</dl>
<dl class="cc cc--var-color-link-alt-hover">
<dt class="cc__title">Alternate hovered Link</dt>
<dd class="cc__variable">$color-link-alt-hover</dd>
</dl>
<dl class="cc cc--var-color-link-alt-visited">
<dt class="cc__title">Alternate visited Link</dt>
<dd class="cc__variable">$color-link-alt-visited</dd>
</dl>
</div>
<h3 class="cc-title">Shades of grey</h3>
<div class="cc-group">
<dl class="cc cc--var-color-grey-10">
<dt class="cc__title">Grey 10%</dt>
<dd class="cc__variable">$color-grey-10</dd>
</dl>
<dl class="cc cc--var-color-grey-20">
<dt class="cc__title">Grey 20%</dt>
<dd class="cc__variable">$color-grey-20</dd>
</dl>
<dl class="cc cc--var-color-grey-30">
<dt class="cc__title">Grey 30%</dt>
<dd class="cc__variable">$color-grey-30</dd>
</dl>
<dl class="cc cc--var-color-grey-40">
<dt class="cc__title">Grey 40%</dt>
<dd class="cc__variable">$color-grey-40</dd>
</dl>
<dl class="cc cc--var-color-grey-50">
<dt class="cc__title">Grey 50%</dt>
<dd class="cc__variable">$color-grey-50</dd>
</dl>
<dl class="cc cc--var-color-grey-60">
<dt class="cc__title">Grey 60%</dt>
<dd class="cc__variable">$color-grey-60</dd>
</dl>
<dl class="cc cc--var-color-grey-70">
<dt class="cc__title">Grey 70%</dt>
<dd class="cc__variable">$color-grey-70</dd>
</dl>
<dl class="cc cc--var-color-grey-80">
<dt class="cc__title">Grey 80%</dt>
<dd class="cc__variable">$color-grey-80</dd>
</dl>
<dl class="cc cc--var-color-grey-90">
<dt class="cc__title">Grey 90%</dt>
<dd class="cc__variable">$color-grey-90</dd>
</dl>
<dl class="cc cc--var-color-grey-100">
<dt class="cc__title">Grey 100%</dt>
<dd class="cc__variable">$color-grey-100</dd>
</dl>
</div>
<h3 class="cc-title">Borders</h3>
<div class="cc-group">
<dl class="cc cc--var-color-border-weak">
<dt class="cc__title">Weak Border</dt>
<dd class="cc__variable">$color-border-weak</dd>
</dl>
<dl class="cc cc--var-color-border-normal">
<dt class="cc__title">Normal Border</dt>
<dd class="cc__variable">$color-border-normal</dd>
</dl>
<dl class="cc cc--var-color-border-strong">
<dt class="cc__title">Strong Border</dt>
<dd class="cc__variable">$color-border-strong</dd>
</dl>
</div>
<h3 class="cc-title">Buttons</h3>
<div class="cc-group">
<dl class="cc cc--var-color-grey-10">
<dt class="cc__title">Grey 10%</dt>
<dd class="cc__variable">$color-grey-10</dd>
</dl>
</div>
<h3 class="cc-title">Forms</h3>
<div class="cc-group">
<dl class="cc cc--var-color-input-regular">
<dt class="cc__title">Regular Input</dt>
<dd class="cc__variable">$color-input-regular</dd>
</dl>
<dl class="cc cc--var-color-input-focus">
<dt class="cc__title">Focus Input</dt>
<dd class="cc__variable">$color-input-focus</dd>
</dl>
<dl class="cc cc--var-color-input-success">
<dt class="cc__title">Success Input</dt>
<dd class="cc__variable">$color-input-success</dd>
</dl>
<dl class="cc cc--var-color-input-error">
<dt class="cc__title">Error Input</dt>
<dd class="cc__variable">$color-input-error</dd>
</dl>
<dl class="cc cc--var-color-input-required">
<dt class="cc__title">Required Input</dt>
<dd class="cc__variable">$color-input-required</dd>
</dl>
<dl class="cc cc--var-color-input-checkbox">
<dt class="cc__title">Checkbox</dt>
<dd class="cc__variable">$color-input-checkbox</dd>
</dl>
<dl class="cc cc--var-color-input-checkbox-active">
<dt class="cc__title">Active Checkbox</dt>
<dd class="cc__variable">$color-input-checkbox-active</dd>
</dl>
<dl class="cc cc--var-color-input-radio">
<dt class="cc__title">Radio</dt>
<dd class="cc__variable">$color-input-radio</dd>
</dl>
<dl class="cc cc--var-color-input-radio-active">
<dt class="cc__title">Active Radio</dt>
<dd class="cc__variable">$color-input-radio-active</dd>
</dl>
</div>1.2 #1.typography Typography
Main fonts for the WordCamp Europe 2016 theme are Ingra and Mostra Nuova Alt D.
Mostra Nuova Alt D is used as the font for WordCamp Europe logo and for all headlines.
Ingra is used for body text, buttons, forms etc.
Fonts are served from Typekit.