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(aria-label="Download" href="/releases/")
          i.icon.download.left(aria-hidden="true" role="img")
          span.text.
            Download
        a.ui.huge.inverted.basic.button(aria-label="Source" href="https://git.kuschku.de/justjanne/quasseldroid-ng/")
          i.icon.github.left(aria-hidden="true" role="img")
          span.text.
            Source
      .row
        .wide.column
          #image_container(aria-hidden="true")
            img.phone(alt="Screenshot of Quasseldroid on a 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(alt="Screenshot of Quasseldroid on a 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").tablet
            img(alt="Screenshot of Quasseldroid on a 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").tablet
  .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="https://quassel-irc.org/").
            Learn more about Quassel
        .nine.wide.column
          .ui.one.doubling.cards
            .card
              .image(aria-hidden="true" role="img")
                +responsive_image("Screenshot of Quassel on desktop", "/assets/images/desktop@thumb.jpg", "/assets/images/desktop@590.png", "/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", "(max-width: 767px) calc(100vw + 1px), (max-width: 991px) 364px, (max-width: 1199px) 475px, 591px", "75.5932203389830%")
      .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(aria-hidden="true" role="img")
                +responsive_image("Screenshot of Quasseldroid notifications", "/assets/images/notifications@thumb.jpg", "/assets/images/notifications@590.png", "/assets/images/notifications@363.png 363w, /assets/images/notifications@474.png 474w, /assets/images/notifications@590.png 590w", "(max-width: 767px) calc(100vw + 1px), (max-width: 991px) 364px, (max-width: 1199px) 475px, 591px", "51.57407407407407%")
      .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.divider
      .row.centered
        .wide.column
          .ui.four.doubling.cards
            +theme_card("material_light", "Material Light")
            +theme_card("material_dark", "Material Dark")
            +theme_card("solarized_light", "Solarized Light")
            +theme_card("solarized_dark", "Solarized Dark")
            +theme_card("gruvbox_light", "Gruvbox Light")
            +theme_card("gruvbox_dark", "Gruvbox Dark")
            +theme_card("amoled", "AMOLED")
            +theme_card("dracula", "Dracula")