diff --git a/assets/css/devportal.css b/assets/css/devportal.css index 4615b62b95..1845d11c6b 100644 --- a/assets/css/devportal.css +++ b/assets/css/devportal.css @@ -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 diff --git a/assets/img/xpring-logo.svg b/assets/img/xpring-logo.svg new file mode 100644 index 0000000000..ce189c458f --- /dev/null +++ b/assets/img/xpring-logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/vendor/bootstrap.css b/assets/vendor/bootstrap.css index 53ad233718..ef3238367d 100644 --- a/assets/vendor/bootstrap.css +++ b/assets/vendor/bootstrap.css @@ -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; } } diff --git a/tool/filter_external_links.py b/tool/filter_external_links.py index 544e3ae391..24924a2f98 100644 --- a/tool/filter_external_links.py +++ b/tool/filter_external_links.py @@ -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'] diff --git a/tool/template-home.html b/tool/template-home.html index 354a719b01..6a15a1b0b4 100644 --- a/tool/template-home.html +++ b/tool/template-home.html @@ -20,50 +20,67 @@

Powering the Internet of Value.

-
+

The XRP Ledger is open-source technology that anyone can use.

Use the tools and information provided here to integrate with and contribute to the open-source platform.

-

Want more? Get updates about XRP Ledger webinars, releases, and documentation! Sign up!

+
Want more?
+

Get updates about XRP Ledger webinars, releases, and documentation!

+

Sign up!

+ +
+

Get Started with XRP Ledger APIs

+
+
+

Get started with the APIs and libraries available for interacting with the XRP Ledger.

+
+
+ +
+ +
-

Go to the References

+

Learn How It Works

-
- View References -
+ All Concepts
-

Get Started

+

Read Documentation

+
+ All Docs +
-
+

Explore the XRP Ledger

@@ -72,100 +89,74 @@
- Go to the Explorer +
-
+ -
-
-

New and Updated Documentation

-
-
-
-
    - {% for link in target.recently_updated %} - {% set linkpage = pages|selectattr("html", 'defined_and_equalto', link.html)|first %} -
  1. {{linkpage.name}}{% if link.date is defined %} ({{link.date}}){% endif %}
    2. - {% endfor %} -
-
-
-
+ - +
+
+
+

XRP Ledger Blog

+
+
+

Visit the blog for the latest XRP Ledger info, including Release Notes, Amendments to the XRP Ledger protocol, Feature articles from XRP experts, and more.

+
+
+ View Blog +
+
+
-

What is the XRP Ledger?

-
-
-

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.

-
+
+

What is the XRP Ledger?

+
+
+

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.

(XRP triskellion) -
- -

The Digital Asset for Payments

 (money moving) -
- -

Censorship-Resistant Transaction Processing

 (consensus network) -
- -

Fast, Efficient Consensus Algorithm

 (price graph) -
- -

Finite XRP Supply

 (scales of justice) -
- -

Responsible Software Governance

 (lock) -
- -

Secure, Adaptable Cryptography

 (gears) -
- -

Modern Features for Smart Contracts

 (currency exchange) -
- -

On-Ledger Decentralized Exchange

 @@ -178,7 +169,7 @@

Use these tutorials to get step-by-step guidance to perform common tasks with the XRP Ledger.

-
+
@@ -189,7 +180,7 @@
- +
@@ -203,7 +194,7 @@
- +
@@ -217,35 +208,57 @@
- +
-
 
+
+
+

More Tutorials

+
+
+
+ +
+
+
+ All Tutorials +
+
-
-

Related Projects

+
+
+

Related Projects

+
+

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.

+
+
-
+ +
+ +

Interledger +

+

Interledger is an open protocol suite for sending payments across different ledgers.

+
+ -
- -
- -

Interledger - -

-

Interledger is an open protocol suite for sending payments across different ledgers.

-

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.

-

Interledger is not tied to any one company, blockchain, or currency.

-
- -
+ +
+

+ Xpring +

+

Xpring (pronounced “spring”) is a Ripple initiative that builds infrastructure and helps innovative blockchain projects grow through investments and partnerships.

+
+ -
- -
+
{% endblock %} diff --git a/tool/xrpl.scss b/tool/xrpl.scss index 781d23ead8..8daea7af6c 100644 --- a/tool/xrpl.scss +++ b/tool/xrpl.scss @@ -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; + } } }