mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-04 11:55:50 +00:00
Unify card styles & fix more light mode stuff
This commit is contained in:
mDuo13
File diff suppressed because one or more lines are too long
@@ -1,107 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="44"
|
||||
height="44"
|
||||
viewBox="0 0 44 44"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
id="svg31"
|
||||
sodipodi:docname="contribute.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">
|
||||
<sodipodi:namedview
|
||||
id="namedview33"
|
||||
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="8.2613636"
|
||||
inkscape:cx="43.878955"
|
||||
inkscape:cy="43.818432"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1053"
|
||||
inkscape:window-x="3000"
|
||||
inkscape:window-y="840"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="g12" />
|
||||
<g
|
||||
filter="url(#filter0_d)"
|
||||
id="g12"
|
||||
transform="translate(-0.09078405,-0.17118201)">
|
||||
<rect
|
||||
x="3.1249847"
|
||||
y="14.414384"
|
||||
width="37.425301"
|
||||
height="25.7931"
|
||||
fill="#ffffff"
|
||||
id="rect4" />
|
||||
<rect
|
||||
x="3.1249847"
|
||||
y="2.782582"
|
||||
width="37.425301"
|
||||
height="7.7547898"
|
||||
fill="#ffffff"
|
||||
id="rect6" />
|
||||
<path
|
||||
d="m 44.090784,10.483682 v -6.4453 c 0,-2.1323 -1.7348,-3.86719999 -3.8672,-3.86719999 h -36.2656 c -2.1324,0 -3.86719995,1.73489999 -3.86719995,3.86719999 v 6.4453 z m -14.2656,-5.1562 h 7.7344 c 0.7119,0 1.289,0.5771 1.289,1.289 0,0.712 -0.5771,1.2891 -1.289,1.2891 h -7.7344 c -0.7119,0 -1.2891,-0.5771 -1.2891,-1.2891 0,-0.7119 0.5772,-1.289 1.2891,-1.289 z m -12.8906,0 c 0.7119,0 1.289,0.5771 1.289,1.289 0,0.712 -0.5771,1.2891 -1.289,1.2891 -0.712,0 -1.2891,-0.5771 -1.2891,-1.2891 0,-0.7119 0.5771,-1.289 1.2891,-1.289 z m -5.1563,0 c 0.7119,0 1.2891,0.5771 1.2891,1.289 0,0.712 -0.5772,1.2891 -1.2891,1.2891 -0.7119,0 -1.2891,-0.5771 -1.2891,-1.2891 0,-0.7119 0.5772,-1.289 1.2891,-1.289 z m -5.1563,0 c 0.712,0 1.2891,0.5771 1.2891,1.289 0,0.712 -0.5771,1.2891 -1.2891,1.2891 -0.7119,0 -1.289,-0.5771 -1.289,-1.2891 0,-0.7119 0.5771,-1.289 1.289,-1.289 z"
|
||||
fill="#838386"
|
||||
id="path8" />
|
||||
<path
|
||||
d="m 0.09078405,13.061882 v 27.0703 c 0,2.1323 1.73479995,3.8672 3.86719995,3.8672 h 36.2656 c 2.1324,0 3.8672,-1.7349 3.8672,-3.8672 v -27.0703 z m 15.07089995,18.3293 c 0.556,0.4447 0.646,1.2559 0.2013,1.8118 -0.4446,0.5559 -1.256,0.6461 -1.8118,0.2013 l -6.4453,-5.1562 c -0.6445,-0.5154 -0.6449,-1.4974 0,-2.0132 l 6.4453,-5.1563 c 0.5557,-0.4447 1.367,-0.3546 1.8118,0.2013 0.4447,0.5559 0.3547,1.3672 -0.2013,1.8118 l -5.1871004,4.1498 z m 11.9811,-12.6653 -7.7344,18.0469 c -0.2804,0.6542 -1.038,0.9576 -1.6926,0.677 -0.6543,-0.2804 -0.9575,-1.0383 -0.677,-1.6926 l 7.7344,-18.0469 c 0.2805,-0.6543 1.0383,-0.9574 1.6926,-0.677 0.6543,0.2804 0.9575,1.0382 0.677,1.6926 z m 9.9329,9.5222 -6.4453,5.1563 c -0.555,0.4441 -1.3664,0.3554 -1.8118,-0.2013 -0.4447,-0.5559 -0.3547,-1.3672 0.2013,-1.8118 l 5.1871,-4.1498 -5.1871,-4.1496 c -0.556,-0.4447 -0.646,-1.2559 -0.2013,-1.8118 0.4446,-0.556 1.2559,-0.6461 1.8118,-0.2013 l 6.4453,5.1563 c 0.6445,0.5153 0.6449,1.4972 0,2.013 z"
|
||||
fill="#838386"
|
||||
id="path10" />
|
||||
</g>
|
||||
<defs
|
||||
id="defs29">
|
||||
<filter
|
||||
id="filter0_d"
|
||||
x="0"
|
||||
y="0"
|
||||
width="88"
|
||||
height="88"
|
||||
filterUnits="userSpaceOnUse"
|
||||
color-interpolation-filters="sRGB">
|
||||
<feFlood
|
||||
flood-opacity="0"
|
||||
result="BackgroundImageFix"
|
||||
id="feFlood14" />
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
id="feColorMatrix16" />
|
||||
<feOffset
|
||||
dy="4"
|
||||
id="feOffset18" />
|
||||
<feGaussianBlur
|
||||
stdDeviation="5"
|
||||
id="feGaussianBlur20" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 0.908333 0 0 0 0 0.911771 0 0 0 0 0.904896 0 0 0 1 0"
|
||||
id="feColorMatrix22" />
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="BackgroundImageFix"
|
||||
result="effect1_dropShadow"
|
||||
id="feBlend24" />
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="effect1_dropShadow"
|
||||
result="shape"
|
||||
id="feBlend26" />
|
||||
</filter>
|
||||
</defs>
|
||||
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="3.03418" y="14.3291" width="37.4253" height="25.7931" fill="black"/>
|
||||
<rect x="3.03418" y="2.69727" width="37.4253" height="7.75479" fill="black"/>
|
||||
<path d="M44 10.3984V3.95312C44 1.82076 42.2652 0.0859375 40.1328 0.0859375H3.86719C1.73482 0.0859375 0 1.82076 0 3.95312V10.3984H44ZM29.7344 5.24219H37.4688C38.1807 5.24219 38.7578 5.81934 38.7578 6.53125C38.7578 7.24316 38.1807 7.82031 37.4688 7.82031H29.7344C29.0225 7.82031 28.4453 7.24316 28.4453 6.53125C28.4453 5.81934 29.0225 5.24219 29.7344 5.24219ZM16.8438 5.24219C17.5557 5.24219 18.1328 5.81934 18.1328 6.53125C18.1328 7.24316 17.5557 7.82031 16.8438 7.82031C16.1318 7.82031 15.5547 7.24316 15.5547 6.53125C15.5547 5.81934 16.1318 5.24219 16.8438 5.24219ZM11.6875 5.24219C12.3994 5.24219 12.9766 5.81934 12.9766 6.53125C12.9766 7.24316 12.3994 7.82031 11.6875 7.82031C10.9756 7.82031 10.3984 7.24316 10.3984 6.53125C10.3984 5.81934 10.9756 5.24219 11.6875 5.24219ZM6.53125 5.24219C7.24316 5.24219 7.82031 5.81934 7.82031 6.53125C7.82031 7.24316 7.24316 7.82031 6.53125 7.82031C5.81934 7.82031 5.24219 7.24316 5.24219 6.53125C5.24219 5.81934 5.81934 5.24219 6.53125 5.24219Z" fill="#C1C1C2"/>
|
||||
<path d="M0 12.9766V40.0469C0 42.1792 1.73482 43.9141 3.86719 43.9141H40.1328C42.2652 43.9141 44 42.1792 44 40.0469V12.9766H0ZM15.0709 31.3059C15.6269 31.7506 15.7169 32.5618 15.2722 33.1177C14.8276 33.6736 14.0162 33.7638 13.4604 33.319L7.01508 28.1628C6.37063 27.6474 6.3702 26.6654 7.01508 26.1496L13.4604 20.9933C14.0161 20.5486 14.8274 20.6387 15.2722 21.1946C15.7169 21.7505 15.6269 22.5618 15.0709 23.0064L9.88384 27.1562L15.0709 31.3059ZM27.052 18.6406L19.3176 36.6875C19.0372 37.3417 18.2796 37.6451 17.625 37.3645C16.9707 37.0841 16.6675 36.3262 16.948 35.6719L24.6824 17.625C24.9629 16.9707 25.7207 16.6676 26.375 16.948C27.0293 17.2284 27.3325 17.9862 27.052 18.6406ZM36.9849 28.1628L30.5396 33.3191C29.9846 33.7632 29.1732 33.6745 28.7278 33.1178C28.2831 32.5619 28.3731 31.7506 28.9291 31.306L34.1162 27.1562L28.9291 23.0066C28.3731 22.5619 28.2831 21.7507 28.7278 21.1948C29.1724 20.6388 29.9837 20.5487 30.5396 20.9935L36.9849 26.1498C37.6294 26.6651 37.6298 27.647 36.9849 28.1628Z" fill="#C1C1C2"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 2.2 KiB |
@@ -1,100 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="88"
|
||||
height="88"
|
||||
viewBox="0 0 44 44"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
id="svg31"
|
||||
sodipodi:docname="docs.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">
|
||||
<sodipodi:namedview
|
||||
id="namedview33"
|
||||
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="8.2613636"
|
||||
inkscape:cx="44"
|
||||
inkscape:cy="43.939477"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1053"
|
||||
inkscape:window-x="3000"
|
||||
inkscape:window-y="840"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg31" />
|
||||
<path
|
||||
d="m 38.909107,11.686882 -9.0234,-2.5782 -2.5782,-9.02340002 h -18.0468 c -2.1358003,0 -3.8672003,1.73140002 -3.8672003,3.86720002 v 36.2656 c 0,2.1358 1.7314,3.8672 3.8672003,3.8672 h 25.7812 c 2.1358,0 3.8672,-1.7314 3.8672,-3.8672 z"
|
||||
fill="#838386"
|
||||
id="path4"
|
||||
style="filter:url(#filter0_d)" />
|
||||
<path
|
||||
d="m 38.909107,11.686882 h -9.0234 c -1.418,0 -2.5782,-1.1602 -2.5782,-2.5782 V 0.08528198 c 0.3352,0 0.6704,0.1289 0.9023,0.3868 l 10.3125,10.31250002 c 0.2579,0.2319 0.3868,0.5671 0.3868,0.9023 z"
|
||||
fill="#c1c1c2"
|
||||
id="path6"
|
||||
style="filter:url(#filter0_d)" />
|
||||
<path
|
||||
d="m 29.033307,14.436882 h 2.8175 l -5.872,5.5033 c -1.0535,0.9533 -2.4237,1.4812 -3.8445,1.4812 -1.4208,0 -2.7909,-0.5279 -3.8444,-1.4812 l -5.872,-5.5033 h 2.8175 l 4.4501,4.1604 c 0.6645,0.6099 1.5337,0.9483 2.4357,0.9483 0.902,0 1.7711,-0.3384 2.4357,-0.9483 z"
|
||||
fill="#ffffff"
|
||||
id="path8"
|
||||
style="filter:url(#filter0_d)" />
|
||||
<path
|
||||
d="m 15.207107,29.709482 h -2.8175 l 5.8983,-5.5297 c 1.0477,-0.965 2.42,-1.5007 3.8444,-1.5007 1.4245,0 2.7968,0.5357 3.8445,1.5007 l 5.8983,5.5297 h -2.8175 l -4.4764,-4.2131 c -0.6645,-0.6099 -1.5337,-0.9483 -2.4357,-0.9483 -0.902,0 -1.7711,0.3384 -2.4357,0.9483 z"
|
||||
fill="#ffffff"
|
||||
id="path10"
|
||||
style="filter:url(#filter0_d)" />
|
||||
<defs
|
||||
id="defs29">
|
||||
<filter
|
||||
id="filter0_d"
|
||||
x="0"
|
||||
y="0"
|
||||
width="88"
|
||||
height="88"
|
||||
filterUnits="userSpaceOnUse"
|
||||
color-interpolation-filters="sRGB">
|
||||
<feFlood
|
||||
flood-opacity="0"
|
||||
result="BackgroundImageFix"
|
||||
id="feFlood14" />
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
id="feColorMatrix16" />
|
||||
<feOffset
|
||||
dy="4"
|
||||
id="feOffset18" />
|
||||
<feGaussianBlur
|
||||
stdDeviation="5"
|
||||
id="feGaussianBlur20" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 0.908333 0 0 0 0 0.911771 0 0 0 0 0.904896 0 0 0 1 0"
|
||||
id="feColorMatrix22" />
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="BackgroundImageFix"
|
||||
result="effect1_dropShadow"
|
||||
id="feBlend24" />
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="effect1_dropShadow"
|
||||
result="shape"
|
||||
id="feBlend26" />
|
||||
</filter>
|
||||
</defs>
|
||||
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M38.7578 11.6016L29.7344 9.02344L27.1562 0H9.10938C6.97357 0 5.24219 1.73138 5.24219 3.86719V40.1328C5.24219 42.2686 6.97357 44 9.10938 44H34.8906C37.0264 44 38.7578 42.2686 38.7578 40.1328V11.6016Z" fill="#E0E0E1"/>
|
||||
<path d="M38.7578 11.6016H29.7344C28.3164 11.6016 27.1562 10.4414 27.1562 9.02344V0C27.4914 0 27.8266 0.128906 28.0585 0.386805L38.371 10.6993C38.6289 10.9312 38.7578 11.2664 38.7578 11.6016Z" fill="#C1C1C2"/>
|
||||
<path d="M28.882 14.3516H31.6995L25.8275 19.8549C24.774 20.8082 23.4038 21.3361 21.983 21.3361C20.5622 21.3361 19.1921 20.8082 18.1386 19.8549L12.2666 14.3516H15.0841L19.5342 18.512C20.1987 19.1219 21.0679 19.4603 21.9699 19.4603C22.8719 19.4603 23.741 19.1219 24.4056 18.512L28.882 14.3516Z" fill="black"/>
|
||||
<path d="M15.0558 29.6242H12.2383L18.1366 24.0945C19.1843 23.1295 20.5566 22.5938 21.981 22.5938C23.4055 22.5938 24.7778 23.1295 25.8255 24.0945L31.7238 29.6242H28.9063L24.4299 25.4111C23.7654 24.8012 22.8962 24.4628 21.9942 24.4628C21.0922 24.4628 20.2231 24.8012 19.5585 25.4111L15.0558 29.6242Z" fill="black"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 1.1 KiB |
@@ -1,3 +1,7 @@
|
||||
.card, .cta-card, .q-wrapper {
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
}
|
||||
|
||||
.card-body > p,
|
||||
.card-body > p:not(:last-child) {
|
||||
padding: 0;
|
||||
@@ -33,16 +37,26 @@ a.card:hover h3 {
|
||||
|
||||
.card-deck {
|
||||
margin-top: 2.5rem;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-left: (-$card-deck-margin);
|
||||
margin-right: (-$card-deck-margin);
|
||||
margin-bottom: 5rem;
|
||||
flex-grow: 1;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex-grow: 0;
|
||||
flex-basis: 100%;
|
||||
margin: 0 $card-deck-margin (4 * $card-deck-margin) $card-deck-margin;
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
&.row-cols-1 .card {
|
||||
flex-basis: 100%;
|
||||
// Give cards some breathing room (but not in the 2×2 ones)
|
||||
min-height: 264px;
|
||||
@include media-breakpoint-up(md) {
|
||||
@@ -50,6 +64,29 @@ a.card:hover h3 {
|
||||
}
|
||||
}
|
||||
|
||||
&.row-cols-lg-3 {
|
||||
@include media-breakpoint-up(xl) {
|
||||
// Double the card deck margin on larger desktops
|
||||
margin-left: (-2 * $card-deck-margin);
|
||||
margin-right: (-2 * $card-deck-margin);
|
||||
}
|
||||
.card {
|
||||
@include media-breakpoint-up(lg) {
|
||||
flex-basis: calc(33% - #{(2 * $card-deck-margin)} );
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
margin: 0 (2 * $card-deck-margin) (4 * $card-deck-margin) (2 * $card-deck-margin);
|
||||
flex-basis: calc(33% - #{(4 * $card-deck-margin)} );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.row-cols-lg-4 .card {
|
||||
@include media-breakpoint-up(lg) {
|
||||
flex-basis: calc(25% - #{(2 * $card-deck-margin)} );
|
||||
}
|
||||
}
|
||||
|
||||
a.card {
|
||||
transition: all 0.35s ease-out;
|
||||
cursor: pointer;
|
||||
@@ -78,7 +115,7 @@ a.card:hover h3 {
|
||||
padding: 1rem;
|
||||
}
|
||||
&.row-cols-1 .card {
|
||||
margin: .75rem;
|
||||
margin: .75rem .75rem (4 * $card-deck-margin) .75rem;
|
||||
max-width: calc(100% - 1.5rem);
|
||||
}
|
||||
&.row-cols-2 .card {
|
||||
@@ -87,3 +124,8 @@ a.card:hover h3 {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cta-card {
|
||||
text-align: center;
|
||||
background-color: $gray-800;
|
||||
}
|
||||
|
||||
@@ -441,9 +441,6 @@
|
||||
.grey-700 {
|
||||
color: $gray-700;
|
||||
}
|
||||
.bg-grey-800 {
|
||||
background-color: $gray-800;
|
||||
}
|
||||
.white {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
// Variables
|
||||
$grid-gap: 40px;
|
||||
$grid-gap-lg: 80px;
|
||||
|
||||
// General stuff ---------------------------------------------------------------
|
||||
|
||||
body {
|
||||
position: relative; // Makes scrollspy work better
|
||||
}
|
||||
@@ -73,7 +79,7 @@ section {
|
||||
@include media-breakpoint-up(lg) {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-column-gap: 80px;
|
||||
grid-column-gap: $grid-gap-lg;
|
||||
|
||||
.nav-grid-head {
|
||||
margin-top: 0;
|
||||
@@ -96,36 +102,40 @@ section {
|
||||
}
|
||||
|
||||
|
||||
// Card Grid styles ------------------------------------------------------------
|
||||
// Grid styles (often not for cards) -------------------------------------------
|
||||
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-gap: 40px;
|
||||
grid-gap: $grid-gap;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
grid-template-columns: 1fr; // Default to 1 big column on smaller screens
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
grid-gap: $grid-gap-lg;
|
||||
}
|
||||
|
||||
.col {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&.card-grid-3xN {
|
||||
/* 3 equal columns and any number of auto-sized rows. */
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-auto-rows: auto;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
/* Switch to 1-column layout on smaller widths */
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.card-new {
|
||||
min-height: 264px;
|
||||
@include media-breakpoint-up(md) {
|
||||
min-height: 347px;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
// @include media-breakpoint-up(lg) {
|
||||
// margin-left: (-2 * $grid-gap-lg);
|
||||
// margin-right: (-2 * $grid-gap-lg);
|
||||
// }
|
||||
}
|
||||
|
||||
&.card-grid-2xN {
|
||||
/* 2 equal columns and any number of auto-sized rows. */
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-auto-rows: auto;
|
||||
gap: 40px;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
/* Switch to 1-column layout on smaller widths */
|
||||
@@ -142,16 +152,21 @@ section {
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
/* Switch to 1-column layout on smaller widths */
|
||||
grid-template-columns: 1fr;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 40px;
|
||||
border: 0;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: 20px;
|
||||
.card {
|
||||
padding: 20px;
|
||||
border: 0;
|
||||
min-height: 264px;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
min-height: 347px;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
@@ -167,7 +182,6 @@ section {
|
||||
}
|
||||
|
||||
// New Page Layouts ---------------------------------------------------------------
|
||||
$columns: 12; // Number of columns in the grid system
|
||||
|
||||
.container-new {
|
||||
display: flex;
|
||||
@@ -180,65 +194,11 @@ $columns: 12; // Number of columns in the grid system
|
||||
max-width: 608px;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
max-width: 832px;
|
||||
max-width: 942px;
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
max-width: 1280px;
|
||||
}
|
||||
// create columns
|
||||
@for $width from 1 through $columns {
|
||||
.col-new-#{$width} {
|
||||
flex-basis: $width / $columns * 100%;
|
||||
}
|
||||
}
|
||||
.margin-col {
|
||||
@include media-breakpoint-down(lg) {
|
||||
margin: 24px 0;
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin: 0 0 40px;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin: 40px;
|
||||
}
|
||||
}
|
||||
.col-new {
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
margin: 0 0 40px;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
margin: 24px 0;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin: 24px;
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
margin: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-new {
|
||||
padding: 32px;
|
||||
--width: 4;
|
||||
}
|
||||
.col-new-card {
|
||||
transition: all 0.15s ease-out;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
box-shadow: 0px 5px 40px 0px $black;
|
||||
color: $white;
|
||||
&:hover {
|
||||
-webkit-transform: translateY(-16px);
|
||||
-moz-transform: translateY(-16px);
|
||||
-ms-transform: translateY(-16px);
|
||||
-o-transform: translateY(-16px);
|
||||
transform: translateY(-16px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 3-column layout for docs pages ----------------------------------------------
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
#advanced-features {
|
||||
$feature-cards: ["pink-purple", "neutral-blue", "light-green", "orange", "purple-blue-2"];
|
||||
@for $i from 1 through 5 {
|
||||
.col-new-card:nth-child(#{$i}) {
|
||||
.card:nth-child(#{$i}) .card-footer {
|
||||
background-image: url("../img/cards/3col-#{nth($feature-cards, $i)}.svg");
|
||||
}
|
||||
}
|
||||
@@ -50,7 +50,7 @@
|
||||
#get-started {
|
||||
$gs-cards: ["orange-yellow", "magenta-orange", "purple-blue-green", "light-blue", "green-blue"];
|
||||
@for $i from 1 through 5 {
|
||||
.col-new-card:nth-child(#{$i}) {
|
||||
.card:nth-child(#{$i}) .card-footer {
|
||||
background-image: url("../img/cards/3col-#{nth($gs-cards, $i)}.svg");
|
||||
}
|
||||
}
|
||||
@@ -189,14 +189,18 @@
|
||||
"xrplorer": "green-purple"
|
||||
) {
|
||||
##{$company} {
|
||||
background-image: url("../img/cards/3col-#{$card-graphic}.svg");
|
||||
.card-footer {
|
||||
background-image: url("../img/cards/3col-#{$card-graphic}.svg");
|
||||
}
|
||||
.biz-logo {
|
||||
content: url("../img/uses/#{$company}.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
#raisedinspace {
|
||||
background-image: url(../img/cards/3col-orange-yellow-2.svg);
|
||||
.card-footer {
|
||||
background-image: url(../img/cards/3col-orange-yellow-2.svg);
|
||||
}
|
||||
.biz-logo {
|
||||
content: url(../img/uses/raised.png);
|
||||
}
|
||||
@@ -362,11 +366,15 @@
|
||||
border-radius: $border-radius-sm;
|
||||
padding: 2rem;
|
||||
padding-right: 3rem; // don't overlap chevron
|
||||
margin-bottom: 1.5rem;
|
||||
// margin-bottom: 1.5rem; // this is enough space when a banner isn't active
|
||||
margin-bottom: 3.5rem; // give space so anchor-fix doesn't block clicks
|
||||
|
||||
width: 100%;
|
||||
|
||||
> a {
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
@@ -394,6 +402,16 @@
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
// Stop anchor-fix from blocking clicks on earlier FAQ items
|
||||
&::before {
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
}
|
||||
> a {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.chevron {
|
||||
|
||||
@@ -96,3 +96,14 @@ html.light {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.page-faq,
|
||||
.mini-faq {
|
||||
.q-wrapper .chevron {
|
||||
top: $banner-top-offset;
|
||||
}
|
||||
}
|
||||
|
||||
.page-calculator #calculator-mobile-toggle.show {
|
||||
top: ($banner-top-offset + 4px)
|
||||
}
|
||||
|
||||
@@ -527,10 +527,10 @@
|
||||
|
||||
// nav "hero" images
|
||||
#top-nav-hero-docs {
|
||||
content: url(../img/icons/docs.svg);
|
||||
content: url("../img/icons/docs.svg");
|
||||
}
|
||||
#top-nav-hero-contribute {
|
||||
content: url(assets/img/icons/contribute.svg);
|
||||
content: url("../img/icons/contribute.svg");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -330,12 +330,7 @@ aside .active > a:hover {
|
||||
}
|
||||
|
||||
// Layout elements -------------------------------------------------------------
|
||||
.container-new .col-new-card {
|
||||
box-shadow: $light-box-shadow;
|
||||
color: $light-fg;
|
||||
}
|
||||
|
||||
.card {
|
||||
.card, .cta-card {
|
||||
color: $light-fg;
|
||||
background-color: $light-standout-bg;
|
||||
box-shadow: $light-box-shadow;
|
||||
@@ -353,6 +348,7 @@ aside .active > a:hover {
|
||||
.q-wrapper {
|
||||
background-color: $light-standout-bg;
|
||||
color: $light-fg;
|
||||
box-shadow: $light-box-shadow;
|
||||
|
||||
> a.expander:hover {
|
||||
color: $light-fg;
|
||||
@@ -563,7 +559,7 @@ pre code {
|
||||
"ripple": "blue-light-blue",
|
||||
"xrplorer": "green-purple"
|
||||
) {
|
||||
##{$company} {
|
||||
##{$company} .card-footer {
|
||||
background-image: url("../img/cards/lightmode/3col-#{$card-graphic}.svg");
|
||||
}
|
||||
}
|
||||
@@ -584,14 +580,16 @@ pre code {
|
||||
}
|
||||
// non-SVG logos:
|
||||
#raisedinspace {
|
||||
background-image: url(../img/cards/lightmode/3col-orange-yellow-2.svg);
|
||||
.card-footer {
|
||||
background-image: url("../img/cards/lightmode/3col-orange-yellow-2.svg");
|
||||
}
|
||||
.biz-logo {
|
||||
content: url(../img/uses/lightmode/raised.png);
|
||||
content: url("../img/uses/lightmode/raised.png");
|
||||
}
|
||||
}
|
||||
#towo {
|
||||
.biz-logo {
|
||||
content: url(../img/uses/lightmode/towo.png);
|
||||
content: url("../img/uses/lightmode/towo.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
</section>
|
||||
|
||||
<section class="container-new py-26">
|
||||
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 bg-grey-800 text-center">
|
||||
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 cta-card">
|
||||
<img src="./img/backgrounds/cta-calculator-green.svg" class="cta cta-bottom-right">
|
||||
<div class="z-index-1 position-relative">
|
||||
<h2 class="h4 mb-10-until-sm mb-8-sm">{% trans %}How Does XRP Compare to Other Currencies?{% endtrans %}</h2>
|
||||
|
||||
@@ -83,7 +83,7 @@
|
||||
</div>
|
||||
</section>
|
||||
<section class="container-new py-26">
|
||||
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 bg-grey-800 text-center">
|
||||
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 cta-card">
|
||||
<img src="./img/backgrounds/cta-community-purple.svg" class="d-none-sm cta cta-top-left">
|
||||
<img src="./img/backgrounds/cta-community-green.svg" class="cta cta-bottom-right">
|
||||
<div class="z-index-1 position-relative">
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
{% block main %}
|
||||
<section class="py-26 text-center">
|
||||
<div class="col-xl-4 col-lg-6 mx-auto text-center">
|
||||
<div class="d-flex flex-column-reverse">
|
||||
<div class="d-flex flex-column-reverse w-100">
|
||||
<h1 class="mb-18">{% trans %}What Would You Like to Learn?{% endtrans %}</h1>
|
||||
<h6 class="eyebrow mb-3">{% trans %}XRP Ledger Documentation{% endtrans %}</h6>
|
||||
</div>
|
||||
@@ -44,7 +44,7 @@
|
||||
</section>
|
||||
|
||||
<section class="container-new mb-50-until-sm" id="software-and-sdks">
|
||||
<div class="d-flex flex-column-reverse col-sm-8">
|
||||
<div class="d-flex flex-column-reverse w-100">
|
||||
<h2 class="h4">{% trans %}Software and SDKs{% endtrans %}</h2>
|
||||
<h6 class="eyebrow mb-3">{% trans %}Start Developing{% endtrans %}</h6>
|
||||
</div>
|
||||
@@ -61,7 +61,7 @@
|
||||
</section><!--/#software-and-sdks-->
|
||||
|
||||
<section class="container-new mb-50-until-sm" id="doc-types">
|
||||
<div class="d-flex flex-column-reverse col-sm-8">
|
||||
<div class="d-flex flex-column-reverse w-100">
|
||||
<h2 class="h4">{% trans %}Article types{% endtrans %}</h2>
|
||||
<h6 class="eyebrow mb-3">{% trans %}Dive In{% endtrans %}</h6>
|
||||
</div>
|
||||
@@ -72,7 +72,7 @@
|
||||
</section><!--/#doc-types-->
|
||||
|
||||
<section class="container-new mb-50-until-sm" id="run-a-network-node">
|
||||
<div class="d-flex flex-column-reverse col-sm-8">
|
||||
<div class="d-flex flex-column-reverse w-100">
|
||||
<h2 class="h4">{% trans %}Run an XRP Ledger network node{% endtrans %}</h2>
|
||||
<h6 class="eyebrow mb-3">{% trans %}Participate in the Network{% endtrans %}</h6>
|
||||
</div>
|
||||
@@ -86,7 +86,7 @@
|
||||
</section><!--/#run-a-network-node-->
|
||||
|
||||
<section class="container-new mb-50-until-sm" id="docs-hot-topic">
|
||||
<div class="d-flex flex-column-reverse col-sm-8">
|
||||
<div class="d-flex flex-column-reverse w-100">
|
||||
<h2 class="h4">{% trans %}NFTs{% endtrans %}</h2>
|
||||
<h6 class="eyebrow mb-3">{% trans %}Hot Topic{% endtrans %}</h6>
|
||||
</div>
|
||||
@@ -105,7 +105,7 @@
|
||||
</section><!--/#docs-hot-topic-->
|
||||
|
||||
<section class="container-new mb-50-until-sm doc-index">
|
||||
<div class="d-flex flex-column-reverse col-sm-8">
|
||||
<div class="d-flex flex-column-reverse w-100">
|
||||
<h2 id="full-doc-index" class="h4">{% trans %}Full documentation index{% endtrans %}</h2>
|
||||
<h6 class="eyebrow mb-3">{% trans %}See Everything{% endtrans %}</h6>
|
||||
</div>
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
</section>
|
||||
|
||||
<section class="container-new py-26">
|
||||
<div class="d-flex flex-column-reverse col-sm-8 p-0 mx-10-until-md">
|
||||
<div class="d-flex flex-column-reverse col-sm-8 p-0">
|
||||
<h3 class="h4 h2-sm">{% trans %}Why developers choose the XRP Ledger{% endtrans %}</h3>
|
||||
<h6 class="eyebrow mb-3">{% trans %}Discover Benefits{% endtrans %}</h6>
|
||||
</div>
|
||||
@@ -71,7 +71,7 @@
|
||||
"description": _("8+ years of consistent performance over more than 63 million ledgers")},
|
||||
] %}
|
||||
{% for card in cards %}
|
||||
<li class="col-new ls-none">
|
||||
<li class="col ls-none">
|
||||
<img id="{{card.id}}" alt="{{card.title}} Icon">
|
||||
<h4 class="mt-3 mb-0 h5">{{card.title}}</h4>
|
||||
<p class="mt-6-until-sm mt-3 mb-0">{{card.description}}</p>
|
||||
@@ -81,11 +81,11 @@
|
||||
</section>
|
||||
|
||||
<section class="container-new py-26">
|
||||
<div class="d-flex flex-column-reverse col-sm-8 p-0 mx-10-until-md">
|
||||
<div class="d-flex flex-column-reverse col-sm-8 p-0">
|
||||
<h3 class="h4 h2-sm">{% trans %}Activate the power of the XRP Ledger and find the building blocks for your next innovation{% endtrans %}</h3>
|
||||
<h6 class="eyebrow mb-3">{% trans %}Explore Advanced Features{% endtrans %}</h6>
|
||||
</div>
|
||||
<div class="mt-10 card-grid card-grid-3xN" id="advanced-features">
|
||||
<div class="row row-cols-1 row-cols-lg-3 card-deck mt-10" id="advanced-features">
|
||||
{% set cards2 = [
|
||||
{ "href": "decentralized-exchange.html",
|
||||
"title": _("Decentralized Exchange"),
|
||||
@@ -103,23 +103,25 @@
|
||||
"title": _("Issued Currencies"),
|
||||
"description": _("All currencies other than XRP can be represented in the XRP Ledger as issued currencies, sometimes called “IOUs”")},
|
||||
] %}
|
||||
{% for card in cards2 %}
|
||||
<a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" href="{{card.href}}">
|
||||
<span class="card-new d-block">
|
||||
<h4 class="h5">{{card.title}}</h4>
|
||||
<p class="mt-6 mb-8">{{card.description}}</p>
|
||||
</span>
|
||||
|
||||
{% for card in cards2 %}
|
||||
<a class="card" href="{{target.prefix}}{{card.href}}">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title h5">{{card.title}}</h4>
|
||||
<p class="card-text">{{card.description}}</p>
|
||||
</div>
|
||||
<div class="card-footer"> </div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container-new py-26">
|
||||
<div class="d-flex flex-column-reverse col-sm-8 p-0 mx-10-until-md">
|
||||
<div class="d-flex flex-column-reverse col-sm-8 p-0">
|
||||
<h3 class="h4 h2-sm">{% trans %}Choose a path to start building on the XRPL{% endtrans %}</h3>
|
||||
<h6 class="eyebrow mb-3">{% trans %}Get Started{% endtrans %}</h6>
|
||||
</div>
|
||||
<div class="mt-10 card-grid card-grid-3xN" id="get-started">
|
||||
<div class="row row-cols-1 row-cols-lg-3 card-deck mt-10" id="get-started">
|
||||
{% set cards3 = [
|
||||
{ "href": "get-started.html",
|
||||
"title": _("Quickstart"),
|
||||
@@ -138,18 +140,19 @@
|
||||
"description": _("See what your peers have built on the XRPL")},
|
||||
] %}
|
||||
{% for card in cards3 %}
|
||||
<a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="{{card.id}}" href="{{card.href}}">
|
||||
<span class="card-new d-block">
|
||||
<h4 class="h5">{{card.title}}</h4>
|
||||
<p class="mt-6 mb-8">{{card.description}}</p>
|
||||
</span>
|
||||
<a class="card" id="{{card.id}}" href="{{target.prefix}}{{card.href}}">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title h5">{{card.title}}</h4>
|
||||
<p class="card-text">{{card.description}}</p>
|
||||
</div>
|
||||
<div class="card-footer"> </div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container-new py-26">
|
||||
<div class="col-lg-6 offset-lg-3 p-6-sm p-10-until-sm br-8 bg-grey-800 text-center">
|
||||
<div class="col-lg-6 offset-lg-3 p-6-sm p-10-until-sm br-8 cta-card">
|
||||
<img src="./img/backgrounds/cta-home-purple.svg" class="d-none-sm cta cta-top-left">
|
||||
<img src="./img/backgrounds/cta-home-green.svg" class="cta cta-bottom-right">
|
||||
<div class="z-index-1 position-relative">
|
||||
@@ -161,7 +164,7 @@
|
||||
</section>
|
||||
|
||||
<section class="container-new py-26">
|
||||
<div class="d-flex flex-column-reverse col-sm-8 p-0 mx-10-until-md">
|
||||
<div class="d-flex flex-column-reverse col-sm-8 p-0">
|
||||
<h3 class="h4 h2-sm">{% trans %}Explore what the community is building to enable new features and use cases on XRPL{% endtrans %}</h3>
|
||||
<h6 class="eyebrow mb-3">{% trans %}Preview New Features{% endtrans %}</h6>
|
||||
</div>
|
||||
@@ -181,7 +184,7 @@
|
||||
"href": "https://dev.to/ripplexdev/a-vision-for-federated-sidechains-on-the-xrp-ledger-2o7o"},
|
||||
] %}
|
||||
{% for feat in features %}
|
||||
<li class="col-new ls-none pt-2">
|
||||
<li class="col ls-none pt-2">
|
||||
<a class="label chip-green" href="{{feat.href}}">{{feat.chip}}</a>
|
||||
<h4 class="mt-3 mb-0 h5">{{feat.title}}</h4>
|
||||
<p class="mt-6-until-sm mt-3 mb-0">{{feat.description}}</p>
|
||||
@@ -191,7 +194,7 @@
|
||||
</section>
|
||||
|
||||
<section class="container-new py-26">
|
||||
<div class="col-md-6 offset-md-3 p-8-sm p-10-until-sm br-8 bg-grey-800 text-center">
|
||||
<div class="col-md-6 offset-md-3 p-8-sm p-10-until-sm br-8 cta-card">
|
||||
<img src="./img/backgrounds/cta-home-magenta.svg" class="cta cta-bottom-right">
|
||||
<div class="z-index-1 position-relative">
|
||||
<div class="d-flex flex-column-reverse">
|
||||
|
||||
@@ -55,13 +55,13 @@
|
||||
|
||||
<section class="container-new py-26">
|
||||
<div class="mt-10 card-grid card-grid-2xN">
|
||||
<div class="col-new ls-none mb-16-sm">
|
||||
<div class="col ls-none mb-16-sm">
|
||||
<h2 class="h4 h2-sm mb-8">{% trans %}Building for the Future{% endtrans %}</h2>
|
||||
<h5 class="longform mb-10">{% trans %}Digital assets and blockchain technology are the future of finance. Open and decentralized, they offer the first-ever global standards for value exchange broadly—whether it’s money, stocks, loyalty points, intellectual property or more.{% endtrans %}</h5>
|
||||
<p class="mb-6">{% trans %}This has spawned increasing adoption of the technology across the financial services industry, from retail and institutional investment to commercial use cases like CBDCs, NFTs and cross-border payments.{% endtrans %}</p>
|
||||
<p class="mb-0">{% trans %}With usage growing, it’s critical that measures are taken today to ensure that the technology is environmentally sustainable tomorrow.{% endtrans %}</p>
|
||||
</div>
|
||||
<div class="col-new ls-none mb-16-sm">
|
||||
<div class="col ls-none mb-16-sm">
|
||||
<div class="col-md-8 mx-auto pl-0-sm pr-0-sm">
|
||||
<h6 class="mb-10-until-sm mb-8-sm">{% trans %}Projected BTC, ETH and XRP Transactions in USD{% endtrans %}</h6>
|
||||
<div class="mb-10">
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
"description": _("The CBDC Private Ledger provides Central Banks a secure, controlled, and flexible solution to issue and manage Central Bank Issued Digital Currencies (CBDCs).")},
|
||||
] %}
|
||||
{% for use in uses %}
|
||||
<li class="col-new ls-none">
|
||||
<li class="col ls-none">
|
||||
<img id="{{use.id}}" alt="{{use.title}} icon">
|
||||
<h4 class="mt-3 mb-0 h5">{{use.title}}</h4>
|
||||
<p class="mt-6-until-sm mt-3 mb-0">{{use.description}}</p>
|
||||
@@ -67,7 +67,7 @@
|
||||
</div>
|
||||
|
||||
<section class="container-new py-26">
|
||||
<div class="col-sm-7">
|
||||
<div class="col-sm-7 p-0">
|
||||
<div class="d-flex flex-column-reverse">
|
||||
<h3 class="h4 h2-sm">{% trans %}Businesses and projects running<br class="until-sm"> on the XRP Ledger{% endtrans %}</h3>
|
||||
<h6 class="eyebrow mb-3">{% trans %}Solving Real Problems Across Industries{% endtrans %}</h6>
|
||||
@@ -133,14 +133,15 @@
|
||||
"description": _("Xrplorer offers services and tools that help prevent and combat fraudulent activity on the XRPL as well as custom APIs and analytics that supplement the XRPL APIs where they are not enough.")},
|
||||
] %}
|
||||
|
||||
<div class="mt-10 card-grid card-grid-3xN">
|
||||
<div class="row row-cols-1 row-cols-lg-3 card-deck">
|
||||
{% for card in cards %}
|
||||
<a class="col-new col-new-card ls-none bg-grey-800 br-8" href="{{card.link}}" target="_blank" id="{{card.id}}">
|
||||
<span class="card-new d-block">
|
||||
<a class="card" href="{{card.link}}" target="_blank" id="{{card.id}}">
|
||||
<div class="card-body">
|
||||
<img class="mw-100 mb-3 biz-logo" alt="{{card.name|default(card.id)}}">
|
||||
<h4 class="h5">{{card.title}}</h4>
|
||||
<p class="mt-6 mb-8">{{card.description}}</p>
|
||||
</span>
|
||||
<h4 class="card-title h5">{{card.title}}</h4>
|
||||
<p class="card-text">{{card.description}}</p>
|
||||
</div>
|
||||
<div class="card-footer"> </div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
|
||||
<section class="container-new my-20">
|
||||
<div class="card-grid card-grid-1x2">
|
||||
<div class="margin-col d-none-sm mt-lg-0">
|
||||
<div class="d-none-sm mt-lg-0">
|
||||
<ul class="page-toc no-sideline p-0 sticky-top floating-nav">
|
||||
{% set links = [
|
||||
{ "hash": _("#about-xrp"),
|
||||
@@ -51,7 +51,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-new mt-lg-0">
|
||||
<div class="col mt-lg-0">
|
||||
<div class="link-section pb-26" id="about-xrp">
|
||||
<h2 class="h4 h2-sm mb-8">{% trans %}What Is XRP?{% endtrans %}</h2>
|
||||
<h5 class="longform mb-10">{% trans %}XRP is a digital asset that’s native to the XRP Ledger—an open-source, permissionless and decentralized <a href="https://www.distributedagreement.com/2018/09/24/what-is-a-blockchain/" target="_blank">blockchain technology.</a>{% endtrans %}</h5>
|
||||
@@ -103,7 +103,7 @@
|
||||
<p>{% trans %}Use XRP to move different currencies around the world. {% endtrans %}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 p-10 br-8 bg-grey-800 text-center position-relative">
|
||||
<div class="mt-10 p-10 br-8 cta-card position-relative">
|
||||
<img src="./img/backgrounds/cta-xrp-overview-magenta.svg" class="cta cta-bottom-right">
|
||||
<div class="z-index-1 position-relative">
|
||||
<h2 class="h4 mb-10-until-sm mb-8-sm">{% trans %}XRP was designed with sustainability in mind.{% endtrans %}</h2>
|
||||
@@ -124,7 +124,7 @@
|
||||
<h2 class="h4 h2-sm mb-8">{% trans %}What Is the Relationship Between Ripple and XRP?{% endtrans %}</h2>
|
||||
<h5 class="longform mb-10">{% trans %}<a href="https://ripple.com" target="_blank">Ripple</a> is a technology company that makes it easier to build a high-performance, global payments business. XRP is a digital asset independent of this.{% endtrans %}</h5>
|
||||
<p>{% trans %}There is a finite amount of XRP. All XRP is already in existence today—no more than the original 100 billion can be created. The XRPL founders gifted 80 billion XRP, the platform’s native currency, to Ripple. To provide predictability to the XRP supply, Ripple has locked 55 billion XRP (55% of the total possible supply) into a series of escrows using the XRP Ledger itself. The XRPL's transaction processing rules, enforced by the consensus protocol, control the release of the XRP.{% endtrans %}</p>
|
||||
<div class="mt-10 p-10 br-8 bg-grey-800 text-center position-relative">
|
||||
<div class="mt-10 p-10 br-8 cta-card position-relative">
|
||||
<img src="./img/backgrounds/cta-xrp-overview-green-2.svg" class="landing-bg cta cta-bottom-right">
|
||||
<div class="z-index-1 position-relative">
|
||||
<h3 class="h4">{% trans %}As of <span class="stat-highlight" id="ripple-escrow-as-of">December 2017</span> <br/>
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
</section>
|
||||
|
||||
<section class="container-new py-26">
|
||||
<h3 class="h4 h2-sm mx-10-until-md">{% trans %}Key Areas of Focus{% endtrans %}</h3>
|
||||
<h3 class="h4 h2-sm">{% trans %}Key Areas of Focus{% endtrans %}</h3>
|
||||
<ul class="mt-10 card-grid card-grid-3xN mb-0">
|
||||
{% set features = [
|
||||
{ "title": _("Core Technology"),
|
||||
@@ -58,7 +58,7 @@
|
||||
"description": _("Support development of tools and platforms for financial inclusion globally.") },
|
||||
] %}
|
||||
{% for feat in features %}
|
||||
<li class="col-new ls-none">
|
||||
<li class="col ls-none">
|
||||
<h3 class="mb-0 h5">{{feat.title}}</h3>
|
||||
<p class="mt-8-until-sm mt-3 mb-0">{{feat.description}}</p>
|
||||
</li>
|
||||
@@ -67,7 +67,7 @@
|
||||
</section>
|
||||
|
||||
<section class="container-new py-26">
|
||||
<div class="mx-10-until-md">
|
||||
<div>
|
||||
<h2 class="h4 h2-sm mb-20-until-sm">{% trans %}XRP Ledger Foundation Values and Beliefs{% endtrans %}</h2>
|
||||
<h4 class="h5 mb-3-sm-i mt-10">{% trans %}We Value:{% endtrans %}</h4>
|
||||
</div>
|
||||
@@ -78,11 +78,11 @@
|
||||
{ "description": _("Cultivating a diverse developer ecosystem, where many entities contribute to and benefit from the XRP Ledger") },
|
||||
] %}
|
||||
{% for val in values %}
|
||||
<li class="col-new ls-none">{{val.description}}</li>
|
||||
<li class="col ls-none">{{val.description}}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<div class="mx-10-until-md">
|
||||
<div>
|
||||
<h4 class="h5 mb-3-sm-i">{% trans %}We Believe:{% endtrans %}</h4>
|
||||
</div>
|
||||
<ul class="card-grid card-grid-3xN">
|
||||
@@ -91,13 +91,13 @@
|
||||
{ "description": _("Close working relationships between developers and organizations that build on and contribute to the XRP Ledger are critical to its innovation and success") },
|
||||
] %}
|
||||
{% for belief in beliefs %}
|
||||
<li class="col-new ls-none">{{belief.description}}</li>
|
||||
<li class="col ls-none">{{belief.description}}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="container-new py-26">
|
||||
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 bg-grey-800 text-center">
|
||||
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 cta-card">
|
||||
<img src="./img/backgrounds/cta-foundation-orange.svg" class="cta cta-top-left">
|
||||
<img src="./img/backgrounds/cta-foundation-magenta.svg" class="cta cta-bottom-right">
|
||||
<div class="z-index-1 position-relative">
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
|
||||
<section class="container-new py-26">
|
||||
<div class="card-grid card-grid-2xN">
|
||||
<div class="col-new">
|
||||
<div class="col">
|
||||
<div class="d-flex flex-column-reverse">
|
||||
<h2 class="h4 h2-sm mb-8">{% trans %}How the Consensus Protocol works{% endtrans %}</h2>
|
||||
<h6 class="eyebrow mb-3">{% trans %}Consensus{% endtrans %}</h6>
|
||||
@@ -58,14 +58,14 @@
|
||||
<p class="mb-6">{% trans %}All servers in the network process each transaction according to the same rules, and any transaction that follows the protocol is confirmed right away. All transactions are public, with strong cryptography to guarantee the integrity of the system.{% endtrans %}</p>
|
||||
<p class="mb-0">{% trans %}Anyone can operate a validator; currently, over 150 <a href="https://livenet.xrpl.org/network/validators" target="_blank">validators</a> are active on the ledger, operated by universities, exchanges, businesses, and individuals. Additionally, the consensus protocol ensures the blockchain becomes more decentralized over time as the validator pool grows.{% endtrans %}</p>
|
||||
</div>
|
||||
<div class="col-new mb-16-sm">
|
||||
<div class="col mb-16-sm">
|
||||
<img class="mw-100" id="validator-graphic" alt="(Graphic: Validators in Consensus)">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container-new py-26">
|
||||
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 bg-grey-800 text-center">
|
||||
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 cta-card">
|
||||
<img src="./img/backgrounds/cta-xrpl-overview-green.svg" class="cta cta-bottom-right">
|
||||
<div class="z-index-1 position-relative">
|
||||
<h2 class="h4 mb-10-until-sm mb-8-sm">{% trans %}A Greener Blockchain{% endtrans %}</h2>
|
||||
@@ -77,7 +77,7 @@
|
||||
|
||||
<section class="container-new py-26">
|
||||
<div class="card-grid card-grid-2xN">
|
||||
<div class="col-new">
|
||||
<div class="col">
|
||||
<div class="d-flex flex-column-reverse">
|
||||
<h4 class="h4 h2-sm mb-8">{% trans %}XRPL provides powerful utility across the blockchain space{% endtrans %}</h4>
|
||||
<h6 class="eyebrow mb-3">{% trans %}XRPL Today{% endtrans %}</h6>
|
||||
@@ -86,7 +86,7 @@
|
||||
<p class="mb-10">{% trans %}With the XRPL, these developers are building innovative projects and applications across blockchain use cases including tokenization of assets, online gaming, asset custody, NFTs, and DeFi.{% endtrans %}</p>
|
||||
<a class="btn btn-primary btn-arrow mb-10-sm" href="uses.html">{% trans %}Explore More{% endtrans %}</a>
|
||||
</div>
|
||||
<div class="col-new mb-0">
|
||||
<div class="col mb-0">
|
||||
<div class="d-flex flex-column-reverse">
|
||||
<h4 class="h4 h2-sm mb-8">{% trans %}Fulfilling the vision of the XRPL community{% endtrans %}</h4>
|
||||
<h6 class="eyebrow mb-3">{% trans %}XRPL Tomorrow{% endtrans %}</h6>
|
||||
@@ -98,7 +98,7 @@
|
||||
</section>
|
||||
|
||||
<section class="container-new py-26">
|
||||
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 bg-grey-800 text-center">
|
||||
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 cta-card">
|
||||
<img src="./img/backgrounds/cta-xrpl-overview-orange.svg" class="cta cta-bottom-right">
|
||||
<div class="z-index-1 position-relative">
|
||||
<h4 class="h4 mb-10-until-sm mb-8-sm">{% trans %}Tomorrow’s Blockchain Starts With You{% endtrans %}</h4>
|
||||
@@ -121,11 +121,11 @@
|
||||
{% for faq in faqs %}
|
||||
<div class="q-wrapper">
|
||||
<a href="#heading{{loop.index}}" class="expander collapsed" data-toggle="collapse" data-target="#answer{{loop.index}}" aria-expanded="false" aria-controls="answer{{loop.index}}">
|
||||
<h4 id="heading{{loop.index}}">
|
||||
<h4 id="heading{{loop.index}}">
|
||||
{{faq.question}}
|
||||
<span class="chevron"><span></span><span></span></span>
|
||||
</a>
|
||||
</h4>
|
||||
</h4>
|
||||
</a>
|
||||
<div id="answer{{loop.index}}" class="answer-wrapper collapse" aria-labelledby="heading{{loop.index}}">
|
||||
<p>{{faq.answer}}</p>
|
||||
</div><!--/.answer-wrapper {{loop.index}} -->
|
||||
|
||||
Reference in New Issue
Block a user