html(lang="en-us")

head

  meta(charset="utf-8")

  meta(http-equiv="X-UA-Compatible", content="IE=edge")

  title= name

  meta(name="viewport", content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1.0")

  meta(name="description", content= description)

  link(rel="stylesheet", href="css/#{name}.min.css")

  link(rel="stylesheet", href="css/theme.min.css")

body

  .masonry-layout

    - var n = 0

    - var colors = ['red', 'green', 'blue', 'purple']

    while n < 10

      - var type = Math.floor(Math.random() * 4 + 1)

      - var nested = Math.floor(Math.random() * 3 + 1)

      - var nestedClass = 'masonry-layout-panel'

      - var horizontalClass = ''

      - var sizeClass = ''

      if nested === 1

        - nestedClass = 'masonry-layout-cluster'

        - horizontalClass = 'vertical'

        - var isHorizontal = Math.floor(Math.random() * 2 + 1)

        if isHorizontal === 1

          - horizontalClass = 'horizontal'

      .masonry-layout-panel(class="#{nestedClass} #{nestedClass}--#{horizontalClass}")

        if nested === 1

          if isHorizontal === 1

            .masonry-layout-cluster__segment.masonry-layout-cluster__segment--row

              .masonry-layout-panel.masonry-layout-cluster__segment

                .masonry-layout-panel__content.bg--green.tx--white

                  h1 I

            .masonry-layout-cluster__segment.masonry-layout-cluster__segment--row

              .masonry-layout-panel.masonry-layout-cluster__segment.masonry-layout-cluster__segment--half

                .masonry-layout-panel__content.bg--blue.tx--white

                  h1 am

              .masonry-layout-panel.masonry-layout-cluster__segment

                .masonry-layout-panel__content.bg--red.tx--white

                  h1 horizontal

          else

            .masonry-layout-cluster__segment.masonry-layout-cluster__segment--column

              .masonry-layout-panel.masonry-layout-cluster__segment

                .masonry-layout-panel__content.bg--green.tx--white

                  h1 I

            .masonry-layout-cluster__segment.masonry-layout-cluster__segment--column

              .masonry-layout-panel.masonry-layout-cluster__segment

                .masonry-layout-panel__content.bg--blue.tx--white

                  h1 am

              .masonry-layout-panel.masonry-layout-cluster__segment

                .masonry-layout-panel__content.bg--red.tx--white

                  h1 vertical

        else

          - var paras = Math.floor(Math.random() * 4 + 1)

          .masonry-layout-panel__content(class="bg--#{colors[paras - 1]}")

            - var p = 0

            while p < paras

              p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non varius nunc, nec viverra dolor. Sed porttitor urna non accumsan vehicula. Morbi malesuada mollis lacus.

              - p++

        - n++

​