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

qa changes

Browse Source
This commit is contained in:
akcodez
2023-06-05 11:17:42 -07:00
parent 1aae81c39a
commit 2a3da0cba6
3 changed files with 222 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/devportal2022-v18.css
View File

File diff suppressed because one or more lines are too long

400
styles/_pages.scss
View File

@@ -31,7 +31,9 @@
} }
#benefits-list { #benefits-list {
@each $benefit in "public", "streamlined", "performance", "low-cost", "community", "reliability" { @each $benefit in "public", "streamlined", "performance", "low-cost",
"community", "reliability"
{
##{$benefit} { ##{$benefit} {
content: url("../img/icons/#{$benefit}.svg"); content: url("../img/icons/#{$benefit}.svg");
} }
@@ -39,7 +41,8 @@
} }
#advanced-features { #advanced-features {
$feature-cards: ["pink-purple", "neutral-blue", "light-green", "orange", "purple-blue-2"]; $feature-cards: [ "pink-purple", "neutral-blue", "light-green", "orange",
"purple-blue-2"];
@for $i from 1 through 5 { @for $i from 1 through 5 {
.card:nth-child(#{$i}) .card-footer { .card:nth-child(#{$i}) .card-footer {
background-image: url("../img/cards/3col-#{nth($feature-cards, $i)}.svg"); background-image: url("../img/cards/3col-#{nth($feature-cards, $i)}.svg");
@@ -48,7 +51,8 @@
} }
#get-started { #get-started {
$gs-cards: ["orange-yellow", "magenta-orange", "purple-blue-green", "light-blue", "green-blue"]; $gs-cards: [ "orange-yellow", "magenta-orange", "purple-blue-green",
"light-blue", "green-blue"];
@for $i from 1 through 5 { @for $i from 1 through 5 {
.card:nth-child(#{$i}) .card-footer { .card:nth-child(#{$i}) .card-footer {
background-image: url("../img/cards/3col-#{nth($gs-cards, $i)}.svg"); background-image: url("../img/cards/3col-#{nth($gs-cards, $i)}.svg");
@@ -57,7 +61,6 @@
} }
} }
.cta { .cta {
position: absolute; position: absolute;
&-top-left { &-top-left {
@@ -74,7 +77,7 @@
.landing-bg { .landing-bg {
opacity: 0.6; opacity: 0.6;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
opacity: 1.0; opacity: 1;
} }
} }
@@ -92,7 +95,7 @@
background-position-y: top; background-position-y: top;
opacity: 0.6; opacity: 0.6;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
opacity: 1.0; opacity: 1;
} }
} }
} }
@@ -120,7 +123,9 @@
#top-exchanges { #top-exchanges {
// Vector logos // Vector logos
@each $exchange in "bitstamp", "kraken", "cex-io", "liquid", "lmax", "bitfinex", "etoro" { @each $exchange in "bitstamp", "kraken", "cex-io", "liquid", "lmax",
"bitfinex", "etoro"
{
#exch-#{$exchange} { #exch-#{$exchange} {
content: url("../img/exchanges/#{$exchange}.svg"); content: url("../img/exchanges/#{$exchange}.svg");
} }
@@ -161,7 +166,6 @@
} }
.page-uses { .page-uses {
.container-new { .container-new {
padding-left: 16px; padding-left: 16px;
padding-right: 16px; padding-right: 16px;
@@ -177,7 +181,7 @@
} }
.card-grid { .card-grid {
grid-gap: 8px grid-gap: 8px;
} }
.card-grid img { .card-grid img {
@@ -263,7 +267,11 @@
/*color: $gray-300;*/ /*color: $gray-300;*/
color: $gray-300; color: $gray-300;
} }
.light {
.category-checkbox label {
color: #ffffff;
}
}
.category-checkbox { .category-checkbox {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -275,7 +283,8 @@
padding-left: 26px; padding-left: 26px;
} }
.category_count { .category_count {
padding: 0px 8px; margin-left: 8px;
padding: 2px 16px;
width: 24px; width: 24px;
height: 16px; height: 16px;
background: $blue-purple-800; background: $blue-purple-800;
@@ -291,65 +300,56 @@
top: 10px; top: 10px;
} }
@each $usecase in "infrastructure", "developer_tooling", "interoperability",
@each $usecase in "infrastructure", "wallet", "nfts", "exchanges", "gaming", "security", "payments",
"developer_tooling", "web_monetization", "sustainability", "cbdc", "other", "carbon_markets",
"interoperability", "custody", "defi"
"wallet", {
"nfts",
"exchanges",
"gaming",
"security",
"payments",
"web_monetization",
"sustainability",
"cbdc",
"other",
"carbon_markets",
"custody",
"defi" {
##{$usecase} { ##{$usecase} {
content: url("../img/icons/usecases/ic_#{$usecase}.png"); content: url("../img/icons/usecases/ic_#{$usecase}.png");
} }
} }
// logos for cards // logos for cards
// $type incase png or jpg is needed. // $type incase png or jpg is needed.
@each $company,$type in ( @each $company,
"bithomp": 'svg', $type
"onthedex": "svg", in (
"gatehub": "svg", "bithomp": "svg",
"towo-labs": "svg", "onthedex": "svg",
"xrp-toolkit": "svg", "gatehub": "svg",
"xrpl-org-ledger-explorer": "svg", "towo-labs": "svg",
"xrpl-rosetta": "svg", "xrp-toolkit": "svg",
"xrpscan": "svg", "xrpl-org-ledger-explorer": "svg",
"evernode": "svg", "xrpl-rosetta": "svg",
"cryptum": "svg", "xrpscan": "svg",
"x-tokenize": "svg", "evernode": "svg",
"multichain": "svg", "cryptum": "svg",
"xumm-wallet": "svg", "x-tokenize": "svg",
"gem-wallet": "svg", "multichain": "svg",
"aesthetes": "svg", "xumm-wallet": "svg",
"audiotarky": "svg", "gem-wallet": "svg",
"xrp-cafe": "svg", "aesthetes": "svg",
"nft-master": "svg", "audiotarky": "svg",
"onxrp": "svg", "xrp-cafe": "svg",
"peerkat": "svg", "nft-master": "svg",
"sologenic-nft": "svg", "onxrp": "svg",
"sologenic-dex": "svg", "peerkat": "svg",
"xp-market": "svg", "sologenic-nft": "svg",
"ledger-city": "svg", "sologenic-dex": "svg",
"forte": "svg", "xp-market": "svg",
"anchain-ai": "svg", "ledger-city": "svg",
"coil": "svg", "forte": "svg",
"carbonland-trust": "svg", "anchain-ai": "svg",
"casino-coin": "svg", "coil": "svg",
"bitgo": "svg", "carbonland-trust": "svg",
"bitpay": "svg", "casino-coin": "svg",
"ripples-on-demand-liquidity": "svg", "bitgo": "svg",
"ripples-cbdc-platform": "svg", "bitpay": "svg",
) { "ripples-on-demand-liquidity": "svg",
"ripples-cbdc-platform": "svg"
)
{
#use_case_companies_list { #use_case_companies_list {
##{$company} { ##{$company} {
.biz-logo { .biz-logo {
@@ -358,12 +358,9 @@
} }
} }
} }
} }
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
h1 { h1 {
font-size: 62px; font-size: 62px;
} }
@@ -377,16 +374,13 @@
} }
.card-grid { .card-grid {
grid-gap: 48px grid-gap: 48px;
} }
.card-uses { .card-uses {
padding: 24px; padding: 24px;
} }
} }
} }
// End UseCases // End UseCases
@@ -443,7 +437,6 @@
} }
.page-impact { .page-impact {
#map-light { #map-light {
display: none; display: none;
} }
@@ -461,7 +454,6 @@
} }
.page-funding { .page-funding {
.funding-list { .funding-list {
@each $funding in "funding-01", "funding-02", "funding-03", "funding-04" { @each $funding in "funding-01", "funding-02", "funding-03", "funding-04" {
##{$funding} { ##{$funding} {
@@ -476,9 +468,9 @@
left: -4px; left: -4px;
} }
// even out height on large // even out height on large
@media (min-width: 992px) { @media (min-width: 992px) {
.funding-box{ .funding-box {
min-height: 200px; min-height: 200px;
} }
} }
@@ -486,69 +478,72 @@
// Ambassadors // Ambassadors
.page-ambassadors { .page-ambassadors {
#benefits-list {
#benefits-list { @each $benefits in "benefits-01", "benefits-02", "benefits-03",
@each $benefits in "benefits-01", "benefits-02", "benefits-03", "benefits-04", "benefits-05", "benefits-06" { "benefits-04", "benefits-05", "benefits-06"
##{$benefits} { {
content: url("../img/ambassadors/#{$benefits}.svg"); ##{$benefits} {
} content: url("../img/ambassadors/#{$benefits}.svg");
} }
} }
}
#eligibility-list { #eligibility-list {
@each $eligibility in "eligibility-01", "eligibility-02", "eligibility-03", "eligibility-04", "eligibility-05" { @each $eligibility in "eligibility-01", "eligibility-02", "eligibility-03",
##{$eligibility} { "eligibility-04", "eligibility-05"
content: url("../img/ambassadors/#{$eligibility}.svg"); {
} ##{$eligibility} {
content: url("../img/ambassadors/#{$eligibility}.svg");
} }
} }
}
// Button has link out arrow. // Button has link out arrow.
.btn { .btn {
padding: .75rem; padding: 0.75rem;
} }
#container-scroll { #container-scroll {
height:160px; height: 160px;
position:relative; position: relative;
overflow:hidden; overflow: hidden;
margin-top: 80px; margin-top: 80px;
margin-bottom: 64px; margin-bottom: 64px;
} }
.photobanner { .photobanner {
position:absolute; position: absolute;
top:0px; top: 0px;
left:0px; left: 0px;
overflow:hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
animation: bannermove 40s linear infinite; animation: bannermove 40s linear infinite;
} }
.photobanner-bottom { .photobanner-bottom {
top:112px; top: 112px;
} }
.photobanner img { .photobanner img {
margin: 0 0.5em margin: 0 0.5em;
} }
@keyframes bannermove { @keyframes bannermove {
0% { 0% {
transform: translate(0, 0); transform: translate(0, 0);
} }
100% { 100% {
transform: translate(-50%, 0); transform: translate(-50%, 0);
} }
} }
// Sliding Quotes // Sliding Quotes
#carouselSlidesOnly{ #carouselSlidesOnly {
height: 392px; height: 392px;
margin-bottom: 40px; margin-bottom: 40px;
} }
@media (min-width: 992px) { @media (min-width: 992px) {
#carouselSlidesOnly{ #carouselSlidesOnly {
height: 320px; height: 320px;
margin-bottom: 104px; margin-bottom: 104px;
} }
@@ -557,7 +552,7 @@
h6 { h6 {
font-size: 1.25rem; font-size: 1.25rem;
} }
// Arrow links after text // Arrow links after text
.btn-arrow::after { .btn-arrow::after {
display: inline-block; display: inline-block;
content: url(../img/icons/arrow-right-purple.svg); content: url(../img/icons/arrow-right-purple.svg);
@@ -576,7 +571,6 @@
background-position: left 4px bottom 4px; background-position: left 4px bottom 4px;
transform: translateX(4px); transform: translateX(4px);
} }
} }
// Community Page // Community Page
@@ -594,12 +588,12 @@
// Events page // Events page
.page-events { .page-events {
#event-hero-image { #event-hero-image {
height: 100%; height: 100%;
min-height: 209px; min-height: 209px;
background: url(../img/events/event-hero1@2x.png); background: url(../img/events/event-hero1@2x.png);
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
#events-orange { #events-orange {
position: absolute; position: absolute;
@@ -608,109 +602,108 @@
} }
.event-hero { .event-hero {
color: $gray-100; color: $gray-100;
p { p {
font-weight: 500; font-weight: 500;
font-size: 24px; font-size: 24px;
line-height: 32px; line-height: 32px;
} }
} }
.event-save-date { .event-save-date {
color: $white; color: $white;
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 20px;
line-height: 26px; line-height: 26px;
} }
.event-small-gray { .event-small-gray {
color: $gray-200; color: $gray-200;
} }
// Button has link out arrow. // Button has link out arrow.
.btn { .btn {
padding: .75rem; padding: 0.75rem;
} }
.event-card { .event-card {
max-width: 311px; max-width: 311px;
margin: 32px auto; margin: 32px auto;
transition: all 0.35s ease-out; transition: all 0.35s ease-out;
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-clip: border-box;
background-color: $card-bg;
box-shadow: 0px 5px 40px $black;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 8px;
font-size: 16px;
line-height: 24px;
color: $gray-200;
.event-card-header {
position: relative; position: relative;
display: flex; height: 176px;
flex-direction: column; background-size: contain !important;
min-width: 0; width: 100%;
word-wrap: break-word; border-radius: 8px 8px 0 0;
background-clip: border-box; }
background-color: $card-bg; .event-card-title {
box-shadow: 0px 5px 40px $black; position: absolute;
bottom: 32px;
padding: 0 32px;
color: $gray-100;
border: 1px solid rgba(0, 0, 0, 0.125); font-weight: bold;
border-radius: 8px; font-size: 20px;
line-height: 28px;
}
font-size: 16px; .event-card-body {
line-height: 24px; padding: 32px;
color: $gray-200; }
.event-card-header { .event-card-footer {
position: relative; padding: 0 32px 32px;
height: 176px; }
background-size: contain !important;
width: 100%;
border-radius: 8px 8px 0 0;
}
.event-card-title { .event-card-footer .icon::before {
position: absolute; height: 24px;
bottom: 32px; width: 24px;
padding: 0 32px; content: "";
color: $gray-100; margin-right: 8px;
background-size: contain;
background-repeat: no-repeat;
}
font-weight: bold; .icon-date::before {
font-size: 20px; background: url(../img/events/event-date.svg);
line-height: 28px; }
} .icon-location::before {
background: url(../img/events/event-location.svg);
.event-card-body { }
padding: 32px;
}
.event-card-footer {
padding: 0 32px 32px;
}
.event-card-footer .icon::before {
height: 24px;
width: 24px;
content: "";
margin-right: 8px;
background-size: contain;
background-repeat: no-repeat;
}
.icon-date::before {
background: url(../img/events/event-date.svg);
}
.icon-location::before {
background: url(../img/events/event-location.svg);
}
} //end event card } //end event card
@media (min-width: 992px) { @media (min-width: 992px) {
.event-card { .event-card {
max-width: 347px; max-width: 347px;
margin: 32px; margin: 32px;
} }
.event-card-header { .event-card-header {
height: 197px !important; height: 197px !important;
} }
} }
a.event-card:hover { a.event-card:hover {
transform: translateY(-16px); transform: translateY(-16px);
text-decoration: none; text-decoration: none;
} }
label { label {
margin: 0; margin: 0;
padding-left: 8px; padding-left: 8px;
@@ -730,7 +723,6 @@
// -webkit-filter: opacity(0.4); // -webkit-filter: opacity(0.4);
// } // }
.events-filter[type="checkbox"]::before { .events-filter[type="checkbox"]::before {
position: relative; position: relative;
display: block; display: block;
@@ -781,7 +773,6 @@
border-radius: 4px; border-radius: 4px;
} }
.events-filter[type="checkbox"]:not(:disabled):checked:hover::after { .events-filter[type="checkbox"]:not(:disabled):checked:hover::after {
background-image: url(../img/events/event-check.svg); background-image: url(../img/events/event-check.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -792,7 +783,6 @@
border-radius: 4px; border-radius: 4px;
} }
.events-filter[type="checkbox"]:not(:disabled):hover::before { .events-filter[type="checkbox"]:not(:disabled):hover::before {
background: $gray-900; background: $gray-900;
border: none; border: none;
@@ -807,13 +797,8 @@
border-color: $blue-purple-600; border-color: $blue-purple-600;
border-radius: 4px; border-radius: 4px;
} }
} }
#find-us-on-platforms .card-deck { #find-us-on-platforms .card-deck {
.card:nth-child(1) .card-footer { .card:nth-child(1) .card-footer {
background-image: url(../img/cards/4col-light-blue-3.svg); background-image: url(../img/cards/4col-light-blue-3.svg);
@@ -840,14 +825,11 @@
background-image: url(../img/cards/4col-orange-2.svg); background-image: url(../img/cards/4col-orange-2.svg);
} }
.card { .card {
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
} }
} }
.page-faq { .page-faq {
&::before { &::before {
background-image: url(../img/backgrounds/faq-bg.svg); background-image: url(../img/backgrounds/faq-bg.svg);
@@ -966,7 +948,6 @@
right: 2rem; right: 2rem;
} }
} }
} }
} }
@@ -979,12 +960,12 @@
.center-search { .center-search {
.input-group-text { .input-group-text {
height: 56px; height: 56px;
padding: .75rem .75rem .75rem 1rem; padding: 0.75rem 0.75rem 0.75rem 1rem;
line-height: 2rem; line-height: 2rem;
} }
.ds-input { .ds-input {
height: 56px; height: 56px;
padding: .75rem 1rem .75rem .5rem; padding: 0.75rem 1rem 0.75rem 0.5rem;
} }
} }
@@ -1025,7 +1006,6 @@
.page-docs-index, .page-docs-index,
.page-community { .page-community {
#community-heading { #community-heading {
padding-top: 2.5rem; padding-top: 2.5rem;
padding-bottom: 5rem; padding-bottom: 5rem;
@@ -1068,9 +1048,6 @@
top: 120px; top: 120px;
right: 0%; right: 0%;
} }
} }
#run-a-network-node .card-deck { #run-a-network-node .card-deck {
@@ -1096,7 +1073,6 @@
padding-bottom: 104px; padding-bottom: 104px;
} }
.text-cards { .text-cards {
grid-gap: 40px; grid-gap: 40px;
@@ -1170,13 +1146,14 @@
padding-bottom: 208px; padding-bottom: 208px;
} }
} }
} }
.page-community { .page-community {
@each $platform in "github", "twitch", "stack-overflow", "twitter", "discord", "youtube", "devto" { @each $platform in "github", "twitch", "stack-overflow", "twitter", "discord",
"youtube", "devto"
{
#platform-#{$platform} { #platform-#{$platform} {
content: url("../img/logos/#{$platform}.svg") content: url("../img/logos/#{$platform}.svg");
} }
} }
} }
@@ -1209,7 +1186,6 @@
} }
} }
.page-dev-tools { .page-dev-tools {
@each $tool, @each $tool,
$card-graphic $card-graphic
@@ -1288,7 +1264,7 @@ html.light {
.nav-link { .nav-link {
color: $black; color: $black;
} }
#trasaction-sender .card-footer{ #trasaction-sender .card-footer {
background-image: url("../img/cards/3-col-light-blue-2.svg"); background-image: url("../img/cards/3-col-light-blue-2.svg");
} }
} }

16
template/page-uses.html.jinja
View File

@@ -74,14 +74,6 @@
"category_name": "Carbon Markets/Sustainability", "category_name": "Carbon Markets/Sustainability",
"link": "https://www.carbonlandtrust.com/", "link": "https://www.carbonlandtrust.com/",
}, },
{
"id": "casino-coin",
"title": _("Casino Coin"),
"description": _("CasinoCoin (CSC) is a digital currency developed specifically for the regulated gaming industry."),
"category_id": "other",
"category_name": "Other",
"link": "https://casinocoin.im/",
},
{ {
"id": "cryptum", "id": "cryptum",
"title": _("Cryptum"), "title": _("Cryptum"),
@@ -274,6 +266,14 @@
"category_name": "Wallet", "category_name": "Wallet",
"link": "https://xumm.app/#team", "link": "https://xumm.app/#team",
}, },
{
"id": "casino-coin",
"title": _("Casino Coin"),
"description": _("CasinoCoin (CSC) is a digital currency developed specifically for the regulated gaming industry."),
"category_id": "other",
"category_name": "Other",
"link": "https://casinocoin.im/",
},
] %} ] %}