toto revised this gist . Go to revision
1 file changed, 60 insertions
lgth_step_down.sass(file created)
| @@ -0,0 +1,60 @@ | |||
| 1 | + | @use "sass:math" | |
| 2 | + | ||
| 3 | + | $fs: 21px | |
| 4 | + | $mplr: 1.667 | |
| 5 | + | $lcct: 32 | |
| 6 | + | ||
| 7 | + | $lgth: $lcct * 1rem | |
| 8 | + | $lmch: $mplr * 1rem | |
| 9 | + | $lsid: calc(($mplr - 1) / 2) * 1rem | |
| 10 | + | $lacs: (2 * $mplr - 1) * 1rem | |
| 11 | + | ||
| 12 | + | ||
| 13 | + | html, body | |
| 14 | + | writing-mode: vertical-rl | |
| 15 | + | font-size: $fs | |
| 16 | + | ||
| 17 | + | article | |
| 18 | + | height: $lgth | |
| 19 | + | text: | |
| 20 | + | align: justify | |
| 21 | + | margin: $lacs | |
| 22 | + | ||
| 23 | + | ||
| 24 | + | // Style text frame | |
| 25 | + | @mixin text_frame($_lcct, $should_set_fs: false) | |
| 26 | + | @if $should_set_fs | |
| 27 | + | html, body | |
| 28 | + | font-size: $fs | |
| 29 | + | article | |
| 30 | + | height: $_lcct * 1rem | |
| 31 | + | ||
| 32 | + | @function corresponding_screen_height($text_frame_height) | |
| 33 | + | // Should return `px` | |
| 34 | + | @debug $text_frame_height, $fs, $text_frame_height + (2 * $mplr - 1) * 2 * $fs | |
| 35 | + | @return $text_frame_height + (2 * $mplr - 1) * 2 * $fs | |
| 36 | + | ||
| 37 | + | // Create `max-height` breakpoints | |
| 38 | + | $_last_breakpoint: null | |
| 39 | + | @mixin screen_breakpoints($start_lcct, $decrease, $fs) | |
| 40 | + | $fs: $fs !global | |
| 41 | + | @for $i from 0 through $decrease | |
| 42 | + | @if $i == 0 | |
| 43 | + | @if $_last_breakpoint != null | |
| 44 | + | @media screen and (max-height: corresponding_screen_height($_last_breakpoint)) | |
| 45 | + | @include text_frame($start_lcct - $i, true) | |
| 46 | + | @else | |
| 47 | + | @media screen and (max-height: corresponding_screen_height(($start_lcct - $i + 1) * $fs)) | |
| 48 | + | @include text_frame($start_lcct - $i) | |
| 49 | + | @if $i == $decrease | |
| 50 | + | $_last_breakpoint: ($start_lcct - $i) * $fs !global | |
| 51 | + | ||
| 52 | + | @mixin lgth_step_down($ideal_lcct, $min_lcct, $sizes...) | |
| 53 | + | $sizes: append($sizes, 0px) | |
| 54 | + | @for $i from 1 to length($sizes) | |
| 55 | + | $greedy_step: math.floor(math.div((nth($sizes, $i) - nth($sizes, $i + 1)) * $ideal_lcct, nth($sizes, $i))) | |
| 56 | + | $step: min($greedy_step, $ideal_lcct - $min_lcct) | |
| 57 | + | @include screen_breakpoints($ideal_lcct, $step, nth($sizes, $i)) | |
| 58 | + | ||
| 59 | + | ||
| 60 | + | @include lgth_step_down($lcct, 18, 21px, 18px, 16px) | |
Newer
Older