ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-12-06 17:27:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

mobile optimization for all pages

Browse Source
This commit is contained in:
Calvin Jhunjhnuwala
2020-09-29 23:55:01 -07:00
parent cbd7926a85
commit 1fa895177c
15 changed files with 142 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
styles/_content.scss
View File

@@ -126,8 +126,7 @@ td:nth-child(1) {
opacity: 1;
transition: all 0.35s ease-in-out;
@include media-breakpoint-down(sm) {
margin-left: 15px;
margin-right: 15px;
margin: 10px;
}
&.not-hover {
opacity: 0.6;

61
styles/_helpers.scss
View File

@@ -82,9 +82,24 @@
}
.mt-20 {
margin-top: 5rem;
&-sm {
@include media-breakpoint-down(sm) {
margin-top: 5rem;
}
}
&-until-sm {
@include media-breakpoint-up(sm) {
margin-top: 5rem;
}
}
}
.mb-20 {
margin-bottom: 5rem;
&-until-sm {
@include media-breakpoint-up(sm) {
margin-bottom: 5rem;
}
}
}
.my-20 {
margin-top: 5rem;
@@ -95,21 +110,53 @@
}
.mt-30 {
margin-top: 7.5rem;
&-until-sm {
@include media-breakpoint-up(sm) {
margin-top: 7.5rem;
}
}
}
.mt-40 {
margin-top: 10rem;
&-until-sm {
@include media-breakpoint-up(sm) {
margin-top: 10rem;
}
}
}
.mb-40 {
margin-bottom: 10rem;
&-until-sm {
@include media-breakpoint-up(sm) {
margin-bottom: 10rem;
}
}
}
.mb-49 {
margin-bottom: 12.25rem;
}
.mb-50 {
margin-bottom: 12.5rem;
&-until-sm {
@include media-breakpoint-up(sm) {
margin-bottom: 12.5rem;
}
}
}
.py-20 {
padding-bottom: 5rem;
padding-top: 5rem;
}
.pt-20 {
padding-top: 5rem;
}
.pt-40 {
padding-top: 10rem;
&-until-sm {
@include media-breakpoint-up(sm) {
padding-top: 10rem;
}
}
}
.pb-40 {
padding-bottom: 10rem;
@@ -123,6 +170,12 @@
.py-50 {
padding-bottom: 12.5rem;
padding-top: 12.5rem;
&-until-sm {
@include media-breakpoint-up(sm) {
padding-bottom: 12.5rem;
padding-top: 12.5rem;
}
}
}
.top-10 {
top: 2.5rem;
@@ -133,6 +186,14 @@
.bottom-0 {
bottom: 0;
}
.justify-center {
justify-content: center;
&-sm {
@include media-breakpoint-down(sm) {
justify-content: center;
}
}
}
/* TEXT HELPERS */
.va-middle {

3
styles/_landings.scss
View File

@@ -179,6 +179,9 @@
.marketing-wrapper {
margin-top: 10rem;
margin-bottom: 6rem;
@include media-breakpoint-down(sm) {
margin-top: 6rem;
}
}

5
styles/_layout.scss
View File

@@ -43,9 +43,8 @@ section {
&-50 {
flex-basis: calc(50% - 30px);
@include media-breakpoint-up(lg) {
flex-basis: calc(50% - 30px);
@include media-breakpoint-down(sm) {
flex-basis: calc(50% - 20px);
}
}
}

30
styles/_pages.scss
View File

@@ -56,11 +56,19 @@
#hero-impact {
width: calc(100vw - 16px);
}
@include media-breakpoint-up(md) {
#hero-impact {
@include media-breakpoint-up(md) {
margin-top: -120px;
}
@include media-breakpoint-down(sm) {
width: calc(200vw);
margin-left: -30vw;
}
}
#page-uses-top {
@include media-breakpoint-down(sm) {
margin-left: -5rem;
}
}
#page-impact-bg {
background-image: url(../img/backgrounds/bg-impact-top.png);
@@ -211,8 +219,14 @@
max-width: 100%;
}
.viz-wrapper {
// margin-bottom: 2.5rem;
margin-right: 1rem;
min-width: 184px;
}
.num-wrapper {
h5 {
font-size: 1.3rem;
word-break: break-word;
}
}
.d-output[data-comp="kWh"].active {
display: inline-flex;
@@ -234,7 +248,7 @@
width: 100%;
}
.d-output {
margin: 16px;
margin: 2rem 0;
}
#calculator-mobile-toggle.show {
position: fixed;
@@ -279,6 +293,12 @@
border-bottom-right-radius: 8px;
}
}
@include media-breakpoint-down(lg) {
#data-selector li:nth-child(2) {
margin-left: 0;
margin-right: 0;
}
}
.viz-wrapper {
position: relative;
height: 204px;