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

Merge branch 'tabs_scrollspy' into 2021_refresh

Browse Source
This commit is contained in:
mDuo13
2021-06-29 19:48:14 -07:00
parent 06fe14c8c4 fcf9c68e06
commit 530b1242a3
19 changed files with 461 additions and 339 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

55
assets/img/icons/arrow-right-purple.svg
View File

@@ -1,4 +1,53 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<path d="M5 12H19" stroke="#9A52FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <svg
<path d="M12 5L19 12L12 19" stroke="#9A52FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
version="1.1"
id="svg250"
sodipodi:docname="arrow-right-purple.svg"
inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs254" />
<sodipodi:namedview
id="namedview252"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="36.333333"
inkscape:cx="-0.66055046"
inkscape:cy="7.9954128"
inkscape:window-width="1920"
inkscape:window-height="1053"
inkscape:window-x="1080"
inkscape:window-y="840"
inkscape:window-maximized="1"
inkscape:current-layer="svg250" />
<path
d="M 1,8 H 15"
stroke="#9a52ff"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
id="path246" />
<path
d="m 8,1 7,7 -7,7"
stroke="#9a52ff"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
id="path248" />
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 316 B

After

Width:  |  Height:  |  Size: 1.4 KiB

55
assets/img/icons/arrow-up-right.svg
View File

@@ -1,4 +1,53 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<path d="M7.56299 17.343L17.4625 7.44352" stroke="#9A52FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <svg
<path d="M7.5625 7.44336L17.462 7.44336L17.462 17.3429" stroke="#9A52FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> width="11.4"
height="11.39964"
viewBox="0 0 11.4 11.39964"
fill="none"
version="1.1"
id="svg129"
sodipodi:docname="arrow-up-right.svg"
inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs133" />
<sodipodi:namedview
id="namedview131"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="true"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="35.208333"
inkscape:cx="-3.7491124"
inkscape:cy="5.2970414"
inkscape:window-width="1920"
inkscape:window-height="1053"
inkscape:window-x="1080"
inkscape:window-y="840"
inkscape:window-maximized="1"
inkscape:current-layer="svg129" />
<path
d="M 0.75049,10.64964 10.65,0.75016"
stroke="#9a52ff"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
id="path125" />
<path
d="m 0.75,0.75 h 9.8995 v 9.89954"
stroke="#9a52ff"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
id="path127" />
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 371 B

After

Width:  |  Height:  |  Size: 1.5 KiB

3
dactyl-config.yml
View File

@@ -245,6 +245,7 @@ pages:
html: xrp-overview.html html: xrp-overview.html
parent: xrp-ledger-overview.html parent: xrp-ledger-overview.html
top_nav_grouping: XRP top_nav_grouping: XRP
top_nav_name: About XRP
sidebar: disabled sidebar: disabled
targets: targets:
- en - en
@@ -3724,7 +3725,7 @@ pages:
parent: index.html parent: index.html
template: page-community.html.jinja template: page-community.html.jinja
sidebar: disabled sidebar: disabled
blurb: Contribute to XRPL.org blurb: Join the conversation
top_nav_hero_image: assets/img/icons/contribute.svg top_nav_hero_image: assets/img/icons/contribute.svg
targets: targets:
- en - en

2
styles/_buttons.scss
View File

@@ -104,8 +104,6 @@ p + .readmore {
right: 36px; right: 36px;
font-weight: 700; font-weight: 700;
z-index: 1000; z-index: 1000;
color: white;
background-color: transparent;
&::after { &::after {
display: none; display: none;

5
styles/_code-tabs.scss
View File

@@ -1,4 +1,4 @@
$code-bg: $gray-900; $code-bg: $gray-800;
$code-padding: 2rem; $code-padding: 2rem;
// Code Tabs ------------------------------------------------------------------- // Code Tabs -------------------------------------------------------------------
@@ -71,8 +71,9 @@ pre {
} }
&:hover { &:hover {
text-decoration: none; text-decoration: none;
background-color: $gray-900; background-color: $code-bg;
color: $primary; color: $primary;
padding-bottom: 0.625rem;
} }
} }

27
styles/_colors.scss
View File

@@ -45,7 +45,7 @@ $blue-purple-600: #5F00E5;
$blue-purple-700: #4A00B2; $blue-purple-700: #4A00B2;
$blue-purple-800: #350080; $blue-purple-800: #350080;
$blue-purple-900: #20004C; $blue-purple-900: #20004C;
$purple: $blue-purple-500; $purple: $blue-purple-400;
$red-purple-100: #FBE5FF; $red-purple-100: #FBE5FF;
$red-purple-200: #F2B2FF; $red-purple-200: #F2B2FF;
@@ -92,24 +92,26 @@ $yellow-900: #4B4C00;
$yellow: $yellow-500; $yellow: $yellow-500;
// Common colors & colors used in Bootstrap ------------------------------------ // Common colors & colors used in Bootstrap ------------------------------------
$primary: $green-500; $primary: $purple;
$secondary: $gray-200; $secondary: $gray-200;
$light: $white; $light: $white;
$dark: $black; $dark: $gray-900;
$success: $green-500; $success: $green-500;
$info: $blue-500; $info: $blue-500;
$warning: $yellow-500; // "caution" callout style $warning: $yellow-500; // "caution" callout style
$danger: $magenta-500; // "warning" callout style $danger: $magenta-500; // "warning" callout style
// Bootstrap elements // Bootstrap elements
$body-bg: $black; $body-bg: $gray-900;
$navbar-light-color: $gray-600; $navbar-light-color: $gray-600;
$code-color: $secondary; $code-color: $secondary;
$body-color: $white; $body-color: $white;
$headings-color: $white; $headings-color: $white;
$text-muted: $gray-200; $text-muted: $gray-200;
$link-hover-color: $purple;
$link-color: $white;
$breadcrumb-bg: $black; $breadcrumb-bg: $body-bg;
$breadcrumb-active-color: $gray-400; $breadcrumb-active-color: $gray-400;
$card-bg: $gray-800; $card-bg: $gray-800;
@@ -119,19 +121,22 @@ $dropdown-divider-bg: $black;
$dropdown-border-color: $gray-900; $dropdown-border-color: $gray-900;
$dropdown-color: $secondary; $dropdown-color: $secondary;
$dropdown-link-color: $white; $dropdown-link-color: $white;
$dropdown-link-hover-color: $blue-purple-500; $dropdown-link-hover-color: $purple;
$dropdown-link-hover-bg: $gray-900; $dropdown-link-hover-bg: $gray-900;
$dropdown-link-active-bg: transparent; $dropdown-link-active-bg: transparent;
$navbar-dark-color: $white; $navbar-dark-color: $white;
$navbar-dark-hover-color: $blue-purple-500; $navbar-dark-hover-color: $purple;
$navbar-dark-active-color: $primary; $navbar-dark-active-color: $white;
$input-bg: $gray-900; $input-bg: $gray-800;
$input-disabled-bg: $gray-800; $input-disabled-bg: $gray-600;
$input-color: $white; $input-color: $white;
$input-border-color: transparent; $input-border-color: transparent;
$input-box-shadow: inset 0 1px 1px rgba($primary, .075); $input-box-shadow: none;
$btn-box-shadow: none;
$btn-active-box-shadow: none;
$btn-focus-box-shadow: none;
$input-placeholder-color: $gray-400; $input-placeholder-color: $gray-400;
$input-group-addon-bg: $gray-600; $input-group-addon-bg: $gray-600;
$input-group-addon-color: $white; $input-group-addon-color: $white;

27
styles/_external-links.scss
View File

@@ -4,9 +4,10 @@
background-image: url(../img/icons/arrow-up-right.svg); background-image: url(../img/icons/arrow-up-right.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
background-size: 1em; background-size: 10px;
padding: 0 .5em; padding: 0 4px 0 8px;
background-position: left 0 bottom .2em; width: 14px;
background-position: left 0 bottom 4px;
transition: background-position 100ms ease-in-out; transition: background-position 100ms ease-in-out;
// Note: the background position is based on the padding, so it might // Note: the background position is based on the padding, so it might
@@ -16,7 +17,7 @@
} }
&:hover::after { &:hover::after {
background-position: left .2em bottom .4em; background-position: left 4px bottom 8px;
} }
.fa-external-link { .fa-external-link {
@@ -24,13 +25,15 @@
} }
} }
.top-nav .dropdown .external-link { .top-nav .dropdown .external-link,
.xrpl-footer .external-link {
&::after { &::after {
background-position: left 0 bottom -.1em; background-position: left 8px bottom 2px;
width: 2rem;
} }
&:hover::after { &:hover::after {
background-position: left .2em bottom .1em; background-position: left 12px bottom 6px;
} }
} }
@@ -57,13 +60,3 @@
} }
} }
} }
.xrpl-footer .external-link {
&::after {
background-position: left 0 bottom 0;
}
&:hover::after {
background-position: left .2em bottom .2em;
}
}

31
styles/_font.scss
View File

@@ -5,10 +5,7 @@ body {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-size: $base-size; font-size: $base-size;
background: $gray-900;
background-color: $gray-900;
line-height: 1.5; line-height: 1.5;
color: $white;
font-family: 'Work Sans', sans-serif; font-family: 'Work Sans', sans-serif;
} }
@@ -104,21 +101,19 @@ p {
line-height: 24px; line-height: 24px;
} }
// a {
// color: inherit;
a { // &:hover {
color: inherit; // text-decoration: none;
&:hover { // }
text-decoration: none; // }
} // p a {
} // color: $blue-purple-400;
p a { // &:hover {
color: $blue-purple-400; // color: $blue-purple-400;
&:hover { // text-decoration: none;
color: $blue-purple-400; // }
text-decoration: none; // }
}
}
.fs-base { .fs-base {
font-size: $base-size; font-size: $base-size;

62
styles/_forms.scss
View File

@@ -17,7 +17,7 @@
&:focus { &:focus {
box-shadow: none; box-shadow: none;
border-color: $white; border-color: $purple;
} }
} }
@@ -30,46 +30,54 @@
z-index: 1100 !important; z-index: 1100 !important;
} }
// Algolia Search results -------------------------------------------------- .xrp-ledger-dev-portal {
.algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] { // The extra specificity makes this override the default Algolia styles.
background-color: rgba(0,0,0,0.9); // Algolia Search results --------------------------------------------------
border: 1px solid $gray-900; .algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] {
background-color: $dropdown-bg;
border: 0;
border-radius: $border-radius-lg; border-radius: $border-radius-lg;
} }
.algolia-autocomplete .ds-dropdown-menu::before { .algolia-autocomplete .ds-dropdown-menu::before {
background-color: rgba(0,0,0,0.9); background-color: $dropdown-bg;
border-color: $gray-900; border: 0;
} }
.algolia-docsearch-suggestion { .algolia-autocomplete .algolia-docsearch-suggestion {
background-color: rgba(0,0,0,0.9); background-color: $dropdown-bg;
} }
.algolia-autocomplete .algolia-docsearch-suggestion--category-header { .algolia-autocomplete .algolia-docsearch-suggestion--category-header {
color: $white; color: $white;
border: 0 solid $secondary; border: 0;
border-bottom-width: 1px; border-bottom: 2px solid $blue-purple-500;
font-weight: bold; font-weight: bold;
} }
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column { .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
color: $white; color: $white;
} }
.algolia-autocomplete .algolia-docsearch-suggestion--title { .algolia-autocomplete .algolia-docsearch-suggestion--title {
color: $white; color: $white;
} }
.algolia-autocomplete .algolia-docsearch-suggestion--text { .algolia-autocomplete .algolia-docsearch-suggestion--text {
font-size: 0.8rem; font-size: 0.8rem;
color: $gray-200; color: $gray-200;
} }
.algolia-autocomplete .algolia-docsearch-suggestion--highlight { .algolia-autocomplete .algolia-docsearch-suggestion--highlight {
color: $white; color: $white;
background-color: $green-800; background-color: $gray-700;
} }
@include media-breakpoint-down(md) { .algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight, .algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl1 .algolia-docsearch-suggestion--highlight, .algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
box-shadow: none;
background-color: $gray-700;
}
@include media-breakpoint-down(md) {
.algolia-autocomplete .ds-dropdown-menu { .algolia-autocomplete .ds-dropdown-menu {
min-width: unset; min-width: unset;
} }
}
} }

9
styles/_landings.scss
View File

@@ -128,7 +128,9 @@
&:not(.external-link)::after { &:not(.external-link)::after {
content: " "; content: " ";
background-image: url(../img/icons/arrow-right-purple.svg); background-image: url(../img/icons/arrow-right-purple.svg);
background-size: cover; background-repeat: no-repeat;
background-position: center;
background-size: 1rem;
position: absolute; position: absolute;
right: 0; right: 0;
width: 1.5rem; width: 1.5rem;
@@ -142,9 +144,10 @@
&.external-link::after { &.external-link::after {
content: " "; content: " ";
background-image: url(../img/icons/arrow-up-right.svg); background-image: url(../img/icons/arrow-up-right.svg);
background-size: cover; background-repeat: no-repeat;
position: absolute; position: absolute;
// right: .5rem; background-position: center;
background-size: .75rem;
right: 7px; right: 7px;
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;

10
styles/_side-nav.scss
View File

@@ -186,4 +186,14 @@ aside .active-parent > a {
} }
} }
&.no-sideline {
border-left: 0;
a:hover, a.active {
border-left: 0;
margin-left: 0;
}
}
} }

11
styles/_top-nav.scss
View File

@@ -53,11 +53,6 @@
.dropdown-toggle { .dropdown-toggle {
position: relative; position: relative;
} }
.dropdown.show {
.dropdown-toggle {
color: $gray-500;
}
}
.dropdown-menu { .dropdown-menu {
border-width: 0; border-width: 0;
@@ -94,6 +89,10 @@
white-space: normal; white-space: normal;
} }
h4 {
font-size: 1.25rem;
}
&:hover { &:hover {
h4 { h4 {
color: $blue-purple-400; color: $blue-purple-400;
@@ -166,7 +165,7 @@
.dropdown .dropdown-toggle:hover > span:not(.chevron) { .dropdown .dropdown-toggle:hover > span:not(.chevron) {
padding-bottom: 8px; padding-bottom: 8px;
border-bottom: 2px solid $blue-purple-400; border-bottom: 2px solid $blue-purple-500;
margin-bottom: -8px; margin-bottom: -8px;
} }

2
styles/xrpl.scss
View File

@@ -14,7 +14,7 @@ $border-radius-lg: 8px;
$border-radius-sm: 4px; $border-radius-sm: 4px;
$dropdown-border-width: 1px; $dropdown-border-width: 1px;
$enable-shadows: true; $enable-shadows: true;
$dropdown-box-shadow: 0px 5px 40px $gray-900; $dropdown-box-shadow: 0px 5px 40px $black;
$card-spacer-x: 2rem; $card-spacer-x: 2rem;
$card-spacer-y: 2rem; $card-spacer-y: 2rem;
$card-deck-margin: 1.25rem; $card-deck-margin: 1.25rem;

153
template/page-xrp-overview.html.jinja
View File

@@ -32,12 +32,12 @@
<section class="container-new my-20"> <section class="container-new my-20">
<div class="card-grid card-grid-1x2"> <div class="card-grid card-grid-1x2">
<div class="col-new d-none-sm"> <div class="col-new d-none-sm">
<ul class="p-0 sticky-top top-24"> <ul class="page-toc no-sideline p-0 sticky-top top-24">
<li class="ls-none"><a class="sidelinks" href="#about-xrp">About XRP</a></li> <li class="nav-item"><a class="sidelinks nav-link" href="#about-xrp">About XRP</a></li>
<li class="ls-none"><a class="sidelinks" href="#xrp-trading">XRP in Trading</a></li> <li class="nav-item"><a class="sidelinks nav-link" href="#xrp-trading">XRP in Trading</a></li>
<li class="ls-none"><a class="sidelinks" href="#ripple">Ripple vs. XRP</a></li> <li class="nav-item"><a class="sidelinks nav-link" href="#ripple">Ripple vs. XRP</a></li>
<li class="ls-none"><a class="sidelinks" href="#wallets">XRP Wallets</a></li> <li class="nav-item"><a class="sidelinks nav-link" href="#wallets">XRP Wallets</a></li>
<li class="ls-none"><a class="sidelinks" href="#exchanges">XRP Exchanges</a></li> <li class="nav-item"><a class="sidelinks nav-link" href="#exchanges">XRP Exchanges</a></li>
</ul> </ul>
</div> </div>
@@ -80,7 +80,39 @@
</table> </table>
</div> </div>
<p class="mb-10">{% trans %}XRP can be sent directly without needing a central intermediary, making it a convenient instrument in bridging two different currencies, quickly and efficiently. It is freely exchanged on the open market and used in the real world for enabling cross-border payments and microtransactions.{% endtrans %}</p> <table class="mb-10 landing-table">
<thead>
<tr>
<th><h6>{% trans %}Benefits{% endtrans %}</h6></th>
<th><h6>{% trans %}XRP{% endtrans %}</h6></th>
<th><h6>{% trans %}Bitcoin{% endtrans %}</h6></th>
</tr>
</thead>
<tbody>
<tr>
<td>{% trans %}Fast{% endtrans %}</td>
<td>{% trans %}3-5 seconds to settle{% endtrans %}</td>
<td>{% trans %}500 seconds to settle{% endtrans %}</td>
</tr>
<tr>
<td>{% trans %}Low-Cost{% endtrans %}</td>
<td>{% trans %}$0.0002/tx{% endtrans %}</td>
<td>{% trans %}$0.50/tx{% endtrans %}</td>
</tr>
<tr>
<td>{% trans %}Scalable{% endtrans %}</td>
<td>{% trans %}1,500 tx per second{% endtrans %}</td>
<td>{% trans %}3 tx per second{% endtrans %}</td>
</tr>
<tr>
<td>{% trans %}Sustainable{% endtrans %}</td>
<td>{% trans %}Environmentally sustainable (negligible energy consumption){% endtrans %}</td>
<td>{% trans %}0.3% of global energy consumption{% endtrans %}</td>
</tr>
</tbody>
</table>
<p class="mb-10">{% trans %}XRP can be sent directly without needing a central intermediary, making it a convenient instrument in bridging two different currencies quickly and efficiently. It is freely exchanged on the open market and used in the real world for enabling cross-border payments and microtransactions.{% endtrans %}</p>
<div class="card-grid card-grid-2xN mb-10"> <div class="card-grid card-grid-2xN mb-10">
<div class="mr-5-until-md"> <div class="mr-5-until-md">
<img class="mw-100 mb-1" src="./img/icons/briefcase.svg"> <img class="mw-100 mb-1" src="./img/icons/briefcase.svg">
@@ -97,9 +129,9 @@
<img src="./img/backgrounds/cta-xrp-overview-orange.svg" class="cta cta-top-left"> <img src="./img/backgrounds/cta-xrp-overview-orange.svg" class="cta cta-top-left">
<img src="./img/backgrounds/cta-xrp-overview-magenta.svg" class="cta cta-bottom-right"> <img src="./img/backgrounds/cta-xrp-overview-magenta.svg" class="cta cta-bottom-right">
<div class="z-index-1 position-relative"> <div class="z-index-1 position-relative">
<h2 class="h4 mb-10">{% trans %}XRP was designed with sustainability in mind.{% endtrans %}</h2> <h2 class="h4 mb-10">{% trans %}XRP was designed with sustinability in mind.{% endtrans %}</h2>
<p class="mb-10">{% trans %}Explore how the energy consumption of XRP compares to other currencies.{% endtrans %}</p> <p class="mb-10">{% trans %}Explore how the energy consumption of XRP compares to other currencies.{% endtrans %}</p>
<a class="btn btn-primary btn-arrow">Green Currency Calculator</a> <a class="btn btn-primary btn-arrow" href="carbon-calculator.html">{% trans %}Green Currency Calculator{% endtrans %}</a>
</div> </div>
</div> </div>
</div> </div>
@@ -133,30 +165,30 @@
<div class="mr-5-until-md"> <div class="mr-5-until-md">
<h6 class="fs-4-5">{% trans %}Custodial Wallets{% endtrans %}</h6> <h6 class="fs-4-5">{% trans %}Custodial Wallets{% endtrans %}</h6>
<p class="">{% trans %}Custodial wallets manage a user's private key, which allows the wallet to withdraw crypto currency on a user's behalf.{% endtrans %}</p> <p class="">{% trans %}Custodial wallets manage a user's private key, which allows the wallet to withdraw crypto currency on a user's behalf.{% endtrans %}</p>
<ul class="ls-none p-0"> <ul class="nav flex-column">
<li class="li-links"> <li class="nav-item">
<a class="align-items-center d-flex" href="https://www.ledger.com/" target="_blank"><img class="mw-100" src="./img/wallets/ledger.svg"></a> <a class="nav-link external-link" href="https://www.ledger.com/" target="_blank"><img class="mw-100" src="./img/wallets/ledger.svg" alt="Ledger"></a>
</li> </li>
<li class="li-links"> <li class="nav-item">
<a class="align-items-center d-flex" href="https://www.secalot.com/" target="_blank"><img class="mw-100" src="./img/wallets/secalot.svg"></a> <a class="nav-link external-link" href="https://www.secalot.com/" target="_blank"><img class="mw-100" src="./img/wallets/secalot.svg" alt="Secalot"></a>
</li> </li>
<li class="li-links"> <li class="nav-item">
<a class="align-items-center d-flex" href="https://trezor.io/" target="_blank"><img class="mw-100" src="./img/wallets/trezor.svg"></a> <a class="nav-link external-link" href="https://trezor.io/" target="_blank"><img class="mw-100" src="./img/wallets/trezor.svg" alt="Trezor"></a>
</li> </li>
<li class="li-links"> <li class="nav-item">
<a class="align-items-center d-flex" href="https://gatehub.net/" target="_blank"><img class="mw-100" src="./img/wallets/gatehub.svg"></a> <a class="nav-link external-link" href="https://gatehub.net/" target="_blank"><img class="mw-100" src="./img/wallets/gatehub.svg" alt="Gatehub"></a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="ml-5-until-md mt-10-sm"> <div class="ml-5-until-md mt-10-sm">
<h6 class="fs-4-5">{% trans %}Non-Custodial Wallets{% endtrans %}</h6> <h6 class="fs-4-5">{% trans %}Non-Custodial Wallets{% endtrans %}</h6>
<p>{% trans %}Non-custodial wallets do not manage a user's private key, which is up to the user to manage, and therefore cannot send cryptocurrency on the user's behalf.{% endtrans %}</p> <p>{% trans %}Non-custodial wallets do not manage a user's private key, which is up to the user to manage, and therefore cannot send crypto currency on the user's behalf.{% endtrans %}</p>
<ul class="ls-none p-0"> <ul class="nav flex-column">
<li class="li-links"> <li class="nav-item">
<a class="align-items-center d-flex" href="https://xumm.app/" target="_blank"><img class="mw-100" src="./img/wallets/xumm.svg"></a> <a class="nav-link external-link" href="https://xumm.app/" target="_blank"><img class="mw-100" src="./img/wallets/xumm.svg" alt="Xumm"></a>
</li> </li>
<li class="li-links"> <li class="nav-item">
<a class="align-items-center d-flex" href="https://trustwallet.com/xrp-wallet" target="_blank"><img class="mw-100" src="./img/wallets/trust.svg"></a> <a class="nav-link external-link" href="https://trustwallet.com/" target="_blank"><img class="mw-100" src="./img/wallets/trust.svg" alt="Trust Wallet"></a>
</li> </li>
</ul> </ul>
</div> </div>
@@ -171,9 +203,9 @@
<div class="card-grid card-grid-2xN mb-10"> <div class="card-grid card-grid-2xN mb-10">
<div class="mr-5-until-md"> <div class="mr-5-until-md">
<h6 class="fs-4-5">{% trans %}Spot Exchanges{% endtrans %}</h6> <h6 class="fs-4-5">{% trans %}Spot Exchanges{% endtrans %}</h6>
<p class="mb-0">{% trans %}Spot exchanges allow people to buy and sell cryptocurrencies at current (spot) market rates. {% endtrans %}</p> <p class="mb-0">{% trans %}Spot exchanges allow people to buy and sell cryptocurrencies at current (spot) market rates.{% endtrans %}</p>
</div> </div>
<div class="ml-5-until-md mt-10-sm"> <div class="ml-5-until-md">
<h6 class="fs-4-5">{% trans %}Futures, Options and Swap Exchanges{% endtrans %}</h6> <h6 class="fs-4-5">{% trans %}Futures, Options and Swap Exchanges{% endtrans %}</h6>
<p class="mb-0">{% trans %}Futures, options and swap exchanges allow people to buy and sell standardized contracts of cryptocurrency market rates in the future.{% endtrans %}</p> <p class="mb-0">{% trans %}Futures, options and swap exchanges allow people to buy and sell standardized contracts of cryptocurrency market rates in the future.{% endtrans %}</p>
</div> </div>
@@ -181,9 +213,9 @@
<div class="card-grid card-grid-2xN mb-10"> <div class="card-grid card-grid-2xN mb-10">
<div class="mr-5-until-md"> <div class="mr-5-until-md">
<h6 class="fs-4-5">{% trans %}Custodial Exchanges{% endtrans %}</h6> <h6 class="fs-4-5">{% trans %}Custodial Exchanges{% endtrans %}</h6>
<p class="mb-0">{% trans %}Custodial exchanges manage a user’s private keys, and publish centralized order books of buyers and sellers. {% endtrans %}</p> <p class="mb-0">{% trans %}Custodial exchanges manage a user’s private keys, and publish centralized order books of buyers and sellers.{% endtrans %}</p>
</div> </div>
<div class="ml-5-until-md mt-10-sm"> <div class="ml-5-until-md">
<h6 class="fs-4-5">{% trans %}Non-Custodial Exchanges{% endtrans %}</h6> <h6 class="fs-4-5">{% trans %}Non-Custodial Exchanges{% endtrans %}</h6>
<p class="mb-0">{% trans %}Non-custodial exchanges, also known as decentralized exchanges, do not manage a user’s private keys, and publish decentralized order books of buyers and sellers on a blockchain.{% endtrans %}</p> <p class="mb-0">{% trans %}Non-custodial exchanges, also known as decentralized exchanges, do not manage a user’s private keys, and publish decentralized order books of buyers and sellers on a blockchain.{% endtrans %}</p>
</div> </div>
@@ -191,40 +223,40 @@
<h6>{% trans %}Top Exchanges, according to CryptoCompare{% endtrans %}</h6> <h6>{% trans %}Top Exchanges, according to CryptoCompare{% endtrans %}</h6>
<div class="card-grid card-grid-2xN mb-10"> <div class="card-grid card-grid-2xN mb-10">
<div class="mr-5-until-md"> <div class="mr-5-until-md">
<ul class="ls-none p-0 mb-0"> <ul class="nav flex-column">
<li class="li-links"> <li class="nav-item">
<a class="align-items-center d-flex" href="https://www.bitstamp.com/" target="_blank"><span class="longform mr-3">1</span><img class="mw-100" src="./img/exchanges/bitstamp.svg"></a> <a class="nav-link external-link" href="https://www.bitstamp.com/" target="_blank"><span class="longform mr-3">1</span><img class="mw-100" src="./img/exchanges/bitstamp.svg" alt="Bitstamp"></a>
</li> </li>
<li class="li-links"> <li class="nav-item">
<a class="align-items-center d-flex" href="https://www.kraken.com/" target="_blank"><span class="longform mr-3">2</span><img class="mw-100" src="./img/exchanges/kraken.svg"></a> <a class="nav-link external-link" href="https://www.kraken.com/" target="_blank"><span class="longform mr-3">2</span><img class="mw-100" src="./img/exchanges/kraken.svg" alt="Kraken"></a>
</li> </li>
<li class="li-links"> <li class="nav-item">
<a class="align-items-center d-flex" href="https://cex.io/" target="_blank"><span class="longform mr-3">3</span><img class="mw-100" src="./img/exchanges/cex-io.svg"></a> <a class="nav-link external-link" href="https://cex.io/" target="_blank"><span class="longform mr-3">3</span><img class="mw-100" src="./img/exchanges/cex-io.svg" alt="Cex.io"></a>
</li> </li>
<li class="li-links"> <li class="nav-item">
<a class="align-items-center d-flex" href="https://www.liquid.com/" target="_blank"><span class="longform mr-3">4</span><img class="mw-100" src="./img/exchanges/liquid.svg"></a> <a class="nav-link external-link" href="https://www.liquid.com/" target="_blank"><span class="longform mr-3">4</span><img class="mw-100" src="./img/exchanges/liquid.svg" alt="Liquid"></a>
</li> </li>
<li class="li-links"> <li class="nav-item">
<a class="align-items-center d-flex" href="https://www.lmax.com/" target="_blank"><span class="longform mr-3">5</span><img class="mw-100" src="./img/exchanges/lmax.svg"></a> <a class="nav-link external-link" href="https://www.lmax.com/" target="_blank"><span class="longform mr-3">5</span><img class="mw-100" src="./img/exchanges/lmax.svg" alt="LMAX"></a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="ml-5-until-md"> <div class="ml-5-until-md">
<ul class="ls-none p-0"> <ul class="nav flex-column">
<li class="li-links"> <li class="nav-item">
<a class="align-items-center d-flex" href="https://www.bitfinex.com/" target="_blank"><span class="longform mr-3">6</span><img class="mw-100" src="./img/exchanges/bitfinex.svg"></a> <a class="nav-link external-link" href="https://www.bitfinex.com/" target="_blank"><span class="longform mr-3">6</span><img class="mw-100" src="./img/exchanges/bitfinex.svg" alt="Bitfinex"></a>
</li> </li>
<li class="li-links"> <li class="nav-item">
<a class="align-items-center d-flex" href="https://www.etoro.com/" target="_blank"><span class="longform mr-3">7</span><img class="mw-100" src="./img/exchanges/etoro.svg"></a> <a class="nav-link external-link" href="https://www.etoro.com/crypto/exchange/" target="_blank"><span class="longform mr-3">7</span><img class="mw-100" src="./img/exchanges/etoro.svg" alt="eToro"></a>
</li> </li>
<li class="li-links"> <li class="nav-item">
<a class="align-items-center d-flex" href="https://currency.com/" target="_blank"><span class="longform mr-3">8</span><img class="mw-100" src="./img/exchanges/currency.svg"></a> <a class="nav-link external-link" href="https://currency.com" target="_blank"><span class="longform mr-3">8</span><img class="mw-100" src="./img/exchanges/currency.svg" alt="Currency.com"></a>
</li> </li>
<li class="li-links"> <li class="nav-item">
<a class="align-items-center d-flex" href="https://bittrex.com/" target="_blank"><span class="longform mr-3">9</span><img class="mw-100" src="./img/exchanges/bittrex.svg"></a> <a class="nav-link external-link" href="https://bittrex.com/" target="_blank"><span class="longform mr-3">9</span><img class="mw-100" src="./img/exchanges/bittrex.svg" alt="Bittrex"></a>
</li> </li>
<li class="li-links"> <li class="nav-item">
<a class="align-items-center d-flex" href="https://ftx.com/" target="_blank"><span class="longform mr-3">10</span><img class="mw-100" src="./img/exchanges/ftx.svg"></a> <a class="nav-link external-link" href="https://ftx.com/" target="_blank"><span class="longform mr-3">10</span><img class="mw-100" src="./img/exchanges/ftx.svg" alt="FTX"></a>
</li> </li>
</ul> </ul>
</div> </div>
@@ -242,27 +274,6 @@
{% block endbody %} {% block endbody %}
<script type="text/javascript">
$(window).scroll(function() {
var position = $(this).scrollTop();
$('.link-section').each(function() {
var target = $(this).offset().top;
var id = $(this).attr('id');
if (position >= target) {
$('.sidelinks').removeClass('active');
$('a[href="#' + id + '"]').addClass('active');
}
});
});
$('.sidelinks').on('click', function() {
$('html, body').animate({scrollTop: $(this.hash).offset().top + 5}, 1000);
return false;
});
</script>
<script type="application/javascript"> <script type="application/javascript">
gtag('config', 'UA-157720658-3', {'content_group1': 'Hub Pages'}); gtag('config', 'UA-157720658-3', {'content_group1': 'Hub Pages'});