Light theme: more fixes, some image replacements

This commit is contained in:
mDuo13
2021-07-08 18:28:20 -07:00
parent c008688f46
commit cc7a3d3768
31 changed files with 511 additions and 155 deletions

View File

@@ -92,7 +92,7 @@
</a>
</div>
</div>
<a href="./assets/pdf/xrpl-sustainability-methodology-2020.pdf" target="_blank" class="text-white arrow-link bold mt-4 d-block">{% trans %}Learn more about the methodology{% endtrans %}</a>
<a href="./assets/pdf/xrpl-sustainability-methodology-2020.pdf" target="_blank" class="arrow-link bold mt-4 d-block">{% trans %}Learn more about the methodology{% endtrans %}</a>
</div>
</div>
@@ -112,7 +112,7 @@
<div class="dot" id="kWh-btc-dot"></div>
</div>
<div class="num-wrapper">
<img src="assets/img/icons/bw-bitcoin.png" class="mw-100 mt-3">
<img src="assets/img/icons/bw-bitcoin.png" alt="BTC" class="mw-100 mt-3 invertible-img">
<p class="h6 mt-2 mb-1">{% trans %}Bitcoin{% endtrans %}</p>
<h5 class="normal mb-0" id="kWh-btc"></h5>
<p class="text-small black-90">{% trans %}kWh{% endtrans %}</p>
@@ -124,7 +124,7 @@
<div class="dot" id="kWh-eth-dot"></div>
</div>
<div class="num-wrapper">
<img src="assets/img/icons/bw-ethereum.png" class="mw-100 mt-3">
<img src="assets/img/icons/bw-ethereum.png" alt="ETH" class="mw-100 mt-3 invertible-img">
<p class="h6 mt-2 mb-1">{% trans %}Ethereum{% endtrans %}</p>
<h5 class="normal mb-0" id="kWh-eth"></h5>
<p class="text-small black-90">{% trans %}kWh{% endtrans %}</p>
@@ -136,7 +136,7 @@
<div class="dot" id="kWh-pap-dot"></div>
</div>
<div class="num-wrapper">
<img src="assets/img/icons/bw-cash.png" class="mw-100 mt-3 mb-2">
<img src="assets/img/icons/bw-cash.png" class="mw-100 mt-3 mb-2 invertible-img">
<p class="h6 mt-2 mb-1">{% trans %}Cash{% endtrans %}</p>
<h5 class="normal mb-0" id="kWh-pap"></h5>
<p class="text-small black-90">{% trans %}kWh{% endtrans %}</p>
@@ -148,7 +148,7 @@
<div class="dot" id="kWh-xrp-dot"></div>
</div>
<div class="num-wrapper">
<img src="assets/img/icons/xrp.png" class="mw-100 mt-3">
<img src="assets/img/icons/xrp.png" alt="XRP" class="mw-100 mt-3 invertible-img">
<p class="h6 mt-2 mb-1">XRP</p>
<h5 class="normal mb-0" id="kWh-xrp"></h5>
<p class="text-small black-90">{% trans %}kWh{% endtrans %}</p>
@@ -160,7 +160,7 @@
<div class="dot" id="kWh-vsa-dot"></div>
</div>
<div class="num-wrapper">
<img src="assets/img/icons/bw-visa.png" alt="{% trans %}Visa{% endtrans %}" class="mw-100 mb-2" style="margin-top: 1.85rem;">
<img src="assets/img/icons/bw-visa.png" alt="{% trans %}Visa{% endtrans %}" class="mw-100 mb-2 invertible-img" style="margin-top: 1.85rem;">
<p class="h6 mt-2 mb-1">Visa</p>
<h5 class="normal mb-0" id="kWh-vsa"></h5>
<p class="text-small black-90">{% trans %}kWh{% endtrans %}</p>
@@ -172,7 +172,7 @@
<div class="dot" id="kWh-mst-dot"></div>
</div>
<div class="num-wrapper">
<img src="assets/img/icons/bw-mastercard.png" alt="{% trans %}Mastercard{% endtrans %}" class="mw-100 mb-1" style="margin-top: 1.65rem;">
<img src="assets/img/icons/bw-mastercard.png" alt="{% trans %}Mastercard{% endtrans %}" class="mw-100 mb-1 invertible-img" style="margin-top: 1.65rem;">
<p class="h6 mt-2 mb-1">{% trans %}Mastercard{% endtrans %}</p>
<h5 class="normal mb-0" id="kWh-mst"></h5>
<p class="text-small black-90">{% trans %}kWh{% endtrans %}</p>
@@ -290,37 +290,37 @@
</thead>
<tbody>
<tr>
<td class=""><div class="w48 mr-3 text-center d-md-inline-block"><img class="h36" src="./img/logos/bitcoin.svg"></div>Bitcoin</td>
<td class=""><div class="w48 mr-3 text-center d-md-inline-block"><img class="h36 invertible-img" src="./img/logos/bitcoin.svg"></div>Bitcoin</td>
<td class="fs-6 text-right">951.58<span class="ratio"> kWh/tx</span></td>
<td class="fs-6 text-right">4.66<sup>-7</sup><span class="ratio"> Mt/tx</span></td>
<td class="fs-6 text-right">75.7<span class="ratio"> gal/tx</span></td>
</tr>
<tr>
<td class=""><div class="w48 mr-3 text-center d-md-inline-block"><img class="h36" src="./img/logos/ethereum.svg"></div>Ethereum</td>
<td class=""><div class="w48 mr-3 text-center d-md-inline-block"><img class="h36 invertible-img" src="./img/logos/ethereum.svg"></div>Ethereum</td>
<td class="fs-6 text-right">42.8633<span class="ratio"> kWh/tx</span></td>
<td class="fs-6 text-right">2.73<sup>-8</sup><span class="ratio"> Mt/tx</span></td>
<td class="fs-6 text-right">2.3867<span class="ratio"> gal/tx</span></td>
</tr>
<tr>
<td class=""><div class="w48 mr-3 text-center d-md-inline-block"><img class="h36" src="./img/logos/xrp.svg"></div>XRP</td>
<td class=""><div class="w48 mr-3 text-center d-md-inline-block"><img class="h36 invertible-img" src="./img/logos/xrp.svg"></div>XRP</td>
<td class="fs-6 text-right">0.0079<span class="ratio"> kWh/tx</span></td>
<td class="fs-6 text-right">4.5<sup>-12</sup><span class="ratio"> Mt/tx</span></td>
<td class="fs-6 text-right">0.00063<span class="ratio"> gal/tx</span></td>
</tr>
<tr>
<td class=""><div class="w48 mr-3 text-center d-md-inline-block"><img class="w40" src="./img/logos/visa.svg"></div>Visa</td>
<td class=""><div class="w48 mr-3 text-center d-md-inline-block"><img class="w40 invertible-img" src="./img/logos/visa.svg"></div>Visa</td>
<td class="fs-6 text-right">0.0008<span class="ratio"> kWh/tx</span></td>
<td class="fs-6 text-right">4.6<sup>-13</sup><span class="ratio"> Mt/tx</span></td>
<td class="fs-6 text-right">0.00006<span class="ratio"> gal/tx</span></td>
</tr>
<tr>
<td class=""><div class="w48 mr-3 text-center d-md-inline-block"><img class="w40" src="./img/logos/mastercard.svg"></div>Mastercard</td>
<td class=""><div class="w48 mr-3 text-center d-md-inline-block"><img class="w40 invertible-img" src="./img/logos/mastercard.svg"></div>Mastercard</td>
<td class="fs-6 text-right">0.0006<span class="ratio"> kWh/tx</span></td>
<td class="fs-6 text-right">5.1<sup>-13</sup><span class="ratio"> Mt/tx</span></td>
<td class="fs-6 text-right">0.00005<span class="ratio"> gal/tx</span></td>
</tr>
<tr>
<td class=""><div class="w48 mr-3 text-center d-md-inline-block"><img class="w40" src="./img/logos/paper-currency.svg"></div>{% trans %}Paper Currency{% endtrans %}</td>
<td class=""><div class="w48 mr-3 text-center d-md-inline-block"><img class="w40 invertible-img" src="./img/logos/paper-currency.svg"></div>{% trans %}Paper Currency{% endtrans %}</td>
<td class="fs-6 text-right">0.044<span class="dblue">0</span><span class="ratio"> kWh/tx</span></td>
<td class="fs-6 text-right">2.32<sup>-11</sup><span class="ratio"> Mt/tx</span></td>
<td class="fs-6 text-right">0.0035<span class="dblue">0</span><span class="ratio"> gal/tx</span></td>

View File

@@ -58,7 +58,8 @@
{% set platforms = [
{ "name": "GitHub",
"img": "assets/img/logos/github.svg",
"link": "https://github.com/ripple/xrpl-dev-portal"},
"link": "https://github.com/ripple/xrpl-dev-portal",
"imgclasses": "invertible-img"},
{ "name": "Twitch",
"img": "assets/img/logos/twitch.svg",
"link": "https://www.twitch.tv/ripplexdev"},
@@ -73,7 +74,7 @@
{% for plat in platforms %}
<a class="card" href="{{plat.link}}">
<div class="card-body">
<div class="circled-logo"><img src="{{plat.img}}" alt="(logo)" /></div>
<div class="circled-logo"><img src="{{plat.img}}" alt="(logo)" {% if plat.imgclasses %}class="{{plat.imgclasses}}"{% endif %}/></div>
<h4 class="card-title h5">{{plat.name}}</h4>
</div>
<div class="card-footer">&nbsp;</div>

View File

@@ -11,7 +11,7 @@
{% endblock %}
{% block bodyclasses %}no-sidebar{% endblock %}
{% block mainclasses %}landing{% endblock %}
{% block mainclasses %}landing page-uses{% endblock %}
{% block breadcrumbs %}{% endblock %}
@@ -80,68 +80,81 @@
</div>
<p class="mb-0 longform mt-8-until-sm mt-3 ">{% trans %}There are companies and developer projects around the world that leverage the XRP Ledger to solve interesting problems across a variety of industries and use cases.{% endtrans %}</p>
</div>
{% set cards = [
{ "link": "https://www.bitgo.com/",
"name": "BitGo",
"id": "bitgo",
"title": _("Asset Custody"),
"description": _("BitGo provides custodial and non-custodial asset holdings for digital assets including XRP. BitGo's enterprise-level security empowers businesses to integrate digital currencies like XRP into new and existing financial systems.")},
{ "link": "https://bitpay.com/",
"id": "bitpay",
"name": "BitPay",
"title": _("Payment Processing"),
"description": _("BitPay builds powerful, enterprise-grade tools for accepting and spending cryptocurrencies, including XRP.")},
{ "link": "https://coil.com/",
"id": "coil",
"name": "Coil",
"title": _("Web Monetization"),
"description": _("Coil provides web monetization as an alternative to traditional paid advertising. Coil uses the interledger protocol (ILP) to stream micropayments as users consume content. The XRPLs payment channels provide an ideal system for settling these micropayments at high speed and low cost.")},
{ "link": "https://www.forte.io/",
"id": "forte",
"name": "Forte",
"title": _("Online Gaming"),
"description": _("Forte offers an unprecedented set of easy-to-use tools and services for game developers to integrate blockchain technology into their games, to unlock new economic and creative opportunities for gamers across the world.")},
{ "link": "https://gatehub.net/",
"id": "gatehub",
"name": "Gatehub",
"title": _("Wallet and Platforms"),
"description": _("GateHub is a platform for the Internet of Value, built on the XRP Ledger protocol. It allows everyone to send, receive, trade and manage any type of assets.")},
{ "link": "https://www.exodus.io/",
"id": "exodus",
"name": "Exodus",
"title": _("Wallets and Apps"),
"description": _("Exodus offers wallets and applications for securing, managing and exchanging crypto.")},
{ "link": "https://ripple.com/",
"id": "ripple",
"name": "Ripple",
"title": _("On-Demand Liquidity"),
"description": _("Ripple powers instant, lower-cost settlement of cross-border payments using XRP to source liquidity on demand. XRP is ideally suited for global payments because it's quicker, less costly, and more scalable than any other digital asset.")},
{ "link": "https://towo.io/",
"id": "towo",
"name": "Towo Labs",
"title": _("Infrastructure"),
"description": _("Towo Labs was founded in 2019, to develop XRP Ledger and Interledger infrastructures and make non-custodial crypto management easier.")},
{ "link": "https://raisedinspace.com/",
"id": "raisedinspace",
"name": "Raised in Space",
"title": _("Music"),
"description": _("Raised in Space is a music/tech investment group focused on raising the value of music, innovating across the entire value chain of the music industry.")},
{ "link": "https://xrpl-labs.com/",
"id": "xrpl-labs",
"name": "XRPL Labs",
"title": _("Applications"),
"description": _("From cold storage to apps for signing transactions, XRPL Labs is dedicated to building software on the XRP Ledger.")},
{ "link": "https://xrplorer.com/",
"id": "xrplorer",
"name": "Xrplorer",
"title": _("Security"),
"description": _("Xrplorer offers services and tools that help prevent and combat fraudulent activity on the XRPL as well as custom APIs and analytics that supplement the XRPL APIs where they are not enough.")},
] %}
<!-- <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 card-deck">
{% for card in cards %}
<a class="card col" href="{{card.link}}" target="_blank" id="{{card.id}}">
<div class="card-body">
<div class="head-logo"><img src="{{card.img}}" alt="{{card.name}}" {% if card.imgclasses %}class="{{card.imgclasses}}"{% endif %}/></div>
<h4 class="card-title h5">{{card.title}}</h4>
</div>
<div class="card-footer">&nbsp;</div>
</a>
{% endfor %}
</div> -->
<div class="mt-10 card-grid card-grid-3xN">
{% set cards = [
{ "href": "https://www.bitgo.com/",
"id": "magenta-orange",
"img": "./img/uses/bitgo.svg",
"title": _("Asset Custody"),
"description": _("BitGo provides custodial and non-custodial asset holdings for digital assets including XRP. BitGo's enterprise-level security empowers businesses to integrate digital currencies like XRP into new and existing financial systems.")},
{ "href": "https://bitpay.com/",
"id": "blue-green",
"img": "./img/uses/bitpay.svg",
"title": _("Payment Processing"),
"description": _("BitPay builds powerful, enterprise-grade tools for accepting and spending cryptocurrencies, including XRP.")},
{ "href": "https://coil.com/",
"id": "purple-blue",
"img": "./img/uses/coil.svg",
"title": _("Web Monetization"),
"description": _("Coil provides web monetization as an alternative to traditional paid advertising. Coil uses the interledger protocol (ILP) to stream micropayments as users consume content. The XRPLs payment channels provide an ideal system for settling these micropayments at high speed and low cost.")},
{ "href": "https://www.forte.io/",
"id": "light-blue",
"img": "./img/uses/forte.svg",
"title": _("Online Gaming"),
"description": _("Forte offers an unprecedented set of easy-to-use tools and services for game developers to integrate blockchain technology into their games, to unlock new economic and creative opportunities for gamers across the world.")},
{ "href": "https://gatehub.net/",
"id": "pink-purple",
"img": "./img/uses/gatehub.svg",
"title": _("Wallet and Platforms"),
"description": _("GateHub is a platform for the Internet of Value, built on the XRP Ledger protocol. It allows everyone to send, receive, trade and manage any type of assets.")},
{ "href": "https://www.exodus.io/",
"id": "green-blue",
"img": "./img/uses/exodus.svg",
"title": _("Wallets and Apps"),
"description": _("Exodus offers wallets and applications for securing, managing and exchanging crypto.")},
{ "href": "https://ripple.com/",
"id": "blue-light-blue",
"img": "./img/uses/ripple.svg",
"title": _("On-Demand Liquidity"),
"description": _("Ripple powers instant, lower-cost settlement of cross-border payments using XRP to source liquidity on demand. XRP is ideally suited for global payments because it's quicker, less costly, and more scalable than any other digital asset.")},
{ "href": "https://towo.io/",
"id": "purple-blue",
"img": "./img/uses/towo.svg",
"title": _("Infrastructure"),
"description": _("Towo Labs was founded in 2019, to develop XRP Ledger and Interledger infrastructures and make non-custodial crypto management easier.")},
{ "href": "https://raisedinspace.com/",
"id": "orange-yellow",
"img": "./img/uses/raised.svg",
"title": _("Music"),
"description": _("Raised in Space is a music/tech investment group focused on raising the value of music, innovating across the entire value chain of the music industry.")},
{ "href": "https://xrpl-labs.com/",
"id": "magenta-orange",
"img": "./img/uses/xrpl-labs.svg",
"title": _("Applications"),
"description": _("From cold storage to apps for signing transactions, XRPL Labs is dedicated to building software on the XRP Ledger.")},
{ "href": "https://xrplorer.com/",
"id": "green-purple",
"img": "./img/uses/xplorer.svg",
"title": _("Security"),
"description": _("Xrplorer offers services and tools that help prevent and combat fraudulent activity on the XRPL as well as custom APIs and analytics that supplement the XRPL APIs where they are not enough.")},
] %}
{% for card in cards %}
<a class="col-new col-new-card ls-none bg-grey-800 br-8" href="{{card.href}}" target="_blank" id="{{card.id}}">
<span class="card-new d-block">
<img class="mw-100 mb-3" src="{{card.img}}">
<img class="mw-100 mb-3 biz-logo" alt="{{card.name|default(card.id)}}">
<h4 class="h5">{{card.title}}</h4>
<p class="mt-6 mb-8">{{card.description}}</p>
</span>