Aeolian, An Adaptive Typographic Scale

[Euthymious]

Hello, I've been silenlty reading this group for some while, but this is my first real post with something to share. 

I am just learning how to use TW5, in particular trying to figure out how css styling works.

So, here is my humble attempt of styling TiddlyWiki, using a modular typographic scale and adding some responsiveness. On desktop it utilizes a scale ratio of 1.2 and rather wide line spacing, and degrades to more "compact" line height and ratio of 1.125 on small mobile screens.

Not much to appreciate yet, but I have learned quite a bit while making it and would be glad if anybody finds it useful.

[Darth Mole]

Very cool! I was just starting to look into globally scaling down some interface elements I created so this is right on the path I was heading. Thanks!

[TiddlyTweeter]

It is interesting.

Are you redefining CSS rules in TW?

OR just overlaying additional CSS? 

Just wondering.

TT

[Euthymious]

Yes, just overlaying — I add one stylesheet setting font size and line height for tiddler titles, headers and paragraphs (and several other properties to fix broken tabs) for 'mobile mode', then use a media query to set different values for 'desktop mode'.

And, as I've mentioned, I'm just learning — so have no idea what 'redefining' is. Could you point where should I start digging?

 

пятница, 11 июня 2021 г. в 19:28:58 UTC+3, TiddlyTweeter:

[Euthymious]

Thank you.

Downscaling was not the main purpose, but I did decrease the size of the tiddler titles and buttons — they always seemed too large to me.

пятница, 11 июня 2021 г. в 16:22:18 UTC+3, iamdar...@gmail.com: