Files
xrpl-dev-portal/styles/_font.scss

201 lines
3.5 KiB
SCSS

$base-size: 1rem;
// Font Settings ===============================================================
body {
// font-feature-settings: "liga", "kern";
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-size: $base-size;
background: $gray-900;
background-color: $gray-900;
line-height: 1.5;
color: $white;
font-family: 'Work Sans', sans-serif;
}
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,
.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;
@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;
}
}
h3, .h3 {
font-size: 3rem;
line-height: 52px;
@include media-breakpoint-down(sm) {
font-size: 1.25rem;
line-height: 28px;
}
}
h4, .h4 {
font-size: 2rem;
line-height: 38px;
@include media-breakpoint-down(sm) {
font-size: 1.125rem;
line-height: 26px;
}
}
h5, .h5 {
font-size: 1.5rem;
line-height: 32px;
@include media-breakpoint-down(sm) {
font-size: 1rem;
line-height: 24px;
}
}
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: normal;
@include media-breakpoint-down(sm) {
font-size: 1.125rem;
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 {
color: $gray-200;
font-size: 1rem;
line-height: 24px;
}
a {
// text-decoration: underline;
color: inherit;
&:hover {
text-decoration: none;
}
}
p a {
color: $blue-purple-400;
}
.fs-base {
font-size: $base-size;
}
.fs-5 {
font-size: 1.25rem;
}
.fs-5-5 {
font-size: 1.375rem;
}
.fs-6 {
font-size: 1.5rem;
}
.normal {
font-weight: normal;
}
.bold {
font-weight: bold;
}
.text-largest {
font-size: 1.5rem;
font-weight: normal;
}
.text-large {
font-size: 1.125rem;
}
.text-small {
font-size: 0.875rem;
}
.text-smaller {
font-size: 0.75rem;
}
.text-smallest {
font-size: 0.625rem;
}
/* STYLIZED LINKS */
.arrow-link {
text-decoration: none;
}
.arrow-link:after {
content: url(../img/icon-green-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: 'Work Sans', 'Noto Sans JP', sans-serif;
h1, h2, h3, h4, h5,
.github-edit-wrap .github-edit,
.navbar .navbar-nav .nav-link,
.content .children-display li a,
.right-sidebar .level-1 a,
.right-sidebar .separator,
.use-case-step-num {
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;
}
}