mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-12-06 17:27:57 +00:00
adding page grid component + stylersheet
This commit is contained in:
Calvin Jhunjhuwala
@@ -13,9 +13,14 @@ pre, code {
|
||||
font-variant-ligatures: none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
// h1, h2, h3, h4, h5, h6,
|
||||
// .h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
// font-weight: bold;
|
||||
// }
|
||||
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
font-weight: bold;
|
||||
font-family: $font-family-monospace;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h1, .h1 {
|
||||
@@ -165,16 +170,206 @@ p {
|
||||
/* Japanese language font override ------------------------------------------ */
|
||||
|
||||
.lang-ja {
|
||||
font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
|
||||
font-family: 'Noto Sans JP', 'Noto Sans', sans-serif;
|
||||
h1, h2, h3, h4, h5,
|
||||
.navbar .navbar-nav .nav-link,
|
||||
article .children-display li a,
|
||||
.right-sidebar .level-1 a,
|
||||
.right-sidebar .separator {
|
||||
font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
|
||||
font-family: 'Noto Sans JP', 'Noto Sans', sans-serif;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
font-family: 'Noto Serif', 'Noto Serif JP', monospace;
|
||||
font-family: 'Noto Serif JP', 'Noto Serif', monospace;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---------------------------------------
|
||||
// Helpers
|
||||
@mixin _type-step($s) {
|
||||
font-size: map-get($s, size);
|
||||
line-height: map-get($s, line);
|
||||
letter-spacing: map-get($s, letter);
|
||||
margin-bottom: map-get($s, pspace);
|
||||
}
|
||||
|
||||
@mixin type($token) {
|
||||
$t: map-get($type-scale, $token);
|
||||
font-family: map-get($t, font);
|
||||
font-weight: map-get($t, weight);
|
||||
|
||||
// mobile
|
||||
@include _type-step(map-get($t, mobile));
|
||||
|
||||
// tablet
|
||||
@media (min-width: media-breakpoint-up(md)) {
|
||||
@include _type-step(map-get($t, tablet));
|
||||
}
|
||||
|
||||
// desktop
|
||||
@media (min-width: media-breakpoint-up(lg)) {
|
||||
@include _type-step(map-get($t, desktop));
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------
|
||||
// Typography Tokens (parsed from your image)
|
||||
// Notes:
|
||||
// - Sizes given both as px in the image; use px here.
|
||||
// - Letter-spacing values are in px (as shown in the spec).
|
||||
// - Paragraph spacing = margin-bottom.
|
||||
// - Families: Booton and Tobias (swap to your font stacks).
|
||||
// ---------------------------------------
|
||||
|
||||
$type-scale: (
|
||||
// Displays
|
||||
display-lg: (
|
||||
font: $font-family-sans-serif,
|
||||
weight: 300,
|
||||
mobile: (size: 64px, line: 70.4px, letter: -4.5px, pspace: 32px),
|
||||
tablet: (size: 72px, line: 70.4px, letter: -5px, pspace: 32px),
|
||||
desktop: (size: 112px, line: 112px, letter: -7px, pspace: 32px)
|
||||
),
|
||||
display-md: (
|
||||
font: $font-family-monospace,
|
||||
weight: 300,
|
||||
mobile: (size: 48px, line: 52.8px, letter: -2px, pspace: 32px),
|
||||
tablet: (size: 60px, line: 52.8px, letter: -2px, pspace: 32px),
|
||||
desktop: (size: 72px, line: 76.8px, letter: -3px, pspace: 32px)
|
||||
),
|
||||
display-sm: (
|
||||
font: $font-family-monospace,
|
||||
weight: 300,
|
||||
mobile: (size: 40px, line: 46px, letter: -1px, pspace: 16px),
|
||||
tablet: (size: 56px, line: 46px, letter: -1px, pspace: 16px),
|
||||
desktop: (size: 64px, line: 70.4px, letter: -1.5px,pspace: 32px)
|
||||
),
|
||||
|
||||
// Headings
|
||||
heading-lg: (
|
||||
font: $font-family-monospace,
|
||||
weight: 300,
|
||||
mobile: (size: 36px, line: 41.4px, letter: -0.25px, pspace: 16px),
|
||||
tablet: (size: 42px, line: 41.4px, letter: -0.5px, pspace: 16px),
|
||||
desktop: (size: 48px, line: 52.8px, letter: -1px, pspace: 32px)
|
||||
),
|
||||
heading-md: (
|
||||
font: $font-family-monospace,
|
||||
weight: 300,
|
||||
mobile: (size: 32px, line: 40px, letter: 0px, pspace: 16px),
|
||||
tablet: (size: 36px, line: 40px, letter: -0.5px,pspace: 16px),
|
||||
desktop: (size: 40px, line: 48px, letter: -1px, pspace: 16px)
|
||||
),
|
||||
heading-sm: (
|
||||
font: $font-family-monospace,
|
||||
weight: 300,
|
||||
mobile: (size: 24px, line: 35px, letter: 0.25px, pspace: 16px),
|
||||
tablet: (size: 28px, line: 35px, letter: -0.25px,pspace: 16px),
|
||||
desktop: (size: 32px, line: 40px, letter: -0.5px, pspace: 16px)
|
||||
),
|
||||
|
||||
// Subheads LG
|
||||
subhead-lg-r: (
|
||||
font: $font-family-sans-serif,
|
||||
weight: 400,
|
||||
mobile: (size: 24px, line: 30px, letter: -1px, pspace: 16px),
|
||||
tablet: (size: 28px, line: 35px, letter: -0.75px,pspace: 16px),
|
||||
desktop: (size: 32px, line: 40px, letter: -0.5px, pspace: 16px)
|
||||
),
|
||||
subhead-lg-l: (
|
||||
font: $font-family-sans-serif,
|
||||
weight: 300,
|
||||
mobile: (size: 24px, line: 30px, letter: -1px, pspace: 16px),
|
||||
tablet: (size: 28px, line: 35px, letter: -1px, pspace: 16px),
|
||||
desktop: (size: 32px, line: 40px, letter: -1px, pspace: 16px)
|
||||
),
|
||||
|
||||
// Subheads MD
|
||||
subhead-md-r: (
|
||||
font: $font-family-sans-serif,
|
||||
weight: 400,
|
||||
mobile: (size: 24px, line: 30px, letter: -1px, pspace: 16px),
|
||||
tablet: (size: 26px, line: 35px, letter: -1px, pspace: 16px),
|
||||
desktop: (size: 28px, line: 35px, letter: -1px, pspace: 16px)
|
||||
),
|
||||
subhead-md-l: (
|
||||
font: $font-family-sans-serif,
|
||||
weight: 300,
|
||||
mobile: (size: 24px, line: 30px, letter: -1px, pspace: 16px),
|
||||
tablet: (size: 26px, line: 35px, letter: -1px, pspace: 16px),
|
||||
desktop: (size: 26px, line: 35px, letter: -1px, pspace: 16px)
|
||||
),
|
||||
|
||||
// Subheads SM
|
||||
subhead-sm-r: (
|
||||
font: $font-family-sans-serif,
|
||||
weight: 400,
|
||||
mobile: (size: 18px, line: 30px, letter: -0.5px, pspace: 16px),
|
||||
tablet: (size: 18px, line: 30px, letter: -0.5px, pspace: 16px),
|
||||
desktop: (size: 24px, line: 30px, letter: -1px, pspace: 16px)
|
||||
),
|
||||
subhead-sm-l: (
|
||||
font: $font-family-sans-serif,
|
||||
weight: 300,
|
||||
mobile: (size: 18px, line: 30px, letter: -0.5px, pspace: 16px),
|
||||
tablet: (size: 18px, line: 30px, letter: -0.5px, pspace: 16px),
|
||||
desktop: (size: 24px, line: 30px, letter: -1px, pspace: 16px)
|
||||
),
|
||||
|
||||
// Body
|
||||
body-r: (
|
||||
font: $font-family-sans-serif,
|
||||
weight: 400,
|
||||
mobile: (size: 16px, line: 26.1px, letter: 0px, pspace: 18px),
|
||||
tablet: (size: 16px, line: 26.1px, letter: 0px, pspace: 18px),
|
||||
desktop: (size: 18px, line: 26.1px, letter: -0.5px,pspace: 18px)
|
||||
),
|
||||
body-l: (
|
||||
font: $font-family-sans-serif,
|
||||
weight: 300,
|
||||
mobile: (size: 16px, line: 26.1px, letter: 0px, pspace: 16px),
|
||||
tablet: (size: 16px, line: 26.1px, letter: 0px, pspace: 16px),
|
||||
desktop: (size: 18px, line: 26.1px, letter: -0.5px,pspace: 16px)
|
||||
),
|
||||
|
||||
// Labels
|
||||
label-r: (
|
||||
font: $font-family-sans-serif,
|
||||
weight: 400,
|
||||
mobile: (size: 14px, line: 23.2px, letter: 0px, pspace: 18px),
|
||||
tablet: (size: 14px, line: 23.2px, letter: 0px, pspace: 18px),
|
||||
desktop: (size: 16px, line: 23.2px, letter: 0px, pspace: 18px)
|
||||
),
|
||||
label-l: (
|
||||
font: $font-family-sans-serif,
|
||||
weight: 300,
|
||||
mobile: (size: 14px, line: 23.2px, letter: 0px, pspace: 16px),
|
||||
tablet: (size: 14px, line: 23.2px, letter: 0px, pspace: 16px),
|
||||
desktop: (size: 16px, line: 23.2px, letter: 0px, pspace: 16px)
|
||||
)
|
||||
);
|
||||
|
||||
// ---------------------------------------
|
||||
// Example usage
|
||||
// ---------------------------------------
|
||||
.display-lg { @include type(display-lg); }
|
||||
.display-md { @include type(display-md); }
|
||||
.display-sm { @include type(display-sm); }
|
||||
|
||||
.h-lg { @include type(heading-lg); }
|
||||
.h-md { @include type(heading-md); }
|
||||
.h-sm { @include type(heading-sm); }
|
||||
|
||||
.sh-lg-r { @include type(subhead-lg-r); }
|
||||
.sh-lg-l { @include type(subhead-lg-l); }
|
||||
.sh-md-r { @include type(subhead-md-r); }
|
||||
.sh-md-l { @include type(subhead-md-l); }
|
||||
.sh-sm-r { @include type(subhead-sm-r); }
|
||||
.sh-sm-l { @include type(subhead-sm-l); }
|
||||
|
||||
.body-r { @include type(body-r); }
|
||||
.body-l { @include type(body-l); }
|
||||
|
||||
.label-r { @include type(label-r); }
|
||||
.label-l { @include type(label-l); }
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// Variables
|
||||
$grid-gap: 40px;
|
||||
$grid-gap: 8px;
|
||||
$grid-gap-lg: 80px;
|
||||
|
||||
// General stuff ---------------------------------------------------------------
|
||||
@@ -197,7 +197,6 @@ section {
|
||||
}
|
||||
|
||||
// New Page Layouts ---------------------------------------------------------------
|
||||
|
||||
.container-new {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
116
styles/_xrpl-grid.scss
Normal file
116
styles/_xrpl-grid.scss
Normal file
@@ -0,0 +1,116 @@
|
||||
// XRPL Grid
|
||||
// -----------------------------------------------------------------------------
|
||||
// A namespaced grid layer that reuses Bootstrap's grid mixins while providing
|
||||
// XRPL-specific gutters and container padding.
|
||||
|
||||
$xrpl-grid-gutter: 8px;
|
||||
|
||||
@mixin xrpl-grid-generate-cols($columns, $suffix: null) {
|
||||
@for $i from 1 through $columns {
|
||||
$selector: if($suffix, ".xrpl-grid__col-#{$suffix}-#{$i}", ".xrpl-grid__col-#{$i}");
|
||||
|
||||
#{$selector} {
|
||||
@include make-col($i, $columns);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin xrpl-grid-generate-auto($suffix: null) {
|
||||
$selector: if($suffix, ".xrpl-grid__col-#{$suffix}-auto", ".xrpl-grid__col-auto");
|
||||
|
||||
#{$selector} {
|
||||
@include make-col-auto();
|
||||
}
|
||||
}
|
||||
|
||||
@mixin xrpl-grid-generate-fill($suffix: null) {
|
||||
$selector: if($suffix, ".xrpl-grid__col-#{$suffix}", ".xrpl-grid__col");
|
||||
|
||||
#{$selector} {
|
||||
flex: 1 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin xrpl-grid-generate-offsets($columns, $suffix: null) {
|
||||
@for $i from 0 through ($columns - 1) {
|
||||
$selector: if($suffix, ".xrpl-grid__offset-#{$suffix}-#{$i}", ".xrpl-grid__offset-#{$i}");
|
||||
|
||||
#{$selector} {
|
||||
@include make-col-offset($i, $columns);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.xrpl-grid {
|
||||
&__container {
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: 16px;
|
||||
padding-left: 16px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding-right: 24px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-right: 32px;
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
padding-right: 112px;
|
||||
padding-left: 112px;
|
||||
max-width: 1440px;
|
||||
}
|
||||
}
|
||||
|
||||
&__row {
|
||||
@include make-row($xrpl-grid-gutter);
|
||||
}
|
||||
|
||||
&__col {
|
||||
@include make-col-ready();
|
||||
}
|
||||
}
|
||||
|
||||
// Base (0 - 575px) — 4-column grid
|
||||
@include xrpl-grid-generate-fill();
|
||||
@include xrpl-grid-generate-cols(4);
|
||||
@include xrpl-grid-generate-auto();
|
||||
@include xrpl-grid-generate-offsets(4);
|
||||
|
||||
// Tablet (≥576px) — maintain 8-column grid across sm/md ranges
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include xrpl-grid-generate-fill('sm');
|
||||
@include xrpl-grid-generate-cols(8, 'sm');
|
||||
@include xrpl-grid-generate-auto('sm');
|
||||
@include xrpl-grid-generate-offsets(8, 'sm');
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@include xrpl-grid-generate-fill('md');
|
||||
@include xrpl-grid-generate-cols(8, 'md');
|
||||
@include xrpl-grid-generate-auto('md');
|
||||
@include xrpl-grid-generate-offsets(8, 'md');
|
||||
}
|
||||
|
||||
// Large (≥992px) — 12-column grid
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include xrpl-grid-generate-fill('lg');
|
||||
@include xrpl-grid-generate-cols(12, 'lg');
|
||||
@include xrpl-grid-generate-auto('lg');
|
||||
@include xrpl-grid-generate-offsets(12, 'lg');
|
||||
}
|
||||
|
||||
// XL (≥1280px) — retain 12-column grid with wider margins
|
||||
@include media-breakpoint-up(xl) {
|
||||
@include xrpl-grid-generate-fill('xl');
|
||||
@include xrpl-grid-generate-cols(12, 'xl');
|
||||
@include xrpl-grid-generate-auto('xl');
|
||||
@include xrpl-grid-generate-offsets(12, 'xl');
|
||||
}
|
||||
|
||||
|
||||
@@ -17,6 +17,7 @@ $enable-shadows: true;
|
||||
$dropdown-box-shadow: 0px 5px 40px $black;
|
||||
$card-spacer-x: 2rem;
|
||||
$card-spacer-y: 2rem;
|
||||
$spacer: 0.5rem;
|
||||
// Bootstrap 5 uses separate variables for card header/footer
|
||||
$card-cap-padding-y: 2rem;
|
||||
$card-cap-padding-x: 2rem;
|
||||
@@ -39,6 +40,14 @@ $font-family-sans-serif: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFon
|
||||
$base-size: 16px;
|
||||
$line-height-base: 1.5;
|
||||
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 576px,
|
||||
lg: 992px,
|
||||
xl: 1280px
|
||||
);
|
||||
|
||||
// Bootstrap v5 - Import only what we need
|
||||
@import "../node_modules/bootstrap/scss/functions";
|
||||
@import "../node_modules/bootstrap/scss/variables";
|
||||
@@ -83,6 +92,7 @@ $line-height-base: 1.5;
|
||||
@import "_top-nav.scss";
|
||||
@import "_top-banner.scss";
|
||||
@import "_content.scss";
|
||||
@import "_xrpl-grid.scss";
|
||||
@import "_code-tabs.scss";
|
||||
@import "_code-walkthrough.scss";
|
||||
@import "_diagrams.scss";
|
||||
|
||||
Reference in New Issue
Block a user