ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-20 11:45:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

clean up for mobile

Browse Source
This commit is contained in:
Calvin Jhunjhnuwala
2021-06-29 17:22:41 -07:00
parent ec064990ec
commit e24f3f16a2
49 changed files with 5178 additions and 14542 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
styles/_buttons.scss
View File

@@ -61,9 +61,16 @@ p + .readmore {
border-radius: 4px;
padding: 0.5rem 1rem;
line-height: 16px;
&:hover {
background: $blue-purple-600;
}
}
.btn-arrow {
@include media-breakpoint-down(sm) {
display: block;
width: 100%;
}
&::after {
display: inline-block;
content: url(../../img/icons/arrow-right.svg);
@@ -111,29 +118,30 @@ p + .readmore {
padding: 32px;
h3 {
width: calc(100% - 32px);
}
a {
position: relative;
&:hover {
color: $white;
}
&::after {
-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;
transform: rotateX(180deg);
position: absolute;
right: -32px;
top: calc(50% - 12px);
display: inline-flex;
content: url(../../img/icons/purple-arrow.svg);
}
&.collapsed {
a {
position: relative;
&:hover {
color: $white;
}
&::after {
transform: rotateX(360deg);
-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;
transform: rotateX(180deg);
position: absolute;
right: -32px;
top: calc(50% - 12px);
display: inline-flex;
content: url(../../img/icons/purple-arrow.svg);
}
&.collapsed {
&::after {
transform: rotateX(360deg);
}
}
}
}
}

19
styles/_font.scss
View File

@@ -23,18 +23,7 @@ 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: 3.875rem;
line-height: 70px;
@@ -58,6 +47,12 @@ h3, .h3 {
font-size: 1.25rem;
line-height: 28px;
}
&-sm {
@include media-breakpoint-down(sm) {
font-size: 1.25rem;
line-height: 28px;
}
}
}
h4, .h4 {
font-size: 2rem;

19
styles/_helpers.scss
View File

@@ -144,6 +144,11 @@
}
.mt-16 {
margin-top: 4rem;
&-sm {
@include media-breakpoint-down(sm) {
margin-top: 4rem;
}
}
}
.mb-16 {
margin-bottom: 4rem;
@@ -171,6 +176,11 @@
}
.mb-20 {
margin-bottom: 5rem;
&-sm {
@include media-breakpoint-down(sm) {
margin-bottom: 5rem;
}
}
&-until-sm {
@include media-breakpoint-up(sm) {
margin-bottom: 5rem;
@@ -405,13 +415,18 @@
border-radius: 8px;
}
br {
&.until-sm {
content: '';
@include media-breakpoint-down(sm) {
&.until-sm {
content: '';
}
}
}
.z-index-1 {
z-index: 1;
}
.bb-gray {
border-bottom: 1px solid $gray-600;
}
// Arrow bouncing animation
@keyframes arrowDance {

14
styles/_layout.scss
View File

@@ -223,7 +223,7 @@ $columns: 12; // Number of columns in the grid system
display: flex;
flex-wrap: wrap;
margin: 0 auto;
max-width: 960px;
max-width: 1280px;
z-index: 1;
@include media-breakpoint-down(xxl) {
max-width: 1280px;
@@ -253,6 +253,8 @@ $columns: 12; // Number of columns in the grid system
background-position: bottom;
background-repeat: no-repeat;
background-size: contain;
overflow: hidden;
max-width: 100%;
@include media-breakpoint-down(lg) {
margin: 24px 0;
@@ -303,6 +305,9 @@ $columns: 12; // Number of columns in the grid system
&#purple-blue {
background-image: url(../../img/cards/purple-blue.svg);
}
&#purple-blue-2 {
background-image: url(../../img/cards/purple-blue-2.svg);
}
&#blue-light-blue {
background-image: url(../../img/cards/blue-light-blue.svg);
}
@@ -432,10 +437,13 @@ $columns: 12; // Number of columns in the grid system
height: 95%;
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%);
@include media-breakpoint-down(md) {
left: 8px;
}
}
.timeline-dot {
margin-top: 85px;
margin-top: 94px;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
@@ -447,7 +455,7 @@ $columns: 12; // Number of columns in the grid system
width: 18px;
height: 18px;
border-radius: 50%;
background: $black;
background: $gray-900;
box-sizing: border-box;
}

38
styles/_pages.scss
View File

@@ -2,7 +2,7 @@
#home-purple {
position: absolute;
left: 0;
top: -360px;
top: -400px;
}
#home-green {
position: absolute;
@@ -10,13 +10,11 @@
top: 60px;
}
#home-hero-graphic {
margin-left: auto;
width: 855px;
margin-right: auto;
margin-bottom: 24px;
max-width: 100%;
@include media-breakpoint-down(sm) {
width: 200%;
margin-left: -50%;
margin-right: -50%;
max-width: none;
}
}
.sidelinks {
@@ -28,22 +26,6 @@
font-weight: bold;
}
}
.hc .h2 {
height: 38px;
padding-bottom: 5rem;
}
#hc-1 {
background-image: url(../../img/graphics/hc-1.png);
border: 1px solid #FAFF1A;
}
#hc-2 {
background-image: url(../../img/graphics/hc-2.png);
border: 1px solid #FF1A8B;
}
#hc-3 {
background-image: url(../../img/graphics/hc-3.png);
border: 1px solid #974CFF;
}
.cta {
@@ -70,6 +52,10 @@
position: absolute;
top: 40px;
left: 0;
@include media-breakpoint-down(sm) {
top: 0;
left: -120px;
}
}
#xrpl-overview-orange {
position: absolute;
@@ -278,7 +264,7 @@
}
/* CALCULATOR STYLING */
.calc-inputs {
border-radius: 8px;
margin-right: 1px;
}
#data-selector li a {
background: #22252B;
@@ -360,7 +346,7 @@
}
#calculator-mobile-toggle.show {
position: fixed;
top: 15px;
top: 84px;
right: 15px;
z-index: 9999999;
background: $black;
@@ -370,7 +356,7 @@
}
#calculator-inputs.sticky {
position: fixed;
top: 72px;
top: 84px;
width: calc(100% - 30px);
left: 15px;
right: 15px;