mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-12-06 17:27:57 +00:00
328 lines
8.9 KiB
SCSS
328 lines
8.9 KiB
SCSS
$base-size: 1rem;
|
|
// Font Settings ===============================================================
|
|
body {
|
|
// font-feature-settings: "liga", "kern";
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
pre, code {
|
|
/* Disable ligatures on code-font, so, for example,
|
|
</ doesn't become a diagonal arrow. */
|
|
font-feature-settings: "liga" 0;
|
|
font-variant-ligatures: none;
|
|
}
|
|
|
|
.h1, .h2, .h3, .h4, .h5, .h6 {
|
|
font-family: $font-family-monospace;
|
|
font-weight: 400;
|
|
}
|
|
|
|
h1, .h1 {
|
|
font-size: 3.875rem;
|
|
line-height: 70px;
|
|
@media (max-width: 480px) {
|
|
font-size: 2.625rem;
|
|
line-height: 48px;
|
|
}
|
|
}
|
|
h2, .h2 {
|
|
font-size: 3.5rem;
|
|
line-height: 62px;
|
|
@include media-breakpoint-down(sm) {
|
|
font-size: 1.75rem;
|
|
line-height: 34px;
|
|
}
|
|
&-sm {
|
|
@include media-breakpoint-down(sm) {
|
|
font-size: 1.75rem !important;
|
|
line-height: 34px !important;
|
|
}
|
|
}
|
|
}
|
|
h3, .h3 {
|
|
font-size: 3rem;
|
|
line-height: 52px;
|
|
@include media-breakpoint-down(sm) {
|
|
font-size: 1.5rem;
|
|
line-height: 28px;
|
|
}
|
|
&-sm {
|
|
@include media-breakpoint-down(sm) {
|
|
font-size: 1.5rem;
|
|
line-height: 28px;
|
|
}
|
|
}
|
|
}
|
|
h4, .h4 {
|
|
font-size: 2rem;
|
|
line-height: 38px;
|
|
@include media-breakpoint-down(sm) {
|
|
font-size: 1.25rem;
|
|
line-height: 26px;
|
|
}
|
|
}
|
|
h5, .h5 {
|
|
font-size: 1.5rem;
|
|
line-height: 32px;
|
|
@include media-breakpoint-down(sm) {
|
|
font-size: 1.125rem;
|
|
line-height: 26px;
|
|
}
|
|
}
|
|
h6, .h6 {
|
|
font-size: 1.25rem;
|
|
line-height: 26px;
|
|
@include media-breakpoint-down(sm) {
|
|
font-size: 1rem;
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
.longform {
|
|
font-size: 1.5rem;
|
|
line-height: 32px;
|
|
color: $gray-100;
|
|
font-weight: 500;
|
|
@include media-breakpoint-down(sm) {
|
|
font-size: 1.25rem;
|
|
line-height: 26px;
|
|
}
|
|
}
|
|
.numbers {
|
|
font-size: 6rem;
|
|
line-height: 104px;
|
|
font-weight: bold;
|
|
color: $white;
|
|
@include media-breakpoint-down(sm) {
|
|
font-size: 3.875rem;
|
|
line-height: 70px;
|
|
}
|
|
}
|
|
p {
|
|
font-size: 1rem;
|
|
line-height: 24px;
|
|
}
|
|
|
|
/* STYLIZED LINKS */
|
|
.arrow-link {
|
|
text-decoration: none;
|
|
}
|
|
.arrow-link:after {
|
|
content: url(../img/icon-long-arrow.svg);
|
|
width: 28px;
|
|
padding-left: 7px;
|
|
transition: all .2s ease-in-out;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
}
|
|
.arrow-link:hover:after {
|
|
padding-left: 14px;
|
|
}
|
|
|
|
/* Japanese language font override ------------------------------------------ */
|
|
|
|
.lang-ja {
|
|
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 JP', 'Noto Sans', sans-serif;
|
|
}
|
|
|
|
pre, code {
|
|
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); }
|