Skip to content

Instantly share code, notes, and snippets.

@starandtina
Forked from sebastiano-guerriero/typography_10.scss
Created October 6, 2018 14:24
Show Gist options
  • Save starandtina/7e54d3350f75f631935c48e6dbbe857d to your computer and use it in GitHub Desktop.
Save starandtina/7e54d3350f75f631935c48e6dbbe857d to your computer and use it in GitHub Desktop.
/* --------------------------------
Typography
-------------------------------- */
:root {
--font-primary: sans-serif;
--font-secondary: serif;
/* set base values */
--text-base-size: 1em;
--text-scale-ratio: 1.2;
/* type scale */
--text-xs: calc(1em / (var(--text-scale-ratio) * var(--text-scale-ratio)));
--text-sm: calc(1em / var(--text-scale-ratio));
--text-md: calc(1em * var(--text-scale-ratio));
--text-lg: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio));
--text-xl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
--text-xxl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
--text-xxxl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
/* line-height */
--heading-line-height: 1.2;
--body-line-height: 1.4;
}
@include breakpoint(md) {
:root {
--text-base-size: 1.25em;
--text-scale-ratio: 1.25;
}
}
body {
font-size: var(--text-base-size);
font-family: var(--font-primary);
color: var(--color-text);
}
h1, h2, h3, h4, form legend {
color: var(--color-text-heading);
margin-bottom: var(--space-xxs);
line-height: var(--heading-line-height);
}
/* text size */
.text--xxxl {
font-size: var(--text-xxxl);
}
h1, .text--xxl {
font-size: var(--text-xxl);
}
h2, .text--xl {
font-size: var(--text-xl);
}
h3, .text--lg {
font-size: var(--text-lg);
}
h4, .text--md {
font-size: var(--text-md);
}
.text--sm, small {
font-size: var(--text-sm);
}
.text--xs {
font-size: var(--text-xs);
}
p {
line-height: var(--body-line-height);
}
a {
color: var(--color-link);
&:visited {
color: var(--color-link-visited);
}
}
b, strong {
font-weight: bold;
}
.text-container {
h2, h3, h4 {
margin-top: var(--space-sm);
}
ul, ol, p {
margin-bottom: var(--space-md);
}
ul, ol {
list-style-position: outside;
padding-left: 24px;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
ul li, ol li {
line-height: var(--body-line-height);
}
em {
font-style: italic;
}
u {
text-decoration: underline;
}
}
/* utility classes */
.truncate {
// truncate text if it exceeds parent
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment