From a9072370ca1eb9a5cce928b1d487db0f307edea6 Mon Sep 17 00:00:00 2001 From: ivarlovlie Date: Tue, 20 Sep 2022 15:24:27 +0800 Subject: feat: Move old apps into it's own directory --- .../src/styles/custom-style/_typography.scss | 95 ++++++++++++++++++++++ 1 file changed, 95 insertions(+) create mode 100644 old-apps/web-shared/src/styles/custom-style/_typography.scss (limited to 'old-apps/web-shared/src/styles/custom-style/_typography.scss') diff --git a/old-apps/web-shared/src/styles/custom-style/_typography.scss b/old-apps/web-shared/src/styles/custom-style/_typography.scss new file mode 100644 index 0000000..7fa98c5 --- /dev/null +++ b/old-apps/web-shared/src/styles/custom-style/_typography.scss @@ -0,0 +1,95 @@ +@use '../base' as *; + +// -------------------------------- + +// (START) Global editor code https://codyhouse.co/ds/globals/typography + +// -------------------------------- + +:root { + // font family + --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + + // font size + --text-base-size: 1rem; // body font-size + --text-scale-ratio: 1.2; // multiplier used to generate the type scale values 👇 + + // line-height + --body-line-height: 1; + --heading-line-height: 1; + + // capital letters - used in combo with the lhCrop mixin + --font-primary-capital-letter: 1; + + // unit - don't modify unless you want to change the typography unit (e.g., from Rem to Em units) + --text-unit: var(--text-base-size); // if Em units → --text-unit: 1em; +} + +:root, * { + // type scale + --text-xs: calc((var(--text-unit) / var(--text-scale-ratio)) / var(--text-scale-ratio)); + --text-sm: calc(var(--text-xs) * var(--text-scale-ratio)); + --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio)); + --text-lg: calc(var(--text-md) * var(--text-scale-ratio)); + --text-xl: calc(var(--text-lg) * var(--text-scale-ratio)); + --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio)); + --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio)); + --text-xxxxl: calc(var(--text-xxxl) * var(--text-scale-ratio)); +} + +body { + font-family: var(--font-primary); +} + +h1, h2, h3, h4 { + font-family: var(--font-primary); + --heading-font-weight: 600; +} + +// font family +.font-primary { font-family: var(--font-primary); } + +// -------------------------------- + +// (END) Global editor code + +// -------------------------------- + +// link style +a, .link {} + +mark { + background-color: alpha(var(--color-accent), 0.2); + color: inherit; +} + +.text-component { + --line-height-multiplier: 1; + --text-space-y-multiplier: 1; + + > * { // use Em units + --text-unit: 1em; + --space-unit: 1em; + } + + blockquote { + padding-left: 1em; + border-left: 4px solid var(--color-contrast-lower); + font-style: italic; + } + + hr { + background: var(--color-contrast-lower); + height: 1px; + } + + figcaption { + font-size: var(--text-sm); + color: var(--color-contrast-low); + } +} + +.article { // e.g., blog posts + --body-line-height: 1.58; // set body line-height + --text-space-y-multiplier: 1.2; // control vertical spacing +} \ No newline at end of file -- cgit v1.3