MMM-jast

plainbroke

Can anyone tell me the line I need to add to my Custom.css
to enlarge the font in MMM-jast?

BKeyport

@plainbroke In the future, you should go ahead and look at the css file for the module, but,


.jast-wrapper {
  overflow: hidden;
  --size: 1.4rem; /* <- here seems to be the key, currently 28px per defaults */
  font-size: var(--size);
  line-height: calc(var(--size) * 1.44);
}

1.4rem is slightly smaller than the usual Medium text, for reference, here are the defaults, out of main.css:

 --font-size: 20px; /* Formula for below: font size x rem size */
  --font-size-xsmall: 0.75rem;  /* 15px  */
  --font-size-small: 1rem;  /* 20px */
  --font-size-medium: 1.5rem;  /* 30px */ 
  --font-size-large: 3.25rem;  /* 65px  */ 
  --font-size-xlarge: 3.75rem; /* 75px */

If you want to set it to a standard, I would assume you could use --size: var(--font-size-medium);

ankonaskiff17

@BKeyport A little side note but with the proliferation of bigger screens people are using to display MM’s, that block of font sizes in main.css is worth lifting the whole block and adjusting all your fonts in one place rather than tweaking each modules font individually.

I found that by accident but once screen size crosses a certain size threshold you don’t need to scale up the font anymore. Just put more modules on application.
For example, Say your main living area you have a 60 inch screen and you set an appropriate font size for that, if you step up to a72 inch screen you don’t need to ratchet up the font size. My accidental discovery which was just playing around, a 4 inch tall font on your 60 inch TV doesn’t need to step up to a 6 inch font on a 72 inch.

BKeyport

@ankonaskiff17 I actually do just that, however, many modules, like this one don’t use the standard variables. So, I have to set each one manually, thusly:

from my custom.css


:root {
	--gap-body-top: 5px;
	--gap-body-right: 5px;
	--gap-body-bottom: 5px;
	--gap-body-left: 5px;
	--gap-modules: 15px;
	--color-text: #ddd;
	--color-text-dimmed: #666;
	--color-text-bright: #fff;
	--color-background: #000;
	--font-size: 21px;
	--font-size-xsmall: 0.75rem;
	--font-size-small: 1rem;
	--font-size-medium: 1.5rem;
	--font-size-large: 3.25rem;
	--font-size-xlarge: 3.75rem;
}

… Example module change:


/* Flipclock - Set size */
.tick-flip, .tick-text-inline {
	font-size: var(--font-size-xlarge);
}