/* ---- Mixins ------------------------------------------------------------- */ @define-mixin child-margins { &:first-child { margin-top: 0px; } &:last-child { margin-bottom: 0px; } } @define-mixin font-scale-base { --font-scale-coeff: calc((var(--font-scale-to) - var(--font-scale-from)) / ((var(--font-scale-end) / 100) - (var(--font-scale-start) / 100))); font-size: calc(calc((var(--font-scale-from) - (var(--font-scale-start) / 100) * var(--font-scale-coeff)) / 16) * 1rem + var(--font-scale-coeff) * 1vw); } @define-mixin font-scale $from, $to, $start, $end { --font-scale-from: $from; --font-scale-to: $to; --font-scale-start: $start; --font-scale-end: $end; } /* ---- Definitions -------------------------------------------------------- */ :root { --font-sans: Helvetica, sans-serif; --font-larger: 500 2.0rem/1.1 var(--font-sans); --font-large: 500 1.5rem/1.1 var(--font-sans); --font-medium: 500 1.5rem/1.1 var(--font-sans); --font-normal: normal 1.25rem/1.1 var(--font-sans); --font-small: normal 1.0rem/1.1 var(--font-sans); @media (--tablet) { /* --font-larger: 500 1.5rem/1.1 var(--font-sans); --font-large: 500 1.5rem/1.1 var(--font-sans); --font-medium: 500 1.125rem/1.1 var(--font-sans); */ } } /* ---- Font scale --------------------------------------------------------- */ html { @mixin font-scale-base; @mixin font-scale 16, 18, 1440, 1920; @media screen and (max-width: 1440px) { @mixin font-scale 14, 16, $breakpoint-mobile-small, 1440; } @media (--mobile-small) { @mixin font-scale 12, 16, 1, $breakpoint-mobile-small; } } body { font-family: var(--font-sans); font-size: 100%; } /* ---- Rules -------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, p, ul, ol { margin: 1rem 0rem; @mixin child-margins; } h1, h2, h3, h4, h5, h6, p, ul, ol, figcaption, blockquote { max-width: 60ch; } ul, ol, blockquote { margin-top: 2rem; margin-bottom: 2rem; @mixin child-margins; } main { font: var(--font-normal); } h1 { font: var(--font-larger); } h2 { font: var(--font-large); margin-top: 2rem; @mixin child-margins; } h3 { font: var(--font-medium); margin-top: 2rem; @mixin child-margins; } h4 { font: var(--font-normal); } h5 { font: var(--font-smaller); } h6 { font: var(--font-smallest); } blockquote { font: var(--font-medium); margin: 2rem 0rem; @mixin child-margins; } figcaption { margin-top: 0.5rem; font: var(--font-small); }