Mainly this trades !important declarations for greater
specificity in order to move items up in the specificity checks.
Also removing .button-roll2 since it's not used and moving
p.small-text closer to p since they're candidates for removal as
well.
I really want the circles to work to be more like the official
character sheets, but it looks too weird with the square elements
inside it.
Also going with consistent margins around the elements--I'm not
sure why the right margin was 0 before.
I'm still learning to use grid display properly, can't you tell?
This seems to smoosh things together better, while also giving a
full 250px to Flaws like "Overactive Imagination" or "Jumps to
Conclusions" (though I should probably still make it even wider
to accommodate localization).
Previously we were displaying things as:
TITLE/NAME
ROLL CUTE | ROLL CUNNING | ROLL FIERCE
...which leaves a lot of blankspace to the right of the title. I
don't think the blank really improves legibility, so let's move
the buttons to the same line:
TITLE/NAME | ROLL CUTE | ROLL CUNNING | ROLL FIERCE
Shifting those items around caused the repeating Person Problems
section to go wonky, so also switched to column display there and
shifted to h3 instead of h4.
A couple problems introduced with this change:
- The "header" for Person Problems looks wonky and needs sprucing
up.
- Flaws like "Jumps to Conclusions" and "Overactive Imagination"
get cropped on the right due to the shorter text input--this
can probably be fixed simply by making the Flaws text input
longer since it has no roll buttons to the right of it.
- Powers like "Sight Beyond Sight" just barely fit into the text
field, so might need to smoosh the buttons closer together to
make more room.
Still, feels to me like an improvement overall.
The earlier re-arranging of <h4> tags revealed the
person-problems section wasn't lining up properly, and while
investigating that I realized that the h4 properties weren't
really being applied to the input fields, and instead it was more
like the h4 was being used as a div.
Instead of having a separate div (and needing to propagate the
grid display down to it), I figure it makes more sense to apply
the class directly to the input elements.
It _seems_ like only one of the redtext rules was being applied
to the input fields, so I changed the name of it to more closely
match what it actually is (no red text here), stripped all the
input fields of their h4 tags, and renamed them all to
repeating-title.
I noticed the <h4> tags were wrapping more than they strictly
needed to, so fixing that and adjusting indentation here.
This *does* break the display on Person Problems, though, so need
to follow up on that next.
Mainly wanted this for the character token since it might not be
clear how to edit that when none is assigned, but figured I'd
throw one in for the dice-roller as well. (Maybe should have
more explanation in the title for hover text?)
Daniel R. Collins ("Delta")