ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-12-06 17:27:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Unify card styles & fix more light mode stuff

Browse Source
This commit is contained in:
mDuo13
2021-08-31 17:45:25 -07:00
parent 301d643b08
commit b904586274
19 changed files with 201 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
template/page-calculator.html.jinja
View File

@@ -46,7 +46,7 @@
</section>
<section class="container-new py-26">
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 bg-grey-800 text-center">
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 cta-card">
<img src="./img/backgrounds/cta-calculator-green.svg" class="cta cta-bottom-right">
<div class="z-index-1 position-relative">
<h2 class="h4 mb-10-until-sm mb-8-sm">{% trans %}How Does XRP Compare to Other Currencies?{% endtrans %}</h2>

2
template/page-community.html.jinja
View File

@@ -83,7 +83,7 @@
</div>
</section>
<section class="container-new py-26">
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 bg-grey-800 text-center">
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 cta-card">
<img src="./img/backgrounds/cta-community-purple.svg" class="d-none-sm cta cta-top-left">
<img src="./img/backgrounds/cta-community-green.svg" class="cta cta-bottom-right">
<div class="z-index-1 position-relative">

12
template/page-docs.html.jinja
View File

@@ -7,7 +7,7 @@
{% block main %}
<section class="py-26 text-center">
<div class="col-xl-4 col-lg-6 mx-auto text-center">
<div class="d-flex flex-column-reverse">
<div class="d-flex flex-column-reverse w-100">
<h1 class="mb-18">{% trans %}What Would You Like to Learn?{% endtrans %}</h1>
<h6 class="eyebrow mb-3">{% trans %}XRP Ledger Documentation{% endtrans %}</h6>
</div>
@@ -44,7 +44,7 @@
</section>
<section class="container-new mb-50-until-sm" id="software-and-sdks">
<div class="d-flex flex-column-reverse col-sm-8">
<div class="d-flex flex-column-reverse w-100">
<h2 class="h4">{% trans %}Software and SDKs{% endtrans %}</h2>
<h6 class="eyebrow mb-3">{% trans %}Start Developing{% endtrans %}</h6>
</div>
@@ -61,7 +61,7 @@
</section><!--/#software-and-sdks-->
<section class="container-new mb-50-until-sm" id="doc-types">
<div class="d-flex flex-column-reverse col-sm-8">
<div class="d-flex flex-column-reverse w-100">
<h2 class="h4">{% trans %}Article types{% endtrans %}</h2>
<h6 class="eyebrow mb-3">{% trans %}Dive In{% endtrans %}</h6>
</div>
@@ -72,7 +72,7 @@
</section><!--/#doc-types-->
<section class="container-new mb-50-until-sm" id="run-a-network-node">
<div class="d-flex flex-column-reverse col-sm-8">
<div class="d-flex flex-column-reverse w-100">
<h2 class="h4">{% trans %}Run an XRP Ledger network node{% endtrans %}</h2>
<h6 class="eyebrow mb-3">{% trans %}Participate in the Network{% endtrans %}</h6>
</div>
@@ -86,7 +86,7 @@
</section><!--/#run-a-network-node-->
<section class="container-new mb-50-until-sm" id="docs-hot-topic">
<div class="d-flex flex-column-reverse col-sm-8">
<div class="d-flex flex-column-reverse w-100">
<h2 class="h4">{% trans %}NFTs{% endtrans %}</h2>
<h6 class="eyebrow mb-3">{% trans %}Hot Topic{% endtrans %}</h6>
</div>
@@ -105,7 +105,7 @@
</section><!--/#docs-hot-topic-->
<section class="container-new mb-50-until-sm doc-index">
<div class="d-flex flex-column-reverse col-sm-8">
<div class="d-flex flex-column-reverse w-100">
<h2 id="full-doc-index" class="h4">{% trans %}Full documentation index{% endtrans %}</h2>
<h6 class="eyebrow mb-3">{% trans %}See Everything{% endtrans %}</h6>
</div>

47
template/page-home.html.jinja
View File

@@ -45,7 +45,7 @@
</section>
<section class="container-new py-26">
<div class="d-flex flex-column-reverse col-sm-8 p-0 mx-10-until-md">
<div class="d-flex flex-column-reverse col-sm-8 p-0">
<h3 class="h4 h2-sm">{% trans %}Why developers choose the XRP Ledger{% endtrans %}</h3>
<h6 class="eyebrow mb-3">{% trans %}Discover Benefits{% endtrans %}</h6>
</div>
@@ -71,7 +71,7 @@
"description": _("8+ years of consistent performance over more than 63 million ledgers")},
] %}
{% for card in cards %}
<li class="col-new ls-none">
<li class="col ls-none">
<img id="{{card.id}}" alt="{{card.title}} Icon">
<h4 class="mt-3 mb-0 h5">{{card.title}}</h4>
<p class="mt-6-until-sm mt-3 mb-0">{{card.description}}</p>
@@ -81,11 +81,11 @@
</section>
<section class="container-new py-26">
<div class="d-flex flex-column-reverse col-sm-8 p-0 mx-10-until-md">
<div class="d-flex flex-column-reverse col-sm-8 p-0">
<h3 class="h4 h2-sm">{% trans %}Activate the power of the XRP Ledger and find the building blocks for your next innovation{% endtrans %}</h3>
<h6 class="eyebrow mb-3">{% trans %}Explore Advanced Features{% endtrans %}</h6>
</div>
<div class="mt-10 card-grid card-grid-3xN" id="advanced-features">
<div class="row row-cols-1 row-cols-lg-3 card-deck mt-10" id="advanced-features">
{% set cards2 = [
{ "href": "decentralized-exchange.html",
"title": _("Decentralized Exchange"),
@@ -103,23 +103,25 @@
"title": _("Issued Currencies"),
"description": _("All currencies other than XRP can be represented in the XRP Ledger as issued currencies, sometimes called “IOUs”")},
] %}
{% for card in cards2 %}
<a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" href="{{card.href}}">
<span class="card-new d-block">
<h4 class="h5">{{card.title}}</h4>
<p class="mt-6 mb-8">{{card.description}}</p>
</span>
{% for card in cards2 %}
<a class="card" href="{{target.prefix}}{{card.href}}">
<div class="card-body">
<h4 class="card-title h5">{{card.title}}</h4>
<p class="card-text">{{card.description}}</p>
</div>
<div class="card-footer">&nbsp;</div>
</a>
{% endfor %}
{% endfor %}
</div>
</section>
<section class="container-new py-26">
<div class="d-flex flex-column-reverse col-sm-8 p-0 mx-10-until-md">
<div class="d-flex flex-column-reverse col-sm-8 p-0">
<h3 class="h4 h2-sm">{% trans %}Choose a path to start building on the XRPL{% endtrans %}</h3>
<h6 class="eyebrow mb-3">{% trans %}Get Started{% endtrans %}</h6>
</div>
<div class="mt-10 card-grid card-grid-3xN" id="get-started">
<div class="row row-cols-1 row-cols-lg-3 card-deck mt-10" id="get-started">
{% set cards3 = [
{ "href": "get-started.html",
"title": _("Quickstart"),
@@ -138,18 +140,19 @@
"description": _("See what your peers have built on the XRPL")},
] %}
{% for card in cards3 %}
<a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="{{card.id}}" href="{{card.href}}">
<span class="card-new d-block">
<h4 class="h5">{{card.title}}</h4>
<p class="mt-6 mb-8">{{card.description}}</p>
</span>
<a class="card" id="{{card.id}}" href="{{target.prefix}}{{card.href}}">
<div class="card-body">
<h4 class="card-title h5">{{card.title}}</h4>
<p class="card-text">{{card.description}}</p>
</div>
<div class="card-footer">&nbsp;</div>
</a>
{% endfor %}
</div>
</section>
<section class="container-new py-26">
<div class="col-lg-6 offset-lg-3 p-6-sm p-10-until-sm br-8 bg-grey-800 text-center">
<div class="col-lg-6 offset-lg-3 p-6-sm p-10-until-sm br-8 cta-card">
<img src="./img/backgrounds/cta-home-purple.svg" class="d-none-sm cta cta-top-left">
<img src="./img/backgrounds/cta-home-green.svg" class="cta cta-bottom-right">
<div class="z-index-1 position-relative">
@@ -161,7 +164,7 @@
</section>
<section class="container-new py-26">
<div class="d-flex flex-column-reverse col-sm-8 p-0 mx-10-until-md">
<div class="d-flex flex-column-reverse col-sm-8 p-0">
<h3 class="h4 h2-sm">{% trans %}Explore what the community is building to enable new features and use cases on XRPL{% endtrans %}</h3>
<h6 class="eyebrow mb-3">{% trans %}Preview New Features{% endtrans %}</h6>
</div>
@@ -181,7 +184,7 @@
"href": "https://dev.to/ripplexdev/a-vision-for-federated-sidechains-on-the-xrp-ledger-2o7o"},
] %}
{% for feat in features %}
<li class="col-new ls-none pt-2">
<li class="col ls-none pt-2">
<a class="label chip-green" href="{{feat.href}}">{{feat.chip}}</a>
<h4 class="mt-3 mb-0 h5">{{feat.title}}</h4>
<p class="mt-6-until-sm mt-3 mb-0">{{feat.description}}</p>
@@ -191,7 +194,7 @@
</section>
<section class="container-new py-26">
<div class="col-md-6 offset-md-3 p-8-sm p-10-until-sm br-8 bg-grey-800 text-center">
<div class="col-md-6 offset-md-3 p-8-sm p-10-until-sm br-8 cta-card">
<img src="./img/backgrounds/cta-home-magenta.svg" class="cta cta-bottom-right">
<div class="z-index-1 position-relative">
<div class="d-flex flex-column-reverse">

4
template/page-impact.html.jinja
View File

@@ -55,13 +55,13 @@
<section class="container-new py-26">
<div class="mt-10 card-grid card-grid-2xN">
<div class="col-new ls-none mb-16-sm">
<div class="col ls-none mb-16-sm">
<h2 class="h4 h2-sm mb-8">{% trans %}Building for the Future{% endtrans %}</h2>
<h5 class="longform mb-10">{% trans %}Digital assets and blockchain technology are the future of finance. Open and decentralized, they offer the first-ever global standards for value exchange broadly—whether it’s money, stocks, loyalty points, intellectual property or more.{% endtrans %}</h5>
<p class="mb-6">{% trans %}This has spawned increasing adoption of the technology across the financial services industry, from retail and institutional investment to commercial use cases like CBDCs, NFTs and cross-border payments.{% endtrans %}</p>
<p class="mb-0">{% trans %}With usage growing, it’s critical that measures are taken today to ensure that the technology is environmentally sustainable tomorrow.{% endtrans %}</p>
</div>
<div class="col-new ls-none mb-16-sm">
<div class="col ls-none mb-16-sm">
<div class="col-md-8 mx-auto pl-0-sm pr-0-sm">
<h6 class="mb-10-until-sm mb-8-sm">{% trans %}Projected BTC, ETH and XRP Transactions in USD{% endtrans %}</h6>
<div class="mb-10">

17
template/page-uses.html.jinja
View File

@@ -53,7 +53,7 @@
"description": _("The CBDC Private Ledger provides Central Banks a secure, controlled, and flexible solution to issue and manage Central Bank Issued Digital Currencies (CBDCs).")},
] %}
{% for use in uses %}
<li class="col-new ls-none">
<li class="col ls-none">
<img id="{{use.id}}" alt="{{use.title}} icon">
<h4 class="mt-3 mb-0 h5">{{use.title}}</h4>
<p class="mt-6-until-sm mt-3 mb-0">{{use.description}}</p>
@@ -67,7 +67,7 @@
</div>
<section class="container-new py-26">
<div class="col-sm-7">
<div class="col-sm-7 p-0">
<div class="d-flex flex-column-reverse">
<h3 class="h4 h2-sm">{% trans %}Businesses and projects running<br class="until-sm"> on the XRP Ledger{% endtrans %}</h3>
<h6 class="eyebrow mb-3">{% trans %}Solving Real Problems Across Industries{% endtrans %}</h6>
@@ -133,14 +133,15 @@
"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="mt-10 card-grid card-grid-3xN">
<div class="row row-cols-1 row-cols-lg-3 card-deck">
{% for card in cards %}
<a class="col-new col-new-card ls-none bg-grey-800 br-8" href="{{card.link}}" target="_blank" id="{{card.id}}">
<span class="card-new d-block">
<a class="card" href="{{card.link}}" target="_blank" id="{{card.id}}">
<div class="card-body">
<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>
<h4 class="card-title h5">{{card.title}}</h4>
<p class="card-text">{{card.description}}</p>
</div>
<div class="card-footer">&nbsp;</div>
</a>
{% endfor %}
</div>

8
template/page-xrp-overview.html.jinja
View File

@@ -31,7 +31,7 @@
<section class="container-new my-20">
<div class="card-grid card-grid-1x2">
<div class="margin-col d-none-sm mt-lg-0">
<div class="d-none-sm mt-lg-0">
<ul class="page-toc no-sideline p-0 sticky-top floating-nav">
{% set links = [
{ "hash": _("#about-xrp"),
@@ -51,7 +51,7 @@
</ul>
</div>
<div class="col-new mt-lg-0">
<div class="col mt-lg-0">
<div class="link-section pb-26" id="about-xrp">
<h2 class="h4 h2-sm mb-8">{% trans %}What Is XRP?{% endtrans %}</h2>
<h5 class="longform mb-10">{% trans %}XRP is a digital asset that’s native to the XRP Ledger—an open-source, permissionless and decentralized <a href="https://www.distributedagreement.com/2018/09/24/what-is-a-blockchain/" target="_blank">blockchain technology.</a>{% endtrans %}</h5>
@@ -103,7 +103,7 @@
<p>{% trans %}Use XRP to move different currencies around the world. {% endtrans %}</p>
</div>
</div>
<div class="mt-10 p-10 br-8 bg-grey-800 text-center position-relative">
<div class="mt-10 p-10 br-8 cta-card position-relative">
<img src="./img/backgrounds/cta-xrp-overview-magenta.svg" class="cta cta-bottom-right">
<div class="z-index-1 position-relative">
<h2 class="h4 mb-10-until-sm mb-8-sm">{% trans %}XRP was designed with sustainability in mind.{% endtrans %}</h2>
@@ -124,7 +124,7 @@
<h2 class="h4 h2-sm mb-8">{% trans %}What Is the Relationship Between Ripple and XRP?{% endtrans %}</h2>
<h5 class="longform mb-10">{% trans %}<a href="https://ripple.com" target="_blank">Ripple</a> is a technology company that makes it easier to build a high-performance, global payments business. XRP is a digital asset independent of this.{% endtrans %}</h5>
<p>{% trans %}There is a finite amount of XRP. All XRP is already in existence today—no more than the original 100 billion can be created. The XRPL founders gifted 80 billion XRP, the platform’s native currency, to Ripple. To provide predictability to the XRP supply, Ripple has locked 55 billion XRP (55% of the total possible supply) into a series of escrows using the XRP Ledger itself. The XRPL's transaction processing rules, enforced by the consensus protocol, control the release of the XRP.{% endtrans %}</p>
<div class="mt-10 p-10 br-8 bg-grey-800 text-center position-relative">
<div class="mt-10 p-10 br-8 cta-card position-relative">
<img src="./img/backgrounds/cta-xrp-overview-green-2.svg" class="landing-bg cta cta-bottom-right">
<div class="z-index-1 position-relative">
<h3 class="h4">{% trans %}As of <span class="stat-highlight" id="ripple-escrow-as-of">December 2017</span> <br/>

14
template/page-xrpl-foundation.html.jinja
View File

@@ -43,7 +43,7 @@
</section>
<section class="container-new py-26">
<h3 class="h4 h2-sm mx-10-until-md">{% trans %}Key Areas of Focus{% endtrans %}</h3>
<h3 class="h4 h2-sm">{% trans %}Key Areas of Focus{% endtrans %}</h3>
<ul class="mt-10 card-grid card-grid-3xN mb-0">
{% set features = [
{ "title": _("Core Technology"),
@@ -58,7 +58,7 @@
"description": _("Support development of tools and platforms for financial inclusion globally.") },
] %}
{% for feat in features %}
<li class="col-new ls-none">
<li class="col ls-none">
<h3 class="mb-0 h5">{{feat.title}}</h3>
<p class="mt-8-until-sm mt-3 mb-0">{{feat.description}}</p>
</li>
@@ -67,7 +67,7 @@
</section>
<section class="container-new py-26">
<div class="mx-10-until-md">
<div>
<h2 class="h4 h2-sm mb-20-until-sm">{% trans %}XRP Ledger Foundation Values and Beliefs{% endtrans %}</h2>
<h4 class="h5 mb-3-sm-i mt-10">{% trans %}We Value:{% endtrans %}</h4>
</div>
@@ -78,11 +78,11 @@
{ "description": _("Cultivating a diverse developer ecosystem, where many entities contribute to and benefit from the XRP Ledger") },
] %}
{% for val in values %}
<li class="col-new ls-none">{{val.description}}</li>
<li class="col ls-none">{{val.description}}</li>
{% endfor %}
</ul>
<div class="mx-10-until-md">
<div>
<h4 class="h5 mb-3-sm-i">{% trans %}We Believe:{% endtrans %}</h4>
</div>
<ul class="card-grid card-grid-3xN">
@@ -91,13 +91,13 @@
{ "description": _("Close working relationships between developers and organizations that build on and contribute to the XRP Ledger are critical to its innovation and success") },
] %}
{% for belief in beliefs %}
<li class="col-new ls-none">{{belief.description}}</li>
<li class="col ls-none">{{belief.description}}</li>
{% endfor %}
</ul>
</section>
<section class="container-new py-26">
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 bg-grey-800 text-center">
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 cta-card">
<img src="./img/backgrounds/cta-foundation-orange.svg" class="cta cta-top-left">
<img src="./img/backgrounds/cta-foundation-magenta.svg" class="cta cta-bottom-right">
<div class="z-index-1 position-relative">

18
template/page-xrpl-overview.html.jinja
View File

@@ -49,7 +49,7 @@
<section class="container-new py-26">
<div class="card-grid card-grid-2xN">
<div class="col-new">
<div class="col">
<div class="d-flex flex-column-reverse">
<h2 class="h4 h2-sm mb-8">{% trans %}How the Consensus Protocol works{% endtrans %}</h2>
<h6 class="eyebrow mb-3">{% trans %}Consensus{% endtrans %}</h6>
@@ -58,14 +58,14 @@
<p class="mb-6">{% trans %}All servers in the network process each transaction according to the same rules, and any transaction that follows the protocol is confirmed right away. All transactions are public, with strong cryptography to guarantee the integrity of the system.{% endtrans %}</p>
<p class="mb-0">{% trans %}Anyone can operate a validator; currently, over 150 <a href="https://livenet.xrpl.org/network/validators" target="_blank">validators</a> are active on the ledger, operated by universities, exchanges, businesses, and individuals. Additionally, the consensus protocol ensures the blockchain becomes more decentralized over time as the validator pool grows.{% endtrans %}</p>
</div>
<div class="col-new mb-16-sm">
<div class="col mb-16-sm">
<img class="mw-100" id="validator-graphic" alt="(Graphic: Validators in Consensus)">
</div>
</div>
</section>
<section class="container-new py-26">
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 bg-grey-800 text-center">
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 cta-card">
<img src="./img/backgrounds/cta-xrpl-overview-green.svg" class="cta cta-bottom-right">
<div class="z-index-1 position-relative">
<h2 class="h4 mb-10-until-sm mb-8-sm">{% trans %}A Greener Blockchain{% endtrans %}</h2>
@@ -77,7 +77,7 @@
<section class="container-new py-26">
<div class="card-grid card-grid-2xN">
<div class="col-new">
<div class="col">
<div class="d-flex flex-column-reverse">
<h4 class="h4 h2-sm mb-8">{% trans %}XRPL provides powerful utility across the blockchain space{% endtrans %}</h4>
<h6 class="eyebrow mb-3">{% trans %}XRPL Today{% endtrans %}</h6>
@@ -86,7 +86,7 @@
<p class="mb-10">{% trans %}With the XRPL, these developers are building innovative projects and applications across blockchain use cases including tokenization of assets, online gaming, asset custody, NFTs, and DeFi.{% endtrans %}</p>
<a class="btn btn-primary btn-arrow mb-10-sm" href="uses.html">{% trans %}Explore More{% endtrans %}</a>
</div>
<div class="col-new mb-0">
<div class="col mb-0">
<div class="d-flex flex-column-reverse">
<h4 class="h4 h2-sm mb-8">{% trans %}Fulfilling the vision of the XRPL community{% endtrans %}</h4>
<h6 class="eyebrow mb-3">{% trans %}XRPL Tomorrow{% endtrans %}</h6>
@@ -98,7 +98,7 @@
</section>
<section class="container-new py-26">
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 bg-grey-800 text-center">
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 cta-card">
<img src="./img/backgrounds/cta-xrpl-overview-orange.svg" class="cta cta-bottom-right">
<div class="z-index-1 position-relative">
<h4 class="h4 mb-10-until-sm mb-8-sm">{% trans %}Tomorrow’s Blockchain Starts With You{% endtrans %}</h4>
@@ -121,11 +121,11 @@
{% for faq in faqs %}
<div class="q-wrapper">
<a href="#heading{{loop.index}}" class="expander collapsed" data-toggle="collapse" data-target="#answer{{loop.index}}" aria-expanded="false" aria-controls="answer{{loop.index}}">
<h4 id="heading{{loop.index}}">
<h4 id="heading{{loop.index}}">
{{faq.question}}
<span class="chevron"><span></span><span></span></span>
</a>
</h4>
</h4>
</a>
<div id="answer{{loop.index}}" class="answer-wrapper collapse" aria-labelledby="heading{{loop.index}}">
<p>{{faq.answer}}</p>
</div><!--/.answer-wrapper {{loop.index}} -->