{# ========================================================================= #}
{# :: Config #}
{# ========================================================================= #}
{#
  This file contains the typography defined in the styleguide. In this
  file we show the different types of ways to style a heading (h1, ... h6) and
  normal paragraph styles.

  The families variable contains the name, weight and style of the font-family
  applied. Write this in a css-like manner.

  The styles variable contains the type as the key and as a value the styles
  applied to that key. Write this in a css-like manner.

  IMPORTANT!!!
  It is of uttermost importance that this file contains the same data as defined
  in scss/settings/_typography.scss and scss/quarks/_typography.scss.
  These values must be similar!!!
#}

{# ========================================================================= #}
{# :: Settings & variables #}
{# ========================================================================= #}

{# ========================================================================= #}
{# :: Families #}
{# ========================================================================= #}
{% set families = [
  { name: "Baloo",
    style: "font-family: 'Baloo'; font-weight: 400;"
  },
  { name: "Roboto",
    style: "font-family: 'Roboto'; font-weight: 400;"
  }
] %}

{# ========================================================================= #}
{# :: Styles #}
{# ========================================================================= #}
{% set styles = {
  h1: {
    "font-family": "Baloo",
    "font-weight": "700",
    "font-size": "52px",
    "line-height": "66px"
  },
  h2: {
    "font-family": "Baloo",
    "font-size": "42px",
    "line-height": "52px",
    "font-weight": "200"
  },
  h3: {
    "font-family": "Baloo",
    "font-size": "28px",
    "line-height": "38px",
    "font-weight": "200"
  },
  h4: {
    "font-family": "Baloo",
    "font-size": "21px",
    "line-height": "31px",
    "font-weight": "200"
  },
  h5: {
    "font-family": "Baloo",
    "font-size": "17px",
    "line-height": "25px",
    "font-weight": "700"
  },
  h6: {
    "font-family": "Baloo",
    "font-size": "14px",
    "line-height": "19px",
    "font-weight": "700"
  },
  p: {
    "font-family": "Roboto",
    "font-size": "15px",
    "line-height": "23px",
    "font-weight": "400"
  },
  strong: {
    "font-family": "Roboto",
    "font-size": "15px",
    "line-height": "23px",
    "font-weight": "700"
  }
} %}