mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-19 03:05:49 +00:00
working on cards, will need to review to make sure ok
This commit is contained in:
Calvin Jhunjhnuwala
@@ -7,10 +7,10 @@
|
||||
}
|
||||
.card-b {
|
||||
padding: 2rem;
|
||||
background: rgba(34, 37, 43, 0.5);
|
||||
backdrop-filter: blur(3px);
|
||||
border-radius: 8px;
|
||||
opacity: 1;
|
||||
// background: rgba(34, 37, 43, 0.5);
|
||||
// backdrop-filter: blur(3px);
|
||||
transition: all 0.35s ease-in-out;
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin: 10px;
|
||||
@@ -19,15 +19,15 @@
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
.section-marker {
|
||||
position: absolute;
|
||||
font-size: 0.875rem;
|
||||
transform: rotate(90deg);
|
||||
font-weight: normal;
|
||||
top: calc(50% - 64px);
|
||||
margin-left: -32px;
|
||||
transform-origin: top left;
|
||||
}
|
||||
// .section-marker {
|
||||
// position: absolute;
|
||||
// font-size: 0.875rem;
|
||||
// transform: rotate(90deg);
|
||||
// font-weight: normal;
|
||||
// top: calc(50% - 64px);
|
||||
// margin-left: -32px;
|
||||
// transform-origin: top left;
|
||||
// }
|
||||
@include media-breakpoint-down(md) {
|
||||
.card-deck {
|
||||
display: block !important;
|
||||
@@ -35,4 +35,4 @@
|
||||
.card-deck .card {
|
||||
margin-bottom: 2.5rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -52,7 +52,7 @@ h2, .h2 {
|
||||
}
|
||||
}
|
||||
h3, .h3 {
|
||||
font-size: 3.5rem;
|
||||
font-size: 3rem;
|
||||
line-height: 52px;
|
||||
@include media-breakpoint-down(sm) {
|
||||
font-size: 1.25rem;
|
||||
@@ -71,8 +71,8 @@ h5, .h5 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 32px;
|
||||
@include media-breakpoint-down(sm) {
|
||||
font-size: 1.125rem;
|
||||
line-height: 26px;
|
||||
font-size: 1rem;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
h6, .h6 {
|
||||
@@ -98,7 +98,7 @@ a {
|
||||
}
|
||||
}
|
||||
p a {
|
||||
text-decoration: underline;
|
||||
color: $blue-purple-400;
|
||||
}
|
||||
|
||||
.fs-base {
|
||||
@@ -167,11 +167,11 @@ p a {
|
||||
font-family: 'Work Sans', 'Noto Sans JP', sans-serif;
|
||||
}
|
||||
|
||||
.section-marker {
|
||||
transform: unset;
|
||||
writing-mode: vertical-rl;
|
||||
font-family: 'Work Sans', 'Noto Sans JP', sans-serif;
|
||||
}
|
||||
// .section-marker {
|
||||
// transform: unset;
|
||||
// writing-mode: vertical-rl;
|
||||
// font-family: 'Work Sans', 'Noto Sans JP', sans-serif;
|
||||
// }
|
||||
|
||||
&.page-calculator #data-selector li a {
|
||||
padding: 0.5rem 1.1rem;
|
||||
|
||||
@@ -33,6 +33,12 @@
|
||||
|
||||
/* SPACING HELPERS */
|
||||
/* To create new margin classes, multiply by 4px */
|
||||
.mb-6 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.mt-6 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.mb-8 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
@@ -51,10 +57,20 @@
|
||||
.mb-10 {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.ml-10 {
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
.mr-10 {
|
||||
margin-right: 2.5rem;
|
||||
}
|
||||
.my-10 {
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.mx-10 {
|
||||
margin-left: 2.5rem;
|
||||
margin-right: 2.5rem;
|
||||
}
|
||||
.mt-12 {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
@@ -108,6 +124,10 @@
|
||||
margin-top: 5rem;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
.my-26 {
|
||||
margin-top: 6.5rem;
|
||||
margin-bottom: 6.5rem;
|
||||
}
|
||||
.mb-30 {
|
||||
margin-bottom: 7.5rem;
|
||||
}
|
||||
@@ -266,3 +286,15 @@
|
||||
.grey-700 {
|
||||
color: $gray-700;
|
||||
}
|
||||
.bg-grey-800 {
|
||||
background-color: $gray-800;
|
||||
}
|
||||
.green-500 {
|
||||
color: $green-500;
|
||||
}
|
||||
|
||||
/* ETC */
|
||||
.br-8 {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
@@ -173,6 +173,69 @@ section {
|
||||
|
||||
}
|
||||
|
||||
// New Page Layouts ---------------------------------------------------------------
|
||||
$columns: 12; // Number of columns in the grid system
|
||||
|
||||
|
||||
.container-new {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 auto;
|
||||
max-width: 960px;
|
||||
@include media-breakpoint-down(xxl) {
|
||||
max-width: 1280px;
|
||||
}
|
||||
@include media-breakpoint-down(xl) {
|
||||
max-width: 1040px;
|
||||
}
|
||||
@include media-breakpoint-down(lg) {
|
||||
max-width: 832px;
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
max-width: 608px;
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
max-width: 416px;
|
||||
}
|
||||
// create columns
|
||||
@for $width from 1 through $columns {
|
||||
.col-#{$width} {
|
||||
flex-basis: $width / $columns * 100%;
|
||||
}
|
||||
}
|
||||
.col-new {
|
||||
--width: 4;
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin: 40px;
|
||||
}
|
||||
@include media-breakpoint-down(lg) {
|
||||
margin: 24px;
|
||||
}
|
||||
// &:nth-child(3n+1){
|
||||
// margin-left: -40px;
|
||||
// }
|
||||
// &:nth-child(3n+3){
|
||||
// margin-right: -40px;
|
||||
// }
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
&#pink {
|
||||
background-image: url(../../img/cards/pink.svg);
|
||||
}
|
||||
.card-new {
|
||||
// border-radius: 8px;
|
||||
padding: 32px;
|
||||
|
||||
}
|
||||
}
|
||||
.card-new {
|
||||
--width: 4;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Grid Box Vertical numbers ------------------------------------------------ */
|
||||
.flag-vertical {
|
||||
color: $gray-200;
|
||||
@@ -191,6 +254,7 @@ section {
|
||||
}
|
||||
|
||||
// Misc. layout styles ---------------------------------------------------------
|
||||
|
||||
.xrp-ledger-dev-portal.sidebar-primary .main {
|
||||
z-index: 5;
|
||||
padding: 44px 24px 48px;
|
||||
|
||||
Reference in New Issue
Block a user