- var pageDescription = "Chat comfortably, everywhere.";
- var pageUrl = "https://quasseldroid.info/";

doctype html
html(lang="en")
  head
    meta(charset="utf-8")
    title="QuasselDroid"
    meta(name="description" content=pageDescription)

    link(rel="canonical" href=pageUrl)
    link(rel="shortcut icon" href="favicon.png")
    link(rel="shortcut icon" href="favicon.svg")

    meta(property="og:site_name" content="QuasselDroid")
    meta(property="og:type" content="website")
    meta(property="og:title" content="QuasselDroid")
    meta(property="og:description" content=pageDescription)
    meta(property="og:url" content=pageUrl)

    meta(property="twitter:card" content="summary_large_image")
    meta(property="twitter:title" content="QuasselDroid")
    meta(property="twitter:description" content=pageDescription)
    meta(property="twitter:url" content=pageUrl)

    meta(name="generator" content="Human v1.0")

    meta(name="referrer" content="origin")

    meta(name="viewport" content="width=device-width, initial-scale=1")

    meta(http-equiv="X-UA-Compatible" content="IE=edge")
    meta(name="apple-mobile-web-app-capable" content="yes")
    meta(name="HandheldFriendly" content="True")

    meta(name="theme-color" content="#0a70c0")
    meta(name="msapplication-navbutton-color" content="#0a70c0")
    meta(name="apple-mobile-web-app-status-bar-style" content="#0a70c0")

    style.
      /* latin */
      @font-face {
        font-family: 'Lato';
        font-style: normal;
        font-weight: 400;
        src: local('Lato Regular'), local('Lato-Regular'), url(/assets/fonts/Lato-Regular.tff) format('ttf');
      }

      /* latin */
      @font-face {
        font-family: 'Lato';
        font-style: normal;
        font-weight: 700;
        src: local('Lato Bold'), local('Lato-Bold'), url(/assets/fonts/Lato-Bold.ttf) format('ttf');
      }
    style
      include /assets/css/important.min.css
    style
      include /assets/css/style.min.css
  body#page-index.noscript
    noscript
      style.
        img[data-src] {
          display: none !important;
        }
    script.
      document.body.classList.remove("noscript");
    .pusher
      .full.height
        .following.bar
          .ui.container
            .ui.large.secondary.menu.inverted
              a.view-ui.item.active
                img.ui.logo.left(src="/assets/images/icon.svg")
                | QuasselDroid
              a.view-ui.item(href="/docs/")
                | Docs
              .right.menu
                a.view-ui.item(href="https://github.com/sandsmark/QuasselDroid")
                  i.icon.github.left
                  span.text.
                    GitHub
                a.view-ui.item(href="/releases/")
                  i.icon.download.left
                  span.text.
                    Download
        .masthead.segment
          .ui.container
            .introduction
              h1.ui.inverted.header.
                QuasselDroid
              h2.ui.inverted.
                Chat comfortably, everywhere.
              .ui.hidden.divider
              a.ui.huge.inverted.download.button(href="releases/")
                i.icon.download.left
                span.text.
                  Download
              a.ui.huge.inverted.basic.button(href="https://github.com/sandsmark/QuasselDroid")
                i.icon.github.left
                span.text.
                  GitHub
            .row
              .wide.column
                #image_container
                  img.phone(src="/assets/images/phone@400.png" sizes="(max-height: 800px) calc(50vw + 101px), (max-width: 800px) calc(50vw + 101px), calc(33vw + 1px)" srcset="/assets/images/phone@220.png 220w, /assets/images/phone@300.png 300w, /assets/images/phone@400.png 400w, /assets/images/phone@520.png 520w, /assets/images/phone@640.png 640w, /assets/images/phone@800.png 800w, /assets/images/phone@1000.png 1000w, /assets/images/phone@1220.png 1220w")
                  noscript
                    img.tablet(src="/assets/images/tablet@1090.png" sizes="calc(33vw + 1px)" srcset="/assets/images/tablet@545.png 545w, /assets/images/tablet@640.png 640w, /assets/images/tablet@720.png 720w, /assets/images/tablet@800.png 800w, /assets/images/tablet@880.png 880w, /assets/images/tablet@960.png 960w, /assets/images/tablet@1090.png 1090w, /assets/images/tablet@thumb35.png 1635w, /assets/images/tablet@2180.png 2180w")
                  img.tablet(src="/assets/images/tablet@thumb.png" data-src="/assets/images/tablet@1090.png" sizes="calc(33vw + 1px)" data-srcset="/assets/images/tablet@545.png 545w, /assets/images/tablet@640.png 640w, /assets/images/tablet@720.png 720w, /assets/images/tablet@800.png 800w, /assets/images/tablet@880.png 880w, /assets/images/tablet@960.png 960w, /assets/images/tablet@1090.png 1090w, /assets/images/tablet@thumb35.png 1635w, /assets/images/tablet@2180.png 2180w")
        .ui.vertical.stripe.intro.segment
          .ui.stackable.very.relaxed.center.aligned.grid.container

            .row
              .seven.wide.column.left.aligned
                h2.ui.header.
                  Built on Quassel
                p.
                  Quassel makes IRC fun again – open a client anywhere, connect
                  to your core, and have all your favourite channels and
                  networks right there.
                p.
                  Be it at home with Windows, macOS, Linux, on the go with
                  Android or iOS, or via the web. Everything is exactly the way
                  you left it.
                a(href="http://quassel-irc.org/").
                  Learn More
              .nine.wide.column
                .ui.one.doubling.cards
                  .card
                    .image
                      noscript
                        img(src="/assets/images/desktop@590.png" sizes="(max-width: 767px) calc(100vw + 1px), (max-width: 991px) 364px, (max-width: 1199px) 475px, 591px" srcset="/assets/images/desktop@363.png 363w, /assets/images/desktop@474.png 474w, /assets/images/desktop@590.png 590w, /assets/images/desktop@726.png 726w, /assets/images/desktop@948.png 948w, /assets/images/desktop@1180.png 1180w")
                      img(src="/assets/images/desktop@thumb.jpg" data-src="/assets/images/desktop@590.png" sizes="(max-width: 767px) calc(100vw + 1px), (max-width: 991px) 364px, (max-width: 1199px) 475px, 591px" data-srcset="/assets/images/desktop@363.png 363w, /assets/images/desktop@474.png 474w, /assets/images/desktop@590.png 590w, /assets/images/desktop@726.png 726w, /assets/images/desktop@948.png 948w, /assets/images/desktop@1180.png 1180w")
            .ui.divider
            .computer.reversed.row
              .seven.wide.column.left.aligned
                h2.ui.header.
                  Never miss a thing
                p.
                  Always be up to date with push notifications in QuasselDroid.
                  Once you’ve set up the app, it automatically ensures you
                  always get notifications – without affecting your battery
                  runtime.
              .nine.wide.column
                .ui.one.doubling.cards
                  .card
                    .image
                      noscript
                        img(src="/assets/images/notifications@590.png" sizes="(max-width: 767px) calc(100vw + 1px), (max-width: 991px) 364px, (max-width: 1199px) 475px, 591px" srcset="/assets/images/notifications@363.png 363w, /assets/images/notifications@474.png 474w, /assets/images/notifications@590.png 590w")
                      img(src="/assets/images/notifications@thumb.jpg" data-src="/assets/images/notifications@590.png" sizes="(max-width: 767px) calc(100vw + 1px), (max-width: 991px) 364px, (max-width: 1199px) 475px, 591px" data-srcset="/assets/images/notifications@363.png 363w, /assets/images/notifications@474.png 474w, /assets/images/notifications@590.png 590w")
            .ui.divider
            .row
              .seven.wide.column.left.aligned
                h2.ui.header.
                  Make it yours
                p.
                  With many available themes, and the ability to change every
                  little bit of the UI to your liking, you can truly
                  customize QuasselDroid however you’d like.
                p.
                  Special themes for every situation – be it AMOLED displays
                  or holidays – are available, and improve your battery life
                  or just look fancy.
              .nine.wide.column
                .ui.one.doubling.cards
                  .card
                    .image
                      noscript
                        img(src="/assets/images/themes@1180.png 1180w" sizes="(max-width: 767px) calc(100vw + 1px), (max-width: 991px) 364px, (max-width: 1199px) 475px, 591px" srcset="/assets/images/themes@363.png 363w, /assets/images/themes@474.png 474w, /assets/images/themes@590.png 590w, /assets/images/themes@726.png 726w, /assets/images/themes@948.png 948w, /assets/images/themes@1180.png 1180w")
                      img(data-src="/assets/images/themes@1180.png 1180w" sizes="(max-width: 767px) calc(100vw + 1px), (max-width: 991px) 364px, (max-width: 1199px) 475px, 591px" data-srcset="/assets/images/themes@363.png 363w, /assets/images/themes@474.png 474w, /assets/images/themes@590.png 590w, /assets/images/themes@726.png 726w, /assets/images/themes@948.png 948w, /assets/images/themes@1180.png 1180w")
            .ui.divider
            .row.centered
              .wide.column
                .ui.four.doubling.cards
                  .card
                    .image
                      noscript
                        img(src="/assets/images/quassel_dark@266.png" sizes="(max-width: 767px) calc(50vw - 2em + 1px), (max-width: 991px) 336px, (max-width: 1199px) 221px, 267px" srcset="/assets/images/quassel_dark@220.png 220w, /assets/images/quassel_dark@266.png 266w, /assets/images/quassel_dark@335.png 335w, /assets/images/quassel_dark@352.png 352w, /assets/images/quassel_dark@532.png 532w")
                      img(src="/assets/images/quassel_dark@thumb.jpg" data-src="/assets/images/quassel_dark@266.png" sizes="(max-width: 767px) calc(50vw - 2em + 1px), (max-width: 991px) 336px, (max-width: 1199px) 221px, 267px" data-srcset="/assets/images/quassel_dark@220.png 220w, /assets/images/quassel_dark@266.png 266w, /assets/images/quassel_dark@335.png 335w, /assets/images/quassel_dark@352.png 352w, /assets/images/quassel_dark@532.png 532w")
                    .content
                      .extra.
                        Quassel Dark
                  .card
                    .image
                      noscript
                        img(src="/assets/images/quassel_light@266.png" sizes="(max-width: 767px) calc(50vw - 2em + 1px), (max-width: 991px) 336px, (max-width: 1199px) 221px, 267px" srcset="/assets/images/quassel_light@220.png 220w, /assets/images/quassel_light@266.png 266w, /assets/images/quassel_light@335.png 335w, /assets/images/quassel_light@352.png 352w, /assets/images/quassel_light@532.png 532w")
                      img(src="/assets/images/quassel_light@thumb.jpg" data-src="/assets/images/quassel_light@266.png" sizes="(max-width: 767px) calc(50vw - 2em + 1px), (max-width: 991px) 336px, (max-width: 1199px) 221px, 267px" data-srcset="/assets/images/quassel_light@220.png 220w, /assets/images/quassel_light@266.png 266w, /assets/images/quassel_light@335.png 335w, /assets/images/quassel_light@352.png 352w, /assets/images/quassel_light@532.png 532w")
                    .content
                      .extra.
                        Quassel Light
                  .card
                    .image
                      noscript
                        img(src="/assets/images/solarized_dark@266.png" sizes="(max-width: 767px) calc(50vw - 2em + 1px), (max-width: 991px) 336px, (max-width: 1199px) 221px, 267px" srcset="/assets/images/solarized_dark@220.png 220w, /assets/images/solarized_dark@266.png 266w, /assets/images/solarized_dark@335.png 335w, /assets/images/solarized_dark@352.png 352w, /assets/images/solarized_dark@532.png 532w")
                      img(src="/assets/images/solarized_dark@thumb.jpg" data-src="/assets/images/solarized_dark@266.png" sizes="(max-width: 767px) calc(50vw - 2em + 1px), (max-width: 991px) 336px, (max-width: 1199px) 221px, 267px" data-srcset="/assets/images/solarized_dark@220.png 220w, /assets/images/solarized_dark@266.png 266w, /assets/images/solarized_dark@335.png 335w, /assets/images/solarized_dark@352.png 352w, /assets/images/solarized_dark@532.png 532w")
                    .content
                      .extra.
                        Solarized Dark
                  .card
                    .image
                      noscript
                        img(src="/assets/images/solarized_light@266.png" sizes="(max-width: 767px) calc(50vw - 2em + 1px), (max-width: 991px) 336px, (max-width: 1199px) 221px, 267px" srcset="/assets/images/solarized_light@220.png 220w, /assets/images/solarized_light@266.png 266w, /assets/images/solarized_light@335.png 335w, /assets/images/solarized_light@352.png 352w, /assets/images/solarized_light@532.png 532w")
                      img(src="/assets/images/solarized_light@thumb.jpg" data-src="/assets/images/solarized_light@266.png" sizes="(max-width: 767px) calc(50vw - 2em + 1px), (max-width: 991px) 336px, (max-width: 1199px) 221px, 267px" data-srcset="/assets/images/solarized_light@220.png 220w, /assets/images/solarized_light@266.png 266w, /assets/images/solarized_light@335.png 335w, /assets/images/solarized_light@352.png 352w, /assets/images/solarized_light@532.png 532w")
                    .content
                      .extra.
                        Solarized Light
      .ui.black.inverted.vertical.footer.segment
        .ui.center.aligned.container
          .ui.stackable.inverted.grid
            .three.wide.column
              h4.ui.inverted.header.
                Community
              .ui.inverted.link.list
                a.item(href="https://www.transifex.com/quasseldroid/quasseldroid/").
                  Help Translate
                a.item(href="https://github.com/sandsmark/quasseldroid/issues/").
                  Submit an Issue
                a.item(href="irc://chat.freenode.org/#quasseldroid").
                  Join our Chat
                a.item(href="/beta/").
                  Beta Releases
            .three.wide.column
              h4.ui.inverted.header.
                Discover More
              .ui.inverted.link.list
                a.item(href="http://quassel-irc.org/").
                  Quassel
                a.item(href="https://github.com/magne4000/quassel-webserver/").
                  quassel-webserver
                a.item(href="https://github.com/phhusson/quassel-irssi").
                  quassel-irssi
                a.item(href="https://woboq.com/iquassel.html").
                  iQuassel
          .ui.inverted.section.divider

          img.ui.centered.mini.image(src="/assets/images/icon.svg")

          .ui.horizontal.inverted.small.divided.link.list
            a.item(href="https://github.com/sandsmark/QuasselDroid").
              Free & Open Source

    script(src="/assets/js/intersectionobserver.min.js")
    script
      include /assets/js/script.js
    style
      include /assets/css/fonts.css
    link(rel="stylesheet" href="/assets/css/semantic.min.css")