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/justjanne/quasseldroid-ng")
          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")
            +responsive_image("/assets/images/tablet@thumb.png", "/assets/images/tablet@1090.png", "/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", "calc(33vw + 1px)")(class="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
        .nine.wide.column
          .ui.one.doubling.cards
            .card
              .image
                +responsive_image("/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")
      .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
                +responsive_image("/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")
      .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
                +responsive_image("/assets/images/themes@thumb.jpg", "/assets/images/themes@1180.png 1180w", "/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", "(max-width: 767px) calc(100vw + 1px), (max-width: 991px) 364px, (max-width: 1199px) 475px, 591px")
      .ui.divider
      .row.centered
        .wide.column
          .ui.four.doubling.cards
            +theme_card("quassel_light", "Quassel Light")
            +theme_card("quassel_dark", "Quassel 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")