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

home page styling edits

Browse Source
This commit is contained in:
Calvin Jhunjhnuwala
2021-06-21 14:20:19 -07:00
parent ab09eac975
commit ea5384623c
5 changed files with 115 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/devportal2020.css
View File

File diff suppressed because one or more lines are too long

11
styles/_font.scss
View File

@@ -83,7 +83,18 @@ h6, .h6 {
line-height: 24px;
}
}
.longform {
font-size: 1.5rem;
line-height: 32px;
color: $gray-100;
font-weight: normal;
@include media-breakpoint-down(sm) {
font-size: 1rem;
line-height: 24px;
}
}
p {
color: $gray-200;
font-size: 1rem;
line-height: 24px;
}

18
styles/_helpers.scss
View File

@@ -76,6 +76,12 @@
margin-right: 2.5rem;
}
}
&-sm {
@include media-breakpoint-down(sm) {
margin-left: 2.5rem;
margin-right: 2.5rem;
}
}
}
.mt-12 {
margin-top: 3rem;
@@ -101,6 +107,11 @@
}
.mb-16 {
margin-bottom: 4rem;
&-sm {
@include media-breakpoint-down(sm) {
margin-bottom: 4rem;
}
}
}
.mb-18 {
margin-bottom: 4.5rem;
@@ -172,6 +183,9 @@
}
}
}
.p-40 {
padding: 40px;
}
.py-20 {
padding-bottom: 5rem;
padding-top: 5rem;
@@ -182,6 +196,10 @@
.pb-20 {
padding-bottom: 5rem;
}
.py-26 {
padding-top: 6.5rem;
padding-bottom: 6.5rem;
}
.pt-30 {
padding-top: 7.5rem;
}

28
styles/_layout.scss
View File

@@ -176,7 +176,6 @@ section {
// New Page Layouts ---------------------------------------------------------------
$columns: 12; // Number of columns in the grid system
.container-new {
display: flex;
flex-wrap: wrap;
@@ -199,20 +198,26 @@ $columns: 12; // Number of columns in the grid system
}
// create columns
@for $width from 1 through $columns {
.col-#{$width} {
.col-new-#{$width} {
flex-basis: $width / $columns * 100%;
}
}
.col-new {
--width: 4;
@include media-breakpoint-up(lg) {
margin: 40px;
}
background-position: bottom;
background-repeat: no-repeat;
background-size: contain;
@include media-breakpoint-down(lg) {
margin: 24px;
}
background-position: bottom;
background-repeat: no-repeat;
@include media-breakpoint-down(sm) {
margin: 0 0 40px;
}
@include media-breakpoint-up(lg) {
margin: 40px;
}
&#pink-purple {
background-image: url(../../img/cards/pink-purple.svg);
}
@@ -226,7 +231,6 @@ $columns: 12; // Number of columns in the grid system
background-image: url(../../img/cards/orange.svg);
}
.card-new {
// border-radius: 8px;
padding: 32px;
min-height: 264px;
@include media-breakpoint-up(md) {
@@ -234,9 +238,17 @@ $columns: 12; // Number of columns in the grid system
}
}
}
.card-new {
--width: 4;
}
.col-new-card {
transition: all 0.35s ease-out;
&:hover {
margin-top: 24px;
margin-bottom: 56px;
}
}
}

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

@@ -29,71 +29,78 @@
</div>
</section>
<section class="container-new py-26">
<div class="col-md-6 offset-md-3 p-40">
<h2 class="h4 mb-8">{% trans %}The XRP Ledger: A Scalable, Sustainable Blockchain{% endtrans %}</h2>
<h6 class="longform mb-10">{% trans %}The XRP Ledger (XRPL) is a decentralized, public blockchain led by a global developer community.{% endtrans %}</h6>
<p class="mb-0">{% trans %}It’s fast, energy efficient, and reliable. With ease of development, low transaction costs, and a knowledgeable community, it provides developers with a strong open-source foundation for executing on the most demanding projects—without hurting the environment.{% endtrans %}</p>
</div>
</section>
<section class="container-new my-26">
<section class="container-new py-26">
<div class="d-flex flex-column-reverse col-8 p-0">
<h3 class="h4 mx-10">{% trans %}Why Developers Choose XRP Ledger{% endtrans %}</h3>
<h6 class="green-500 mx-10 mb-3">{% trans %}Discover Benefits{% endtrans %}</h6>
</div>
<ul class="mt-10 card-grid card-grid-3xN">
<li class="col-new ls-none">
<li class="col-new ls-none mb-16-sm">
<img src="./img/icons/public.svg">
<h4 class="mb-0 h5">{% trans %}Public and Decentralized Structure{% endtrans %}</h4>
<h4 class="mt-3 mb-0 h5">{% trans %}Public and Decentralized Structure{% endtrans %}</h4>
<p class="mt-8 mb-0">{% trans %}Open source, open to anyone to build on, maintained by the community{% endtrans %}</p>
</li>
<li class="col-new ls-none">
<li class="col-new ls-none mb-16-sm">
<img src="./img/icons/streamlined.svg">
<h4 class="mb-0 h5">{% trans %}Streamlined <br/>Development{% endtrans %}</h4>
<h4 class="mt-3 mb-0 h5">{% trans %}Streamlined <br/>Development{% endtrans %}</h4>
<p class="mt-8 mb-0">{% trans %}Tools and documentation that speed development and reduce time to market{% endtrans %}</p>
</li>
<li class="col-new ls-none">
<li class="col-new ls-none mb-16-sm">
<img src="./img/icons/performance.svg">
<h4 class="mb-0 h5">{% trans %}High <br/>Performance{% endtrans %}</h4>
<h4 class="mt-3 mb-0 h5">{% trans %}High <br/>Performance{% endtrans %}</h4>
<p class="mt-8 mb-0">{% trans %}Capable of settling thousands of transactions in seconds{% endtrans %}</p>
</li>
<li class="col-new ls-none">
<li class="col-new ls-none mb-16-sm">
<img src="./img/icons/low-cost.svg">
<h4 class="mb-0 h5">{% trans %}Low Cost{% endtrans %}</h4>
<h4 class="mt-3 mb-0 h5">{% trans %}Low Cost{% endtrans %}</h4>
<p class="mt-8 mb-0">{% trans %}At fractions of a penny per transaction, costs are inexpensive enough to enable a wide variety of use cases{% endtrans %}</p>
</li>
<li class="col-new ls-none">
<li class="col-new ls-none mb-16-sm">
<img src="./img/icons/community.svg">
<h4 class="mb-0 h5">{% trans %}Vibrant Community{% endtrans %}</h4>
<h4 class="mt-3 mb-0 h5">{% trans %}Vibrant Community{% endtrans %}</h4>
<p class="mt-8 mb-0">{% trans %}Developers, validators, users, and businesses make the XRPL better every day{% endtrans %}</p>
</li>
<li class="col-new ls-none">
<li class="col-new ls-none mb-16-sm">
<img src="./img/icons/reliability.svg">
<h4 class="mb-0 h5">{% trans %}Proven Reliability{% endtrans %}</h4>
<h4 class="mt-3 mb-0 h5">{% trans %}Proven Reliability{% endtrans %}</h4>
<p class="mt-8 mb-0">{% trans %}9+ years of consistent performance over more than 63 million ledgers{% endtrans %}</p>
</li>
</ul>
</section>
<section class="container-new my-26">
<section class="container-new py-26">
<div class="d-flex flex-column-reverse col-8 p-0 mx-10-until-sm">
<h3 class="h4">{% trans %}Activate the power of the XRP Ledger and find the building blocks for your next innovation{% endtrans %}</h3>
<h6 class="green-500 mb-3">{% trans %}Explore Advanced Features{% endtrans %}</h6>
</div>
<ul class="mt-10 card-grid card-grid-3xN">
<li class="col-new ls-none bg-grey-800 br-8" id="pink-purple">
<div class="card-new" >
<li class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="pink-purple">
<div class="card-new">
<h4 class="h5">{% trans %}Decentralized Exchange{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}A high-performance decentralized peer-to-peer multi-currency exchange built directly into the blockchain{% endtrans %}</p>
</div>
</li>
<li class="col-new ls-none bg-grey-800 br-8" id="neutral-blue">
<li class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="neutral-blue">
<div class="card-new">
<h4 class="h5">{% trans %}Cross-Currency Payments{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}Atomically settle multi-hop payments that cross currency or national boundaries with ease.{% endtrans %}</p>
</div>
</li>
<li class="col-new ls-none bg-grey-800 br-8" id="light-green">
<li class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="light-green">
<div class="card-new">
<h4 class="h5">{% trans %}Payment <br/>Channels{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}Batched micropayments with unlimited speed, secured with XRP.{% endtrans %}</p>
</div>
</li>
<li class="col-new ls-none bg-grey-800 br-8" id="orange">
<li class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="orange">
<div class="card-new">
<h4 class="h5">{% trans %}Multi-Signing{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}Flexible options for custody and security of on-ledger accounts.{% endtrans %}</p>
@@ -101,6 +108,45 @@
</li>
</ul>
</section>
<section class="container-new py-26">
<div class="d-flex flex-column-reverse col-8 p-0 mx-10-until-sm">
<h3 class="h4">{% trans %}Choose a path to start building on the XRPL{% endtrans %}</h3>
<h6 class="green-500 mb-3">{% trans %}Get Started{% endtrans %}</h6>
</div>
<ul class="mt-10 card-grid card-grid-3xN">
<li class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="pink-purple">
<div class="card-new">
<h4 class="h5">{% trans %}Quickstart{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}Everything you need to get started working with the XRPL{% endtrans %}</p>
</div>
</li>
<li class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="neutral-blue">
<div class="card-new">
<h4 class="h5">{% trans %}Guided Tutorials{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}Step-by-step guides for frequent tasks{% endtrans %}</p>
</div>
</li>
<li class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="light-green">
<div class="card-new">
<h4 class="h5">{% trans %}XRPL Fundamentals{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}Read about the XRPL’s foundational concepts{% endtrans %}</p>
</div>
</li>
<li class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="orange">
<div class="card-new">
<h4 class="h5">{% trans %}Choose a Language{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}Find tools, documentation, and sample code in Python, Java, Javascript, or use HTTP APIs{% endtrans %}</p>
</div>
</li>
<li class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="orange">
<div class="card-new">
<h4 class="h5">{% trans %}Get Inspired{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}See what your peers have built on the XRPL{% endtrans %}</p>
</div>
</li>
</ul>
</section>
</div>
{% endblock %}