doctype html
html
  head
    title= title
    //link(rel = 'stylesheet', href = '/stylesheets/style.css')
    link(rel = 'stylesheet', href = '/stylesheets/material.css')
    link(rel = 'stylesheet', href = '/stylesheets/mdl-selectfield.min.css')
    link(rel = 'stylesheet', href = '/stylesheets/getmdl-select.min.css')
    link(rel = 'stylesheet', href = '/stylesheets/material-icons.css')
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    script(defer, type='text/javascript', src='/js/material.min.js')
    script(defer, type='text/javascript', src='/js/mdl-selectfield.min.js')
    script(defer, type='text/javascript', src='/js/getmdl-select.min.js')
    script(type='text/javascript', src='/js/custom.js')
  body
    style.
      .demo-layout-transparent {
        background: url('/images/transparent.jpg') center / cover;
      }

      .demo-layout-transparent .mdl-layout__header,
      .demo-layout-transparent .mdl-layout__drawer-button {
        /* This background is dark, so we set text to white. Use 87% black instead if
        your background is light. */
        color: white;
      }

      .demo-card-square.mdl-card {
        width: 100%;
      }

      .demo-card-square > .mdl-card__title {
        color: #fff;
        background: #795548;
      }

      .mdl-selectfield__select option {
        font-family: "Helvetica", "Arial", sans-serif;
      }


    .demo-layout-transparent.mdl-layout.mdl-js-layout
      header.mdl-layout__header.mdl-layout__header--transparent
        .mdl-layout__header-row
          // Title
          span.mdl-layout-title= title
          // Add spacer, to align navigation to the right
          .mdl-layout-spacer
          // Navigation
          //nav.mdl-navigation
          //  a.mdl-navigation__link(href='') Link
          //  a.mdl-navigation__link(href='') Link
          //  a.mdl-navigation__link(href='') Link
          //  a.mdl-navigation__link(href='') Link
      .mdl-layout__drawer
        span.mdl-layout-title Kürbiskern
        nav.mdl-navigation
          a.mdl-navigation__link(href='/') Liste
          a.mdl-navigation__link(href='/recommends') Empfohlene Cocktails
          a.mdl-navigation__link(href='/similar') Ähnliche Cocktails
          a.mdl-navigation__link(href='/admin') Admin
          a.mdl-navigation__link(href='/impressum') Impressum & Datenschutz
      main.mdl-layout__content
        block content
