I personally prefer to do this only on fluid width (adaptive) elements, so I would keep this limited to Protostar's fluid layout.

In any case, you ned to escape the calc expressions, otherwise they will be evaluated by the LESS compiler.

font-size: calc(16px + 1vw); compiles to font-size: calc(17px);

font-size: calc(~"16px + 1vw"); is one way to escape it so it compiles properly.

You need to always run php build/generatecss.php when you change something in the {LESS} files. Don't change the CSS files manually.

You need to always run php build/generatecss.php when you change something in the {LESS} files. Don't change the CSS files manually.

Yes right, i was saving time, remebering that in the past i had used calc somehow and it had passed less compilation (and it does but it needs this escaping),

I will add the escaping and also run build/generatecss.php thus being sure of the real result of the less compiling

I personally prefer to do this only on fluid width (adaptive) elements, so I would keep this limited to Protostar's fluid layout.

No, both of them have the same issue in small screens !
so fixing is needed in both of them !
(also current CSS does not disguish them in regards to font-size of site title)

But your comment made me think that it is good
-- to also add an upper limit too, to both of them, will do exactly this

This is good to test,

I used a better scaling factor and also set maximum to be reached at about 1024px,
(so that it matches existing CSS better)

Font-size will now have
-- minimum of 22px+ and a maximum of 40px

Values (about)
lowest value: 22px,
at 480px: 26px,
at 800px: 33px,
maximum at 1024px: 40px

About calc on line-height i removed it , since not really needed and causes some height jumpling that is a little annoying

does calc and vw works in all joomla supported browsers?

Thanks, for looking my PR,
No it does not work in all supported browsers,

-- but it does not need to work
-- it only needs to fallback to the some value (in our case it falls back to 40px)

See my comment on the first post of this PR:

Browsers supported: all browsers and IE9+
NOTE: for non-supporting browsers (e.g. IE8) the old CSS values will be used as fallback
(that is why you have font-size defined twice)

I have tested this item ✅ successfully on 774094d

I have tested this item ✅ successfully on 774094d

RTC