extends _template
block vars
  - var page = "index";
block content
  .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@1635.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@1635.png 1635w, /assets/images/tablet@2180.png 2180w")
  .ui.vertical.stripe.intro.segment
    .ui.stackable.very.relaxed.center.aligned.grid.container
      .row#built_on_quassel
        .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#never_miss_a_thing
        .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#make_it_yours
        .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
            a.card(href="/assets/images/quassel_light.png")
              .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
            a.card(href="/assets/images/quassel_dark.png")
              .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
            a.card(href="/assets/images/solarized_light.png")
              .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
            a.card(href="/assets/images/solarized_dark.png")
              .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
            a.card(href="/assets/images/gruvbox_light.png")
              .image
                noscript
                  img(src="/assets/images/gruvbox_light@266.png" sizes="(max-width: 767px) calc(50vw - 2em + 1px), (max-width: 991px) 336px, (max-width: 1199px) 221px, 267px" srcset="/assets/images/gruvbox_light@220.png 220w, /assets/images/gruvbox_light@266.png 266w, /assets/images/gruvbox_light@335.png 335w, /assets/images/gruvbox_light@352.png 352w, /assets/images/gruvbox_light@532.png 532w")
                img(src="/assets/images/gruvbox_light@thumb.jpg" data-src="/assets/images/gruvbox_light@266.png" sizes="(max-width: 767px) calc(50vw - 2em + 1px), (max-width: 991px) 336px, (max-width: 1199px) 221px, 267px" data-srcset="/assets/images/gruvbox_light@220.png 220w, /assets/images/gruvbox_light@266.png 266w, /assets/images/gruvbox_light@335.png 335w, /assets/images/gruvbox_light@352.png 352w, /assets/images/gruvbox_light@532.png 532w")
              .content
                .extra.
                  Gruvbox Light
            a.card(href="/assets/images/gruvbox_dark.png")
              .image
                noscript
                  img(src="/assets/images/gruvbox_dark@266.png" sizes="(max-width: 767px) calc(50vw - 2em + 1px), (max-width: 991px) 336px, (max-width: 1199px) 221px, 267px" srcset="/assets/images/gruvbox_dark@220.png 220w, /assets/images/gruvbox_dark@266.png 266w, /assets/images/gruvbox_dark@335.png 335w, /assets/images/gruvbox_dark@352.png 352w, /assets/images/gruvbox_dark@532.png 532w")
                img(src="/assets/images/gruvbox_dark@thumb.jpg" data-src="/assets/images/gruvbox_dark@266.png" sizes="(max-width: 767px) calc(50vw - 2em + 1px), (max-width: 991px) 336px, (max-width: 1199px) 221px, 267px" data-srcset="/assets/images/gruvbox_dark@220.png 220w, /assets/images/gruvbox_dark@266.png 266w, /assets/images/gruvbox_dark@335.png 335w, /assets/images/gruvbox_dark@352.png 352w, /assets/images/gruvbox_dark@532.png 532w")
              .content
                .extra.
                  Gruvbox Dark
            a.card(href="/assets/images/amoled.png")
              .image
                noscript
                  img(src="/assets/images/amoled@266.png" sizes="(max-width: 767px) calc(50vw - 2em + 1px), (max-width: 991px) 336px, (max-width: 1199px) 221px, 267px" srcset="/assets/images/amoled@220.png 220w, /assets/images/amoled@266.png 266w, /assets/images/amoled@335.png 335w, /assets/images/amoled@352.png 352w, /assets/images/amoled@532.png 532w")
                img(src="/assets/images/amoled@thumb.jpg" data-src="/assets/images/amoled@266.png" sizes="(max-width: 767px) calc(50vw - 2em + 1px), (max-width: 991px) 336px, (max-width: 1199px) 221px, 267px" data-srcset="/assets/images/amoled@220.png 220w, /assets/images/amoled@266.png 266w, /assets/images/amoled@335.png 335w, /assets/images/amoled@352.png 352w, /assets/images/amoled@532.png 532w")
              .content
                .extra.
                  AMOLED