Harlowe 2's debugger can get in the way. And if you have a lot of variables, the rows crunch up until the text on them is unreadable. Here's some CSS hacks to work with the debugger while that's still a problem.
div.variables {
position: fixed;
top: 0px;
bottom: 70%;
left: 50%;
right: 0px;
}
.variable-row {
flex-shrink: 0;
}
tw-debugger {
position: fixed;
top: 0px;
bottom: auto;
left: 0px;
right: 50%;
/* display: none; */
}
tw-debugger:hover {
opacity: 0.5;
}
In order, then:
div.variables {}
The code in this is anchoring the list of variables at the top right of the screen, and is keeping it restricted to the right 50% and the top 30% of the screen. This is because my fresh text is at the bottom of my screen, because my game scrolls from the bottom up. So I want the debugger up and out of the way.
.variable-row {flex-shrink: 0;}
The most important. This keeps the rows at a minimum height and stops them getting so squished they're unreadable. If there are too many to fit in the area of the screen I've allowed them, the scroll bar is already enabled and will let me scroll through.
tw-debugger {}
The variables are anchored at the top right, so the debugger (with the "DEBUG" control on it) is anchored to top left. Likewise it's prevented from reaching into the right 50% of the screen to keep it separate from the variable list.
I also have a commented out line here, if you uncomment "display: none;" the debugger will vanish entirely. Useful for when you want to use the debug feature to preview a page of your story without bothering to reset the starting passage.
tw-debugger:hover {opacity: 0.5;}
Whenever I mouse over any part of the debugger it fades to let me look behind it. This is 50% opacity, you can change as needed.
With all these on, here's what my debugger looks like while mousing over it. Note the scrollbar, I've scrolled down a bit to hide some spoilers! You can see some of my quicklinks code, which is what inspired me to figure out how to fix the row height problem on the variable list.
