index.pug

doctype html
html(lang="en")
  head
    meta(charset="utf8")
    meta(name="author" content="Kotik Andreev <kothique@protonmail.ch>")
    meta(name="description" content="An example of a simple website for a javascript library")
    meta(name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1")
    meta(http-equiv="X-UA-Compatible" content="ie=edge")

    title wonderful.js

    link(href="https://fonts.googleapis.com/css?family=Lato|Indie+Flower|Roboto" rel="stylesheet")

  body.m0
    nav.p2
      .right
        a.github-button(href="https://github.com/kothique/wonderfuljs.github.io" data-size="large" data-show-count="true" aria-label="Star kothique/wonderfuljs.github.io on GitHub") Star

  header

  article#content.mx-auto.max-width-3.mb4
    mixin feature(title,picture,left=true)
      section.feature.sm-show.mx2.mt4
        .flex.flex-stretch
          if left
            .flex-none
              .feature-pic(style=`background-image: url(${picture});`)
            .flex-auto.ml4
              h2 #{title}
              block
          if !left
            .flex-auto.mr4
              h2 #{title}
              block
            .flex-none
              .feature-pic(style=`background-image: url(${picture});`)

      section.feature.sm-hide.mx3.mt4
        h2.center.h2 #{title}
        .center
          img(src=picture)
        block        

    +feature('NON-EXISTENT', 'images/1.jpg')
      p wonderful.js was not created with the intent to bring joy or comfort to your 
        | cheerless development workflow. So nothing to install, no skills to master, and 
        | complete absence of  boring docs or dull tutorials
    +feature('INFINITE POTENTIAL', 'images/2.jpg', false)
      p wonderful.js does not exist, so with its limitlessness literally anything you can 
        | think of is possible
    +feature('SEAMLESS INTEGRATION', 'images/3.jpg')
      p wonderful.js is guaranteed#[a(href="#ref1") *] to fit perfectly into any of your existing projects
      p#ref1: small *&nbsp;-&nbsp;actually, no
    +feature('ZEN', 'images/4.jpg', false)
      p wonderful.js accepts emptiness as its true nature and avoids holding onto silly (= any) concepts 
        | and ideas, so it has no expectations about you or your project thus cannot bring you unhappiness
  
  footer.center
    | created by #[a(href="https://github.com/kothique") Kotik Andreev], 
    | published under the #[a(href="http://wtfpl.net") WTFPL] license

  script(src="bundle.js")
  script(async defer src="https://buttons.github.io/buttons.js")