add mobile QR code

This commit is contained in:
Thibault Duplessis 2015-02-10 21:34:14 +01:00
parent b6cdd76f0f
commit cbe52565b5
3 changed files with 16 additions and 13 deletions

View file

@ -3,12 +3,15 @@
@base.layout(
title = "Mobile",
moreCss = cssTag("mobile.css")) {
<div class="mobile content_box small_box">
<div class="mobile content_box small_box clearfix">
<div class="right-side">
<img class="nexus5-playing" width="268" height="513" src="@staticUrl("images/mobile/nexus5-playing.png")" alt="Lichess mobile on nexus 5" />
<a class="download button" href="https://play.google.com/store/apps/details?id=org.lichess.mobileapp">
Download now for free
</a>
<p>
<a class="download button" href="https://play.google.com/store/apps/details?id=org.lichess.mobileapp">
Download now for free
</a>
</p>
<img class="qrcode" width="200" height="200" src="@staticUrl("images/mobile/android-qr-code.png")" alt="Android QR code" />
</div>
<div class="left-side">
<h1>Play chess everywhere</h1>
@ -41,8 +44,8 @@ moreCss = cssTag("mobile.css")) {
Look out for updates regularly!
</p>
<p class="block">
Android 4.4 and 5+ support: <span class="good support">GOOD</span><br />
Android 4.1 and 4.2 support: <span class="partial support">PARTIAL</span><br />
Android 4.4 and 5+ support: <span class="good support">PERFECT</span><br />
Android 4.1 to 4.3 support: <span class="partial support">CORRECT</span><br />
The iOS app will land in early March 2015.
</p>
</div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

View file

@ -1,14 +1,14 @@
.mobile.content_box {
min-height: 400px;
}
.mobile .right-side {
float: right;
width: 264px;
text-align: center;
}
.mobile .right-side img {
.mobile .right-side .nexus5-playing {
margin: -50px 0 30px 0;
}
.mobile .right-side .qrcode {
margin-top: 20px;
}
.mobile .left-side {
width: 245px;
text-align: center;
@ -18,10 +18,10 @@
}
.mobile .store {
display: inline-block;
margin: 20px 0 0 20px;
margin: 30px 0 0 20px;
}
.mobile .left-side h2 {
margin-top: 20px;
margin-top: 30px;
font-size: 1.5em;
}
.mobile .left-side .block {
@ -39,5 +39,5 @@
color: #759900;
}
.mobile .support.partial {
color: #dc322f;
color: #d59120;
}