mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-20 03:35:51 +00:00
Merge branch 'refresh_2021' into docs_landing
This commit is contained in:
mDuo13
@@ -20,7 +20,7 @@ button[disabled="disabled"] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-outline-secondary,
|
||||
// .btn-outline-secondary,
|
||||
.content a.button,
|
||||
.navbar-dark .navbar-nav .nav-link.btn-outline-secondary {
|
||||
color: $white;
|
||||
@@ -52,6 +52,39 @@ p + .readmore {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: $blue-purple-500;
|
||||
font-weight: bold;
|
||||
color: $white;
|
||||
border: none;
|
||||
border-color: transparent;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem 1rem;
|
||||
line-height: 16px;
|
||||
&::after {
|
||||
display: inline-block;
|
||||
content: url(../../img/icons/arrow-right.svg);
|
||||
vertical-align: middle;
|
||||
padding-left: 8px;
|
||||
-webkit-transition: transform 0.3s ease-out;
|
||||
-moz-transition: transform 0.3s ease-out;
|
||||
-ms-transition: transform 0.3s ease-out;
|
||||
-o-transition: transform 0.3s ease-out;
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
&:hover {
|
||||
background: $blue-purple-500 !important;
|
||||
border: none;
|
||||
&::after {
|
||||
-webkit-transform: translateX(4px);
|
||||
-moz-transform: translateX(4px);
|
||||
-ms-transform: translateX(4px);
|
||||
-o-transform: translateX(4px);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* (Jump to) "Top" button */
|
||||
|
||||
.jump-to-top {
|
||||
@@ -68,3 +101,4 @@ p + .readmore {
|
||||
content: " ↑"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
38
styles/_cards.scss
Normal file
38
styles/_cards.scss
Normal file
@@ -0,0 +1,38 @@
|
||||
.card {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.card-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
.card-b {
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
opacity: 1;
|
||||
// background: rgba(34, 37, 43, 0.5);
|
||||
// backdrop-filter: blur(3px);
|
||||
transition: all 0.35s ease-in-out;
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin: 10px;
|
||||
}
|
||||
&.not-hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
// .section-marker {
|
||||
// position: absolute;
|
||||
// font-size: 0.875rem;
|
||||
// transform: rotate(90deg);
|
||||
// font-weight: normal;
|
||||
// top: calc(50% - 64px);
|
||||
// margin-left: -32px;
|
||||
// transform-origin: top left;
|
||||
// }
|
||||
@include media-breakpoint-down(md) {
|
||||
.card-deck {
|
||||
display: block !important;
|
||||
}
|
||||
.card-deck .card {
|
||||
margin-bottom: 2.5rem !important;
|
||||
}
|
||||
}
|
||||
35
styles/_chips.scss
Normal file
35
styles/_chips.scss
Normal file
@@ -0,0 +1,35 @@
|
||||
.chip {
|
||||
display: inline;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 100px;
|
||||
&-red-purple {
|
||||
color: $red-purple-300;
|
||||
background-color: $red-purple-900;
|
||||
}
|
||||
&-orange {
|
||||
color: $orange-300;
|
||||
background-color: $orange-900;
|
||||
}
|
||||
&-green {
|
||||
color: $green-500;
|
||||
background-color: $green-1000;
|
||||
}
|
||||
&-blue-purple {
|
||||
color: $blue-purple-300;
|
||||
background-color: $blue-purple-900;
|
||||
}
|
||||
&-magenta {
|
||||
color: $magenta-300;
|
||||
background-color: $magenta-900;
|
||||
}
|
||||
&-blue {
|
||||
color: $blue-300;
|
||||
background-color: $blue-900;
|
||||
}
|
||||
&-yellow {
|
||||
color: $yellow-300;
|
||||
background-color: $yellow-900;
|
||||
}
|
||||
}
|
||||
@@ -88,47 +88,6 @@ a.card,
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
|
||||
/* Cards ------------------------------- */
|
||||
.card {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.card-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
.card-b {
|
||||
padding: 2rem;
|
||||
background: rgba(34, 37, 43, 0.5);
|
||||
backdrop-filter: blur(3px);
|
||||
border-radius: 8px;
|
||||
opacity: 1;
|
||||
transition: all 0.35s ease-in-out;
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin: 10px;
|
||||
}
|
||||
&.not-hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
.section-marker {
|
||||
position: absolute;
|
||||
font-size: 0.875rem;
|
||||
transform: rotate(90deg);
|
||||
font-weight: normal;
|
||||
top: calc(50% - 64px);
|
||||
margin-left: -32px;
|
||||
transform-origin: top left;
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
.card-deck {
|
||||
display: block !important;
|
||||
}
|
||||
.card-deck .card {
|
||||
margin-bottom: 2.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover anchors ---------------
|
||||
.hover_anchor {
|
||||
visibility: hidden;
|
||||
|
||||
@@ -5,10 +5,10 @@ body {
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: $base-size;
|
||||
background: #000;
|
||||
background-color: #000;
|
||||
background: $gray-900;
|
||||
background-color: $gray-900;
|
||||
line-height: 1.5;
|
||||
color: #FFF;
|
||||
color: $white;
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
}
|
||||
|
||||
@@ -23,19 +23,94 @@ h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
font-weight: bold;
|
||||
}
|
||||
// h1, .h1 {
|
||||
// font-size: 2.625rem;
|
||||
// }
|
||||
// h6, .h6 {
|
||||
// font-size: 1.125rem;
|
||||
// }
|
||||
// .h6 {
|
||||
// font-size: 1.125rem !important;
|
||||
// }
|
||||
// p {
|
||||
// line-height: 1.5;
|
||||
// }
|
||||
h1, .h1 {
|
||||
font-size: 2.625rem;
|
||||
font-size: 3.875rem;
|
||||
line-height: 70px;
|
||||
@media (max-width: 480px) {
|
||||
font-size: 2.625rem;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
h2, .h2 {
|
||||
font-size: 3.5rem;
|
||||
line-height: 62px;
|
||||
@include media-breakpoint-down(sm) {
|
||||
font-size: 1.75rem;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
h3, .h3 {
|
||||
font-size: 3rem;
|
||||
line-height: 52px;
|
||||
@include media-breakpoint-down(sm) {
|
||||
font-size: 1.25rem;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
h4, .h4 {
|
||||
font-size: 2rem;
|
||||
line-height: 38px;
|
||||
@include media-breakpoint-down(sm) {
|
||||
font-size: 1.125rem;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
h5, .h5 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 32px;
|
||||
@include media-breakpoint-down(sm) {
|
||||
font-size: 1rem;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
h6, .h6 {
|
||||
font-size: 1.125rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: 26px;
|
||||
@include media-breakpoint-down(sm) {
|
||||
font-size: 1rem;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
.h6 {
|
||||
font-size: 1.125rem !important;
|
||||
.longform {
|
||||
font-size: 1.5rem;
|
||||
line-height: 32px;
|
||||
color: $gray-100;
|
||||
font-weight: normal;
|
||||
@include media-breakpoint-down(sm) {
|
||||
font-size: 1rem;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
.numbers {
|
||||
font-size: 6rem;
|
||||
line-height: 104px;
|
||||
font-weight: bold;
|
||||
color: $white;
|
||||
@include media-breakpoint-down(sm) {
|
||||
font-size: 3.875rem;
|
||||
line-height: 70px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: $gray-200;
|
||||
font-size: 1rem;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
// text-decoration: underline;
|
||||
color: inherit;
|
||||
@@ -44,7 +119,7 @@ a {
|
||||
}
|
||||
}
|
||||
p a {
|
||||
text-decoration: underline;
|
||||
color: $blue-purple-400;
|
||||
}
|
||||
|
||||
.fs-base {
|
||||
@@ -113,11 +188,11 @@ p a {
|
||||
font-family: 'Work Sans', 'Noto Sans JP', sans-serif;
|
||||
}
|
||||
|
||||
.section-marker {
|
||||
transform: unset;
|
||||
writing-mode: vertical-rl;
|
||||
font-family: 'Work Sans', 'Noto Sans JP', sans-serif;
|
||||
}
|
||||
// .section-marker {
|
||||
// transform: unset;
|
||||
// writing-mode: vertical-rl;
|
||||
// font-family: 'Work Sans', 'Noto Sans JP', sans-serif;
|
||||
// }
|
||||
|
||||
&.page-calculator #data-selector li a {
|
||||
padding: 0.5rem 1.1rem;
|
||||
|
||||
@@ -33,6 +33,30 @@
|
||||
|
||||
/* SPACING HELPERS */
|
||||
/* To create new margin classes, multiply by 4px */
|
||||
.ml-5 {
|
||||
margin-left: 1.25rem;
|
||||
&-until-md {
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-left: 1.25rem;
|
||||
margin-right: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mr-5 {
|
||||
margin-right: 1.25rem;
|
||||
&-until-md {
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-left: 1.25rem;
|
||||
margin-right: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mb-6 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.mt-6 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.mb-8 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
@@ -51,10 +75,32 @@
|
||||
.mb-10 {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.ml-10 {
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
.mr-10 {
|
||||
margin-right: 2.5rem;
|
||||
}
|
||||
.my-10 {
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.mx-10 {
|
||||
margin-left: 2.5rem;
|
||||
margin-right: 2.5rem;
|
||||
&-until-sm {
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin-left: 2.5rem;
|
||||
margin-right: 2.5rem;
|
||||
}
|
||||
}
|
||||
&-sm {
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin-left: 2.5rem;
|
||||
margin-right: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mt-12 {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
@@ -79,6 +125,11 @@
|
||||
}
|
||||
.mb-16 {
|
||||
margin-bottom: 4rem;
|
||||
&-sm {
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mb-18 {
|
||||
margin-bottom: 4.5rem;
|
||||
@@ -108,6 +159,10 @@
|
||||
margin-top: 5rem;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
.my-26 {
|
||||
margin-top: 6.5rem;
|
||||
margin-bottom: 6.5rem;
|
||||
}
|
||||
.mb-30 {
|
||||
margin-bottom: 7.5rem;
|
||||
}
|
||||
@@ -146,6 +201,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.p-40 {
|
||||
padding: 40px;
|
||||
}
|
||||
.py-20 {
|
||||
padding-bottom: 5rem;
|
||||
padding-top: 5rem;
|
||||
@@ -156,6 +214,10 @@
|
||||
.pb-20 {
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
.py-26 {
|
||||
padding-top: 6.5rem;
|
||||
padding-bottom: 6.5rem;
|
||||
}
|
||||
.pt-30 {
|
||||
padding-top: 7.5rem;
|
||||
}
|
||||
@@ -249,6 +311,9 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.d-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* COLOR ELEMENTS */
|
||||
.border-green {
|
||||
@@ -266,3 +331,15 @@
|
||||
.grey-700 {
|
||||
color: $gray-700;
|
||||
}
|
||||
.bg-grey-800 {
|
||||
background-color: $gray-800;
|
||||
}
|
||||
.green-500 {
|
||||
color: $green-500;
|
||||
}
|
||||
|
||||
/* ETC */
|
||||
.br-8 {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
@@ -127,6 +127,9 @@ section {
|
||||
/* Switch to 1-column layout on smaller widths */
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.col-new {
|
||||
margin: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.card-grid-3xN {
|
||||
@@ -136,6 +139,25 @@ section {
|
||||
|
||||
/* No "hero" blocks expected here. */
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card-grid-2xN {
|
||||
/* 2 equal columns and any number of auto-sized rows. */
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-auto-rows: auto;
|
||||
|
||||
/* No "hero" blocks expected here. */
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
/* Switch to 1-column layout on smaller widths */
|
||||
grid-template-columns: 1fr;
|
||||
@@ -177,6 +199,112 @@ section {
|
||||
|
||||
}
|
||||
|
||||
// New Page Layouts ---------------------------------------------------------------
|
||||
$columns: 12; // Number of columns in the grid system
|
||||
|
||||
.container-new {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 auto;
|
||||
max-width: 960px;
|
||||
@include media-breakpoint-down(xxl) {
|
||||
max-width: 1280px;
|
||||
}
|
||||
@include media-breakpoint-down(xl) {
|
||||
max-width: 1040px;
|
||||
}
|
||||
@include media-breakpoint-down(lg) {
|
||||
max-width: 832px;
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
max-width: 608px;
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
max-width: 416px;
|
||||
}
|
||||
// create columns
|
||||
@for $width from 1 through $columns {
|
||||
.col-new-#{$width} {
|
||||
flex-basis: $width / $columns * 100%;
|
||||
}
|
||||
}
|
||||
.col-new {
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
margin: 24px;
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin: 0 0 40px;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin: 40px;
|
||||
}
|
||||
|
||||
&#pink-purple {
|
||||
background-image: url(../../img/cards/pink-purple.svg);
|
||||
}
|
||||
&#neutral-blue {
|
||||
background-image: url(../../img/cards/neutral-blue.svg);
|
||||
}
|
||||
&#light-green {
|
||||
background-image: url(../../img/cards/light-green.svg);
|
||||
}
|
||||
&#orange {
|
||||
background-image: url(../../img/cards/orange.svg);
|
||||
}
|
||||
&#orange-yellow {
|
||||
background-image: url(../../img/cards/orange-yellow.svg);
|
||||
}
|
||||
&#orange-yellow-2 {
|
||||
background-image: url(../../img/cards/orange-yellow-2.svg);
|
||||
}
|
||||
&#magenta-orange {
|
||||
background-image: url(../../img/cards/magenta-orange.svg);
|
||||
}
|
||||
&#blue-green {
|
||||
background-image: url(../../img/cards/blue-green.svg);
|
||||
}
|
||||
&#light-blue {
|
||||
background-image: url(../../img/cards/light-blue.svg);
|
||||
}
|
||||
&#green-blue {
|
||||
background-image: url(../../img/cards/green-blue.svg);
|
||||
}
|
||||
&#green-purple {
|
||||
background-image: url(../../img/cards/green-purple.svg);
|
||||
}
|
||||
&#purple-blue {
|
||||
background-image: url(../../img/cards/purple-blue.svg);
|
||||
}
|
||||
&#blue-light-blue {
|
||||
background-image: url(../../img/cards/blue-light-blue.svg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.card-new {
|
||||
padding: 32px;
|
||||
--width: 4;
|
||||
}
|
||||
.col-new-card {
|
||||
transition: all 0.35s ease-out;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
-webkit-transform: translateY(-16px);
|
||||
-moz-transform: translateY(-16px);
|
||||
-ms-transform: translateY(-16px);
|
||||
-o-transform: translateY(-16px);
|
||||
transform: translateY(-16px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Grid Box Vertical numbers ------------------------------------------------ */
|
||||
.flag-vertical {
|
||||
color: $gray-200;
|
||||
@@ -195,6 +323,7 @@ section {
|
||||
}
|
||||
|
||||
// Misc. layout styles ---------------------------------------------------------
|
||||
|
||||
.xrp-ledger-dev-portal.sidebar-primary .main {
|
||||
z-index: 5;
|
||||
padding: 44px 24px 48px;
|
||||
@@ -272,14 +401,15 @@ section {
|
||||
.timeline:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: -40px;
|
||||
left: 18px;
|
||||
height: 102.5%;
|
||||
height: 97.5%;
|
||||
width: 4px;
|
||||
background: linear-gradient(180deg, rgba(254, 255, 1, 1) 0%, rgba(255, 45, 154, 1) 33%, rgba(163, 8, 143, 1) 66%, rgba(44, 4, 128, 0.85) 100%);
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
margin-top: 80px;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-pack: center;
|
||||
@@ -305,6 +435,9 @@ section {
|
||||
.timeline-block:nth-child(3) .timeline-dot {
|
||||
border: 3px solid $red-purple-600;
|
||||
}
|
||||
.timeline-block:nth-child(4) .timeline-dot {
|
||||
border: 3px solid $red-purple-900;
|
||||
}
|
||||
.timeline-block {
|
||||
display: flex;
|
||||
position: relative;
|
||||
@@ -331,7 +464,7 @@ section {
|
||||
.timeline-dot {
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
margin-left: calc(5% - 9px);
|
||||
margin-left: calc(5% - 8.5px);
|
||||
will-change: transform;
|
||||
}
|
||||
.timeline-block:nth-child(even) {
|
||||
@@ -339,7 +472,7 @@ section {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.timeline-dot {
|
||||
margin-right: calc(5% - 9px);
|
||||
margin-right: calc(5% - 8.5px);
|
||||
}
|
||||
.timeline-content {
|
||||
width: 45%;
|
||||
|
||||
@@ -36,6 +36,8 @@ $font-family-sans-serif: -apple-system, system-ui, 'Roboto', sans-serif;
|
||||
@import "_side-nav.scss";
|
||||
@import "_helpers.scss";
|
||||
@import "_buttons.scss";
|
||||
@import "_chips.scss";
|
||||
@import "_tables.scss";
|
||||
@import "_tables.scss";
|
||||
@import "_use-cases.scss";
|
||||
@import "_github-edit.scss";
|
||||
|
||||
Reference in New Issue
Block a user