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

Block out landing layout

Browse Source
This commit is contained in:
mDuo13
2019-04-29 20:28:46 -07:00
parent c123696a1e
commit eae231789a
4 changed files with 368 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
assets/css/devportal.css
View File

@@ -132,8 +132,7 @@ th {
margin-top: 0;
line-height: 1.2;
}
.content h1:first-child:before,
.landing section:not(.splash-head):first-of-type h1:first-child:before {
.content h1:first-child:before {
margin-top: -90px;
}
.content h2 {
@@ -469,14 +468,14 @@ a.current {
.landing .level-1,
.landing .curated-links li {
font-weight: 400;
font-size: 18px;
font-size: 14px;
margin-top: 0;
position: relative;
}
.landing .card .level-1 a,
.landing .card .curated-links li a {
padding: 12px;
padding: 8px;
display: block;
margin: 0 -12px 0 -12px;
font-weight: 400;
@@ -820,7 +819,6 @@ a.current {
.landing p {
font-size: 18px;
margin-bottom: 0;
}
.landing h2 {
@@ -844,17 +842,6 @@ a.current {
overflow-x: auto;
}
.landing a.card,
.landing .card {
color: #212529;
box-shadow: 0px 1px 3px rgba(35, 41, 47, 0.24);
border-radius: 8px;
}
.landing a.card:hover {
box-shadow: 0px 4px 20px rgba(35, 41, 47, 0.16);
}
.landing .card li {
list-style-type: none;
margin-left: 0;
@@ -877,7 +864,7 @@ a.current {
}
.landing .card-header {
padding: 12px;
padding: 8px;
}
.landing .card-footer {
@@ -916,7 +903,7 @@ a.current {
.landing .card > .card-img-top {
padding: 0 16px;
width: 50%;
width: 25%;
margin-left: auto;
margin-right: auto;
}
@@ -942,30 +929,6 @@ a.current {
padding-left: 8px;
}
.splash-head {
background-color: transparent;
background-size: cover;
background-position: center center;
color: white;
line-height: 38px;
}
.splash-head h1 {
font-weight: 700;
}
.splash-head p {
text-shadow: 0px 1px 2px #171C21;
margin-bottom: 0;
}
.splash-head p .btn {
text-shadow: none;
}
.splash-head code {
color: white;
}
.build-disclaimer {
font-size: 10pt;

222
assets/vendor/bootstrap.css vendored
View File

@@ -425,7 +425,7 @@ mark,
padding: 0.25rem;
background-color: #fff;
border: 1px solid #dee2e6;
border-radius: 0.25rem;
border-radius: 0;
max-width: 100%;
height: auto; }
@@ -452,7 +452,7 @@ kbd {
font-size: 87.5%;
color: #fff;
background-color: #212529;
border-radius: 0.2rem; }
border-radius: 0; }
kbd kbd {
padding: 0;
font-size: 100%;
@@ -1344,7 +1344,7 @@ pre {
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
border-radius: 0;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
.form-control {
@@ -1413,14 +1413,14 @@ select.form-control:focus::-ms-value {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
border-radius: 0.2rem; }
border-radius: 0; }
.form-control-lg {
height: calc(1.5em + 1rem + 2px);
padding: 0.5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: 0.3rem; }
border-radius: 0; }
select.form-control[size], select.form-control[multiple] {
height: auto; }
@@ -1490,7 +1490,7 @@ textarea.form-control {
line-height: 1.5;
color: #fff;
background-color: rgba(43, 203, 150, 0.9);
border-radius: 0.25rem; }
border-radius: 0; }
.was-validated .form-control:valid, .form-control.is-valid {
border-color: #2BCB96;
@@ -1587,7 +1587,7 @@ textarea.form-control {
line-height: 1.5;
color: #fff;
background-color: rgba(220, 53, 69, 0.9);
border-radius: 0.25rem; }
border-radius: 0; }
.was-validated .form-control:invalid, .form-control.is-invalid {
border-color: #dc3545;
@@ -1722,7 +1722,7 @@ textarea.form-control {
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
border-radius: 0;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
.btn {
@@ -2154,13 +2154,13 @@ fieldset:disabled a.btn {
padding: 0.5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: 0.3rem; }
border-radius: 0; }
.btn-sm, .btn-group-sm > .btn {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
border-radius: 0.2rem; }
border-radius: 0; }
.btn-block {
display: block;
@@ -2230,7 +2230,7 @@ input[type="button"].btn-block {
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem; }
border-radius: 0; }
.dropdown-menu-left {
right: auto;
@@ -2573,7 +2573,7 @@ input[type="button"].btn-block {
white-space: nowrap;
background-color: #e9ecef;
border: 1px solid #ced4da;
border-radius: 0.25rem; }
border-radius: 0; }
.input-group-text input[type="radio"],
.input-group-text input[type="checkbox"] {
margin-top: 0; }
@@ -2591,7 +2591,7 @@ input[type="button"].btn-block {
padding: 0.5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: 0.3rem; }
border-radius: 0; }
.input-group-sm > .form-control:not(textarea),
.input-group-sm > .custom-select {
@@ -2606,7 +2606,7 @@ input[type="button"].btn-block {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
border-radius: 0.2rem; }
border-radius: 0; }
.input-group-lg > .custom-select,
.input-group-sm > .custom-select {
@@ -2687,7 +2687,7 @@ input[type="button"].btn-block {
background: no-repeat 50% / 50% 50%; }
.custom-checkbox .custom-control-label::before {
border-radius: 0.25rem; }
border-radius: 0; }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); }
@@ -2751,7 +2751,7 @@ input[type="button"].btn-block {
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
background-color: #fff;
border: 1px solid #ced4da;
border-radius: 0.25rem;
border-radius: 0;
appearance: none; }
.custom-select:focus {
border-color: #5f5454;
@@ -2821,7 +2821,7 @@ input[type="button"].btn-block {
color: #495057;
background-color: #fff;
border: 1px solid #ced4da;
border-radius: 0.25rem; }
border-radius: 0; }
.custom-file-label::after {
position: absolute;
top: 0;
@@ -2836,7 +2836,7 @@ input[type="button"].btn-block {
content: "Browse";
background-color: #e9ecef;
border-left: inherit;
border-radius: 0 0.25rem 0.25rem 0; }
border-radius: 0 0 0 0; }
.custom-range {
width: 100%;
@@ -2972,8 +2972,8 @@ input[type="button"].btn-block {
margin-bottom: -1px; }
.nav-tabs .nav-link {
border: 1px solid transparent;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem; }
border-top-left-radius: 0;
border-top-right-radius: 0; }
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
border-color: #e9ecef #e9ecef #dee2e6; }
.nav-tabs .nav-link.disabled {
@@ -2991,7 +2991,7 @@ input[type="button"].btn-block {
border-top-right-radius: 0; }
.nav-pills .nav-link {
border-radius: 0.25rem; }
border-radius: 0; }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
@@ -3067,7 +3067,7 @@ input[type="button"].btn-block {
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: 0.25rem; }
border-radius: 0; }
.navbar-toggler:hover, .navbar-toggler:focus {
text-decoration: none; }
@@ -3280,16 +3280,16 @@ input[type="button"].btn-block {
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem; }
border-radius: 0; }
.card > hr {
margin-right: 0;
margin-left: 0; }
.card > .list-group:first-child .list-group-item:first-child {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem; }
border-top-left-radius: 0;
border-top-right-radius: 0; }
.card > .list-group:last-child .list-group-item:last-child {
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem; }
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; }
.card-body {
flex: 1 1 auto;
@@ -3317,7 +3317,7 @@ input[type="button"].btn-block {
background-color: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid rgba(0, 0, 0, 0.125); }
.card-header:first-child {
border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; }
border-radius: calc(0 - 1px) calc(0 - 1px) 0 0; }
.card-header + .list-group .list-group-item:first-child {
border-top: 0; }
@@ -3326,7 +3326,7 @@ input[type="button"].btn-block {
background-color: rgba(0, 0, 0, 0.03);
border-top: 1px solid rgba(0, 0, 0, 0.125); }
.card-footer:last-child {
border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); }
border-radius: 0 0 calc(0 - 1px) calc(0 - 1px); }
.card-header-tabs {
margin-right: -0.625rem;
@@ -3348,17 +3348,17 @@ input[type="button"].btn-block {
.card-img {
width: 100%;
border-radius: calc(0.25rem - 1px); }
border-radius: calc(0 - 1px); }
.card-img-top {
width: 100%;
border-top-left-radius: calc(0.25rem - 1px);
border-top-right-radius: calc(0.25rem - 1px); }
border-top-left-radius: calc(0 - 1px);
border-top-right-radius: calc(0 - 1px); }
.card-img-bottom {
width: 100%;
border-bottom-right-radius: calc(0.25rem - 1px);
border-bottom-left-radius: calc(0.25rem - 1px); }
border-bottom-right-radius: calc(0 - 1px);
border-bottom-left-radius: calc(0 - 1px); }
.card-deck {
display: flex;
@@ -3448,7 +3448,7 @@ input[type="button"].btn-block {
margin-bottom: 1rem;
list-style: none;
background-color: #e9ecef;
border-radius: 0.25rem; }
border-radius: 0; }
.breadcrumb-item + .breadcrumb-item {
padding-left: 0.5rem; }
@@ -3471,7 +3471,7 @@ input[type="button"].btn-block {
display: flex;
padding-left: 0;
list-style: none;
border-radius: 0.25rem; }
border-radius: 0; }
.page-link {
position: relative;
@@ -3495,12 +3495,12 @@ input[type="button"].btn-block {
.page-item:first-child .page-link {
margin-left: 0;
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem; }
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.page-item:last-child .page-link {
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem; }
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.page-item.active .page-link {
z-index: 1;
@@ -3521,12 +3521,12 @@ input[type="button"].btn-block {
line-height: 1.5; }
.pagination-lg .page-item:first-child .page-link {
border-top-left-radius: 0.3rem;
border-bottom-left-radius: 0.3rem; }
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.pagination-lg .page-item:last-child .page-link {
border-top-right-radius: 0.3rem;
border-bottom-right-radius: 0.3rem; }
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.pagination-sm .page-link {
padding: 0.25rem 0.5rem;
@@ -3534,12 +3534,12 @@ input[type="button"].btn-block {
line-height: 1.5; }
.pagination-sm .page-item:first-child .page-link {
border-top-left-radius: 0.2rem;
border-bottom-left-radius: 0.2rem; }
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.pagination-sm .page-item:last-child .page-link {
border-top-right-radius: 0.2rem;
border-bottom-right-radius: 0.2rem; }
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.badge {
display: inline-block;
@@ -3550,7 +3550,7 @@ input[type="button"].btn-block {
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
border-radius: 0;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
.badge {
@@ -3663,7 +3663,7 @@ input[type="button"].btn-block {
padding: 2rem 1rem;
margin-bottom: 2rem;
background-color: #e9ecef;
border-radius: 0.3rem; }
border-radius: 0; }
@media (min-width: 576px) {
.jumbotron {
padding: 4rem 2rem; } }
@@ -3678,7 +3678,7 @@ input[type="button"].btn-block {
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem; }
border-radius: 0; }
.alert-heading {
color: inherit; }
@@ -3788,7 +3788,7 @@ input[type="button"].btn-block {
overflow: hidden;
font-size: 0.75rem;
background-color: #e9ecef;
border-radius: 0.25rem; }
border-radius: 0; }
.progress-bar {
display: flex;
@@ -3847,12 +3847,12 @@ input[type="button"].btn-block {
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.125); }
.list-group-item:first-child {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem; }
border-top-left-radius: 0;
border-top-right-radius: 0; }
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem; }
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; }
.list-group-item.disabled, .list-group-item:disabled {
color: #6c757d;
pointer-events: none;
@@ -3869,13 +3869,13 @@ input[type="button"].btn-block {
margin-right: -1px;
margin-bottom: 0; }
.list-group-horizontal .list-group-item:first-child {
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 0; }
.list-group-horizontal .list-group-item:last-child {
margin-right: 0;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; }
@media (min-width: 576px) {
@@ -3885,13 +3885,13 @@ input[type="button"].btn-block {
margin-right: -1px;
margin-bottom: 0; }
.list-group-horizontal-sm .list-group-item:first-child {
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 0; }
.list-group-horizontal-sm .list-group-item:last-child {
margin-right: 0;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; } }
@media (min-width: 768px) {
@@ -3901,13 +3901,13 @@ input[type="button"].btn-block {
margin-right: -1px;
margin-bottom: 0; }
.list-group-horizontal-md .list-group-item:first-child {
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 0; }
.list-group-horizontal-md .list-group-item:last-child {
margin-right: 0;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; } }
@media (min-width: 992px) {
@@ -3917,13 +3917,13 @@ input[type="button"].btn-block {
margin-right: -1px;
margin-bottom: 0; }
.list-group-horizontal-lg .list-group-item:first-child {
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 0; }
.list-group-horizontal-lg .list-group-item:last-child {
margin-right: 0;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; } }
@media (min-width: 1200px) {
@@ -3933,13 +3933,13 @@ input[type="button"].btn-block {
margin-right: -1px;
margin-bottom: 0; }
.list-group-horizontal-xl .list-group-item:first-child {
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 0; }
.list-group-horizontal-xl .list-group-item:last-child {
margin-right: 0;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; } }
.list-group-flush .list-group-item {
@@ -4180,7 +4180,7 @@ a.close.disabled {
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem;
border-radius: 0;
outline: 0; }
.modal-backdrop {
@@ -4202,8 +4202,8 @@ a.close.disabled {
justify-content: space-between;
padding: 1rem 1rem;
border-bottom: 1px solid #dee2e6;
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem; }
border-top-left-radius: 0;
border-top-right-radius: 0; }
.modal-header .close {
padding: 1rem 1rem;
margin: -1rem -1rem -1rem auto; }
@@ -4223,8 +4223,8 @@ a.close.disabled {
justify-content: flex-end;
padding: 1rem;
border-top: 1px solid #dee2e6;
border-bottom-right-radius: 0.3rem;
border-bottom-left-radius: 0.3rem; }
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; }
.modal-footer > :not(:first-child) {
margin-left: .25rem; }
.modal-footer > :not(:last-child) {
@@ -4342,7 +4342,7 @@ a.close.disabled {
color: #fff;
text-align: center;
background-color: #000;
border-radius: 0.25rem; }
border-radius: 0; }
.popover {
position: absolute;
@@ -4370,13 +4370,13 @@ a.close.disabled {
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem; }
border-radius: 0; }
.popover .arrow {
position: absolute;
display: block;
width: 1rem;
height: 0.5rem;
margin: 0 0.3rem; }
margin: 0 0; }
.popover .arrow::before, .popover .arrow::after {
position: absolute;
display: block;
@@ -4403,7 +4403,7 @@ a.close.disabled {
left: calc((0.5rem + 1px) * -1);
width: 0.5rem;
height: 1rem;
margin: 0.3rem 0; }
margin: 0 0; }
.bs-popover-right > .arrow::before, .bs-popover-auto[x-placement^="right"] > .arrow::before {
left: 0;
border-width: 0.5rem 0.5rem 0.5rem 0;
@@ -4441,7 +4441,7 @@ a.close.disabled {
right: calc((0.5rem + 1px) * -1);
width: 0.5rem;
height: 1rem;
margin: 0.3rem 0; }
margin: 0 0; }
.bs-popover-left > .arrow::before, .bs-popover-auto[x-placement^="left"] > .arrow::before {
right: 0;
border-width: 0.5rem 0 0.5rem 0.5rem;
@@ -4457,8 +4457,8 @@ a.close.disabled {
font-size: 1rem;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-top-left-radius: calc(0.3rem - 1px);
border-top-right-radius: calc(0.3rem - 1px); }
border-top-left-radius: calc(0 - 1px);
border-top-right-radius: calc(0 - 1px); }
.popover-header:empty {
display: none; }
@@ -4812,29 +4812,29 @@ button.bg-caution:focus {
border-color: #fff !important; }
.rounded-sm {
border-radius: 0.2rem !important; }
border-radius: 0 !important; }
.rounded {
border-radius: 0.25rem !important; }
border-radius: 0 !important; }
.rounded-top {
border-top-left-radius: 0.25rem !important;
border-top-right-radius: 0.25rem !important; }
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important; }
.rounded-right {
border-top-right-radius: 0.25rem !important;
border-bottom-right-radius: 0.25rem !important; }
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important; }
.rounded-bottom {
border-bottom-right-radius: 0.25rem !important;
border-bottom-left-radius: 0.25rem !important; }
border-bottom-right-radius: 0 !important;
border-bottom-left-radius: 0 !important; }
.rounded-left {
border-top-left-radius: 0.25rem !important;
border-bottom-left-radius: 0.25rem !important; }
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important; }
.rounded-lg {
border-radius: 0.3rem !important; }
border-radius: 0 !important; }
.rounded-circle {
border-radius: 50% !important; }
@@ -7160,3 +7160,27 @@ a.text-caution:hover, a.text-caution:focus {
h1, h2, h3, h4, h5 {
font-family: 'Space Mono', monospace;
font-weight: 700; }
.card-grid {
display: grid;
gap: 1px;
background-color: #dedede;
padding: 0;
border-bottom: 1px solid #dedede; }
.card-grid.card-grid-2x2 {
/* left half is a hero area; right half is a 2x2 grid. Total grid is 4x2 */
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr; }
.card-grid.card-grid-2x2 .section-hero {
grid-row-end: span 2; }
.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; }
.card-grid.card-grid-2x4 .section-hero {
grid-row-end: span 4; }
.card-grid .align-bottom {
justify-content: flex-end; }
.card-grid .card {
padding: 40px;
border: 0; }

442
tool/template-home.html
View File

@@ -16,280 +16,236 @@
{% block breadcrumbs %}{% endblock %}
{% block main %}
<section class="container-fluid py-3 p-sm-4 splash-head">
<h1>Learn. Experiment. Integrate. Contribute.</h1>
<div class="row">
<div class="blurb col-sm-12">
<p>The <a href="#xrp_ledger_intro">XRP Ledger</a> is built on 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-light ml-3" href="https://goo.gl/forms/sHMFxU8dKiTUaltE3" target="_blank">Sign up! <i class="fa fa-external-link" aria-hidden="true"></i></a></p>
</div>
</div>
</section>
<section class="container-fluid card-grid card-grid-2x2">
<div class="section-hero card align-bottom">
<div>
<h1 class="display-4">Powering the Internet of Value.</h1>
<div class="blurb col-sm-12">
<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>
</div>
</div>
</div><!--/.section-hero-->
<section class="container-fluid py-3 p-sm-4 bg-white" id="home_first_shortcuts">
<div class="card-deck">
<div class="card">
<div class="card-header">
<h3 class="card-title">Go to the References</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>
</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>
</div><!--/.card-footer-->
</div><!--/.card-->
<div class="card">
<div class="card-header bg-dark">
<h3 class="card-title"><img class="card-title-icon" src="assets/img/reference-book.svg" alt="(reference book icon)" width="32" height="32" /> Go to the References</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>
</ul>
</div><!--/.curated-links-->
</div><!--/.card-body-->
<div class="card-footer">
<div class="readmore">
<a href="references.html" class="btn btn-secondary">View References <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div><!--/.card-footer-->
</div><!--/.card-->
<div class="card">
<div class="card-header">
<h3 class="card-title">Get Started</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>
</ul>
</div><!--/.curated-links-->
</div><!--/.card-body-->
</div><!--/.card-->
<div class="card">
<div class="card-header bg-dark">
<h3 class="card-title"><img class="card-title-icon" src="assets/img/airplane.svg" alt="(airplane icon)" width="32" height="32" /> Get Started</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>
</ul>
</div><!--/.curated-links-->
</div><!--/.card-body-->
</div><!--/.card-->
<div class="card">
<div class="card-header">
<h3 class="card-title">Explore the XRP Ledger</h3>
</div><!--/.card-header-->
<div class="card-body">
<p>Use the XRPL Explorer to view a stream of ledger activity and see validator statuses.</p>
</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>
</div>
</div><!--/.card-footer-->
</div><!--/.card-->
<div class="card">
<div class="card-header bg-dark">
<h3 class="card-title"><img class="card-title-icon" src="assets/img/map.svg" alt="(map icon)" width="32" height="32" /> View Use Cases</h3>
</div><!--/.card-header-->
<div class="card-body">
{% set parent_page = pages|selectattr("name", 'defined_and_equalto', "Use Cases")|first %}
{% set depth = 1 %}
{% include 'template-page-children.html' %}
</div><!--/.card-body-->
<div class="card-footer">
<div class="readmore">
<a href="use-cases.html" class="btn btn-secondary">View More Use Cases <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div><!--/.card-footer-->
</div><!--/.card-->
<div class="card">
<div class="card-header">
<h3 class="card-title">New and Updated Documentation</h3>
</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-->
</div><!--/.card-deck-->
</section><!--/.card-grid-2x2-->
</section>
<section class="container-fluid bg-light py-3 p-sm-4">
<div class="card-deck">
<div class="card">
<div class="card-header">
<h3 class="card-title">New and Updated Documentation</h3>
</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-->
<div class="card">
<div class="card-header">
<h3 class="card-title">Known Amendments</h3>
</div><!--/.card-header-->
<div class="card-body">
<p>Amendments introduce new features to the decentralized XRP Ledger without causing disruptions.</p>
<div class="readmore">
<a href="known-amendments.html"><button class="btn btn-secondary" type="button">View Known Amendments <i class="fa fa-arrow-right" aria-hidden="true"></i></button></a>
</div>
</div><!--/.card-body-->
</div><!--/.card-->
</div><!--/.card-deck-->
</section>
<section class="container-fluid py-3 p-sm-4" id="xrp_ledger_intro">
<h2><a href="xrp-ledger-overview.html">XRP Ledger: A decentralized cryptographic ledger</a></h2>
<section class="container-fluid card-grid card-grid-2x4" id="xrp_ledger_intro">
<div class="card section-hero">
<h2><a href="xrp-ledger-overview.html">What is the XRP Ledger?</a></h2>
<div class="row">
<div class="blurb col-sm-12">
<p>The XRP Ledger is built 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>
<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-->
<div class="container">
<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-->
<div class="card-deck">
<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#the-digital-asset-for-payments" class="card m-3">
<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#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#censorship-resistant-transaction-processing" class="card m-3">
<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#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-->
<div class="w-100 d-none d-sm-block d-md-none"><!-- wrap every 2 on sm --></div>
<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#fast-efficient-consensus-algorithm" class="card m-3">
<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#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-->
<div class="w-100 d-none d-md-block d-lg-none"><!-- wrap every 3 on md --></div>
<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#finite-xrp-supply" class="card m-3">
<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#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-->
<div class="w-100 d-none d-sm-block d-md-none"><!-- wrap every 2 on sm --></div>
<div class="w-100 d-none d-lg-block"><!-- wrap every 4 on lg/xl --></div>
</section><!--/#xrp_ledger_intro-->
<a href="xrp-ledger-overview.html#responsible-software-governance" class="card m-3">
<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 m-3">
<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-->
<div class="w-100 d-none d-sm-block d-md-none"><!-- wrap every 2 on sm --></div>
<div class="w-100 d-none d-md-block d-lg-none"><!-- wrap every 3 on md --></div>
<a href="xrp-ledger-overview.html#modern-features-for-smart-contracts" class="card m-3">
<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 m-3">
<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-->
</div><!--/.card-deck-->
</div><!--/.container-->
</section>
<section class="container-fluid py-3 p-sm-4 bg-light">
<h2>Built on the XRP Ledger</h2>
<section class="container-fluid card-grid card-grid-2x2">
<div class="section-hero card">
<h2>Start BUIDLing</h2>
<div class="blurb">
<p>Learn about just a few of the types of integrations developers have built on the XRP Ledger.</p>
<p>Get updates about XRP Ledger use cases, webinars, and releases. <a class="btn btn-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></p>
<p>Use these tutorials to get step-by-step guidance to perform common tasks with the XRP Ledger.</p>
</div>
</div>
<div class="container">
<div class="row card-deck mx-4 mt-4 mb-0">
<a class="card" href="list-xrp-in-your-exchange.html">
<div class="card-header">
<h3 class="card-title">List XRP on Your Exchange</h3>
</div><!--/.card-header-->
<div class="card-body">
<p>Run a digital asset exchange? Follow these steps to add XRP.</p>
</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>
</div>
</div><!--/.card-footer-->
</a><!--/.card-->
<div class="card">
<div class="card-header">
<h3 class="card-title">Exchanges and Gateways</h3>
</div><!--/.card-header-->
<img class="card-img-top" src="assets/img/exchange-on-ripple.svg" alt="(currency exchange icon)" />
<div class="card-body">
<p>Integrate your Exchange or Gateway with the XRP Ledger to enable your users to buy and sell XRP and issued currencies.</p>
</div><!--/.card-body-->
<div class="card-footer">
<div class="readmore">
<a href="list-xrp-in-your-exchange.html"><button class="btn btn-secondary" type="button">View Use Case <i class="fa fa-arrow-right" aria-hidden="true"></i></button></a>
</div><!--/.readmore-->
</div><!--/.card-footer-->
</div><!--/.card-->
<a class="card" href="list-xrp-in-your-exchange.html">
<div class="card-header">
<h3 class="card-title">Send XRP</h3>
</div><!--/.card-header-->
<div class="card-body">
<p>Learn how to send test payments right from your browser.</p>
</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>
</div>
</div><!--/.card-footer-->
</a><!--/.card-->
<div class="card">
<div class="card-header">
<h3 class="card-title">Market Makers</h3>
</div><!--/.card-header-->
<img class="card-img-top" src="assets/img/market-maker-on-ripple.svg" alt="(market maker icon)" />
<div class="card-body">
<p>Integrate with the XRP Ledger to place offers algorithmically or through your own trading interface, providing liquidity between different gateways and their users.</p>
</div><!--/.card-body-->
<div class="card-footer">
<div class="readmore coming-soon">
<h4>Coming Soon</h4>
</div><!--/.readmore-->
</div><!--/.card-footer-->
</div><!--/.card-->
<a class="card" href="manage-the-rippled-server.html">
<div class="card-header">
<h3 class="card-title">Run a rippled Server</h3>
</div><!--/.card-header-->
<div class="card-body">
<p>Install, configure, and manage the core server that powers the XRP Ledger.</p>
</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>
</div>
</div><!--/.card-footer-->
</a><!--/.card-->
<div class="card">
<div class="card-header">
<h3 class="card-title">Wallets</h3>
</div><!--/.card-header-->
<img class="card-img-top" src="assets/img/wallet-on-ripple.svg" alt="(wallet icon)" />
<div class="card-body">
<p>Build a wallet app on the XRP Ledger to enable your users to send and trade XRP and other currencies issued by a gateway you trust.</p>
</div><!--/.card-body-->
<div class="card-footer">
<div class="readmore coming-soon">
<h4>Coming Soon</h4>
</div><!--/.readmore-->
</div><!--/.card-footer-->
</div><!--/.card-->
<div class="card">&nbsp;</div><!-- dummy spacer -->
</div><!--/.card-deck-->
</div><!--/.container-->
</section>
</section>
<section class="container-fluid related-projects py-3 p-sm-4 bg-white">
<h2>Related Projects</h2>
<section class="container-fluid related-projects py-3 p-sm-4 bg-white">
<h2>Related Projects</h2>
<div class="row">
<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>
<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 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>
<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-->
</div><!--/.row-->
</section>
</section>
{% endblock %}

41
tool/xrpl.scss
View File

@@ -16,8 +16,12 @@ $theme-colors: (
"warning": #AA4949, // wine red
);
$code-color: #3B4147; // "Black-80"
$navbar-padding-y: 0;
$navbar-nav-link-padding-x: 1rem;
$border-radius: 0;
$border-radius-lg: 0;
$border-radius-sm: 0;
// Font face stuff from Google
@font-face {
@@ -59,3 +63,40 @@ h1, h2, h3, h4, h5 {
font-family: 'Space Mono', monospace;
font-weight: 700;
}
.card-grid {
display: grid;
gap: 1px;
background-color: #dedede;
padding: 0;
border-bottom: 1px solid #dedede;
&.card-grid-2x2 {
/* left half is a hero area; right half is a 2x2 grid. Total grid is 4x2 */
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
.section-hero {
grid-row-end: span 2;
}
}
&.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;
.section-hero {
grid-row-end: span 4;
}
}
.align-bottom {
justify-content: flex-end;
}
.card {
padding: 40px;
border: 0;
}
}