note: The simplest way to suppress line-breaks being automatically added to a block (multiple lines) of code is to wrap it within Collapsing whitespace mark-up.
While the fact that you are using storylet related links is adding to the complexity of achieving the result you are looking for, it is the default styling of HTML generated by the (button:) macro that is the real issue.
As you didn’t include an example of the three related storylets I’ve had to create my own, the following TWEE Notation is what I used as a test project.
:: Startup [startup]
(set: $first to true, $second to true, $third to true)
:: Start
{
(button: "X==")[(link-storylet: 1)]
(button: "=X=")[(link-storylet: 2)]
(button: "==X")[(link-storylet: 3)]
}
:: First
(storylet: when $first)
The first storylet
:: Second
(storylet: when $second)
The second storylet
:: Third
(storylet: when $third)
The third storylet
If you use the Web Developer Tools of your web-browser to inspect the HTML elements generated by the 1st of the “buttons” it will look something like…
<tw-expression type="macro" name="button" return="changer"></tw-expression>
<tw-hook class="enchantment-button" style="margin-left: 0%; width: 33.3333%;">
<tw-expression type="macro" name="link-storylet" return="command">
<tw-link tabindex="0" data-raw="">First</tw-link>
</tw-expression>
</tw-hook>
…and the default CSS being applied to the <tw-hook> element (which represents the “button” itself) looks something like…
element.style {
margin-left: 0%;
width: 33.3333%;
}
.enchantment-button {
display: block;
}
…and the fact that that element has a display value of block is why the “area” associated with each of those “buttons” horizontally fills the entire width of the parent Passage “area”.
And the fact that the HTML structure generated by the (button:) macro doesn’t have a single “parent” identifiable element, and that the group of “buttons” aren’t within an identifiable container element, makes solving the issue a little harder.
So we will need to add both of these, and the easiest way to do that in Harlowe is using Named Hooks. The following code discards the (button:) macro calls and wraps all the links within a identified Hook…
{
|buttons>[
(link-storylet: 1)
(link-storylet: 2)
(link-storylet: 3)
]
}
…and it generates a HTML structure like the following…
<tw-hook name="buttons">
<tw-expression type="macro" name="link-storylet" return="command">
<tw-link tabindex="0" data-raw="">First</tw-link>
</tw-expression>
<tw-expression type="macro" name="link-storylet" return="command">
<tw-link tabindex="0" data-raw="">Second</tw-link>
</tw-expression>
<tw-expression type="macro" name="link-storylet" return="command">
<tw-link tabindex="0" data-raw="">Third</tw-link>
</tw-expression>
</tw-hook>
…and you can use CSS like the following within your project’s Story Stylesheet area to layout the “area” associated with of each those three links horizontally across the page using Flex (aka Flexbox).
tw-hook[name="buttons"] {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 10px;
}
tw-hook[name="buttons"] tw-expression[name="link-storylet"] {
flex-grow: 1;
}
Now all that needs to be done is to make each of those links look more like a “button”, which can be achieved by borrowing the styling CSS used by the (button:) macro and converting it to work with Named Hook based structure. The resulting CSS would look something like the following, which should be added to the end of the above “flex” related CSS…
tw-hook[name="buttons"] tw-expression[name="link-storylet"] tw-link {
border-radius: 16px;
border-style: solid;
border-width: 2px;
text-align: center;
padding: 0px 8px;
display: block;
}
