clean up of stylings

This commit is contained in:
Calvin Jhunjhnuwala
2020-08-05 15:21:06 -07:00
parent 85e432769f
commit 2de1b9b062
11 changed files with 235 additions and 197 deletions

File diff suppressed because one or more lines are too long

View File

@@ -166,7 +166,7 @@ pages:
- name: Uses
funnel: Learn
category: Uses
template: template-marketing-usage.html
template: template-learn-uses.html
html: uses.html
sidebar: disabled
targets:
@@ -186,7 +186,7 @@ pages:
- name: Impact
funnel: Learn
category: Impact
template: template-marketing-impact.html
template: template-learn-impact.html
html: impact.html
sidebar: disabled
targets:

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

View File

@@ -67,6 +67,6 @@ a:hover {
.use-case-step-num {
font-family: 'M PLUS 1p', 'Work Sans', sans-serif;
font-family: '851Gkktt', 'Work Sans', sans-serif;
// font-family: 'Makinas-4-Flat', 'Makinas-4-Square', 'Space Mono', sans-serif;
font-family: 'Makinas-4-Flat', 'Makinas-4-Square', 'Work Sans', sans-serif;
}
}

104
styles/_helpers.scss Normal file
View File

@@ -0,0 +1,104 @@
/* HEIGHT AND WIDTH HELPERS */
.h36 {
height: 36px;
}
.w36 {
width: 36px;
}
.w40 {
width: 40px;
}
.w48 {
width: 48px;
}
/* SPACING HELPERS */
/* To create new margin classes, multiply by 4px */
.mt-8 {
margin-top: 2rem;
}
.mt-9 {
margin-top: 2.25rem;
}
.mb-9 {
margin-bottom: 2.25rem;
}
.mt-10 {
margin-top: 2.5rem;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.my-10 {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}
.mt-12 {
margin-top: 3rem;
}
.mb-12 {
margin-bottom: 3rem;
}
.my-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.mt-13 {
margin-top: 3.25rem;
}
.mb-13 {
margin-bottom: 3.25rem;
}
.mt-14 {
margin-top: 3.5rem;
}
.mt-16 {
margin-top: 4rem;
}
.mb-16 {
margin-bottom: 4rem;
}
.mb-18 {
margin-bottom: 4.5rem;
}
.mt-20 {
margin-top: 5rem;
}
.mb-20 {
margin-bottom: 5rem;
}
.my-20 {
margin-top: 5rem;
margin-bottom: 5rem;
}
.mb-30 {
margin-bottom: 7.5rem;
}
.mt-40 {
margin-top: 10rem;
}
.mb-40 {
margin-bottom: 10rem;
}
.mb-49 {
margin-bottom: 12.25rem;
}
.mb-50 {
margin-bottom: 12.5rem;
}
.pb-40 {
padding-bottom: 10rem;
}
.pb-50 {
padding-bottom: 12.5rem;
}
.pt-50 {
padding-top: 12.5rem;
}
.py-50 {
padding-bottom: 12.5rem;
padding-top: 12.5rem;
}
.ls-none {
list-style: none;
}

View File

@@ -50,86 +50,14 @@
align-items: stretch;
}
/* SPACING HELPERS */
/* To create new margin classes, multiply by 4px */
.mt-8 {
margin-top: 2rem;
#hero-impact {
width: 100vw;
margin-left: -64px;
}
.mt-9 {
margin-top: 2.25rem;
}
.mb-9 {
margin-bottom: 2.25rem;
}
.mt-10 {
margin-top: 2.5rem;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.my-10 {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}
.mt-12 {
margin-top: 3rem;
}
.mb-12 {
margin-bottom: 3rem;
}
.my-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.mt-13 {
margin-top: 3.25rem;
}
.mb-13 {
margin-bottom: 3.25rem;
}
.mt-14 {
margin-top: 3.5rem;
}
.mt-16 {
margin-top: 4rem;
}
.mb-16 {
margin-bottom: 4rem;
}
.mb-18 {
margin-bottom: 4.5rem;
}
.mt-20 {
margin-top: 5rem;
}
.mb-20 {
margin-bottom: 5rem;
}
.my-20 {
margin-top: 5rem;
margin-bottom: 5rem;
}
.mt-30 {
margin-top: 7.5rem;
}
.mt-40 {
margin-top: 10rem;
}
.mb-40 {
margin-bottom: 10rem;
}
.my-40 {
margin-top: 10rem;
margin-bottom: 10rem;
}
.mb-49 {
margin-bottom: 12.25rem;
}
.mb-50 {
margin-bottom: 12.5rem;
}
.ls-none {
list-style: none;
@media only screen and (min-width: 768px) {
#hero-impact {
margin-top: -120px;
}
}
/* COMPONENTS */

View File

@@ -44,6 +44,7 @@ $font-family-sans-serif: -apple-system, system-ui, 'Roboto', sans-serif;
@import "_font.scss";
@import "_layout.scss";
@import "_side-nav.scss";
@import "_helpers.scss";
@import "_buttons.scss";
@import "_use-cases.scss";
@import "_github-edit.scss";

View File

@@ -21,6 +21,7 @@
<script src="assets/vendor/jquery-1.11.1.min.js"></script>
<!-- Stylesheet -->
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap" rel="stylesheet">
{% if target.lang=="ja" %}
<link href="assets/css/fonts-ja.css" rel="stylesheet" />
{% endif %}

View File

@@ -0,0 +1,116 @@
{% 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="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>
<div class="col-sm-6 offset-sm-1">
<h2 class="mt-12 mb-10">{% trans %}The digital asset XRP is a truly global currency—ideally suited to enable todays 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 its proving its impact in global payments and beyond.{% endtrans %}</p>
<a href="#" class="arrow-link text-white bold">{% trans %}How Green Is Your Currency?{% endtrans %}</a>
</div>
</section>
</div>
<img class="mb-30" src="./img/marketing/hero-impact.png" id="hero-impact" />
<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">
<img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
</div>
<div class="col-sm-6 offset-sm-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, theyre 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>
</div>
<a href="#" class="btn btn-clear">{% trans %}Learn More{% endtrans %}</a>
</div>
</section>
<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">
<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">
<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 its 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, its 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>
</section>
<section class="row mb-50">
<h6 class="section-marker">{% trans %}Digital Assets{% endtrans %}</h6>
<div class="col-sm-4 offset-sm-1">
<img class="mw-100" src="./img/marketing/impact-crypto-strengths@2x.png">
</div>
<div class="col-sm-6 offset-sm-1">
<h2 class="mb-10">{% trans %}Are All Digital Assets Alike?{% endtrans %}</h2>
<div class="row mb-10">
<div class="col-sm">
<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>{% trans %}XRP is optimal for transacting—its 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 its also better for our environment. XRP is green by nature.{% endtrans %}</p>
</div>
</div>
</section>
<section class="row mb-20">
<h6 class="section-marker">{% trans %}Sustainability{% endtrans %}</h6>
<div class="col-sm-4">
<img class="mw-100 mt-20" src="./img/marketing/green-graphic@2x.png">
</div>
<div class="col-sm-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">
<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">
<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>
<a href="#" class="btn btn-clear">{% trans %}Discover the Green Currency Calculator{% endtrans %}</a>
</div>
</section>
</div>
</div>
{% endblock %}
{% block endbody %}
<script type="application/javascript">
gtag('config', 'UA-157720658-3', {'content_group1': 'Hub Pages'});
</script>
{% endblock %}

View File

@@ -7,7 +7,6 @@
<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]-->
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap" rel="stylesheet">
{% endblock %}
@@ -19,11 +18,11 @@
{% block main %}
<div class="container my-40 marketing-wrapper">
<section class="row mb-50">
<div class="col-sm-4 offset-sm-1 mb-10">
<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>
<div class="col-sm-4 offset-sm-1">
<div class="col-sm-6 offset-sm-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>

View File

@@ -1,111 +0,0 @@
{% 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]-->
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap" rel="stylesheet">
{% 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-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>
<div class="col-sm-6 offset-sm-1">
<h2 class="mt-12 mb-10">{% trans %}The digital asset XRP is a truly global currency—ideally suited to enable todays 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 its proving its impact in global payments and beyond.{% endtrans %}</p>
<a href="#" class="arrow-link text-white bold">{% trans %}How Green Is Your Currency?{% endtrans %}</a>
</div>
</section>
<section class="row mb-50">
<h6 class="section-marker">{% trans %}Global Payments{% endtrans %}</h6>
<div class="col-sm-4 offset-sm-1 mb-10">
<img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
</div>
<div class="col-sm-6 offset-sm-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, theyre 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>
</div>
<a href="#" class="btn btn-clear">{% trans %}Learn More{% endtrans %}</a>
</div>
</section>
<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">
<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">
<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 its 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, its 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>
</section>
<section class="row mb-50">
<h6 class="section-marker">{% trans %}Digital Assets{% endtrans %}</h6>
<div class="col-sm-4 offset-sm-1">
<img class="mw-100" src="./img/marketing/impact-crypto-strengths@2x.png">
</div>
<div class="col-sm-6 offset-sm-1">
<h2 class="mb-10">{% trans %}Are All Digital Assets Alike?{% endtrans %}</h2>
<div class="row mb-10">
<div class="col-sm">
<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>{% trans %}XRP is optimal for transacting—its 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 its also better for our environment. XRP is green by nature.{% endtrans %}</p>
</div>
</div>
</section>
<section class="row mb-20">
<h6 class="section-marker">{% trans %}Sustainability{% endtrans %}</h6>
<div class="col-sm-4">
<img class="mw-100 mt-20" src="./img/marketing/green-graphic@2x.png">
</div>
<div class="col-sm-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">
<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">
<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>
<a href="#" class="btn btn-clear">{% trans %}Discover the Green Currency Calculator{% endtrans %}</a>
</div>
</section>
</div>
{% endblock %}
{% block endbody %}
<script type="application/javascript">
gtag('config', 'UA-157720658-3', {'content_group1': 'Hub Pages'});
</script>
{% endblock %}