linear equations in CSS

creating responsive sizes

part of 'easy responsiveness series'😎

form1 .FS testing point-slope form

form2 .FS testing y-intercept form
320px
1280px
1903px (1920 minus scrollbar)

.FS .x1 (document base fontsize)
14px at vmin =  320px
20px at vmin = 1280px

.FS .x2
28px at vmin =  320px
40px at vmin = 1280px

.FS .x3
42px at vmin =  320px
60px at vmin = 1280px

HERO

testing HERO and subline

plain <p> for testing <body> font-size with 'hard-coded' linear equation: calc(0.625vmin + 0.75rem)
Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et deleniti copiosae.

testing default 'code' font-size
Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et deleniti copiosae.

testing 'code' font-size at scale x2
Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et deleniti copiosae.

Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et deleniti copiosae.

generic rule (all rect elements) : [data-rect*="test"]>* { --x1: 320; --y1: 75; --x2: 1920; --y2: 225; --x: 100vw }
inline rules (single rect element): data-LEC=".rect.PT.ratio" or data-LEC=".W.H.PT.ratio" where '.ratio' is one of the predefined ratios.

ratios high:low (.W .H .PT)

1:1
2:1
3:2
4:3
1.618:1
16:9
17:10

ratios low:high (.W .H .PT)

1:1
1:2
2:3
3:4
1:1.618
9:16
10:17

ratios high:low (.W .H .LS)

1:1
2:1
3:2
4:3
1.618:1
16:9
17:10

ratios low:high (.W .H .LS)

1:1
1:2
2:3
3:4
1:1.618
9:16
10:17

The default card ratio is 1:1.

Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et deleniti copiosae.

In this demo ratio it is 1.67:1

Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et deleniti copiosae.

(--ratio: 1.67), which is not

Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et deleniti copiosae.

one of the predefined ratios.

Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et deleniti copiosae.