ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-21 04:05:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

edits to the net-new pages for mobile optimization

Browse Source
This commit is contained in:
Calvin Jhunjhnuwala
2020-08-26 15:53:38 -07:00
parent 57a1c6daa5
commit a0f6bea272
10 changed files with 44 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
styles/_content.scss
View File

@@ -144,6 +144,10 @@ td:nth-child(1) {
padding: 2rem;
background: rgba(34, 37, 43, 0.5);
backdrop-filter: blur(3px);
@media (max-width: 768px) {
margin-left: 15px;
margin-right: 15px;
}
}
.section-marker {
position: absolute;

3
styles/_helpers.scss
View File

@@ -142,6 +142,9 @@
.align-items-stretch {
align-items: stretch;
}
.overflow-xs {
overflow: scroll;
}
/* COLOR ELEMENTS */
.border-green {

1
styles/_layout.scss
View File

@@ -295,7 +295,6 @@ section {
display: flex;
position: relative;
z-index: 1;
margin-bottom: 8px;
}
.timeline-content {

5
tool/template-calculator.html
View File

@@ -249,9 +249,9 @@
<thead>
<tr>
<td></td>
<td class="bold ta-right">{% trans %}dddKilowatt Hour{% endtrans %}</td>
<td class="bold ta-right">{% trans %}Kilowatt Hour{% endtrans %}</td>
<td class="bold ta-right">{% trans %}Gallons of Gas{% endtrans %}</td>
<td class="bold ta-right">{% trans %}CO2 Emissions (million tonne){% endtrans %}</td>
<td class="bold ta-right">{% trans %}CO2 Emissions*{% endtrans %}</td>
</tr>
</thead>
<tbody>
@@ -293,6 +293,7 @@
</tr>
</tbody>
</table>
<p class="text-smallest mt-10">*Calculations in million tonne (Mt)</p>
</div>
</section>
</div>

6
tool/template-explore-exchanges.html
View File

@@ -19,11 +19,11 @@
<div id="page-exchanges-bg">
<div class="container my-40 marketing-wrapper">
<section class="row mt-40 mb-40">
<div class="col-sm-4 mb-10 d-flex flex-column-reverse justify-content-end">
<h1 class="mb-18">{% trans %}XRP Is Traded on More Than 100 Markets and Exchanges Worldwide{% endtrans %}</h1>
<div class="col-lg-4 d-flex flex-column-reverse justify-content-end mb-10">
<h1>{% trans %}XRP Is Traded on More Than 100 Markets and Exchanges Worldwide{% endtrans %}</h1>
<h3 class="text-primary mb-4 h6">{% trans %}XRP Exchanges{% endtrans %}</h3>
</div>
<div class="col-sm-6 offset-sm-1">
<div class="col-lg-6 offset-lg-1">
<h2 class="mt-12 mb-10">{% trans %}Exchanges are where people trade currencies.{% endtrans %}</h2>
<p>{% trans %}There are different types of exchanges that vary depending on the type of market (spot, futures, options, swaps), and the type of security model (custodial, non-custodial).{% endtrans %}</p>
<p>{% trans %}Spot exchanges allow people to buy and sell cryptocurrencies at current (spot) market rates. Futures, options and swap exchanges allow people to buy and sell standardized contracts of cryptocurrency market rates in the future.{% endtrans %}</p>

6
tool/template-explore-wallets.html
View File

@@ -20,11 +20,11 @@
<div class="container my-40 marketing-wrapper">
<section class="row mt-40 mb-40">
<div class="col-sm-3 mb-10 d-flex flex-column-reverse justify-content-end">
<h1 class="mb-18">{% trans %}Options for Storing XRP{% endtrans %}</h1>
<div class="col-lg-3 d-flex flex-column-reverse justify-content-end mb-10">
<h1>{% trans %}Options for Storing XRP{% endtrans %}</h1>
<h3 class="text-primary mb-4 h6">{% trans %}XRP Wallets{% endtrans %}</h3>
</div>
<div class="col-sm-7 offset-sm-1">
<div class="col-lg-7 offset-lg-1">
<h2 class="mt-12 mb-10">{% trans %}Digital wallets are pieces of software that allow people to send, receive and store cryptocurrencies, including XRP. There are two types of digital wallets: custodial and non-custodial.{% endtrans %}</h2>
<p>{% trans %}Custodial wallets manage a user's private key, which allows the wallet to withdraw cryptocurrency on a user's behalf. Non-custodial wallets do not manage a user's private key, which is up to the user to manage, and therefore cannot send cryptocurrency on the user's behalf.{% endtrans %}</p>
</div>

8
tool/template-learn-history.html
View File

@@ -36,7 +36,7 @@
<h2 class="h1 text-center mx-auto mb-20">{% trans %}Timeline of XRP Evolution{% endtrans %}</h2>
<div class="col-lg-10 offset-lg-1">
<div class="timeline">
<div class="timeline-block">
<div class="timeline-block mb-10">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h4 class="mb-10">{% trans %}2011 XRP Ledger Development{% endtrans %}</h4>
@@ -44,7 +44,7 @@
<p>{% trans %}Their initial observations about the high energy consumption and scalability issues that would plague Bitcoin proved prescient. (In 2019, estimates suggest Bitcoin mining used more energy than the entire country of Portugal!) Moreover, their initial read indicated that significant problems could arise if any miner obtained (or miners colluded to obtain) greater than 50% of the mining power—that risk persists with Bitcoin (and Ethereum) today as mining power has consolidated in China.{% endtrans %}</p>
</div>
</div>
<div class="timeline-block">
<div class="timeline-block mb-10">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h4 class="mb-10">{% trans %}2012 XRP Launched{% endtrans %}</h4>
@@ -58,7 +58,7 @@
<p>{% trans %}Chris Larsen was the CEO of OpenCoin, and at the company's founding, Jed was co-founder and CTO, David Schwartz was the Chief Cryptography Officer, and Arthur Britto an advisor.{% endtrans %}</p>
</div>
</div>
<div class="timeline-block">
<div class="timeline-block mb-10">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h4 class="mb-10">{% trans %}2013 OpenCoin Rebranded to Ripple Labs{% endtrans %}</h4>
@@ -73,7 +73,7 @@
<section class="row mt-30 mb-40">
<h6 class="section-marker" id="section-marker-podcast">{% trans %}Podcast{% endtrans %}</h6>
<div class="col-sm-5 order-1 order-sm-2 mb-10">
<div class="col-sm-5 order-1 order-sm-2 mb-10 text-center">
<img class="mw-100" src="./img/graphics/chris-larsen.png">
</div>
<div class="col-sm-5 offset-sm-1 order-2 order-sm-1 mt-20">

10
tool/template-learn-impact.html
View File

@@ -37,7 +37,7 @@
<div class="container mb-20">
<section class="row mb-50">
<h6 class="section-marker">{% trans %}Creating Economic Opportunity{% endtrans %}</h6>
<div class="col-md-4 offset-md-1 mb-10">
<div class="col-md-4 offset-md-1 mb-10 text-center">
<img class="mw-100" src="./img/impact/impact-democratizing-payments@2x.png">
</div>
<div class="col-md-6 offset-md-1">
@@ -56,7 +56,7 @@
<section class="row mb-50">
<h6 class="section-marker">{% trans %}Future of Finance{% endtrans %}</h6>
<div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10">
<div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10 text-center">
<img class="mw-100" src="./img/impact/impact-building-future@2x.png">
</div>
<div class="col-md-6 offset-md-1 order-2 order-md-1">
@@ -72,7 +72,7 @@
<section class="row mb-50">
<h6 class="section-marker">{% trans %}Are All Digital Assets Alike?{% endtrans %}</h6>
<div class="col-md-4 offset-md-1 mb-10">
<div class="col-md-4 offset-md-1 mb-10 text-center">
<img class="mw-100" src="./img/impact/impact-crypto-strengths@2x.png">
</div>
<div class="col-md-6 offset-md-1">
@@ -91,7 +91,7 @@
<section class="row mb-20">
<h6 class="section-marker">{% trans %}What Makes XRP and the XRP Ledger Green?{% endtrans %}</h6>
<div class="col-md-4 mb-10">
<div class="col-md-4 mb-10 text-center">
<img class="mw-100 mt-20" src="./img/green/green-graphic@2x.png">
</div>
<div class="col-md-8">
@@ -106,7 +106,7 @@
<p>{% trans %}Adopting XRP more broadly will help limit this waste and ensure a sustainable future for our planet and global economy.{% endtrans %}</p>
</div>
</div>
<a href="#" class="btn btn-clear">{% trans %}Discover the Green Currency Calculator{% endtrans %}</a>
<a href="/carbon-calculator.html" class="btn btn-clear">{% trans %}Discover the Green Currency Calculator{% endtrans %}</a>
</div>
</section>
</div>

28
tool/template-learn-overview.html
View File

@@ -27,16 +27,16 @@
<div class="col-md-8">
<h2 class="mb-8">{% trans %}What is XRP?{% endtrans %}</h2>
<div class="row">
<p class="col">{% trans %}XRP is a digital asset that’s native to the XRP Ledger, an open-source, permissionless and decentralized blockchain technology.{% endtrans %}</p>
<p class="col">{% trans %}Created in 2012 specifically for payments, XRP can settle transactions on the ledger in 3-5 seconds. It was built to be a better Bitcoin—faster, cheaper and greener than any other digital asset. {% endtrans %}</p>
<p class="col-sm">{% trans %}XRP is a digital asset that’s native to the XRP Ledger, an open-source, permissionless and decentralized blockchain technology.{% endtrans %}</p>
<p class="col-sm">{% trans %}Created in 2012 specifically for payments, XRP can settle transactions on the ledger in 3-5 seconds. It was built to be a better Bitcoin—faster, cheaper and greener than any other digital asset. {% endtrans %}</p>
</div>
</div>
</section>
<section class="row mb-50">
<h6 class="section-marker">{% trans %}Benefits{% endtrans %}</h6>
<div class="col-sm-12 col-lg-10 mt-14">
<table id="table-overview">
<div class="col-sm-12 col-lg-10 mt-14 overflow-xs">
<table id="table-overview" class="mw-100">
<thead>
<tr>
<td class="bold h4">{% trans %}Benefits{% endtrans %}</td>
@@ -84,7 +84,7 @@
<section class="row mb-50">
<h6 class="section-marker">{% trans %}XRP Validators{% endtrans %}</h6>
<div class="col-md-4">
<div class="col-md-4 mb-10">
<h2>{% trans %}How Does the XRP Ledger Work?{% endtrans %}</h2>
</div>
<div class="col-md-4">
@@ -112,12 +112,12 @@
<h5 class="mb-10 normal h4">{% trans %}XRP is fast, low-cost, sustainable and scalable. It is the key to fueling growth and realizing the true potential of our global economy—the Internet of Value.{% endtrans %}</h5>
</div>
<div class="w-100 mt-20"></div>
<div class="col-md-4">
<div class="col-md-4 mb-20">
<h4>{% trans %}Businesses{% endtrans %}</h4>
<p class="my-10">{% trans %}Many businesses are building on the XRP Ledger, pursuing powerful use cases in micropayments, gaming, web monetization and more. Additionally, Ripple, the technology company, is focused on building a network and infrastructure that leverages XRP to power faster, more affordable cross-border payments around the world.{% endtrans %}</p>
<a href="#" class="text-white bold arrow-link">{% trans %}More About Businesses{% endtrans %}</a>
</div>
<div class="col-md-4">
<div class="col-md-4 mb-20">
<h4>{% trans %}Individuals{% endtrans %}</h4>
<p class="my-10">{% trans %}Individual consumers can use XRP to move different currencies around the world. For example, through the PayID solution, anyone can use XRP—or any currency, be it fiat or digital assets—to easily make purchases across any payments network.{% endtrans %}</p>
<a href="#" class="text-white bold arrow-link">{% trans %}More About Uses{% endtrans %}</a>
@@ -132,7 +132,7 @@
<section class="mb-50">
<h6 class="section-marker">{% trans %}Internet of Value{% endtrans %}</h6>
<div class="row mb-40">
<div class="col-md-4 offset-md-2 order-1 order-md-2 mb-10">
<div class="col-md-4 offset-md-2 order-1 order-md-2 mb-10 text-center">
<img class="mw-100" src="./img/overview/fast.png">
</div>
<div class="col-md-4 offset-md-1 order-2 order-md-1">
@@ -141,7 +141,7 @@
</div>
</div>
<div class="row mb-30">
<div class="col-md-4 offset-md-1 mb-10">
<div class="col-md-4 offset-md-1 mb-10 text-center">
<img class="mw-100" src="./img/overview/low-cost.png">
</div>
<div class="col-md-4 offset-md-2">
@@ -150,7 +150,7 @@
</div>
</div>
<div class="row mb-30">
<div class="col-md-4 offset-md-2 order-1 order-md-2 mb-10">
<div class="col-md-4 offset-md-2 order-1 order-md-2 mb-10 text-center">
<img class="mw-100" src="./img/overview/scalable.png">
</div>
<div class="col-md-4 offset-md-1 order-2 order-md-1">
@@ -159,7 +159,7 @@
</div>
</div>
<div class="row mb-30">
<div class="col-md-4 offset-md-1 mb-10">
<div class="col-md-4 offset-md-1 mb-10 text-center">
<img class="mw-100" src="./img/overview/sustainable.png">
</div>
<div class="col-md-4 offset-md-2">
@@ -168,7 +168,7 @@
</div>
</div>
<div class="row mb-20">
<div class="col-md-4 offset-md-2 order-1 order-md-2 mb-10">
<div class="col-md-4 offset-md-2 order-1 order-md-2 mb-10 text-center">
<img class="mw-100" src="./img/overview/real.png">
</div>
<div class="col-md-4 offset-md-1 order-2 order-md-1">
@@ -213,7 +213,7 @@
<section class="mb-50">
<h6 class="section-marker">{% trans %}Ripple vs. XRP{% endtrans %}</h6>
<div class="row">
<div class="col-md-4 offset-md-1 mb-10">
<div class="col-md-4 offset-md-1 mb-10 text-center">
<img class="mw-100 mt-10" src="./img/overview/xrp-text-logo.png">
</div>
<div class="col-md-5 offset-md-1">
@@ -227,7 +227,7 @@
<section class="mb-50">
<h6 class="section-marker">{% trans %}XRP Community{% endtrans %}</h6>
<div class="row">
<div class="col-md-6 offset-md-1 order-1 order-md-2 mb-10">
<div class="col-md-6 offset-md-1 order-1 order-md-2 mb-10 text-center">
<img class="mw-100" src="./img/overview/xrp-community.png">
</div>
<div class="col-md-5 order-2 order-md-1">

10
tool/template-learn-uses.html
View File

@@ -35,7 +35,7 @@
<div class="container mb-20">
<section class="row mb-50">
<h6 class="section-marker">{% trans %}Cross-Border payments{% endtrans %}</h6>
<div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10">
<div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10 text-center">
<img class="mw-100" src="./img/uses/xb-payment.png">
</div>
<div class="col-md-6 offset-md-1 order-2 order-md-1">
@@ -47,7 +47,7 @@
<section class="row mb-50">
<h6 class="section-marker">{% trans %}Micropayments{% endtrans %}</h6>
<div class="col-md-4 offset-md-1 mb-10">
<div class="col-md-4 offset-md-1 mb-10 text-center">
<img class="mw-100" src="./img/uses/micropayments.png">
</div>
<div class="col-md-6 offset-md-1">
@@ -59,7 +59,7 @@
<section class="row mb-50">
<h6 class="section-marker">{% trans %}Digital Cryptocurrency{% endtrans %}</h6>
<div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10">
<div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10 text-center">
<img class="mw-100" src="./img/uses/digital-wallets.png">
</div>
<div class="col-md-6 offset-md-1 order-2 order-md-1">
@@ -71,7 +71,7 @@
<section class="row mb-50">
<h6 class="section-marker">{% trans %}Exchanges{% endtrans %}</h6>
<div class="col-md-4 offset-md-1 mb-10">
<div class="col-md-4 offset-md-1 mb-10 text-center">
<img class="mw-100" src="./img/uses/exchanges.png">
</div>
<div class="col-md-4 offset-md-1">
@@ -83,7 +83,7 @@
<section class="row mb-50">
<h6 class="section-marker">{% trans %}Trading{% endtrans %}</h6>
<div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10">
<div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10 text-center">
<img class="mw-100" src="./img/uses/inst-trading.png">
</div>
<div class="col-md-6 offset-md-1 order-2 order-md-1">