Mercurial > p > roundup > code
comparison website/www/_static/style.css @ 7373:5e9b0ff1c695
Extend fluid fonts and record location.
I needed smaller fonts (footnotes) and couldn't find the original
site I got it from. So I grabbed them from utopia which is a
diferent location than I got the original from.
Parameters used:
param start end
screen 320 1280
width
Font 16px 18px
Size
Type 1.25 1.33 (Major third scale, perfect fourth scale)
Scale
| author | John Rouillard <rouilj@ieee.org> |
|---|---|
| date | Thu, 18 May 2023 21:10:56 -0400 |
| parents | 113debfd383b |
| children | 0645e3bdd5a3 |
comparison
equal
deleted
inserted
replaced
| 7372:886a5c767d7e | 7373:5e9b0ff1c695 |
|---|---|
| 2 | 2 |
| 3 /* Set up fluid type scale. Major third for smaller screens | 3 /* Set up fluid type scale. Major third for smaller screens |
| 4 and perfect fourth for larger screens. | 4 and perfect fourth for larger screens. |
| 5 Allow override using --font-level-X. | 5 Allow override using --font-level-X. |
| 6 | 6 |
| 7 https://set.studio/some-simple-ways-to-make-content-look-good/ | 7 https://utopia.fyi/type/calculator?c=320,16,1.25,1280,18,1.333,4,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 |
| 8 */ | 8 */ |
| 9 | 9 |
| 10 :root { | 10 :root { |
| 11 --_font-level_-2: var(--font-level_-2, | |
| 12 clamp(0.63em, | |
| 13 0.64rem + -0.01vw, | |
| 14 0.64em) | |
| 15 ); | |
| 16 --_font-level_-1: var(--font-level_-1, | |
| 17 clamp(0.80rem, | |
| 18 0.79rem + 0.07vw, | |
| 19 0.84rem) | |
| 20 ); | |
| 11 --_font-level-0: var(--font-level-0, | 21 --_font-level-0: var(--font-level-0, |
| 12 clamp(1rem, | 22 clamp(1rem, |
| 13 0.96rem + 0.22vw, | 23 0.96rem + 0.21vw, |
| 14 1.13rem) | 24 1.13rem) |
| 15 ); | 25 ); |
| 16 --_font-level-1: var(--font-level-1, | 26 --_font-level-1: var(--font-level-1, |
| 17 clamp( | 27 clamp( |
| 18 1.25 * var(--_font-level-0), | 28 1.25 * var(--_font-level-0), |
| 19 1.16rem + 0.43vw, | 29 1.17rem + 0.42vw, |
| 20 1.5rem) | 30 1.5rem) |
| 21 ); | 31 ); |
| 22 --_font-level-2: var(--font-level-2, | 32 --_font-level-2: var(--font-level-2, |
| 23 clamp( | 33 clamp( |
| 24 1.25 * var(--_font-level-1), | 34 1.25 * var(--_font-level-1), |
| 25 1.41rem + 0.76vw, | 35 1.42rem + 0.73vw, |
| 26 2rem) | 36 2rem) |
| 27 ); | 37 ); |
| 28 --_font-level-3: var(--font-level-3, | 38 --_font-level-3: var(--font-level-3, |
| 29 clamp( | 39 clamp( |
| 30 1.25 * var(--_font-level-2), | 40 1.25 * var(--_font-level-2), |
| 31 1.71rem + 1.24vw, | 41 1.72rem + 1.19vw, |
| 32 2.66rem) | 42 2.66rem) |
| 33 ); | 43 ); |
| 34 --_font-level-4: var(--font-level-4, | 44 --_font-level-4: var(--font-level-4, |
| 35 clamp( | 45 clamp( |
| 36 1.25 * var(--_font-level-3), | 46 1.25 * var(--_font-level-3), |
| 37 2.05rem + 1.93vw, | 47 2.07rem + 1.85vw, |
| 38 3.55rem) | 48 3.55rem) |
| 39 ); | 49 ); |
| 40 } | 50 } |
| 41 | 51 |
| 42 * + * { margin-block-start: 1.2em;} | 52 * + * { margin-block-start: 1.2em;} |
| 246 } | 256 } |
| 247 | 257 |
| 248 table caption { font-weight: bold; font-size: smaller; } | 258 table caption { font-weight: bold; font-size: smaller; } |
| 249 | 259 |
| 250 table.footnote { | 260 table.footnote { |
| 251 font-size: calc(1em - 1pt); | 261 font-size: var(--_font-level_-1); |
| 252 position: relative | 262 position: relative |
| 253 } | 263 } |
| 254 | 264 |
| 255 table.footnote::before { | 265 table.footnote::before { |
| 256 border: 1px solid black; | 266 border: 1px solid black; |