mobile edits, fixing styling on home page and for dark cards

This commit is contained in:
Calvin Jhunjhnuwala
2021-07-01 14:17:44 -07:00
parent a41193dff3
commit 99ce372338
7 changed files with 18 additions and 10 deletions

View File

@@ -76,7 +76,7 @@ h6, .h6 {
font-size: 1.5rem;
line-height: 32px;
color: $gray-100;
font-weight: normal;
font-weight: 600;
@include media-breakpoint-down(sm) {
font-size: 1.125rem;
line-height: 26px;

View File

@@ -264,6 +264,14 @@
padding-top: 1rem !important;
}
}
.p-6 {
padding: 1.5rem;
&-sm {
@include media-breakpoint-down(sm) {
padding: 1.5rem;
}
}
}
.p-8 {
padding: 2rem;
&-sm {

View File

@@ -46,7 +46,7 @@
</section>
<section class="container-new py-26">
<div class="col-md-6 offset-md-3 p-10 br-8 bg-grey-800 text-center">
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 bg-grey-800 text-center">
<img src="./img/backgrounds/cta-calculator-green.svg" class="cta cta-bottom-right">
<div class="z-index-1 position-relative">
<h2 class="h4 mb-10">{% trans %}How Does XRP Compare to Other Currencies?{% endtrans %}</h2>

View File

@@ -109,7 +109,7 @@
</div>#}
</section>
<section class="container-new py-26">
<div class="col-md-6 offset-md-3 p-10 br-8 bg-grey-800 text-center">
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 bg-grey-800 text-center">
<img src="./img/backgrounds/cta-community-purple.svg" class="cta cta-top-left">
<img src="./img/backgrounds/cta-community-green.svg" class="cta cta-bottom-right">
<div class="z-index-1 position-relative">

View File

@@ -22,7 +22,7 @@
<div class="w-100">
<img id="home-hero-graphic" src="./img/graphics/header-image.svg">
</div>
<div class="col-lg-5 mx-auto text-center">
<div class="col-lg-5 mx-auto text-center pl-0 pr-0">
<div class="d-flex flex-column-reverse">
<h1 class="mb-10">{% trans %}Community<br class="until-sm"/> Powered Utility{% endtrans %}</h1>
<h6 class="green-500 mb-3">{% trans %}XRPL | XRPL Ledger{% endtrans %}</h6>
@@ -159,8 +159,8 @@
</section>
<section class="container-new py-26">
<div class="col-lg-6 offset-lg-3 p-8-sm p-10-until-sm br-8 bg-grey-800 text-center">
<img src="./img/backgrounds/cta-home-purple.svg" class="cta cta-top-left">
<div class="col-lg-6 offset-lg-3 p-6-sm p-10-until-sm br-8 bg-grey-800 text-center">
<img src="./img/backgrounds/cta-home-purple.svg" class="landing-bg cta cta-top-left">
<img src="./img/backgrounds/cta-home-green.svg" class="cta cta-bottom-right">
<div class="z-index-1 position-relative">
<h2 class="h4 mb-8-sm mb-10-until-sm">{% trans %}Our Shared Vision for XRPLs Future{% endtrans %}</h2>

View File

@@ -96,7 +96,7 @@
</section>
<section class="container-new py-26">
<div class="col-md-6 offset-md-3 p-10 br-8 bg-grey-800 text-center">
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 bg-grey-800 text-center">
<img src="./img/backgrounds/cta-foundation-orange.svg" class="cta cta-top-left">
<img src="./img/backgrounds/cta-foundation-magenta.svg" class="cta cta-bottom-right">
<div class="z-index-1 position-relative">

View File

@@ -23,7 +23,7 @@
</div>
<section class="py-26 text-center">
<div class="col-lg-4 mx-auto text-center">
<div class="col-lg-5 mx-auto text-center">
<div class="d-flex flex-column-reverse">
<h1 class="mb-0">{% trans %}XRPL Today and the Vision for Tomorrow{% endtrans %}</h1>
<h6 class="green-500 mb-3">{% trans %}XRP | XRPL Ledger Overview{% endtrans %}</h6>
@@ -62,7 +62,7 @@
</section>
<section class="container-new py-26">
<div class="col-md-6 offset-md-3 p-10 br-8 bg-grey-800 text-center">
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 bg-grey-800 text-center">
<img src="./img/backgrounds/cta-xrpl-overview-green.svg" class="cta cta-bottom-right">
<div class="z-index-1 position-relative">
<h2 class="h4 mb-10">{% trans %}A Greener Blockchain{% endtrans %}</h2>
@@ -95,7 +95,7 @@
</section>
<section class="container-new py-26">
<div class="col-md-6 offset-md-3 p-10 br-8 bg-grey-800 text-center">
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 bg-grey-800 text-center">
<img src="./img/backgrounds/cta-xrpl-overview-orange.svg" class="cta cta-bottom-right">
<div class="z-index-1 position-relative">
<h2 class="h4 mb-10">{% trans %}Tomorrows Blockchain Starts With You{% endtrans %}</h2>