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

more style edits, renamed the template files to reflect the parent category, new template for contact

Browse Source
This commit is contained in:
Calvin Jhunjhnuwala
2020-08-10 12:07:36 -07:00
parent 1fd5789810
commit 899d44bf70
11 changed files with 137 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/devportal.css
View File

File diff suppressed because one or more lines are too long

2
assets/css/devportal.css.map
View File

File diff suppressed because one or more lines are too long

2
dactyl-config.yml
View File

@@ -176,7 +176,7 @@ pages:
- name: History
funnel: Learn
category: History
template: template-doc.html # TODO: change as needed
template: template-contact.html # TODO: change as needed
html: history.html
sidebar: disabled
targets:

8
styles/_forms.scss Normal file
View File

@@ -0,0 +1,8 @@
form {
input {
background: rgba(184, 189, 199, 0.1);
border: 1px solid #B8BDC7;
box-sizing: border-box;
border-radius: 2px;
}
}

4
styles/_helpers.scss
View File

@@ -80,6 +80,10 @@
.mb-40 {
margin-bottom: 10rem;
}
.my-40 {
margin-top: 10rem;
margin-bottom: 10rem;
}
.mb-49 {
margin-bottom: 12.25rem;
}

20
styles/_layout.scss
View File

@@ -3,11 +3,13 @@
#main_content_wrapper {
border-bottom: 0;
}
.landing section:last-of-type {
border-bottom: none;
}
section {
position: relative;
}
/* main content area ----------------------------------- */
.sidebar-primary .main {
@@ -174,16 +176,16 @@
@media (max-width: 991px) {
#main_content_wrapper {
padding: 0 24px;
}
// #main_content_wrapper {
// padding: 0 24px;
// }
.navbar-brand img {
width: 120px;
}
.landing section:first-of-type h1:first-child {
font-size: 3em;
font-weight: 400;
}
// .landing section:first-of-type h1:first-child {
// font-size: 3em;
// font-weight: 400;
// }
.section-hero .blurb {
font-size: 0.95em;
}

23
styles/_marketing.scss
View File

@@ -12,15 +12,7 @@
.va-middle {
vertical-align: middle;
}
.text-white {
color: $white;
}
.text-green {
color: $primary;
}
.text-green:hover {
color: $primary;
}
.arrow-link:after {
content: url(../img/icon-green-arrow.svg);
width: 28px;
@@ -43,6 +35,10 @@
height: 100vh;
min-height: 100%;
}
.vw100 {
width: 100vw;
min-width: 100%;
}
.align-items-stretch {
align-items: stretch;
}
@@ -88,15 +84,14 @@
height: 38px;
padding-bottom: 5rem;
}
section {
position: relative;
}
.section-marker {
position: absolute;
font-size: 0.875rem;
transform: rotate(90deg);
font-weight: normal;
top: calc(50% - 4px);
margin-left: -48px;
top: calc(50% - 64px);
margin-left: -32px;
transform-origin: top left;
}

2
styles/_top-nav.scss
View File

@@ -147,7 +147,7 @@
/* Push content below fixed header ------------------------------------------ */
#main_content_wrapper {
margin-top: 68px;
padding: 0 48px;
// padding: 0 48px;
}
/* Fix so anchors don't jump under the fixed header ------------------------- */

64
tool/template-contact.html Normal file
View File

@@ -0,0 +1,64 @@
{% extends "template-base.html" %}
{% block head %}
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
{% endblock %}
{% block bodyclasses %}no-sidebar{% endblock %}
{% block mainclasses %}landing{% endblock %}
{% block breadcrumbs %}{% endblock %}
{% block main %}
<div class="container my-40 marketing-wrapper">
<section class="row mb-50">
<div class="col-md-5">
<h6 class="text-primary mb-4">{% trans %}Contribute to XRPL.org{% endtrans %}</h6>
<h1 class="mb-10">{% trans %}How to Suggest Changes to the Site{% endtrans %}</h1>
<p>{% trans %}Thank you for your interest in contributing to XRPL.org.{% endtrans %}</p>
<p>{% trans %}This website was created for the community and is meant to be a living, breathing source of truth for XRP resources.{% endtrans %}</p>
<p>{% trans %}If you’d like to recommend new content, please fill out the form or submit your changes in GitHub.{% endtrans %}</p>
</div>
<div class="col-md-6 offset-md-1">
<form id="contact-form" method="post" action="contact-form-handler.php">
<label class="text-primary bold h6" for="name">Name*</label>
<input type="text" name="name" placeholder="Your Name" required>
<label class="text-primary bold h6 mt-4" for="email">Email*</label>
<input type="email" name="email" placeholder="Your Email" required>
<label class="text-primary bold h6 mt-4" for="message">Message*</label>
<textarea name="message" placeholder="Message" required name="message"></textarea>
<input type="submit" class="form-control submit mt-4" value="Submit">
</form>
</div>
</section>
<section class="row mb-50">
<div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10">
<img class="mw-100 mb-10" src="./img/marketing/impact-democratizing-payments@2x.png">
</div>
<div class="col-md-6 offset-md-1 order-2 order-md-1">
<h2 class="mb-10 h1">{% trans %}For Developers{% endtrans %}</h2>
<p class="mb-10 normal">{% trans %}Contributing to the developer portal of XRPL.org is a great way to learn about the XRP Ledger.{% endtrans %}</p>
<p>{% trans %}You may also be interested in learning about Interledger Protocol (ILP), which, along with the XRP Ledger, is another part of the Xpring developer ecosystem.{% endtrans %}</p>
<p>{% trans %}If you choose to submit your changes to the site through TGitHub, please read and consider the contributing guidelines.{% endtrans %}</p>
<a href="#" class="btn btn-clear">{% trans %}Learn About On-Demand Liquidity{% endtrans %}</a>
</div>
</section>
</div>
{% endblock %}
{% block endbody %}
<script src="https://www.google.com/recaptcha/api.js"></script>
<script type="application/javascript">
gtag('config', 'UA-157720658-3', {'content_group1': 'Hub Pages'});
</script>
{% endblock %}

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

@@ -19,11 +19,11 @@
<div class="marketing-wrapper">
<div class="container mt-20">
<section class="row">
<div class="col-sm-4">
<h6 class="text-green fs-base mb-4">{% trans %}Impact{% endtrans %}</h6>
<h1 class="mb-18">{% trans %}Faster, Cheaper, Green Money{% endtrans %}</h1>
<div class="col-md-4 d-flex flex-column-reverse justify-content-end">
<h1 class="mb-10">{% trans %}Faster, Cheaper, Green Money{% endtrans %}</h1>
<h6 class="text-primary mb-4">{% trans %}Impact{% endtrans %}</h6>
</div>
<div class="col-sm-6 offset-sm-1">
<div class="col-md-6 offset-md-1">
<h2 class="mt-12 mb-10">{% trans %}The digital asset XRP is a truly global currency—ideally suited to enable today’s global economy.{% endtrans %}</h2>
<p>{% trans %}As an optimal medium of exchange, XRP and the XRP Ledger on which it operates help to move money around the world faster, cheaper and more sustainably than any other currency available today.{% endtrans %}</p>
<p class="mb-10">{% trans %}It was designed this way, and it’s proving its impact in global payments and beyond.{% endtrans %}</p>
@@ -37,15 +37,15 @@
<div class="container mb-20">
<section class="row mb-50">
<h6 class="section-marker">{% trans %}Global Payments{% endtrans %}</h6>
<div class="col-sm-4 offset-sm-1 mb-10">
<div class="col-md-4 offset-md-1 mb-10">
<img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
</div>
<div class="col-sm-6 offset-sm-1">
<div class="col-md-6 offset-md-1">
<h2 class="mb-10">{% trans %}Democratizing Global Payments{% endtrans %}</h2>
<h5 class="mb-10 normal">{% trans %}For the 23 million people immigrating worldwide, sending and receiving money across borders is an expensive, unreliable and complex endeavor.{% endtrans %}</h5>
<div class="mb-10 row">
<p class="col-sm">{% trans %}XRP and the XRP Ledger are changing that. The technology has been adopted by financial institutions around the world. They use it to source liquidity for international transactions, and because of the unprecedented efficiency it offers, they’re able to both bring down costs and improve services.{% endtrans %}</p>
<p class="col-sm">{% trans %}This means the millions of people worldwide who need to move money across borders can do so more affordably and reliably than ever before.{% endtrans %}</p>
<p class="col-md">{% trans %}XRP and the XRP Ledger are changing that. The technology has been adopted by financial institutions around the world. They use it to source liquidity for international transactions, and because of the unprecedented efficiency it offers, they’re able to both bring down costs and improve services.{% endtrans %}</p>
<p class="col-md">{% trans %}This means the millions of people worldwide who need to move money across borders can do so more affordably and reliably than ever before.{% endtrans %}</p>
</div>
<a href="#" class="btn btn-clear">{% trans %}Learn More{% endtrans %}</a>
</div>
@@ -53,15 +53,15 @@
<section class="row mb-50">
<h6 class="section-marker">{% trans %}Future of Finance{% endtrans %}</h6>
<div class="col-sm-4 offset-sm-1 order-1 order-sm-2">
<div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10">
<img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
</div>
<div class="col-sm-6 offset-sm-1 order-2 order-sm-1">
<div class="col-md-6 offset-md-1 order-2 order-md-1">
<h2 class="mb-10">{% trans %}Building for the Future{% endtrans %}</h2>
<h5 class="mb-10 normal">{% 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>
<div class="row mb-10">
<p class="col-sm">{% trans %}This has spawned increasing adoption of the technology across the financial services industry, from retail and institutional investment to commercial use cases like cross-border payments.{% endtrans %}</p>
<p class="col-sm">{% trans %}With usage growing, it’s critical that measures are taken today to ensure that the technology is environmentally sustainable tomorrow.{% endtrans %}</p>
<p class="col-md">{% trans %}This has spawned increasing adoption of the technology across the financial services industry, from retail and institutional investment to commercial use cases like cross-border payments.{% endtrans %}</p>
<p class="col-md">{% trans %}With usage growing, it’s critical that measures are taken today to ensure that the technology is environmentally sustainable tomorrow.{% endtrans %}</p>
</div>
<a href="#" class="btn btn-clear">{% trans %}Learn More{% endtrans %}</a>
</div>
@@ -69,16 +69,16 @@
<section class="row mb-50">
<h6 class="section-marker">{% trans %}Digital Assets{% endtrans %}</h6>
<div class="col-sm-4 offset-sm-1">
<div class="col-md-4 offset-md-1 mb-10">
<img class="mw-100" src="./img/marketing/impact-crypto-strengths@2x.png">
</div>
<div class="col-sm-6 offset-sm-1">
<div class="col-md-6 offset-md-1">
<h2 class="mb-10">{% trans %}Are All Digital Assets Alike?{% endtrans %}</h2>
<div class="row mb-10">
<div class="col-sm">
<div class="col-md">
<p>{% trans %}Each digital asset and blockchain technology has different strengths that make them ideal for various use cases today.{% endtrans %}</p>
<p>{% trans %}Bitcoin is recognized broadly as a store of value and Ether (ETH) for use in smart contracts.{% endtrans %}</p>
<p class="col-sm">
<p class="col-md">
<p>{% trans %}XRP is optimal for transacting—it’s fast, cheap, scalable and energy-efficient. It was designed this way; to be ideal for use in global payments.{% endtrans %}</p>
<p>{% trans %}And, the same characteristics that make it ideal for payments mean it’s also better for our environment. XRP is green by nature.{% endtrans %}</p>
</div>
@@ -87,20 +87,22 @@
<section class="row mb-20">
<h6 class="section-marker">{% trans %}Sustainability{% endtrans %}</h6>
<div class="col-sm-4">
<div class="col-md-4 mb-10">
<img class="mw-100 mt-20" src="./img/marketing/green-graphic@2x.png">
</div>
<div class="col-sm-8">
<div class="col-md-8">
<h3 class="h2 mb-9">{% trans %}What Makes XRP and XRPL Green?{% endtrans %}</h3>
<h5 class="mb-10 normal">{% trans %}Most currency today—whether digital or physical—is not environmentally friendly. The potential for long-term impact on our planet could hold startling consequences.{% endtrans %}</h5>
<div class="row mb-10">
<div class="col-sm">
<div class="col-md">
<p>{% trans %}The digital asset XRP was designed with sustainability in mind. The XRP Ledger processes transactions through a unique “consensus” mechanism that consumes negligible energy and all XRP currency is already in circulation.{% endtrans %}</p>
<p>{% trans %}Other digital assets, like Bitcoin, rely on a different mechanism to both validate transactions and create new coins. This “proof-of-work” algorithm requires “mining.” Mining is an incredibly energy-intensive process for validating transactions that consumes more energy in a year than entire countries.{% endtrans %}</p>
<div class="col-sm">
</div>
<div class="col-md">
<p>{% trans %}Cash also leaves a substantial carbon footprint, and the environmental impact goes beyond energy consumption—deforestation, water pollution and more factor into the equation.{% endtrans %}</p>
<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>
</div>
</section>

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

@@ -18,11 +18,11 @@
{% block main %}
<div class="container my-40 marketing-wrapper">
<section class="row mb-50">
<div class="col-sm-4 mb-10">
<h6 class="text-green fs-base mb-4">{% trans %}Using XRP{% endtrans %}</h6>
<h1 class="mb-18">{% trans %}The Best Way to Move Money Around the World{% endtrans %}</h1>
<div class="col-md-4 d-flex flex-column-reverse justify-content-end">
<h1 class="mb-10">{% trans %}The Best Way to Move Money Around the World{% endtrans %}</h1>
<h6 class="text-primary mb-4">{% trans %}Using XRP{% endtrans %}</h6>
</div>
<div class="col-sm-6 offset-sm-1">
<div class="col-md-6 offset-md-1">
<h2 class="mt-12 mb-10">{% trans %}XRP and the XRP Ledger are used to power innovative technology across the payments space.{% endtrans %}</h2>
<p>{% trans %}Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas maximus ligula, id tincidunt odio condimentum ac. Pellentesque vulputate felis lacus, id imperdiet elit tristique id. Ut sapien lorem, finibus id auctor eu, volutpat finibus nisi. {% endtrans %}</p>
</div>
@@ -30,10 +30,10 @@
<section class="row mb-50">
<h6 class="section-marker">{% trans %}Cross-Border payments{% endtrans %}</h6>
<div class="col-sm-4 offset-sm-1 order-1 order-sm-2 mb-10">
<div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10">
<img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
</div>
<div class="col-sm-6 offset-sm-1 order-2 order-sm-1">
<div class="col-md-6 offset-md-1 order-2 order-md-1">
<h2 class="mb-10">{% trans %}Cross-Border Payments{% endtrans %}</h2>
<p class="mb-10 normal">{% trans %}Through RippleNet, financial institutions can use XRP to bridge two currencies in 3-5 seconds, ensuring payments are quickly sent and received in the local currency on either side of a transaction.{% endtrans %}</p>
<a href="#" class="btn btn-clear">{% trans %}Learn About On-Demand Liquidity{% endtrans %}</a>
@@ -42,10 +42,10 @@
<section class="row mb-50">
<h6 class="section-marker">{% trans %}Micropayments{% endtrans %}</h6>
<div class="col-sm-4 offset-sm-1 mb-10">
<div class="col-md-4 offset-md-1 mb-10">
<img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
</div>
<div class="col-sm-6 offset-sm-1">
<div class="col-md-6 offset-md-1">
<h2 class="mb-10">{% trans %}Micropayments{% endtrans %}</h2>
<p class="mb-10 normal">{% trans %}Businesses are leveraging XRP and the XRP Ledger to build innovative products for gaming, content and web monetization, among other applications where money is at the center.{% endtrans %}</p>
<a href="#" class="btn btn-clear">{% trans %}Learn About XRPL Businesses{% endtrans %}</a>
@@ -54,10 +54,10 @@
<section class="row mb-50">
<h6 class="section-marker">{% trans %}Digital Cryptocurrency{% endtrans %}</h6>
<div class="col-sm-4 offset-sm-1 order-1 order-sm-2 mb-10">
<div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10">
<img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
</div>
<div class="col-sm-6 offset-sm-1 order-2 order-sm-1">
<div class="col-md-6 offset-md-1 order-2 order-md-1">
<h2 class="mb-10">{% trans %}Digital Cryptocurrency Wallets{% endtrans %}</h2>
<p class="mb-10 normal">{% trans %}Individuals can use mobile wallets to store private and public passwords and interact with various blockchains to send and receive digital assets, including XRP.{% endtrans %}</p>
<a href="#" class="btn btn-clear">{% trans %}Explore Wallets{% endtrans %}</a>
@@ -66,10 +66,10 @@
<section class="row mb-50">
<h6 class="section-marker">{% trans %}Exchanges{% endtrans %}</h6>
<div class="col-sm-4 offset-sm-1 mb-10">
<div class="col-md-4 offset-md-1 mb-10">
<img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
</div>
<div class="col-sm-4 offset-sm-1">
<div class="col-md-4 offset-md-1">
<h2 class="mb-10">{% trans %}Exchanges{% endtrans %}</h2>
<p class="mb-10 normal">{% trans %}Market makers and individuals use exchanges to trade XRP and other digital assets. Exchanges are often also intermediaries in cross-border payments among financial institutions.{% endtrans %}</p>
<a href="#" class="btn btn-clear">{% trans %}Explore Exchanges{% endtrans %}</a>
@@ -78,10 +78,10 @@
<section class="row mb-50">
<h6 class="section-marker">{% trans %}Trading{% endtrans %}</h6>
<div class="col-sm-4 offset-sm-1 order-1 order-sm-2 mb-10">
<div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10">
<img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
</div>
<div class="col-sm-6 offset-sm-1 order-2 order-sm-1">
<div class="col-md-6 offset-md-1 order-2 order-md-1">
<h2 class="mb-10">{% trans %}Institutional Trading{% endtrans %}</h2>
<p class="mb-10 normal">{% trans %}Market participants use XRP as a high-speed, cost-efficient and reliable trading collateral. This means seizing arbitrage opportunities, servicing margin calls and managing general trade inventory in real time.{% endtrans %}</p>
<a href="#" class="btn btn-clear">{% trans %}Learn More{% endtrans %}</a>