docs/assets/css/typography.css

78 lines
1.7 KiB
CSS

@layer base {
/*
* Font faces for Roboto Flex and Roboto Mono.
*
* - https://fonts.google.com/specimen/Roboto+Flex
* - https://fonts.google.com/specimen/Roboto+Mono
*
* The TTF fonts have been compressed to woff2,
* preserving the latin character subset.
*
* */
/* Roboto Flex */
@font-face {
font-family: 'Roboto Flex';
src: url('/assets/fonts/RobotoFlex.woff2') format('woff2');
font-weight: 100 1000; /* Range of weights Roboto Flex supports */
font-stretch: 100%; /* Range of width Roboto Flex supports */
font-style: oblique 0deg 10deg; /* Range of oblique angle Roboto Flex supports */
font-display: fallback;
}
/* Roboto Mono */
@font-face {
font-family: 'Roboto Mono';
src: url('/assets/fonts/RobotoMono-Regular.woff2') format('woff2');
font-weight: 100 700; /* Define the range of weight the variable font supports */
font-style: normal;
font-display: fallback;
}
/* Roboto Mono Italic */
@font-face {
font-family: 'Roboto Mono';
src: url('/assets/fonts/RobotoMono-Italic.woff2') format('woff2');
font-weight: 100 700; /* Define the range of weight the variable font supports */
font-style: italic;
font-display: fallback;
}
.prose {
li {
@apply my-2;
> :last-child,
> :first-child {
margin: 0;
}
}
a {
font-weight: 400;
}
hr {
@apply mb-4 mt-8;
}
h1 {
@apply my-4 text-4xl;
line-height: 1.167;
}
h2 {
@apply mb-4 mt-8 text-3xl;
line-height: 1.2;
}
h3 {
@apply text-2xl;
line-height: 1.167;
}
h4 {
@apply text-xl;
line-height: 1.235;
}
h5 {
@apply text-lg;
line-height: 1.75;
}
}
}