monero-project/monero-site
monero-project/monero-site
1
0
Fork 0
mirror of https://github.com/monero-project/monero-site.git synced 2024-12-23 12:09:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #1509

Browse source 
reduce CLS when lazy-loading images
This commit is contained in:
luigi1111 2021-03-17 01:35:15 -04:00 committed by GitHub
commit 8e9da2a307
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 32 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
css/custom.css
View file

@ -1026,7 +1026,10 @@ a, button, input, select, textarea, label, label:checked, label:focus {
h1, h2, h3, h4, h5, h6, p {margin: 0; padding: 0;} h1, h2, h3, h4, h5, h6, p {margin: 0; padding: 0;}
img, video {max-width: 100%;} img, video {
max-width: 100%;
height: auto;
}
img.top-margin { img.top-margin {
margin-top: 1.2rem; margin-top: 1.2rem;
@ -3265,6 +3268,7 @@ span.icon-browser {
padding: 0; padding: 0;
padding-right: 0.5rem; padding-right: 0.5rem;
height: 20px; height: 20px;
width: auto;
vertical-align: middle; vertical-align: middle;
} }

26
downloads/index.md
View file

@ -48,7 +48,7 @@ permalink: /downloads/index.html
<i>{% t downloads.gui_intro %}</i> <i>{% t downloads.gui_intro %}</i>
</div> </div>
<div class="col-md-7 col-sm-12 align-blocks"> <div class="col-md-7 col-sm-12 align-blocks">
<img class="screen" loading="lazy" alt="{% t accessibility.guiscreen %}" src={% if site.lang == "en" %}"/img/downloads/gui.png"{% else %}"/img/downloads/{{site.lang}}/gui.png"{% endif %}> <img class="screen" width="888" height="880" loading="lazy" alt="{% t accessibility.guiscreen %}" src={% if site.lang == "en" %}"/img/downloads/gui.png"{% else %}"/img/downloads/{{site.lang}}/gui.png"{% endif %}>
</div> </div>
<div class="col-md-5 col-sm-12 align-blocks"> <div class="col-md-5 col-sm-12 align-blocks">
<ul class="logo"> <ul class="logo">
@ -138,7 +138,7 @@ permalink: /downloads/index.html
<i>{% t downloads.cli_intro %}</i> <i>{% t downloads.cli_intro %}</i>
</div> </div>
<div class="col-md-7 col-sm-12 align-blocks"> <div class="col-md-7 col-sm-12 align-blocks">
<img class="screen" loading="lazy" alt="{% t accessibility.cliscreen %}" src={% if site.lang == "en" %}"/img/downloads/cli.png"{% else %}"/img/downloads/{{site.lang}}/cli.png"{% endif %}> <img class="screen" width="882" height="882" loading="lazy" alt="{% t accessibility.cliscreen %}" src={% if site.lang == "en" %}"/img/downloads/cli.png"{% else %}"/img/downloads/{{site.lang}}/cli.png"{% endif %}>
</div> </div>
<div class="col-md-5 col-sm-12 align-blocks"> <div class="col-md-5 col-sm-12 align-blocks">
<ul class="logo"> <ul class="logo">
@ -238,25 +238,25 @@ permalink: /downloads/index.html
<th>{% t downloads.sourcecode %}</th> <th>{% t downloads.sourcecode %}</th>
</tr> </tr>
<tr> <tr>
<td><img src="/img/cakewallet.png" loading="lazy" alt="Cake Wallet Logo"><a href="https://cakewallet.com/">Cake Wallet</a></td> <td><img src="/img/cakewallet.png" width="172" height="202" loading="lazy" 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><span class="icon-android"></span><span class="icon-apple"></span></td>
<td>X</td> <td>X</td>
<td><a class="ext-noicon" href="https://github.com/cake-tech/cake_wallet" aria-label="GitHub icon"><span class="icon-github"></span></a></td> <td><a class="ext-noicon" href="https://github.com/cake-tech/cake_wallet" aria-label="GitHub icon"><span class="icon-github"></span></a></td>
</tr> </tr>
<tr> <tr>
<td><img src="/img/Monerujo-wallet.png" loading="lazy" alt="Monerujo logo"><a href="https://monerujo.io/">Monerujo</a></td> <td><img src="/img/Monerujo-wallet.png" width="100" height="100" loading="lazy" alt="Monerujo logo"><a href="https://monerujo.io/">Monerujo</a></td>
<td><span class="icon-android"></span></td> <td><span class="icon-android"></span></td>
<td>X</td> <td>X</td>
<td><a class="ext-noicon" href="https://github.com/m2049r/xmrwallet" aria-label="GitHub icon"><span class="icon-github"></span></a></td> <td><a class="ext-noicon" href="https://github.com/m2049r/xmrwallet" aria-label="GitHub icon"><span class="icon-github"></span></a></td>
</tr> </tr>
<tr> <tr>
<td><img src="/img/mymonero.png" loading="lazy" alt="Mymonero logo" style="height: 15px;"><a href="https://mymonero.com/">MyMonero</a></td> <td><img src="/img/mymonero.png" width="141" height="95" loading="lazy" alt="Mymonero logo" style="height: 15px;"><a href="https://mymonero.com/">MyMonero</a></td>
<td><span class="icon-apple"></span></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><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 class="ext-noicon" href="https://github.com/mymonero" aria-label="GitHub icon"><span class="icon-github"></span></a></td> <td><a class="ext-noicon" href="https://github.com/mymonero" aria-label="GitHub icon"><span class="icon-github"></span></a></td>
</tr> </tr>
<tr> <tr>
<td><img src="/img/edge-wallet.png" loading="lazy" alt="Edge Logo"><a href="https://edge.app/">Edge</a></td> <td><img src="/img/edge-wallet.png" width="141" height="142" loading="lazy" alt="Edge Logo"><a href="https://edge.app/">Edge</a></td>
<td><span class="icon-android"></span><span class="icon-apple"></span></td> <td><span class="icon-android"></span><span class="icon-apple"></span></td>
<td>X</td> <td>X</td>
<td><a class="ext-noicon" href="https://github.com/EdgeApp" aria-label="GitHub icon"><span class="icon-github"></span></a></td> <td><a class="ext-noicon" href="https://github.com/EdgeApp" aria-label="GitHub icon"><span class="icon-github"></span></a></td>
@ -264,10 +264,10 @@ permalink: /downloads/index.html
</table> </table>
<div class="row between-xs mob-wallets mobile-only"> <div class="row between-xs mob-wallets mobile-only">
<ul> <ul>
<li><a class="ext-noicon" href="https://cakewallet.io" aria-label="GitHub icon"><img style="width: 50px" src="/img/cakewallet.png" loading="lazy" alt="Cake Wallet Logo">Cake Wallet</a></li> <li><a class="ext-noicon" href="https://cakewallet.io" aria-label="GitHub icon"><img style="width: 50px" src="/img/cakewallet.png" width="172" height="202" loading="lazy" alt="Cake Wallet Logo">Cake Wallet</a></li>
<li><a class="ext-noicon" href="https://monerujo.io" aria-label="GitHub icon"><img src="/img/Monerujo-wallet.png" loading="lazy" alt="Monerujo Logo">Monerujo</a></li> <li><a class="ext-noicon" href="https://monerujo.io" aria-label="GitHub icon"><img src="/img/Monerujo-wallet.png" width="100" height="100" loading="lazy" alt="Monerujo Logo">Monerujo</a></li>
<li><a class="ext-noicon" href="https://mymonero.com" aria-label="GitHub icon"><img src="/img/mymonero.png" loading="lazy" alt="MyMonero Logo">MyMonero</a></li> <li><a class="ext-noicon" href="https://mymonero.com" aria-label="GitHub icon"><img src="/img/mymonero.png" width="141" height="95" loading="lazy" alt="MyMonero Logo">MyMonero</a></li>
<li><a class="ext-noicon" href="https://edge.app/" aria-label="GitHub icon"><img src="/img/edge-wallet.png" loading="lazy" alt="Edge Logo">Edge</a></li> <li><a class="ext-noicon" href="https://edge.app/" aria-label="GitHub icon"><img src="/img/edge-wallet.png" width="141" height="142" loading="lazy" alt="Edge Logo">Edge</a></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -300,11 +300,11 @@ permalink: /downloads/index.html
</div> </div>
</div> </div>
<div class="row mob-wallets center-xs"> <div class="row mob-wallets center-xs">
<a class="ext-noicon" href="https://support.ledger.com/hc/en-us/articles/360006352934-Monero-XMR-"><img src="/img/ledger.png" loading="lazy" alt="ledger logo"></a> <a class="ext-noicon" href="https://support.ledger.com/hc/en-us/articles/360006352934-Monero-XMR-"><img src="/img/ledger.png" width="318" height="99" loading="lazy" alt="ledger logo"></a>
<a class="ext-noicon" href="https://wiki.trezor.io/Monero_(XMR)"><img src="/img/trezor.png" loading="lazy" alt="Trezor logo"></a> <a class="ext-noicon" href="https://wiki.trezor.io/Monero_(XMR)"><img src="/img/trezor.png" width="318" height="99" loading="lazy" alt="Trezor logo"></a>
</div> </div>
<div class="row mob-wallets center-xs"> <div class="row mob-wallets center-xs">
<a class="ext-noicon" href="https://github.com/monero-project/kastelo"><img src="/img/kastelo.png" loading="lazy" alt="Kastelo logo"></a> <a class="ext-noicon" href="https://github.com/monero-project/kastelo"><img src="/img/kastelo.png" width="318" height="85" loading="lazy" alt="Kastelo logo"></a>
</div> </div>
</div> </div>
<!-- End 'Hardware Wallets' --> <!-- End 'Hardware Wallets' -->

8
get-started/accepting/index.md
View file

@ -17,10 +17,10 @@ permalink: /get-started/accepting/index.html
<h3 id="gui">{% t accepting.title_gui %}</h3> <h3 id="gui">{% t accepting.title_gui %}</h3>
<p>{% t accepting.gui1 %}</p> <p>{% t accepting.gui1 %}</p>
<p>{% t accepting.gui2 %} <a href="https://github.com/monero-ecosystem/monero-GUI-guide/blob/master/monero-GUI-guide.md#receive-monero">{% t accepting.guilinkguide %}</a></p> <p>{% t accepting.gui2 %} <a href="https://github.com/monero-ecosystem/monero-GUI-guide/blob/master/monero-GUI-guide.md#receive-monero">{% t accepting.guilinkguide %}</a></p>
<img class="top-margin" src="/img/receive.png" loading="lazy" alt="receive page"> <img class="top-margin" src="/img/receive.png" width="980" height="800" loading="lazy" alt="receive page">
<p>{% t accepting.guiinstructions %}</p> <p>{% t accepting.guiinstructions %}</p>
<p>{% t accepting.guimerchant %} <a href="https://github.com/monero-ecosystem/monero-GUI-guide/blob/master/monero-GUI-guide.md#merchant-view">{% t accepting.guilinkguide1 %}</a>.</p> <p>{% t accepting.guimerchant %} <a href="https://github.com/monero-ecosystem/monero-GUI-guide/blob/master/monero-GUI-guide.md#merchant-view">{% t accepting.guilinkguide1 %}</a>.</p>
<img class="top-margin" src="/img/merchant_page.png" loading="lazy" alt="merchant view"> <img class="top-margin" src="/img/merchant_page.png" width="980" height="800" loading="lazy" alt="merchant view">
<p>{% t accepting.guimerchant1 %}</p> <p>{% t accepting.guimerchant1 %}</p>
<p>{% t accepting.guisteps %}</p> <p>{% t accepting.guisteps %}</p>
<ol> <ol>
@ -36,9 +36,9 @@ permalink: /get-started/accepting/index.html
<p>{% t accepting.clicreateaccount %}</p> <p>{% t accepting.clicreateaccount %}</p>
<p><code>account new [label text with white spaces allowed]</code></p> <p><code>account new [label text with white spaces allowed]</code></p>
<p>{% t accepting.clicreateaccount1 %}</p> <p>{% t accepting.clicreateaccount1 %}</p>
<img class="top-margin" src="/img/account_cli.png" loading="lazy" alt="accounts"> <img class="top-margin" src="/img/account_cli.png" width="755" height="142" loading="lazy" alt="accounts">
<p>{% t accepting.cliindex %}</p> <p>{% t accepting.cliindex %}</p>
<img class="top-margin" src="/img/account_switch.png" loading="lazy" alt="accounts switch"> <img class="top-margin" src="/img/account_switch.png" width="752" height="216" loading="lazy" alt="accounts switch">
<p>{% t accepting.cliindex1 %}</p> <p>{% t accepting.cliindex1 %}</p>
<p><code>address new [label text with white spaces allowed]</code></p> <p><code>address new [label text with white spaces allowed]</code></p>
<p><i>{% t accepting.clinotes %}</i></p> <p><i>{% t accepting.clinotes %}</i></p>

8
get-started/what-is-monero/index.md
View file

@ -19,12 +19,12 @@ permalink: /get-started/what-is-monero/index.html
<p>{% t what-is-monero.leading_para2 %}</p> <p>{% t what-is-monero.leading_para2 %}</p>
</div> </div>
<div class="col-lg-5 col-md-6 col-sm-4 col-xs-12 last-sm first-xs center-xs"> <div class="col-lg-5 col-md-6 col-sm-4 col-xs-12 last-sm first-xs center-xs">
<img src="/img/crypto-lock.png" loading="lazy" alt="Encrypted lock" class="main-icon"> <img src="/img/crypto-lock.png" width="1500" height="1500" loading="lazy" alt="Encrypted lock" class="main-icon">
</div> </div>
</div> </div>
<div class="row middle-xs info-block-row"> <div class="row middle-xs info-block-row">
<div class="col-lg-5 col-md-6 col-sm-4 col-xs-12 center-xs"> <div class="col-lg-5 col-md-6 col-sm-4 col-xs-12 center-xs">
<img src="/img/monero-classified.png" loading="lazy" alt="Classified document" class="main-icon"> <img src="/img/monero-classified.png" width="1500" height="1500" loading="lazy" alt="Classified document" class="main-icon">
</div> </div>
<div class="col-lg-7 col-md-6 col-sm-8 col-xs-12 why-text"> <div class="col-lg-7 col-md-6 col-sm-8 col-xs-12 why-text">
<h3>{% t what-is-monero.confidential %}</h3> <h3>{% t what-is-monero.confidential %}</h3>
@ -38,12 +38,12 @@ permalink: /get-started/what-is-monero/index.html
<p>{% t what-is-monero.electronic_para1 %}</p> <p>{% t what-is-monero.electronic_para1 %}</p>
</div> </div>
<div class="col-lg-5 col-md-6 col-sm-4 col-xs-12 last-sm first-xs center-xs"> <div class="col-lg-5 col-md-6 col-sm-4 col-xs-12 last-sm first-xs center-xs">
<img src="/img/monero-electronic-cash.png" loading="lazy" alt="Electronic cash" class="main-icon"> <img src="/img/monero-electronic-cash.png" width="1500" height="1500" loading="lazy" alt="Electronic cash" class="main-icon">
</div> </div>
</div> </div>
<div class="row middle-xs info-block-row"> <div class="row middle-xs info-block-row">
<div class="col-lg-5 col-md-6 col-sm-4 col-xs-12 center-xs"> <div class="col-lg-5 col-md-6 col-sm-4 col-xs-12 center-xs">
<img src="/img/academic-growth.png" loading="lazy" alt="Academic growth" class="main-icon"> <img src="/img/academic-growth.png" width="1500" height="1500" loading="lazy" alt="Academic growth" class="main-icon">
</div> </div>
<div class="col-lg-7 col-md-6 col-sm-8 col-xs-12 why-text"> <div class="col-lg-7 col-md-6 col-sm-8 col-xs-12 why-text">
<h3>{% t what-is-monero.grassroots %}</h3> <h3>{% t what-is-monero.grassroots %}</h3>

12
index.html
View file

@ -45,12 +45,12 @@ permalink: index.html
<p><a href="{{ site.baseurl }}/downloads/" class="btn-link btn-fixed">{% t home.downloads %}</a></p> <p><a href="{{ site.baseurl }}/downloads/" class="btn-link btn-fixed">{% t home.downloads %}</a></p>
</div> </div>
<div class="col-lg-6 col-md-6 col-sm-4 col-xs-4 center-xs"> <div class="col-lg-6 col-md-6 col-sm-4 col-xs-4 center-xs">
<img src="/img/create-wallet.png" loading="lazy" alt="Create wallet" class="main-icon"> <img src="/img/create-wallet.png" width="1500" height="1500" loading="lazy" alt="Create wallet" class="main-icon">
</div> </div>
</div> </div>
<div class="row middle-xs info-block-row"> <div class="row middle-xs info-block-row">
<div class="col-lg-6 col-md-6 col-sm-4 col-xs-4 center-xs first-md last-sm last-xs"> <div class="col-lg-6 col-md-6 col-sm-4 col-xs-4 center-xs first-md last-sm last-xs">
<img src="/img/exchange.png" loading="lazy" alt="Exchange" class="main-icon"> <img src="/img/exchange.png" width="1500" height="1500" loading="lazy" alt="Exchange" class="main-icon">
</div> </div>
<div class="col-lg-6 col-md-6 col-sm-8 col-xs-8 why-text"> <div class="col-lg-6 col-md-6 col-sm-8 col-xs-8 why-text">
<h3>{% t home.getcoins %}</h3> <h3>{% t home.getcoins %}</h3>
@ -66,12 +66,12 @@ permalink: index.html
<p><a href="{{ site.baseurl }}/community/merchants/" class="btn-link btn-fixed">{% t home.merchants %}</a></p> <p><a href="{{ site.baseurl }}/community/merchants/" class="btn-link btn-fixed">{% t home.merchants %}</a></p>
</div> </div>
<div class="col-lg-6 col-md-6 col-sm-4 col-xs-4 center-xs"> <div class="col-lg-6 col-md-6 col-sm-4 col-xs-4 center-xs">
<img src="/img/monero-accepted.png" loading="lazy" alt="Merchants" class="main-icon"> <img src="/img/monero-accepted.png" width="1500" height="1500" loading="lazy" alt="Merchants" class="main-icon">
</div> </div>
</div> </div>
<div class="row middle-xs info-block-row"> <div class="row middle-xs info-block-row">
<div class="col-lg-6 col-md-6 col-sm-4 col-xs-4 center-xs first-md last-sm last-xs"> <div class="col-lg-6 col-md-6 col-sm-4 col-xs-4 center-xs first-md last-sm last-xs">
<img src="/img/support.png" loading="lazy" alt="FAQ" class="main-icon"> <img src="/img/support.png" width="1500" height="1500" loading="lazy" alt="FAQ" class="main-icon">
</div> </div>
<div class="col-lg-6 col-md-6 col-sm-8 col-xs-8 why-text"> <div class="col-lg-6 col-md-6 col-sm-8 col-xs-8 why-text">
<h3>{% t home.answers %}</h3> <h3>{% t home.answers %}</h3>
@ -135,12 +135,12 @@ permalink: index.html
<p><a href="{{site.baseurl}}/get-started/contributing/" class="btn-link btn-fixed">{% t home.contributing %}</a></p> <p><a href="{{site.baseurl}}/get-started/contributing/" class="btn-link btn-fixed">{% t home.contributing %}</a></p>
</div> </div>
<div class="col-lg-6 col-md-6 col-sm-4 col-xs-4 center-xs"> <div class="col-lg-6 col-md-6 col-sm-4 col-xs-4 center-xs">
<img src="/img/learn-about-monero.png" loading="lazy" alt="Contribute" class="main-icon"> <img src="/img/learn-about-monero.png" width="1500" height="1500" loading="lazy" alt="Contribute" class="main-icon">
</div> </div>
</div> </div>
<div class="row middle-xs info-block-row"> <div class="row middle-xs info-block-row">
<div class="col-lg-6 col-md-6 col-sm-4 col-xs-4 center-xs first-md last-sm last-xs"> <div class="col-lg-6 col-md-6 col-sm-4 col-xs-4 center-xs first-md last-sm last-xs">
<img src="/img/mrl-logo.svg" loading="lazy" alt="Monero Research Lab" class="main-icon-mrl"> <img src="/img/mrl-logo.svg" width="1500" height="1500" loading="lazy" alt="Monero Research Lab" class="main-icon-mrl">
</div> </div>
<div class="col-lg-6 col-md-6 col-sm-8 col-xs-8 why-text"> <div class="col-lg-6 col-md-6 col-sm-8 col-xs-8 why-text">
<h3>{% t titles.researchlab %}</h3> <h3>{% t titles.researchlab %}</h3>