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

scss spacing fix

Browse Source
This commit is contained in:
jonathanlei
2022-08-26 15:39:17 -07:00
parent 5093af7ce5
commit 195cd83134
1 changed files with 185 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

367
styles/_pages.scss
View File

@@ -31,9 +31,7 @@
} }
#benefits-list { #benefits-list {
@each $benefit in "public", "streamlined", "performance", "low-cost", @each $benefit in "public", "streamlined", "performance", "low-cost", "community", "reliability" {
"community", "reliability"
{
##{$benefit} { ##{$benefit} {
content: url("../img/icons/#{$benefit}.svg"); content: url("../img/icons/#{$benefit}.svg");
} }
@@ -41,8 +39,7 @@
} }
#advanced-features { #advanced-features {
$feature-cards: [ "pink-purple", "neutral-blue", "light-green", "orange", $feature-cards: ["pink-purple", "neutral-blue", "light-green", "orange", "purple-blue-2"];
"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");
@@ -51,8 +48,7 @@
} }
#get-started { #get-started {
$gs-cards: [ "orange-yellow", "magenta-orange", "purple-blue-green", $gs-cards: ["orange-yellow", "magenta-orange", "purple-blue-green", "light-blue", "green-blue"];
"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");
@@ -61,6 +57,7 @@
} }
} }
.cta { .cta {
position: absolute; position: absolute;
&-top-left { &-top-left {
@@ -77,7 +74,7 @@
.landing-bg { .landing-bg {
opacity: 0.6; opacity: 0.6;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
opacity: 1; opacity: 1.0;
} }
} }
@@ -95,7 +92,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; opacity: 1.0;
} }
} }
} }
@@ -123,9 +120,7 @@
#top-exchanges { #top-exchanges {
// Vector logos // Vector logos
@each $exchange in "bitstamp", "kraken", "cex-io", "liquid", "lmax", @each $exchange in "bitstamp", "kraken", "cex-io", "liquid", "lmax", "bitfinex", "etoro" {
"bitfinex", "etoro"
{
#exch-#{$exchange} { #exch-#{$exchange} {
content: url("../img/exchanges/#{$exchange}.svg"); content: url("../img/exchanges/#{$exchange}.svg");
} }
@@ -175,29 +170,24 @@
&::before { &::before {
background-image: url(../img/backgrounds/use-cases-blue.svg); background-image: url(../img/backgrounds/use-cases-blue.svg);
} }
@each $usecase in "micropayments", "wallets", "exchanges", "stablecoins", @each $usecase in "micropayments", "wallets", "exchanges", "stablecoins", "nft", "defi", "cbdc" {
"nft", "defi", "cbdc"
{
##{$usecase} { ##{$usecase} {
content: url("../img/icons/#{$usecase}.svg"); content: url("../img/icons/#{$usecase}.svg");
} }
} }
@each $company, @each $company,$card-graphic in (
$card-graphic "bitgo": "magenta-3",
in ( "bitpay": "blue-green",
"bitgo": "magenta-3", "coil": "purple-blue",
"bitpay": "blue-green", "exodus": "green",
"coil": "purple-blue", "forte": "light-blue-2",
"exodus": "green", "gatehub": "orange-3",
"forte": "light-blue-2", "ripple": "blue-light-blue",
"gatehub": "orange-3", "towo": "purple",
"ripple": "blue-light-blue", "xrpl-labs": "magenta-2",
"towo": "purple", "xrplorer": "green-purple"
"xrpl-labs": "magenta-2", ) {
"xrplorer": "green-purple"
)
{
##{$company} { ##{$company} {
.card-footer { .card-footer {
background-image: url("../img/cards/3col-#{$card-graphic}.svg"); background-image: url("../img/cards/3col-#{$card-graphic}.svg");
@@ -282,29 +272,26 @@
// Ambassadors // Ambassadors
.page-ambassadors { .page-ambassadors {
#benefits-list {
@each $benefits in "benefits-01", "benefits-02", "benefits-03", #benefits-list {
"benefits-04", "benefits-05", "benefits-06" @each $benefits in "benefits-01", "benefits-02", "benefits-03", "benefits-04", "benefits-05", "benefits-06" {
{ ##{$benefits} {
##{$benefits} { content: url("../img/ambassadors/#{$benefits}.svg");
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: 0.75rem; padding: .75rem;
} }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
@@ -329,47 +316,48 @@
background-position: left 4px bottom 4px; background-position: left 4px bottom 4px;
} }
#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;
} }
@@ -378,7 +366,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);
@@ -397,6 +385,7 @@
background-position: left 4px bottom 4px; background-position: left 4px bottom 4px;
transform: translateX(4px); transform: translateX(4px);
} }
} }
// Community Page // Community Page
@@ -414,12 +403,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;
@@ -428,107 +417,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-400; color: $gray-400;
} }
.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;
height: 176px; display: flex;
background-size: contain !important; flex-direction: column;
width: 100%; min-width: 0;
border-radius: 8px 8px 0 0; word-wrap: break-word;
} background-clip: border-box;
.event-card-title { background-color: $card-bg;
position: absolute; box-shadow: 0px 5px 40px $black;
bottom: 32px;
padding: 0 32px;
color: $gray-100;
font-weight: bold; border: 1px solid rgba(0, 0, 0, 0.125);
font-size: 20px; border-radius: 8px;
line-height: 28px;
}
.event-card-body { font-size: 16px;
padding: 32px; line-height: 24px;
} color: $gray-200;
.event-card-footer { .event-card-header {
padding: 0 32px 32px; position: relative;
} height: 176px;
background-size: contain !important;
width: 100%;
border-radius: 8px 8px 0 0;
}
.event-card-footer .icon::before { .event-card-title {
height: 24px; position: absolute;
width: 24px; bottom: 32px;
content: ""; padding: 0 32px;
margin-right: 8px; color: $gray-100;
background-size: contain;
background-repeat: no-repeat;
}
.icon-date::before { font-weight: bold;
background: url(../img/events/event-date.svg); font-size: 20px;
} 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;
color: $white; color: $white;
} }
.events-filter h6 { .events-filter h6 {
@@ -545,7 +535,7 @@
display: block; display: block;
width: 20px; width: 20px;
height: 20px; height: 20px;
content: ""; content: "";
background: $blue-purple-500; background: $blue-purple-500;
border-radius: 4px; border-radius: 4px;
@@ -554,17 +544,17 @@
border-style: solid; border-style: solid;
border-color: $blue-purple-500; border-color: $blue-purple-500;
} }
.events-filter[type="checkbox"]::after { .events-filter[type="checkbox"]::after {
position: relative; position: relative;
display: block; display: block;
top: -20px; top: -20px;
width: 20px; width: 20px;
height: 20px; height: 20px;
content: ""; content: "";
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
border-radius: 4px; border-radius: 4px;
@@ -572,11 +562,11 @@
border-style: solid; border-style: solid;
border-color: $blue-purple-500; border-color: $blue-purple-500;
} }
// .events-filter[type="checkbox"]:disabled::after { // .events-filter[type="checkbox"]:disabled::after {
// -webkit-filter: opacity(0.4); // -webkit-filter: opacity(0.4);
// } // }
.events-filter[type="checkbox"]:checked::after { .events-filter[type="checkbox"]:checked::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;
@@ -586,7 +576,7 @@
border-color: $blue-purple-500; border-color: $blue-purple-500;
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;
@@ -596,7 +586,7 @@
border-color: $blue-purple-500; border-color: $blue-purple-500;
border-radius: 4px; border-radius: 4px;
} }
.events-filter[type="checkbox"]:not(:disabled):hover::after { .events-filter[type="checkbox"]:not(:disabled):hover::after {
background: $blue-purple-600; background: $blue-purple-600;
border-width: 1px; border-width: 1px;
@@ -604,7 +594,7 @@
border-color: $blue-purple-600; border-color: $blue-purple-600;
border-radius: 4px; border-radius: 4px;
} }
.events-filter[type="checkbox"]:not(:disabled):hover::before { .events-filter[type="checkbox"]:not(:disabled):hover::before {
background: $blue-purple-600; background: $blue-purple-600;
border-width: 1px; border-width: 1px;
@@ -612,8 +602,14 @@
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);
@@ -640,11 +636,14 @@
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);
@@ -762,6 +761,7 @@
right: 2rem; right: 2rem;
} }
} }
} }
} }
@@ -773,12 +773,12 @@
.center-search { .center-search {
.input-group-text { .input-group-text {
height: 56px; height: 56px;
padding: 0.75rem 0.75rem 0.75rem 1rem; padding: .75rem .75rem .75rem 1rem;
line-height: 2rem; line-height: 2rem;
} }
.ds-input { .ds-input {
height: 56px; height: 56px;
padding: 0.75rem 1rem 0.75rem 0.5rem; padding: .75rem 1rem .75rem .5rem;
} }
} }
@@ -834,6 +834,7 @@
.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;
@@ -855,7 +856,7 @@
-o-transition: all 0.1s ease; -o-transition: all 0.1s ease;
transition: all 0.1s ease; transition: all 0.1s ease;
} }
.one { .one {
top: 160px; top: 160px;
left: 0%; left: 0%;
@@ -876,6 +877,9 @@
top: 120px; top: 120px;
right: 0%; right: 0%;
} }
} }
#run-a-network-node .card-deck { #run-a-network-node .card-deck {
@@ -901,6 +905,7 @@
padding-bottom: 104px; padding-bottom: 104px;
} }
.text-cards { .text-cards {
grid-gap: 40px; grid-gap: 40px;
@@ -915,7 +920,7 @@
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
background: none !important; background: none !important;
} }
@@ -966,14 +971,13 @@
padding-bottom: 208px; padding-bottom: 208px;
} }
} }
} }
.page-community { .page-community {
@each $platform in "github", "twitch", "stack-overflow", "twitter", "discord", @each $platform in "github", "twitch", "stack-overflow", "twitter", "discord", "youtube", "devto" {
"youtube", "devto"
{
#platform-#{$platform} { #platform-#{$platform} {
content: url("../img/logos/#{$platform}.svg"); content: url("../img/logos/#{$platform}.svg")
} }
} }
} }
@@ -1006,7 +1010,9 @@
} }
} }
.page-calculator { .page-calculator {
.calculator-section-description { .calculator-section-description {
max-width: 458px; max-width: 458px;
} }
@@ -1015,7 +1021,7 @@
margin-right: 1px; margin-right: 1px;
} }
#data-selector li a { #data-selector li a {
background: #22252b; background: #22252B;
padding: 0.5rem 1.3rem; padding: 0.5rem 1.3rem;
color: $white; color: $white;
white-space: nowrap; white-space: nowrap;
@@ -1050,7 +1056,7 @@
margin-bottom: 32px; margin-bottom: 32px;
} }
@include media-breakpoint-down(xs) { @include media-breakpoint-down(xs) {
display: block; display: block
} }
} }
@@ -1125,7 +1131,7 @@
width: 100%; width: 100%;
} }
} }
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl){
#data-selector li:first-child a { #data-selector li:first-child a {
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
@@ -1153,12 +1159,8 @@
margin-right: -1px; margin-right: -1px;
} }
@keyframes fadeIn { @keyframes fadeIn {
0% { 0% { opacity: 0 }
opacity: 0; 100% { opacity: 1 }
}
100% {
opacity: 1;
}
} }
.dot { .dot {
height: 2px; height: 2px;
@@ -1172,10 +1174,10 @@
transform-origin: center center; transform-origin: center center;
} }
#kWh-btc-dot { #kWh-btc-dot {
background-color: #ff671a; background-color: #FF671A;
} }
#kWh-eth-dot { #kWh-eth-dot {
background-color: #4f5664; background-color: #4F5664;
} }
#kWh-xrp-dot { #kWh-xrp-dot {
background-color: $primary; background-color: $primary;
@@ -1192,7 +1194,7 @@
.dash:before { .dash:before {
// content: url(../img/icons/dash-line.png); // content: url(../img/icons/dash-line.png);
content: "|"; content: '|';
font-size: 7px; font-size: 7px;
font-weight: bold; font-weight: bold;
color: $gray-500; color: $gray-500;
@@ -1201,22 +1203,23 @@
margin-left: 13px; margin-left: 13px;
} }
input[type="range"] {
input[type=range] {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */ -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 100%; /* Specific width is required for Firefox. */ width: 100%; /* Specific width is required for Firefox. */
background: transparent; /* Otherwise white in Chrome */ background: transparent; /* Otherwise white in Chrome */
z-index: 2; z-index: 2;
} }
input[type="range"]::-webkit-slider-thumb { input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
} }
input[type="range"]:focus { input[type=range]:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */ outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
} }
input[type="range"]::-ms-track { input[type=range]::-ms-track {
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;