Typography
Font: Montserrat + Lato

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Colors
HEX:#2A4634
VAR:$c_prim
HEX:#73984B
VAR:$c_secondary
HEX:#333333
VAR:$c_text0
HEX:#666666
VAR:$c_text1
HEX:#999999
VAR:$c_text2
HEX:#CCCCCC
VAR:$lightgrey
Buttons
Default button
class: button
Secondary button
class: button secondary
White button
class: button white
Breakpoints
$bp_mobile:
580pxpx;
$bp_mobilelandscape:
760pxpx;
$bp_tablet:
960pxpx;
$bp_tabletlandscape:
1160pxpx;
$bp_laptop:
1280pxpx;
$bp_desktop:
1920pxpx;
Mixins
@mixin breakpoint($type)
Example: @include breakpoint(mobile)
@mixin break($breakpoint)
Example: @include break(600)
@mixin position($type, $top, $right, $bottom, $left)
Example: @include position(absolute, 0, 0)
@mixin background-opacity($color, $opacity: 0.3)
Example: @include background-opacity($c_prim, 0.2)
@mixin pattern($image)
$image = svg name
@mixin font_path($name, $srcname, $weight)
Helpers
.page_container
Adds width, max-width and margin: 0 auto
.object-fit
Add to the container of an img tag to emulate background cover and enable the JS fallback