mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-20 03:35:51 +00:00
Design refresh: h omepage style
This commit is contained in:
mDuo13
@@ -194,7 +194,23 @@ th {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.content .children-display li a {
|
||||
/* Category landing pages */
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-weight: 700;
|
||||
font-size: 1.25rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.content .children-display li a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Footer ------------------------------------------------------------------- */
|
||||
.build-disclaimer {
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.ripple-footer {
|
||||
font-size: 14px;
|
||||
background-position-y: -60px;
|
||||
@@ -477,31 +493,17 @@ a.current {
|
||||
.landing .card .curated-links li a {
|
||||
padding: 8px;
|
||||
display: block;
|
||||
margin: 0 -12px 0 -12px;
|
||||
margin: 0 -8px 0 -8px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.landing .card .level-1 a:hover,
|
||||
.landing .card .curated-links li a:hover {
|
||||
background-color: #D8EEFC;
|
||||
text-decoration: none;
|
||||
}
|
||||
.landing .card .level-1 a:hover:after,
|
||||
.landing .card .curated-links li a:hover:after {
|
||||
content: "\f105"; /* fontawesome angle-right */
|
||||
font-family: FontAwesome;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 12px;
|
||||
color: #0D294E;
|
||||
}
|
||||
|
||||
.landing .card .level-2 {
|
||||
position: relative;
|
||||
}
|
||||
.landing .card .level-2 a {
|
||||
padding: 8px 12px 8px 32px;
|
||||
padding: 8px 8px 8px 28px;
|
||||
display: block;
|
||||
margin: 0 -12px 0 -12px;
|
||||
margin: 0 -8px 0 -8px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.landing .card .level-2 a:hover {
|
||||
@@ -852,8 +854,8 @@ a.current {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.landing .card-body {
|
||||
padding: 12px;
|
||||
.card-grid .card-body {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.landing .card-header,
|
||||
@@ -868,11 +870,7 @@ a.current {
|
||||
}
|
||||
|
||||
.landing .card-footer {
|
||||
padding: 0 12px 12px 12px;
|
||||
}
|
||||
|
||||
.landing .card-header + .card-body {
|
||||
padding: 0 12px 12px 12px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.landing .card-header a {
|
||||
@@ -886,15 +884,62 @@ a.current {
|
||||
.landing .card-body > p {
|
||||
padding: 0;
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-header.bg-dark {
|
||||
color: white;
|
||||
.btn-outline-secondary {
|
||||
padding: 9px 16px;
|
||||
transition: box-shadow 200ms ease, background-color 200ms ease, color 200ms ease;
|
||||
background-color: transparent;
|
||||
box-shadow: inset 0 0 0 1px #d3d0cf;
|
||||
}
|
||||
|
||||
.landing .card-header.bg-dark a:hover {
|
||||
#main_content_wrapper .btn-outline-secondary:hover,
|
||||
#main_content_wrapper .btn-outline-secondary:active {
|
||||
/* Undo Bootstrap styling */
|
||||
color: #1b1818;
|
||||
background-color: inherit;
|
||||
border: 1px solid #1b1818;
|
||||
}
|
||||
|
||||
.btn:not(.external-link)::after,
|
||||
.landing .card .level-1 a::after,
|
||||
.landing .card .curated-links li a::after,
|
||||
.content .children-display li a::after {
|
||||
content: " ➝";
|
||||
padding-left: 7px;
|
||||
transition: all .2s ease-in-out;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: #FF9900;
|
||||
}
|
||||
|
||||
.btn:not(.external-link):hover::after,
|
||||
.landing .card .level-1 a:hover::after,
|
||||
.landing .card .curated-links li a:hover::after,
|
||||
.landing a.card:hover .btn::after,
|
||||
.content .children-display li a:hover::after {
|
||||
padding-left: 14px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.external-link .fa-external-link,
|
||||
.related-projects a .fa-external-link {
|
||||
transition: all .2s ease-in-out;
|
||||
display: inline-block;
|
||||
padding-left: 7px;
|
||||
}
|
||||
.external-link:hover .fa-external-link,
|
||||
.related-projects a:hover .fa-external-link {
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
/* Avoid shifting other text over */
|
||||
.content .external-link .fa-external-link {
|
||||
padding-right: 7px;
|
||||
}
|
||||
.content .external-link:hover .fa-external-link {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.landing .card .blurb {
|
||||
@@ -902,24 +947,27 @@ a.current {
|
||||
}
|
||||
|
||||
.landing .card > .card-img-top {
|
||||
padding: 0 16px;
|
||||
width: 25%;
|
||||
margin-left: auto;
|
||||
padding: 8px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#xrp_ledger_intro a:hover {
|
||||
/* Full-link cards */
|
||||
.landing a.card {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.landing a.card:hover {
|
||||
text-decoration: none;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#xrp_ledger_intro .card-footer {
|
||||
border-width: 0;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
.landing a.card:hover h3 {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#xrp_ledger_intro .card-body {
|
||||
padding: 1px;
|
||||
.landing a.card:hover .btn-outline-secondary {
|
||||
border: 1px solid #1b1818;
|
||||
color: #1b1818;
|
||||
}
|
||||
|
||||
.recently-updated-date {
|
||||
@@ -929,36 +977,23 @@ a.current {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
/* "Related Projects" boxes -------------- */
|
||||
|
||||
.build-disclaimer {
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
|
||||
/* "Related Projects" (i.e. Client Portal & Interledger) boxes -------------- */
|
||||
|
||||
.related-projects a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.related-projects h3 {
|
||||
margin: 0;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
.related-projects .project-name {
|
||||
font-size: 18px;
|
||||
}
|
||||
.related-projects .login-required {
|
||||
font-size: 12px;
|
||||
}
|
||||
.related-projects p {
|
||||
margin: 10px;
|
||||
}
|
||||
.related-projects .project-icon {
|
||||
.interledger-link .project-icon {
|
||||
width: 120px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.xpring-link .project-icon {
|
||||
background-color: #212529;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
height: 24px;
|
||||
line-height: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Interactive blocks in tutorial contents ---------------------------------- */
|
||||
|
||||
/* I don't get it, but apparently setting padding or border on
|
||||
|
||||
9
assets/img/xpring-logo.svg
Normal file
9
assets/img/xpring-logo.svg
Normal file
@@ -0,0 +1,9 @@
|
||||
<svg width="151" height="27" viewBox="0 0 151 27" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M151 11.726V22.3531C151 22.7847 150.844 23.1765 150.562 23.5181L150.546 23.5371L150.529 23.5542C148.12 25.8658 144.866 27 140.818 27C138.737 27 136.862 26.6967 135.198 26.0819L135.196 26.0811C133.557 25.4667 132.155 24.577 130.998 23.4095C129.841 22.2419 128.959 20.8273 128.35 19.173L128.35 19.1712C127.74 17.492 127.44 15.5996 127.44 13.5C127.44 11.4227 127.74 9.54183 128.35 7.86317C128.958 6.18618 129.84 4.75926 130.998 3.59062C132.155 2.42313 133.557 1.53328 135.196 0.91878L135.198 0.918156C136.862 0.303242 138.737 0 140.818 0C144.288 0 147.183 0.853012 149.471 2.59067L150.103 3.0369L147.874 5.44889L147.536 5.19435C145.837 3.91332 143.609 3.2546 140.818 3.2546C137.446 3.2546 134.939 4.14851 133.229 5.87305C131.54 7.59906 130.665 10.1184 130.665 13.5C130.665 16.9055 131.541 19.4358 133.229 21.1612C134.939 22.8857 137.446 23.7797 140.818 23.7797C143.768 23.7797 146.072 23.0523 147.775 21.6401V14.9801L151 11.726Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M48.4949 0.240179L48.4996 0.240284C49.5726 0.264426 50.5802 0.493055 51.5178 0.92877C52.4708 1.33826 53.3078 1.90541 54.0257 2.6299C54.7464 3.357 55.3091 4.21615 55.7146 5.20247C56.1226 6.17161 56.3257 7.20028 56.3257 8.28421C56.3257 9.39301 56.1105 10.4458 55.679 11.4386C55.2723 12.4034 54.6978 13.2604 53.9576 14.0073C53.2384 14.7331 52.3892 15.3113 51.4144 15.7433L51.4098 15.7453C50.4477 16.1579 49.4163 16.3625 48.3201 16.3625H39.1532V26.7941H35.9279V0.240284L48.4949 0.240179ZM48.3201 13.1424C48.9668 13.1424 49.5788 13.0164 50.1601 12.7651C50.7467 12.5113 51.2569 12.1641 51.694 11.7231C52.1311 11.2821 52.4752 10.7671 52.7266 10.1752C52.975 9.59042 53.1005 8.96146 53.1005 8.28421C53.1005 7.63173 52.9757 7.01411 52.7266 6.42761C52.4752 5.83559 52.1311 5.32068 51.694 4.87966C51.2569 4.43864 50.7467 4.09148 50.1601 3.83767C49.5788 3.58635 48.9668 3.46044 48.3201 3.46044H39.1532V13.1424H48.3201Z" fill="white"/>
|
||||
<path d="M101.74 26.7941H104.965V6.78757L118.36 25.4241C118.922 26.2064 119.84 26.6461 120.795 26.591L122.176 26.5115V0.240179H118.984V20.2475L105.375 1.32421C104.925 0.698477 104.191 0.347053 103.427 0.391072L101.74 0.488372V26.7941Z" fill="white"/>
|
||||
<path d="M69.4318 16.4312C71.0481 16.4312 72.5774 17.1707 73.5916 18.4426L80.251 26.7941H84.3972L75.2855 15.2153C74.2719 13.9273 72.7325 13.1767 71.1042 13.1767H64.7913V3.52912H73.9583C74.6049 3.52912 75.2169 3.65504 75.7982 3.90635C76.3849 4.16006 76.8951 4.50732 77.3322 4.94834L77.3395 4.95563C77.7721 5.37136 78.1141 5.8717 78.3648 6.46195C78.6131 7.04679 78.7386 7.67554 78.7386 8.3529C78.7386 9.02921 78.6135 9.65713 78.3659 10.2411C78.2156 10.5819 78.0319 10.8997 77.8143 11.195L79.9128 13.7314C79.9391 13.7015 79.9652 13.6714 79.9911 13.6411C80.6116 12.9185 81.0898 12.1106 81.4247 11.2192C81.785 10.3206 81.9639 9.36388 81.9639 8.3529C81.9639 7.26886 81.7608 6.2403 81.3529 5.27115C80.9473 4.28462 80.3845 3.42568 79.6638 2.69838C78.9468 1.97492 78.1111 1.39706 77.16 0.96488C76.2212 0.52802 75.2124 0.298663 74.1377 0.274625L74.133 0.274521H63.1787C62.7363 0.274521 62.3488 0.454967 62.0299 0.776837C61.7249 1.08455 61.5661 1.4672 61.5661 1.90177V26.7941H64.7913V16.4312H69.4318Z" fill="white"/>
|
||||
<path d="M89.7381 0.240179H92.9634V26.7941H89.7381V0.240179Z" fill="white"/>
|
||||
<path d="M26.5071 0.173474H30.9988L21.6535 9.69803C18.2707 13.1459 12.7859 13.1459 9.40307 9.69803L0.0577162 0.173474H4.54953L11.649 7.40914C13.7915 9.59271 17.2651 9.59271 19.4076 7.40914L26.5071 0.173474Z" fill="white"/>
|
||||
<path d="M0 26.6594H4.49185L11.649 19.365C13.7915 17.1815 17.2651 17.1815 19.4076 19.365L26.5647 26.6594H31.0566L21.6535 17.0759C18.2707 13.6282 12.7859 13.6282 9.40307 17.0759L0 26.6594Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
26
assets/vendor/bootstrap.css
vendored
26
assets/vendor/bootstrap.css
vendored
@@ -7173,10 +7173,33 @@ h1, h2, h3, h4, h5 {
|
||||
grid-template-rows: 1fr 1fr; }
|
||||
.card-grid.card-grid-2x2 .section-hero {
|
||||
grid-row-end: span 2; }
|
||||
@media (max-width: 991.98px) {
|
||||
.card-grid.card-grid-2x2 {
|
||||
/* Switch to 1-column layout on smaller widths */
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(5, auto); } }
|
||||
.card-grid.card-grid-2x1 {
|
||||
/* left half is a hero area; right half is a 2x1 grid. Total grid is 4x1 */
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
grid-template-rows: 1fr; }
|
||||
@media (max-width: 991.98px) {
|
||||
.card-grid.card-grid-2x1 {
|
||||
/* Switch to 1-column layout on smaller widths */
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr; } }
|
||||
.card-grid.card-grid-2x1 .section-hero {
|
||||
grid-row-end: span 1; }
|
||||
.card-grid.card-grid-2x4 {
|
||||
/* left half is a hero area; right half is a 2x4 grid. Total grid is 4x4 */
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr 1fr; }
|
||||
@media (max-width: 991.98px) {
|
||||
.card-grid.card-grid-2x4 {
|
||||
/* Switch to 1-column layout on smaller widths */
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(5, auto); }
|
||||
.card-grid.card-grid-2x4 .section-hero {
|
||||
grid-row-end: span 2; } }
|
||||
.card-grid.card-grid-2x4 .section-hero {
|
||||
grid-row-end: span 4; }
|
||||
.card-grid .align-bottom {
|
||||
@@ -7184,3 +7207,6 @@ h1, h2, h3, h4, h5 {
|
||||
.card-grid .card {
|
||||
padding: 40px;
|
||||
border: 0; }
|
||||
@media (max-width: 991.98px) {
|
||||
.card-grid .card {
|
||||
padding: 20px; } }
|
||||
|
||||
@@ -28,3 +28,4 @@ def filter_soup(soup, **kwargs):
|
||||
"aria-hidden": "true"})
|
||||
link.append(" ")
|
||||
link.append(ex_link_marker)
|
||||
link['class'] = link.get('class',[]) + ['external-link']
|
||||
|
||||
@@ -20,50 +20,67 @@
|
||||
<div class="section-hero card align-bottom">
|
||||
<div>
|
||||
<h1 class="display-4">Powering the Internet of Value.</h1>
|
||||
<div class="blurb col-sm-12">
|
||||
<div class="blurb">
|
||||
<p>The <a href="#xrp_ledger_intro">XRP Ledger</a> is open-source technology that anyone can use.</p>
|
||||
<p>Use the tools and information provided here to integrate with and contribute to the open-source platform.</p>
|
||||
<p>Want more? Get updates about XRP Ledger webinars, releases, and documentation! <a class="btn btn-outline-secondary ml-3" href="https://goo.gl/forms/sHMFxU8dKiTUaltE3" target="_blank">Sign up! <i class="fa fa-external-link" aria-hidden="true"></i></a></p>
|
||||
<h5>Want more?</h5>
|
||||
<p>Get updates about XRP Ledger webinars, releases, and documentation!</p>
|
||||
<p><a class="btn btn-outline-secondary external-link" href="https://goo.gl/forms/sHMFxU8dKiTUaltE3" target="_blank">Sign up! <i class="fa fa-external-link" aria-hidden="true"></i></a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.section-hero-->
|
||||
|
||||
<a class="card" href="get-started-with-the-rippled-api.html">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Get Started with XRP Ledger APIs</h3>
|
||||
</div><!--/.card-header-->
|
||||
<div class="card-body">
|
||||
<p>Get started with the APIs and libraries available for interacting with the XRP Ledger.</p>
|
||||
</div><!--/.card-body-->
|
||||
<div class="card-footer">
|
||||
<button href="references.html" class="btn btn-outline-secondary">Get Started</button>
|
||||
</div><!--/.card-footer-->
|
||||
</a><!--/.card-->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Go to the References</h3>
|
||||
<h3 class="card-title"><a href="concepts.html">Learn How It Works</a></h3>
|
||||
</div><!--/.card-header-->
|
||||
<div class="card-body">
|
||||
<div class="curated-links">
|
||||
<ul>
|
||||
<li><a href="rippled-api.html"><code>rippled</code> API</a></li>
|
||||
<li><a href="rippleapi-reference.html">RippleAPI for JavaScript</a></li>
|
||||
<li><a href="data-api.html">Data API</a></li>
|
||||
<li><a href="intro-to-consensus.html">Intro to Consensus</a></li>
|
||||
<li><a href="xrp.html">About XRP</a></li>
|
||||
<li><a href="payment-system-basics.html">Payment System Basics</a></li>
|
||||
<li><a href="decentralized-exchange.html">Decentralized Exchange</a></li>
|
||||
</ul>
|
||||
</div><!--/.curated-links-->
|
||||
</div><!--/.card-body-->
|
||||
<div class="card-footer">
|
||||
<div class="readmore">
|
||||
<a href="references.html" class="btn btn-outline-secondary">View References <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
<a href="concepts.html" class="btn btn-outline-secondary">All Concepts</a>
|
||||
</div><!--/.card-footer-->
|
||||
</div><!--/.card-->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Get Started</h3>
|
||||
<h3 class="card-title"><a href="docs.html">Read Documentation</a></h3>
|
||||
</div><!--/.card-header-->
|
||||
<div class="card-body">
|
||||
<div class="curated-links">
|
||||
<ul>
|
||||
<li><a href="websocket-api-tool.html">Make a call to the rippled API</a></li>
|
||||
<li><a href="xrp-test-net-faucet.html">Access the XRP Ledger Test Net</a></li>
|
||||
<li><a href="concepts.html">Understand XRP Ledger Concepts</a></li>
|
||||
<li><a href="references.html">API References</a></li>
|
||||
<li><a href="concepts.html">Concepts</a></li>
|
||||
<li><a href="tutorials.html">Tutorials</a></li>
|
||||
<li><a href="docs.html#full-doc-index">Full Doc Index</a></li>
|
||||
</ul>
|
||||
</div><!--/.curated-links-->
|
||||
</div><!--/.card-body-->
|
||||
<div class="card-footer">
|
||||
<a href="docs.html" class="btn btn-outline-secondary">All Docs</a>
|
||||
</div><!--/.card-footer-->
|
||||
</div><!--/.card-->
|
||||
|
||||
<div class="card">
|
||||
<a class="card" href="#TODO:EXPLORER_URL">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Explore the XRP Ledger</h3>
|
||||
</div><!--/.card-header-->
|
||||
@@ -72,100 +89,74 @@
|
||||
</div><!--/.card-body-->
|
||||
<div class="card-footer">
|
||||
<div class="readmore">
|
||||
<a href="#TODO:EXPLORER_URL" class="btn btn-outline-secondary">Go to the Explorer <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
|
||||
<button class="btn btn-outline-secondary">Go to the Explorer</button>
|
||||
</div>
|
||||
</div><!--/.card-footer-->
|
||||
</div><!--/.card-->
|
||||
</a><!--/.card-->
|
||||
|
||||
</section><!--/"Above the fold" .card-grid-2x2-->
|
||||
|
||||
<section class="container-fluid card-grid">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">New and Updated Documentation</h3>
|
||||
<h2><a href="/blog/">XRP Ledger Blog</a></h2>
|
||||
</div><!--/.card-header-->
|
||||
<div class="card-body">
|
||||
<div class="curated-links">
|
||||
<ol>
|
||||
{% for link in target.recently_updated %}
|
||||
{% set linkpage = pages|selectattr("html", 'defined_and_equalto', link.html)|first %}
|
||||
<li><a href="{{linkpage.html}}">{{linkpage.name}}{% if link.date is defined %} <span class="recently-updated-date">({{link.date}})</span>{% endif %}</a></li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div><!--/.curated-links-->
|
||||
</div><!--/.card-body-->
|
||||
</div><!--/.card-->
|
||||
|
||||
</section><!--/.card-grid-2x2-->
|
||||
<p>Visit the blog for the latest XRP Ledger info, including <a href="/blog/label/rippled-release-notes.html">Release Notes</a>, <a href="/blog/label/amendments.html">Amendments</a> to the XRP Ledger protocol, <a href="/blog/label/features.html">Feature articles</a> from XRP experts, and more.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="/blog/" class="btn btn-outline-secondary">View Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container-fluid card-grid card-grid-2x4" id="xrp_ledger_intro">
|
||||
<div class="card section-hero">
|
||||
<div class="card-header">
|
||||
<h2><a href="xrp-ledger-overview.html">What is the XRP Ledger?</a></h2>
|
||||
<div class="row">
|
||||
<div class="blurb col-sm-12">
|
||||
</div><!--/.card-header-->
|
||||
<div class="card-body">
|
||||
<p>The XRP Ledger is a decentralized cryptographic ledger, powered by a network of peer-to-peer servers. It is the home of XRP, a digital asset designed to bridge the many different currencies in use worldwide.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.section-hero-->
|
||||
|
||||
<a href="xrp-ledger-overview.html#the-digital-asset-for-payments" class="card">
|
||||
<img class="card-img-top" src="assets/img/payment-card.svg" alt="(XRP triskellion)" />
|
||||
<div class="card-body">
|
||||
<!-- <p>XRP is a digital asset native to the XRP Ledger. Anyone with a cryptographic key and an internet connection can receive, hold, and send XRP to anyone else.</p> -->
|
||||
</div><!--/.card-body-->
|
||||
<div class="card-footer"><h3>The Digital Asset for Payments</h3></div>
|
||||
</a><!--/.card-->
|
||||
|
||||
<a href="xrp-ledger-overview.html#censorship-resistant-transaction-processing" class="card">
|
||||
<img class="card-img-top" src="assets/img/dollar-arrow.svg" alt="(money moving)" />
|
||||
<div class="card-body">
|
||||
<!-- <p>No single party decides which XRP transactions succeed or fail, and no one can "roll back" a transaction after it completes.</p> -->
|
||||
</div><!--/.card-body-->
|
||||
<div class="card-footer"><h3>Censorship-Resistant Transaction Processing</h3></div>
|
||||
</a><!--/.card-->
|
||||
|
||||
<a href="xrp-ledger-overview.html#fast-efficient-consensus-algorithm" class="card">
|
||||
<img class="card-img-top" src="assets/img/network.svg" alt="(consensus network)" />
|
||||
<div class="card-body">
|
||||
<!-- <p>The XRP Ledger's consensus algorithm settles transactions in 4 to 5 seconds, processing at a throughput of up to 1500 transactions per second.</p> -->
|
||||
</div><!--/.card-body-->
|
||||
<div class="card-footer"><h3>Fast, Efficient Consensus Algorithm</h3></div>
|
||||
</a><!--/.card-->
|
||||
|
||||
<a href="xrp-ledger-overview.html#finite-xrp-supply" class="card">
|
||||
<img class="card-img-top" src="assets/img/line-graph.svg" alt="(price graph)" />
|
||||
<div class="card-body">
|
||||
<!-- <p>When the XRP Ledger began, 100 billion XRP were created, and no more XRP will ever be created.</p> -->
|
||||
</div><!--/.card-body-->
|
||||
<div class="card-footer"><h3>Finite XRP Supply</h3></div>
|
||||
</a><!--/.card-->
|
||||
|
||||
<a href="xrp-ledger-overview.html#responsible-software-governance" class="card">
|
||||
<img class="card-img-top" src="assets/img/scales.svg" alt="(scales of justice)" />
|
||||
<div class="card-body">
|
||||
<!-- <p>A team of full-time, world-class developers at Ripple maintain and continually improve the XRP Ledger's underlying software.</p> -->
|
||||
</div><!--/.card-body-->
|
||||
<div class="card-footer"><h3>Responsible Software Governance</h3></div>
|
||||
</a><!--/.card-->
|
||||
|
||||
<a href="xrp-ledger-overview.html#secure-adaptable-cryptography" class="card">
|
||||
<img class="card-img-top" src="assets/img/lock.svg" alt="(lock)" />
|
||||
<div class="card-body">
|
||||
<!-- <p>The XRP Ledger relies on industry standard digital signature systems like ECDSA and also supports modern, efficient algorithms like Ed25519.</p> -->
|
||||
</div><!--/.card-body-->
|
||||
<div class="card-footer"><h3>Secure, Adaptable Cryptography</h3></div>
|
||||
</a><!--/.card-->
|
||||
|
||||
<a href="xrp-ledger-overview.html#modern-features-for-smart-contracts" class="card">
|
||||
<img class="card-img-top" src="assets/img/gears.svg" alt="(gears)" />
|
||||
<div class="card-body">
|
||||
<!-- <p>Features like Escrow, Checks, and Payment Channels support cutting-edge financial applications while safety features like Invariant Checks and Amendments provide for stable operation.</p> -->
|
||||
</div><!--/.card-body-->
|
||||
<div class="card-footer"><h3>Modern Features for Smart Contracts</h3></div>
|
||||
</a><!--/.card-->
|
||||
|
||||
<a href="xrp-ledger-overview.html#on-ledger-decentralized-exchange" class="card">
|
||||
<img class="card-img-top" src="assets/img/exchange.svg" alt="(currency exchange)" />
|
||||
<div class="card-body">
|
||||
<!-- <p>The XRP Ledger also has a fully-functional accounting system for tracking and trading obligations denominated in any way users want, and an exchange built into the protocol.</p> -->
|
||||
</div><!--/.card-body-->
|
||||
<div class="card-footer"><h3>On-Ledger Decentralized Exchange</h3></div>
|
||||
</a><!--/.card-->
|
||||
|
||||
@@ -178,7 +169,7 @@
|
||||
<div class="blurb">
|
||||
<p>Use these tutorials to get step-by-step guidance to perform common tasks with the XRP Ledger.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.section-hero-->
|
||||
|
||||
<a class="card" href="list-xrp-in-your-exchange.html">
|
||||
<div class="card-header">
|
||||
@@ -189,7 +180,7 @@
|
||||
</div><!--/.card-body-->
|
||||
<div class="card-footer">
|
||||
<div class="readmore">
|
||||
<button class="btn btn-outline-secondary">List XRP <i class="fa fa-arrow-right" aria-hidden="true"></i></button>
|
||||
<button class="btn btn-outline-secondary">List XRP</button>
|
||||
</div>
|
||||
</div><!--/.card-footer-->
|
||||
</a><!--/.card-->
|
||||
@@ -203,7 +194,7 @@
|
||||
</div><!--/.card-body-->
|
||||
<div class="card-footer">
|
||||
<div class="readmore">
|
||||
<button class="btn btn-outline-secondary">Send XRP <i class="fa fa-arrow-right" aria-hidden="true"></i></button>
|
||||
<button class="btn btn-outline-secondary">Send XRP</button>
|
||||
</div>
|
||||
</div><!--/.card-footer-->
|
||||
</a><!--/.card-->
|
||||
@@ -217,35 +208,57 @@
|
||||
</div><!--/.card-body-->
|
||||
<div class="card-footer">
|
||||
<div class="readmore">
|
||||
<button class="btn btn-outline-secondary">Run rippled <i class="fa fa-arrow-right" aria-hidden="true"></i></button>
|
||||
<button class="btn btn-outline-secondary">Run rippled</button>
|
||||
</div>
|
||||
</div><!--/.card-footer-->
|
||||
</a><!--/.card-->
|
||||
|
||||
<div class="card"> </div><!-- dummy spacer -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title"><a href="tutorials.html">More Tutorials</a></h3>
|
||||
</div><!--/.card-header-->
|
||||
<div class="card-body">
|
||||
<div class="curated-links">
|
||||
<ul>
|
||||
<li><a href="assign-a-regular-key-pair.html">Assign a Regular Key Pair</a></li>
|
||||
<li><a href="set-up-multi-signing.html">Set Up Multi-Signing</a></li>
|
||||
<li><a href="use-escrows.html">Use Escrows</a></li>
|
||||
<li><a href="use-payment-channels.html">Use Payment Channels</a></li>
|
||||
</ul>
|
||||
</div><!--/.curated-links-->
|
||||
</div><!--/.card-body-->
|
||||
<div class="card-footer">
|
||||
<a href="tutorials.html" class="btn btn-outline-secondary">All Tutorials</a>
|
||||
</div><!--/.card-footer-->
|
||||
</div><!--/.card-->
|
||||
|
||||
</section>
|
||||
|
||||
<section class="container-fluid related-projects py-3 p-sm-4 bg-white">
|
||||
<section class="container-fluid related-projects card-grid card-grid-2x1">
|
||||
<div class="section-hero card">
|
||||
<h2>Related Projects</h2>
|
||||
<div class="blurb">
|
||||
<p>You're not alone in building the Internet of Value. These projects are proudly collaborating with the XRP Ledger to make all the world's money move like information moves today.</p>
|
||||
</div>
|
||||
</div><!--/.section-hero-->
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col">
|
||||
<a class="interledger-link card" href="https://interledger.org/" target="_blank">
|
||||
<div class="card-body">
|
||||
<img class="project-icon" src="assets/img/ilp_logo.svg" />
|
||||
<h3 class="card-title">Interledger
|
||||
<i class="fa fa-external-link" aria-hidden="true"></i>
|
||||
<h3 class="card-title">Interledger<i class="fa fa-external-link" aria-hidden="true"></i>
|
||||
</h3>
|
||||
<p class="project-summary">Interledger is an open protocol suite for sending payments across different ledgers.</p>
|
||||
<p class="project-summary">Like routers on the Internet, connectors route packets of money across independent payment networks. The open architecture and minimal protocol enable interoperability for any value transfer system.</p>
|
||||
<p class="project-summary">Interledger is not tied to any one company, blockchain, or currency.</p>
|
||||
</div><!--/.card-body-->
|
||||
</a><!--/.card-->
|
||||
</div><!--/.col-->
|
||||
|
||||
</div><!--/.row-->
|
||||
<a class="xpring-link card" href="https://xpring.co/" target="_blank">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
<img class="project-icon" src="assets/img/xpring-logo.svg" alt="Xpring" /><i class="fa fa-external-link" aria-hidden="true"></i>
|
||||
</h3>
|
||||
<p class="project-summary">Xpring (pronounced “spring”) is a Ripple initiative that builds infrastructure and helps innovative blockchain projects grow through investments and partnerships.</p>
|
||||
</div><!--/.card-body-->
|
||||
</a><!--/.card-->
|
||||
|
||||
</section>
|
||||
</section><!-- / Related Projects -->
|
||||
{% endblock %}
|
||||
|
||||
@@ -79,6 +79,28 @@ h1, h2, h3, h4, h5 {
|
||||
.section-hero {
|
||||
grid-row-end: span 2;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
/* Switch to 1-column layout on smaller widths */
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(5, auto);
|
||||
}
|
||||
}
|
||||
|
||||
&.card-grid-2x1 {
|
||||
/* left half is a hero area; right half is a 2x1 grid. Total grid is 4x1 */
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
/* Switch to 1-column layout on smaller widths */
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.section-hero {
|
||||
grid-row-end: span 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.card-grid-2x4 {
|
||||
@@ -86,6 +108,16 @@ h1, h2, h3, h4, h5 {
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr 1fr;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
/* Switch to 1-column layout on smaller widths */
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(5, auto);
|
||||
|
||||
.section-hero {
|
||||
grid-row-end: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.section-hero {
|
||||
grid-row-end: span 4;
|
||||
}
|
||||
@@ -98,5 +130,9 @@ h1, h2, h3, h4, h5 {
|
||||
.card {
|
||||
padding: 40px;
|
||||
border: 0;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user