mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-04 20:05:50 +00:00
cleaning up home page for mobile, adding NUS info below graphic
This commit is contained in:
Calvin Jhunjhnuwala
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -158,7 +158,7 @@ $('.tab-link').on('click', function(e){
|
||||
// Pass the type to the Change Data function
|
||||
let type = $(this).data("currencytype");
|
||||
changeDataType(type);
|
||||
// ga( 'send', 'event', 'Carbon Calculator', 'Toggle Data Type', type );
|
||||
ga( 'send', 'event', 'Carbon Calculator', 'Toggle Data Type', type );
|
||||
})
|
||||
|
||||
// This is main section that will run the functions once the page is ready
|
||||
@@ -176,7 +176,7 @@ $(document).ready(function(){
|
||||
});
|
||||
highlightNum(val);
|
||||
doCalculations(val);
|
||||
// ga( 'send', 'event', 'Carbon Calculator', 'Slider Data Amount', val );
|
||||
ga( 'send', 'event', 'Carbon Calculator', 'Slider Data Amount', val );
|
||||
}
|
||||
|
||||
// On page load, run default functions
|
||||
@@ -216,12 +216,12 @@ $(document).ready(function(){
|
||||
inputs.removeClass('sticky');
|
||||
inputs_offset.removeClass('offset');
|
||||
$(this).text('Change Inputs');
|
||||
// ga( 'send', 'event', 'Carbon Calculator', 'Mobile Toggle', 'Change Inputs' );
|
||||
ga( 'send', 'event', 'Carbon Calculator', 'Mobile Toggle', 'Change Inputs' );
|
||||
} else {
|
||||
inputs.addClass('sticky show');
|
||||
inputs_offset.addClass('offset');
|
||||
$(this).text('Hide Inputs');
|
||||
// ga( 'send', 'event', 'Carbon Calculator', 'Mobile Toggle', 'Hide Inputs' );
|
||||
ga( 'send', 'event', 'Carbon Calculator', 'Mobile Toggle', 'Hide Inputs' );
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -66,7 +66,6 @@ p a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.text-largest {
|
||||
font-size: 1.5rem;
|
||||
font-weight: normal;
|
||||
|
||||
@@ -33,6 +33,9 @@
|
||||
|
||||
/* SPACING HELPERS */
|
||||
/* To create new margin classes, multiply by 4px */
|
||||
.mb-8 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.mt-8 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
@@ -150,6 +153,15 @@
|
||||
.pt-20 {
|
||||
padding-top: 5rem;
|
||||
}
|
||||
.pb-20 {
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
.pt-30 {
|
||||
padding-top: 7.5rem;
|
||||
}
|
||||
.pb-30 {
|
||||
padding-bottom: 7.5rem;
|
||||
}
|
||||
.pt-40 {
|
||||
padding-top: 10rem;
|
||||
&-until-sm {
|
||||
@@ -194,6 +206,20 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(xs) {
|
||||
.overflow-xs {
|
||||
overflow: scroll;
|
||||
}
|
||||
.overflow-x-xs {
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(md) {
|
||||
.position-sm-absolute {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
/* TEXT HELPERS */
|
||||
.va-middle {
|
||||
@@ -212,18 +238,15 @@
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.overflow-xs {
|
||||
overflow: scroll;
|
||||
}
|
||||
.overflow-x-xs {
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
/* DISPLAY HELPERS */
|
||||
.d-none-xs {
|
||||
@include media-breakpoint-down(xs) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(md) {
|
||||
.position-sm-absolute {
|
||||
position: absolute;
|
||||
.d-none-sm {
|
||||
@include media-breakpoint-down(sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -235,9 +258,11 @@
|
||||
border: none !important;
|
||||
}
|
||||
.grey-400 {
|
||||
color: $gray-400
|
||||
color: $gray-400;
|
||||
}
|
||||
.grey-500 {
|
||||
color: $gray-500
|
||||
color: $gray-500;
|
||||
}
|
||||
.grey-700 {
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,15 @@
|
||||
/* HOME STYLINGS */
|
||||
#home-hero-marker {
|
||||
top: unset;
|
||||
bottom: 64px;
|
||||
bottom: 88px;
|
||||
}
|
||||
#home-hero-graphic {
|
||||
max-width: 100%;
|
||||
@include media-breakpoint-down(sm) {
|
||||
width: 200%;
|
||||
margin-left: -50%;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
#home-hero-marker:after {
|
||||
position: absolute;
|
||||
|
||||
@@ -20,18 +20,18 @@
|
||||
|
||||
<section class="row">
|
||||
<h6 class="section-marker" id="home-hero-marker">{% trans %}Scroll Down{% endtrans %}</h6>
|
||||
<img class="mw-100" src="./img/graphics/home-hero-graphic.svg">
|
||||
<img id="home-hero-graphic" src="./img/graphics/home-hero-graphic.svg">
|
||||
<div class="col-md-6 mx-auto text-center my-5">
|
||||
<h1 class="mb-18">{% trans %}XRP: The Best Digital Asset for Payments{% endtrans %}</h1>
|
||||
<a href="overview.html" class="btn btn-outline-secondary inline-block mr-4">{% trans %}Learn More{% endtrans %}</a>
|
||||
<a href="docs.html" class="btn btn-outline-secondary inline-block">{% trans %}Build with XRP{% endtrans %}</a>
|
||||
<a href="overview.html" class="btn btn-outline-secondary inline-block mr-4 mb-4">{% trans %}Learn More{% endtrans %}</a>
|
||||
<a href="docs.html" class="btn btn-outline-secondary inline-block mb-4">{% trans %}Build with XRP{% endtrans %}</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="row py-50" id="bg-home-1">
|
||||
<section class="row pt-20 pb-30 py-50-until-sm" id="bg-home-1">
|
||||
<h6 class="section-marker">{% trans %}XRP Ledger{% endtrans %}</h6>
|
||||
|
||||
<div class="row mb-20 ml-0 mr-0">
|
||||
<div class="row mb-10 mb-20-until-sm ml-0 mr-0">
|
||||
<div class="col-lg-4 offset-lg-2">
|
||||
<p class="text-primary bold">{% trans %}What is XRPL.org?{% endtrans %}</p>
|
||||
<h2 class="mb-10">{% trans %}A Community-Driven Resource for All Things XRP and XRP Ledger{% endtrans %}</h2>
|
||||
@@ -51,10 +51,10 @@
|
||||
<img class="mw-100 mt-3" src="assets/img/icons/scalable.png">
|
||||
<h6 class="mt-8">{% trans %}Scalable{% endtrans %}</h6>
|
||||
</div>
|
||||
<div class="col text-center"></div>
|
||||
<div class="col text-center d-none-xs"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-center"></div>
|
||||
<div class="col text-center d-none-xs"></div>
|
||||
<div class="col text-center">
|
||||
<img class="mw-100 mt-3" src="assets/img/icons/low-cost.png">
|
||||
<h6 class="mt-8">{% trans %}Low-Cost{% endtrans %}</h6>
|
||||
@@ -78,11 +78,11 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="row mb-50">
|
||||
<section class="row mb-30 mb-50-until-sm">
|
||||
<div class="col-12">
|
||||
<h6 class="section-marker">{% trans %}Use Cases{% endtrans %}</h6>
|
||||
<h2 class="h1">{% trans %}XRP in the Real World{% endtrans %}</h2>
|
||||
<div class="w-100 mt-20"></div>
|
||||
<div class="w-100 mt-10 mt-20-until-sm"></div>
|
||||
|
||||
<div class="card-deck">
|
||||
<div class="card rounded-lg hc mb-10" id="hc-1">
|
||||
|
||||
@@ -55,8 +55,9 @@
|
||||
|
||||
<section class="row mb-30 mb-50-until-sm">
|
||||
<h6 class="section-marker">{% trans %}Future of Finance{% endtrans %}</h6>
|
||||
<div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10 text-center">
|
||||
<div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10">
|
||||
<img class="mw-100" src="./img/impact/impact-building-future@2x.png">
|
||||
<p class="text-smaller grey-700 mb-3 mt-3 ml-4">*NUS Research on Blockchain Adoption and Sustainability</p>
|
||||
</div>
|
||||
<div class="col-md-6 offset-md-1 order-2 order-md-1">
|
||||
<h2 class="mb-10">{% trans %}Building for the Future{% endtrans %}</h2>
|
||||
|
||||
Reference in New Issue
Block a user