notes:
- It wasn't clear from your question if you wanted the variables incremented from their current values of zero to the new values (eg, variable = current + offset => new) or if you wanted the current values replaced with the new values (eg. variable = new), so I assumed you wanted them to be incremented.
- All CSS in the following example needs to be placed within your Story Styleetsheet area.
- A more experienced CSS coder may know of a better solution.
1. First we will solve the "Text at top of Page" and "Changing variables with (Setter) Links" parts of your question.
1a. Initialise your variables within a startup tagged special passage.
(set: $intelligence to 0, $love to 0, $strength to 0)
1b. Show the current values at top of page using a header tagged special passage.
Intelligence: $intelligence Love: $love Strength: $strength
1c. Passage containing the links used to change the variables values.
Having no reply, she looked around and thought to herself, '...older brother must not have returned yet. Perhaps I shall wait while...’
(link: "Eating some drulberry")[
(set: $love to it + 2, $strength to it + 7)
(go-to: "Drulberries")
]
(link: "Kniting a winter tunic")[
(set: $intelligence to it + 8, $love to it + 10, $strength to it + 4)
(go-to: "Kniting")
]
1d You will need to manually create the Drulberries and Kniting passages using the +Passage option in the lower right of the Passage Map scene..
1e. CSS needed to hide the visual output of the startup tagged special passage.
tw-includes[type="startup"] {
display: none;
}
2. Next comes the hard "Un-center the header text" part.
There are three main reasons why this is hard;
- because unfortunately Harlowe's header sections are actual children of the tw-passage element, and not of the tw-story element.
- The (child) text content of the tw-passage is not contained within it's own element, which makes effecting the other child elements of tw-passage independently to that text difficult.
- The default width of the tw-passage element is a percentage calculated based on the width view-port less the 20% left & right paddings on the tw-story element. Which means any positional adjustment of a tw-passage child element needs to wait until after the passage's width has been calculated.
There are a number of solutions, each with there own pros and cons.
2a. Use CSS to re-position the header to slightly above the upper left corner of it's parent tw-passage element.
tw-include[type="header"] {
display: block;
width: 30em;
position: absolute;
top: -1em;
left: 0;
text-align: left;
}
... the main downside of this method is the slight delay before the header is correctly re-positioned (moved left) within it's line.
2b, Wrapping the text content of all centred passages within a bespoke element and then applying the text-align: center to it rather than the tw-passage element.
Passage content.
|centered>[\
Having no reply, she looked around and thought to herself, '...older brother must not have returned yet. Perhaps I shall wait while...’
(link: "Eating some drulberry")[
(set: $love to it + 2, $strength to it + 7)
(go-to: "Drulberries")
]
(link: "Kniting a winter tunic")[
(set: $intelligence to it + 8, $love to it + 10, $strength to it + 4)
(go-to: "Kniting")
]
]
CSS used to center the above text, remember to remove the previous tw-include[type="header"] CSS
tw-passage {
font-size: 4.4vh;
font-size: 4.4vw;
font-size: 4.4vmin;
line-height: normal;
}
tw-hook[name="centered"] {
display: block;
text-align: center;
}
... the main downside to this solution transition delay of the header being shown on the first passage, which doesn't seem to happen on the second passage after you use a ling to get there.