-
    let loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat'

include layouts/container.pug
include objects/heading.pug
include objects/rule.pug

mixin box
    .t-raised
        +container(padH=true padV=true inPage=true themed=true)
            block


doctype html
html
    head
        meta(charset='utf-8')
        meta(name='viewport' content='width=device-width, initial-scale=1')
        title iro-design
        link(rel="stylesheet", href="style.css")
        script(src="script.js") 

    body(class='t-lighter')
        +container(padH=true padV=true narrow=true)

            +h1-heading(level='xl')= 'Heading'
            +rule(level='medium')

            +box
                +div-heading(level='xxl')= 'XXL Heading'
                +div-heading(level='xl')= 'XL Heading'
                +div-heading(level='lg')= 'LG Heading'
                +div-heading(level='md')= 'MD Heading'
                +div-heading(level='sm')= 'SM Heading'
                +div-heading(level='xs')= 'XS Heading'

            //-----------------------------------------

            +h1-heading(level='xl')= 'Rule'
            +rule(level='medium')

            +box
                +div-heading(level='lg')= 'Heading'
                +rule(level='strong')
                p= loremIpsum

            +box
                +div-heading(level='sm')= 'Heading'
                +rule(level='medium')
                p= loremIpsum

            +box
                +div-heading(level='xs')= 'Heading'
                +rule(level='faint')
                p= loremIpsum

            +box
                +rule(level='strong')= 'Strong'
                +rule(level='medium')= 'Medium'
                +rule(level='faint')= 'Faint'