Convert innate spells to use `display: grid`

[jazeee]

Add styles and colors to help differentiate the header. This also automatically fixes #5 Convert to grid to help with responsiveness and alignment of columns.

Examples:

Arcane

Example with narrow screen

Divine

Example with narrow screen

Innate

Example with narrow screen

[johnlamping]

This looks great.

But it leaves a lot of unused space. And I find that I'm often wishing my character sheets were smaller (especially when I have half a dozen NPC character sheets spread around my laptop.

I'm not familiar with grid. Is it easy to get rid of the white space between the content elements?

[jazeee]

Grid provides a lot of flexibility, and is also responsive to screen width.

Regarding the text area, I am unsure what we want to do. Perhaps I should revert that to single line input field, like before.

[johnlamping]

Maybe a two line text area would be a good compromise. You know you need at least one line, and this way, you handle most cases. Can it be made scrollable if it overflows?

As a low priority, maybe using a div with contenteditable is an alternative, as suggested in the second answer here (https://stackoverflow.com/questions/57942695/make-input-height-increase-when-typing)

I don't know if Roll20 processes changes to elements like that, but you could have an invisible text area that Roll20 knew about and a visible contenteditable element, with a script copying between them using addEventListener('input', (event) => {});

[jazeee]

Maybe a two line text area would be a good compromise. You know you need at least one line, and this way, you handle most cases. Can it be made scrollable if it overflows?

As a low priority, maybe using a div with contenteditable is an alternative, as suggested in the second answer here (https://stackoverflow.com/questions/57942695/make-input-height-increase-when-typing)

I don't know if Roll20 processes changes to elements like that, but you could have an invisible text area that Roll20 knew about and a visible contenteditable element, with a script copying between them using addEventListener('input', (event) => {});

I tested the suggestions, Roll20 doesn't allow for addEventListener. I believe that is all stripped as part of the security and sanitization. If it were allowed, we'd be able to do all sorts of custom things, including cross site hackery.

In a test:

ReferenceError: document is not defined
    at eval (eval at messageHandler (sheetsandboxworker.js:732:1), <anonymous>:1171:18)
    at eval (<anonymous>)
    at messageHandler (sheetsandboxworker.js:732:1)

I've also tried <textarea onChange="console.log('test')" ..., but the onChange is stripped (for the same reasons)

[jazeee]

I also tried the example div contenteditable="true" in the stack overflow, with weird results.

[jazeee]

Here is a two line style, (with overflow): It seems to work fine.

[jazeee]

Updated the default height to two rows in https://github.com/epic-power-rpg/roll20/pull/23

This PR is stacked on that, so, it would be better to identify if the textarea is the way to go, for starters.

[jazeee]

Here's an example of a narrow screen. display: grid provides responsiveness, which probably helps address the topic of using too much space (horizontal).

I'll do some more style clean up to remove vertical space.