mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-24 21:55:52 +00:00
merge w master
This commit is contained in:
akcodez
@@ -76,6 +76,28 @@ button[disabled="disabled"] {
|
||||
}
|
||||
}
|
||||
|
||||
.btn-arrow-out::after {
|
||||
background-position: left 0px bottom 0px;
|
||||
content: "\00a0";
|
||||
background-image: url(../img/icons/arrow-up-right-white.svg);
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
padding: 4px 8px 4px 12px;
|
||||
transition: background-position 0.3s ease-in-out;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.btn-arrow-out:hover::after {
|
||||
background-position: left 4px bottom 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.btn-arrow-out {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* (Jump to) "Top" button */
|
||||
|
||||
.jump-to-top {
|
||||
|
||||
@@ -144,6 +144,10 @@ a.card:hover h3 {
|
||||
border: 2px solid #232325;
|
||||
}
|
||||
|
||||
.light .circled-logo {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.card-deck {
|
||||
margin-top: 2.5rem;
|
||||
margin-left: (-$card-deck-margin);
|
||||
|
||||
@@ -68,7 +68,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.rpc-tool .main {
|
||||
h1::before, h2::before, h3::before {
|
||||
// These aren't anchors, and the placement of the anchor fix thing
|
||||
|
||||
352
styles/_docs-landing.scss
Normal file
352
styles/_docs-landing.scss
Normal file
@@ -0,0 +1,352 @@
|
||||
.sdk-img {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.light {
|
||||
.sdk-img {
|
||||
content:url(../../img/graphics/sdk-white.png);
|
||||
}
|
||||
|
||||
.ref-book-illustration {
|
||||
content:url(../../img/graphics/ref-book-light.png)
|
||||
}
|
||||
|
||||
.tutorial-illustration {
|
||||
content:url(../../img/graphics/tutorials-illustration-light.png)
|
||||
}
|
||||
|
||||
.concepts-doc-illustration {
|
||||
content:url(../../img/graphics/concepts-docs-light.png)
|
||||
}
|
||||
|
||||
.use-cases {
|
||||
.wallet-illustration {
|
||||
content:url(../../img/graphics/wallet-light.svg)
|
||||
}
|
||||
|
||||
.token-illustration {
|
||||
content:url(../../img/graphics/tokens-light.png)
|
||||
}
|
||||
|
||||
.connections-illustration {
|
||||
content:url(../../img/graphics/nodes-light.svg)
|
||||
}
|
||||
}
|
||||
|
||||
.quickstart-image {
|
||||
content:url(../../img/graphics/getting-started-pages-light.png)
|
||||
}
|
||||
|
||||
.dev-tools-img {
|
||||
content:url(../../img/graphics/dev-tools-light.svg)
|
||||
}
|
||||
|
||||
.dev-tools-link:hover p {
|
||||
color: $black
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.sdk-img {
|
||||
content:url(../../img/graphics/sdk-black.png);
|
||||
}
|
||||
|
||||
.ref-book-illustration {
|
||||
content:url(../../img/graphics/ref-book.png)
|
||||
}
|
||||
|
||||
.tutorial-illustration {
|
||||
content:url(../../img/graphics/tutorials-illustration.png)
|
||||
}
|
||||
|
||||
.concepts-doc-illustration {
|
||||
content:url(../../img/graphics/concepts-doc.png)
|
||||
}
|
||||
|
||||
.use-cases {
|
||||
.wallet-illustration {
|
||||
content:url(../../img/graphics/wallet-dark.png)
|
||||
}
|
||||
|
||||
.token-illustration {
|
||||
content:url(../../img/graphics/tokens-dark.png)
|
||||
}
|
||||
|
||||
.connections-illustration {
|
||||
content:url(../../img/graphics/nodes-dark.png)
|
||||
}
|
||||
}
|
||||
|
||||
.quickstart-image {
|
||||
content:url(../../img/graphics/getting-started-pages-dark.svg)
|
||||
}
|
||||
|
||||
.dev-tools-img {
|
||||
content:url(../../img/graphics/dev-tools-dark.png)
|
||||
}
|
||||
|
||||
.dev-tools-link:hover p {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.flat-card-grid .nav-link:hover {
|
||||
color: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
// Video Cards
|
||||
.get-started-img, .flat-card {
|
||||
max-width:100%;
|
||||
max-height:100%;
|
||||
}
|
||||
|
||||
.faded-text {
|
||||
font-family: 'Work Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 15.5667px;
|
||||
line-height: 23px;
|
||||
}
|
||||
|
||||
.page-docs-index {
|
||||
|
||||
section {
|
||||
padding-top: 64px;
|
||||
padding-bottom:64px;
|
||||
}
|
||||
|
||||
.dev-tools-link {
|
||||
h6::before {
|
||||
margin-top: -20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
h6:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: $purple;
|
||||
background: none!important;
|
||||
}
|
||||
|
||||
&:hover p {
|
||||
text-decoration: none !important;
|
||||
background: none !important;
|
||||
display: inline-block; // Inline blocks don't have underlines
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: $purple;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.btn-arrow::after{
|
||||
content: url(../img/icons/arrow-right-purple.svg);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.langs {
|
||||
|
||||
h5:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: $purple;
|
||||
background: none!important;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.btn-arrow::after{
|
||||
content: url(../img/icons/arrow-right-purple.svg);
|
||||
vertical-align: baseline;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-block-start: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 765px) {
|
||||
.page-docs-index {
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.flat-card-grid {
|
||||
grid-gap: 24px;
|
||||
|
||||
.flat-card {
|
||||
padding: 32px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.page-docs-index::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#langs-cards {
|
||||
grid-gap: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
/* Fix dropdown size with top banner present */
|
||||
.page-docs-index .langs-cards {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-auto-rows: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.dev-tools-img {
|
||||
max-width:100%;
|
||||
max-height: 100%;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.page-docs {
|
||||
.h4::before {
|
||||
margin-top: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.video-grid {
|
||||
grid-gap: 35px;
|
||||
}
|
||||
|
||||
.title-space {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.circled-logo {
|
||||
margin-left:0.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.flat-card-grid {
|
||||
grid-gap: 15px;
|
||||
max-width: 100%;
|
||||
min-height: 384px;
|
||||
|
||||
.flat-card {
|
||||
padding: 32px 50px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.flat-card-padding {
|
||||
margin-bottom: 75px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
height: 115px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
border: none !important;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: $purple;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.flat-card-padding {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.nav-link::after {
|
||||
content: ' ' !important;
|
||||
}
|
||||
|
||||
.flat-card .btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.float-up-on-hover {
|
||||
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);
|
||||
}
|
||||
|
||||
// Make the floating idempotent
|
||||
.video-image {
|
||||
&:hover {
|
||||
-webkit-transform: none;
|
||||
-moz-transform: none;
|
||||
-ms-transform: none;
|
||||
-o-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// On mobile the vertical spacing is correct without adjustment.
|
||||
@media (min-width: 992px) {
|
||||
.align-button-on-bottom {
|
||||
.btn-primary {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.quickstart-card {
|
||||
.quickstart-image {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
margin-bottom: -20px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin-left: -32px;
|
||||
margin-right: -32px;
|
||||
margin-bottom: -32px;
|
||||
width: calc(100% + 64px);
|
||||
}
|
||||
}
|
||||
|
||||
.explore-links {
|
||||
.card-grid {
|
||||
grid-gap: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.full-documentation-link {
|
||||
margin-top: -35px;
|
||||
}
|
||||
@@ -118,6 +118,7 @@ section {
|
||||
.col {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
&.card-grid-4xN {
|
||||
|
||||
@@ -458,33 +458,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-arrow-out::after {
|
||||
background-position: left 0px bottom 0px;
|
||||
content: "\00a0";
|
||||
background-image: url(../img/icons/arrow-up-right-white.svg);
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
padding: 4px 8px 4px 12px;
|
||||
transition: background-position 0.3s ease-in-out;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.btn-arrow-out:hover::after {
|
||||
background-position: left 4px bottom 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.btn-arrow-out {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.page-funding {
|
||||
|
||||
.funding-list {
|
||||
@@ -501,28 +476,6 @@
|
||||
left: -4px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.btn-arrow-out {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-arrow-out::after {
|
||||
background-position: left 0px bottom 0px;
|
||||
content: "\00a0";
|
||||
background-image: url(../img/icons/arrow-up-right-white.svg);
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
padding: 4px 8px 4px 12px;
|
||||
transition: background-position 0.3s ease-in-out;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.btn-arrow-out:hover::after {
|
||||
background-position: left 4px bottom 4px;
|
||||
}
|
||||
|
||||
// even out height on large
|
||||
@media (min-width: 992px) {
|
||||
.funding-box{
|
||||
@@ -555,29 +508,6 @@
|
||||
padding: .75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.btn-arrow-out {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-arrow-out::after {
|
||||
background-position: left 0px bottom 0px;
|
||||
content: "\00a0";
|
||||
background-image: url(../img/icons/arrow-up-right-white.svg);
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
padding: 4px 8px 4px 12px;
|
||||
transition: background-position 0.3s ease-in-out;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.btn-arrow-out:hover::after {
|
||||
background-position: left 4px bottom 4px;
|
||||
}
|
||||
|
||||
|
||||
#container-scroll {
|
||||
height:160px;
|
||||
position:relative;
|
||||
@@ -700,27 +630,6 @@
|
||||
padding: .75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.btn-arrow-out {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-arrow-out::after {
|
||||
background-position: left 0px bottom 0px;
|
||||
content: "\00a0";
|
||||
background-image: url(../img/icons/arrow-up-right-white.svg);
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
padding: 4px 8px 4px 12px;
|
||||
transition: background-position 0.3s ease-in-out;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.btn-arrow-out:hover::after {
|
||||
background-position: left 4px bottom 4px;
|
||||
}
|
||||
.event-card {
|
||||
max-width: 311px;
|
||||
margin: 32px auto;
|
||||
@@ -1062,7 +971,8 @@
|
||||
|
||||
.page-docs-index {
|
||||
&::before {
|
||||
background-image: url(../img/backgrounds/bg-docs.png);
|
||||
background-image: url(../../img/backgrounds/docs-splash.svg);
|
||||
background-position-x: right;
|
||||
}
|
||||
|
||||
.center-search {
|
||||
@@ -1077,21 +987,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
@include media-breakpoint-down(md) {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.row .col-lg-6:first-child {
|
||||
padding-right: 40px;
|
||||
}
|
||||
.row .col-lg-6:last-child {
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#software-and-sdks .card-deck {
|
||||
.card:nth-child(1) .card-footer {
|
||||
background-image: url(../img/cards/4col-green.svg);
|
||||
@@ -1378,27 +1273,6 @@
|
||||
.btn {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.btn-arrow-out {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.btn-arrow-out::after {
|
||||
background-position: left 0px bottom 0px;
|
||||
content: "\00a0";
|
||||
background-image: url(../img/icons/arrow-up-right-white.svg);
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
padding: 4px 8px 4px 12px;
|
||||
transition: background-position 0.3s ease-in-out;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.btn-arrow-out:hover::after {
|
||||
background-position: left 4px bottom 4px;
|
||||
}
|
||||
}
|
||||
html.light {
|
||||
.page-dev-tools {
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"devDependencies": {
|
||||
"bootstrap": "^4.6.0",
|
||||
"bootstrap": "^4.6.1",
|
||||
"node-sass": "^7.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2022-v16.css --output-style compressed",
|
||||
"build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2022-v16.css --output-style compressed --source-map true",
|
||||
"build-css-watch-out": "node-sass --recursive --watch --include-path scss xrpl.scss ../out/assets/css/devportal2022-v16.css --output-style compressed --source-map true"
|
||||
"build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2022-v17.css --output-style compressed",
|
||||
"build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2022-v17.css --output-style compressed --source-map true",
|
||||
"build-css-watch-out": "node-sass --recursive --watch --include-path scss xrpl.scss ../out/assets/css/devportal2022-v17.css --output-style compressed --source-map true"
|
||||
},
|
||||
"dependencies": {
|
||||
"sass": "^1.26.10"
|
||||
|
||||
@@ -69,6 +69,7 @@ $line-height-base: 1.5;
|
||||
@import "_video.scss";
|
||||
//@import "_top-banner.scss";
|
||||
@import "_toml-checker.scss";
|
||||
@import "_docs-landing.scss";
|
||||
|
||||
// Light/Dark theme settings ---------------------------------------------------
|
||||
// Option to only change theme on user system settings. No toggle.
|
||||
|
||||
1345
styles/yarn.lock
1345
styles/yarn.lock
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user