diff --git a/assets/images/tablet@thumb.png b/assets/images/tablet@thumb.png new file mode 100644 index 0000000000000000000000000000000000000000..d10b78f9abec25ba16c243285068669411530da4 Binary files /dev/null and b/assets/images/tablet@thumb.png differ diff --git a/index.html b/index.html index 23a9d5623255c668accf90aa5c9617e43baeea45..c096bf0e7c3f271346f489946b72acb2c4a49244 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@ </style><style>img[data-src]{filter:blur(2px)!important}.following.bar{position:fixed!important;top:0!important;z-index:900!important;left:0!important;padding:2em 0!important;width:100%!important;box-shadow:0 0 0 0 transparent!important;border-bottom:1px solid transparent!important;transition:padding .5s ease,background .5s ease,box-shadow .5s ease,border .5s ease!important}body:not(.index) .following.bar{position:sticky!important}.ui.logo{opacity:.9!important;float:none!important;margin:0 .35714286em 0 0 !important;height:1em!important}.secondary.menu .item{line-height:1.6rem!important}.secondary.menu .item > i.icon{height:1.6rem!important}.following.bar{padding:1em 0!important}body.noscript .following.bar,.following.bar.qd{background:#0a70c0!important}.masthead{position:relative!important;overflow:hidden!important;text-align:center!important;color:rgba(255,255,255,0.9)!important;margin-bottom:0!important;border-bottom:none!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1440 810'%3E%3Cpath fill='%23124e99' fill-opacity='.25' d='M334.24 0L539.8 205.54 745.32 0h-411.1z'/%3E%3Cpath fill='%23124e99' fill-opacity='.3' d='M1366.24 0l-516 516 44.04 44.04L1440 14.32V0h-73.76z'/%3E%3Cpath fill='%230291e7' fill-opacity='.64' d='M745.33 0L539.8 205.54 850.23 516l516-516h-620.9z'/%3E%3Cpath fill='%230291e7' fill-opacity='.57' d='M1440 14.32L894.28 560.04l128.08 128.08 150.1-150.1L1440 270.5V14.32z'/%3E%3Cpath fill='%230291e7' fill-opacity='.28' d='M1440 270.48l-267.55 267.55L1440 805.58v-535.1z'/%3E%3Cpath fill='%23124e99' fill-opacity='.71' d='M1022.36 688.12L1144.24 810H1440v-4.42l-267.55-267.55-150.1 150.1z'/%3E%3Cpath fill='%230291e7' fill-opacity='.46' d='M0 0v455.43L354.57 810h789.67l-810-810H0z'/%3E%3Cpath fill='%23124e99' fill-opacity='.68' d='M0 455.43v80.96L273.6 810h80.97L0 455.43z'/%3E%3Cpath fill='%230291e7' fill-opacity='.4' d='M0 536.4V810h273.6L0 536.4z'/%3E%3C/svg%3E") center center no-repeat,linear-gradient(148deg,#124E99 7%,#105a94 20%,#0a70c0 27%,#0291E7 60%,#0271B3 100%)!important;background-size:cover,cover!important;padding:10rem 0!important;max-height:100vh!important}.masthead:after{content:""!important;border-top:calc(50px + 7vh + 7vw)solid transparent!important;border-right:100vw solid white!important;width:0!important;height:0!important;bottom:0!important;position:absolute!important;left:0!important;right:0!important}.introduction h1.header{font-size:4.5rem!important}.pusher .stripe h2{font-size:26px!important}.ui.grid .row + .ui.divider{margin-top:3rem!important;margin-bottom:3rem!important}#image_container img.phone{display:inline-block!important;max-height:33vw!important;max-width:355px!important;vertical-align:middle!important}#image_container img.tablet{display:inline-block!important;max-height:33vw!important;max-width:633px!important;vertical-align:middle!important}.pusher .stripe .column > p{font-size:16px!important;line-height:1.6!important;margin:1em 0!important}.pusher .alternate.stripe{background-color:#F2F3F5!important}.vertical.segment{box-shadow:none!important}.pusher > .footer{clear:both!important;margin:0!important;border-radius:0!important;padding:4em 0!important}.pusher > .footer .grid{display:block!important}.pusher > .footer .grid .column{margin-left:2rem!important;margin-right:2rem!important}.introduction{perspective:500px!important;text-shadow:0 0 10px rgba(0,0,0,0.2)!important;margin-left:auto!important;margin-right:auto!important;margin-bottom:6rem!important}.pusher .stripe{padding:5rem 0!important;border-radius:0!important;margin:0!important}.introduction .ui.header{font-weight:400!important}.pusher .stripe h1{font-size:40px!important}.pusher .intro.segment h1 + p{font-size:22px!important}.image{overflow:hidden!important}.pusher{display:flex;flex-direction:column;min-height:100vh}.pusher>.full.height{flex-grow:1}@media (max-width: 359px){.ui.menu .item{font-size:.9rem!important}}@media (max-width: 500px){.ui.menu .item > span.text{display:none!important}.ui.menu .item > i.icon{margin-right:0!important}.masthead.segment{min-height:100vh!important}}@media (max-width: 1024px){.introduction h1.header{font-size:3rem!important}.introduction h2{font-size:1.4rem!important}.masthead.segment{padding:6rem 0 0!important}.pusher .stripe{padding:2rem 0!important}.introduction{margin-bottom:2rem!important}}@media (max-width: 800px),(max-height: 720px){#image_container img.tablet{display:none!important}#image_container img.phone{max-width:calc(50vw + 100px)!important;max-height:100vh!important;margin-bottom:calc(-33vh)!important}.ui.huge.button,.ui.huge.buttons .button,.ui.huge.buttons .or{font-size:1rem!important}}@media (min-width: 800px) and (max-height: 800px){#image_container img.tablet{display:none!important}#image_container img.phone{max-width:calc(50vw + 100px)!important;max-height:100vh!important;margin-bottom:calc(-33vh)!important}.ui.huge.button,.ui.huge.buttons .button,.ui.huge.buttons .or{font-size:1rem!important}.introduction,.introduction + .row{display:inline-block!important;margin-left:4rem!important;margin-right:4rem!important}}@media (max-height: 500px){.masthead.segment{max-height:initial!important}#image_container img.tablet{display:none!important}#image_container img.phone{max-width:calc(50vw + 100px)!important;max-height:100vh!important;margin-bottom:calc(-22vh)!important}.ui.huge.button,.ui.huge.buttons .button,.ui.huge.buttons .or{font-size:1rem!important}.introduction,.introduction + .row{display:inline-block!important;margin-left:4rem!important;margin-right:4rem!important}} </style></head><body class="noscript index" id="page-index"><noscript><style>img[data-src] { display: none !important; -}</style></noscript><script>document.body.classList.remove("noscript");</script><div class="pusher"><div class="full height"><div class="following bar"><div class="ui container"><div class="ui large secondary menu inverted"><a class="view-ui item active" href="/"><img class="ui logo left" src="/assets/images/icon.svg">QuasselDroid</a><a class="view-ui item" href="/docs/">Docs</a><div class="right menu"><a class="view-ui item" href="https://github.com/sandsmark/QuasselDroid"><i class="icon github left"></i><span class="text">GitHub</span></a><a class="view-ui item" href="/releases/"><i class="icon download left"></i><span class="text">Download</span></a></div></div></div></div><div class="masthead segment"><div class="ui container"><div class="introduction"><h1 class="ui inverted header">QuasselDroid</h1><h2 class="ui inverted">Chat comfortably, everywhere.</h2><div class="ui hidden divider"></div><a class="ui huge inverted download button" href="/releases/"><i class="icon download left"></i><span class="text">Download</span></a><a class="ui huge inverted basic button" href="https://github.com/sandsmark/QuasselDroid"><i class="icon github left"></i><span class="text">GitHub</span></a></div><div class="row"><div class="wide column"><div id="image_container"><img class="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 class="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"></noscript><img class="tablet" 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"></div></div></div></div></div><div class="ui vertical stripe intro segment"><div class="ui stackable very relaxed center aligned grid container"><div class="row"><div class="seven wide column left aligned"><h2 class="ui header">Built on Quassel</h2><p>Quassel makes IRC fun again – open a client anywhere, connect +}</style></noscript><script>document.body.classList.remove("noscript");</script><div class="pusher"><div class="full height"><div class="following bar"><div class="ui container"><div class="ui large secondary menu inverted"><a class="view-ui item active" href="/"><img class="ui logo left" src="/assets/images/icon.svg">QuasselDroid</a><a class="view-ui item" href="/docs/">Docs</a><div class="right menu"><a class="view-ui item" href="https://github.com/sandsmark/QuasselDroid"><i class="icon github left"></i><span class="text">GitHub</span></a><a class="view-ui item" href="/releases/"><i class="icon download left"></i><span class="text">Download</span></a></div></div></div></div><div class="masthead segment"><div class="ui container"><div class="introduction"><h1 class="ui inverted header">QuasselDroid</h1><h2 class="ui inverted">Chat comfortably, everywhere.</h2><div class="ui hidden divider"></div><a class="ui huge inverted download button" href="/releases/"><i class="icon download left"></i><span class="text">Download</span></a><a class="ui huge inverted basic button" href="https://github.com/sandsmark/QuasselDroid"><i class="icon github left"></i><span class="text">GitHub</span></a></div><div class="row"><div class="wide column"><div id="image_container"><img class="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 class="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"></noscript><img class="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"></div></div></div></div></div><div class="ui vertical stripe intro segment"><div class="ui stackable very relaxed center aligned grid container"><div class="row"><div class="seven wide column left aligned"><h2 class="ui header">Built on Quassel</h2><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><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 diff --git a/index.pug b/index.pug index 3e72f02ab5317eb0cdb1a0643aad16a2894cedf4..42608863257479ded3cdc9e399fc5de4d9e6e3aa 100644 --- a/index.pug +++ b/index.pug @@ -106,7 +106,7 @@ html(lang="en") 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(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") + 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