mirror of
https://github.com/monero-project/monero-site.git
synced 2024-12-04 23:51:11 +02:00
Downloads: restyle section 'Mobile & Light Wallets'
- Edited logos of the wallets and resized a couple of them to save space - Introduced two different layouts for desktop and mobile - Added table to desktop layout showing the platforms supported by the wallet and a link to its source code - Moved entire section up (under 'CLI wallet') and adapted selector on top of the page - Changed CSS of span elements to make them available in the whole page - Added 'Browser' icon to monero-spritesheet.png
This commit is contained in:
erciccione
parent
9ce1428574
commit
8c566ab355
@ -3130,46 +3130,88 @@ footer {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.download-platforms span.icon-windows {
|
||||
span.icon-windows {
|
||||
background-image: url(../img/monero-spritesheet.png);
|
||||
background-position: -96px 0;
|
||||
}
|
||||
|
||||
.download-platforms span.icon-apple {
|
||||
span.icon-apple {
|
||||
background-image: url(../img/monero-spritesheet.png);
|
||||
background-position: -96px -96px;
|
||||
}
|
||||
|
||||
.download-platforms span.icon-linux{
|
||||
span.icon-linux{
|
||||
background-image: url(../img/monero-spritesheet.png);
|
||||
background-position: -96px -48px;
|
||||
}
|
||||
|
||||
.download-platforms span.icon-arm {
|
||||
span.icon-arm {
|
||||
background-image: url(../img/monero-spritesheet.png);
|
||||
background-position: 0 -176px;
|
||||
}
|
||||
|
||||
.download-platforms span.icon-freebsd {
|
||||
span.icon-freebsd {
|
||||
background-image: url(../img/monero-spritesheet.png);
|
||||
background-position: 0 -208px;
|
||||
}
|
||||
|
||||
.download-platforms span.icon-dragonflybsd {
|
||||
span.icon-dragonflybsd {
|
||||
background-image: url(../img/monero-spritesheet.png);
|
||||
background-position: 0 -287px;
|
||||
}
|
||||
|
||||
.download-platforms span.icon-github {
|
||||
span.icon-github {
|
||||
background-image: url(../img/monero-spritesheet.png);
|
||||
background-position: 0 -240px;
|
||||
}
|
||||
|
||||
.download-platforms span.icon-android {
|
||||
span.icon-android {
|
||||
background-image: url(../img/monero-spritesheet.png);
|
||||
background-position: 0 -321px;
|
||||
}
|
||||
|
||||
span.icon-browser {
|
||||
background-image: url(../img/monero-spritesheet.png);
|
||||
background-position: 0 -355px;
|
||||
}
|
||||
|
||||
.downloads a#ext-noicon {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.downloads td img {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
padding-right: 0.5rem;
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.downloads table {
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.downloads table, th, td {
|
||||
border-collapse: collapse;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.downloads th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.downloads .mobile-only ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.downloads .mobile-only img {
|
||||
width: 60px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.downloads a.arrow-up {
|
||||
border: 1px solid #d26e2b;
|
||||
border-radius: 50%;
|
||||
|
||||
@ -14,9 +14,9 @@ permalink: /downloads/index.html
|
||||
<div class="info-block download-nav row middle-xs between-xs" id="selections">
|
||||
<div class="col"><a href="#gui">{% t downloads.gui %}</a></div>
|
||||
<div class="col"><a href="#cli">{% t downloads.cli %}</a></div>
|
||||
<div class="col"><a href="#mobilelight">{% t downloads.mobilelight %}</a></div>
|
||||
<div class="col"><a href="#blockchain">{% t downloads.blockchain %}</a></div>
|
||||
<div class="col"><a href="#hardware">{% t downloads.hardware %}</a></div>
|
||||
<div class="col"><a href="#mobilelight">{% t downloads.mobilelight %}</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End downloads menu: desktop -->
|
||||
@ -29,9 +29,9 @@ permalink: /downloads/index.html
|
||||
<ul id="menu">
|
||||
<li><a href="#gui">{% t downloads.gui %}</a></li>
|
||||
<li><a href="#cli">{% t downloads.cli %}</a></li>
|
||||
<li><a href="#mobilelight">{% t downloads.mobilelight %}</a></li>
|
||||
<li><a href="#blockchain">{% t downloads.blockchain %}</a></li>
|
||||
<li><a href="#hardware">{% t downloads.hardware %}</a></li>
|
||||
<li><a href="#mobilelight">{% t downloads.mobilelight %}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -227,6 +227,58 @@ permalink: /downloads/index.html
|
||||
</div>
|
||||
</section>
|
||||
<!-- End 'CLI Wallet' -->
|
||||
<section class="container full">
|
||||
<!-- 'Mobile & Light Wallets' -->
|
||||
<div class="info-block">
|
||||
<h2 id="mobilelight">{% t downloads.mobilelight %}</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-sm-12 col-xs-12">
|
||||
<p>{% t downloads.mobilelight1 %} <a href="/community/hangouts/"> {% t downloads.mobilelight2 %}</a> {% t downloads.mobilelight3 %}</p>
|
||||
</div>
|
||||
</div>
|
||||
<table class="desktop-only">
|
||||
<tr>
|
||||
<th>Wallet</th>
|
||||
<th>Mobile</th>
|
||||
<th>Desktop</th>
|
||||
<th>Source Code</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="/img/cakewallet.png" alt="Cake Wallet Logo"><a href="https://cakewallet.com/">Cake Wallet</a></td>
|
||||
<td><span class="icon-android"></span><span class="icon-apple"></span></td>
|
||||
<td>X</td>
|
||||
<td><a id="ext-noicon" href="https://github.com/cake-tech/cake_wallet"><span class="icon-github"></span></a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="/img/Monerujo-wallet.png" alt="Monerujo logo"><a href="https://monerujo.io/">Monerujo</a></td>
|
||||
<td><span class="icon-android"></span></td>
|
||||
<td>X</td>
|
||||
<td><a id="ext-noicon" href="https://github.com/m2049r/xmrwallet"><span class="icon-github"></span></a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="/img/mymonero.png" alt="Mymonero logo" style="height: 15px;"><a href="https://mymonero.com/">MyMonero</a></td>
|
||||
<td><span class="icon-apple"></span></td>
|
||||
<td><span title="Browser" class="icon-browser"></span><span class="icon-linux"></span><span class="icon-windows"></span><span class="icon-apple"></span></td>
|
||||
<td><a id="ext-noicon" href="https://github.com/mymonero"><span class="icon-github"></span></a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="/img/edge-wallet.png" alt="Edge Logo"><a href="https://edge.app/">Edge</a></td>
|
||||
<td><span class="icon-android"></span><span class="icon-apple"></span></td>
|
||||
<td>X</td>
|
||||
<td><a id="ext-noicon" href="https://github.com/EdgeApp"><span class="icon-github"></span></a></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="row between-xs mob-wallets mobile-only">
|
||||
<ul>
|
||||
<li><a id="ext-noicon" href="https://cakewallet.io"><img style="width: 50px" src="/img/cakewallet.png" alt="Cake Wallet Logo">Cake Wallet</a></li>
|
||||
<li><a id="ext-noicon" href="https://monerujo.io"><img src="/img/Monerujo-wallet.png" alt="Monerujo Logo">Monerujo</a></li>
|
||||
<li><a id="ext-noicon" href="https://mymonero.com"><img src="/img/mymonero.png" alt="MyMonero Logo">MyMonero</a></li>
|
||||
<li><a id="ext-noicon" href="https://edge.app/"><img src="/img/edge-wallet.png" alt="Edge Logo">Edge</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End 'Mobile & Light Wallets' -->
|
||||
</section>
|
||||
<section class="container full">
|
||||
<!-- 'Import Blockchain' -->
|
||||
<div class="info-block">
|
||||
@ -262,24 +314,6 @@ permalink: /downloads/index.html
|
||||
</div>
|
||||
<!-- End 'Hardware Wallets' -->
|
||||
</section>
|
||||
<section class="container full">
|
||||
<!-- 'Mobile & Light Wallets' -->
|
||||
<div class="info-block">
|
||||
<h2 id="mobilelight">{% t downloads.mobilelight %}</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-sm-12 col-xs-12">
|
||||
<p>{% t downloads.mobilelight1 %} <a href="/community/hangouts/"> {% t downloads.mobilelight2 %}</a> {% t downloads.mobilelight3 %}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row between-xs mob-wallets">
|
||||
<a href="https://cakewallet.io"><img style="height: 115px;" src="/img/cakewallet.png" alt="Cake Wallet Logo"></a>
|
||||
<a href="https://monerujo.io"><img style="height: 115px;" src="/img/Monerujo-wallet.png" alt="Monerujo Logo"></a>
|
||||
<a href="https://mymonero.com"><img src="/img/mymonero.png" alt="MyMonero Logo"></a>
|
||||
<a href="https://edge.app/"><img style="height: 115px;" src="/img/edge-wallet.png" alt="Edge Logo"></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End 'Mobile & Light Wallets' -->
|
||||
</section>
|
||||
</div>
|
||||
<a href="#" class="arrow-up"><i></i></a>
|
||||
</div>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
BIN
img/mymonero.png
BIN
img/mymonero.png
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 8.4 KiB |
Loading…
Reference in New Issue
Block a user