"Left Sidebar": Harlowe (v2.0)


Harlowe has a built-in left sidebar, but, unfortunately, there is no functionality to add dynamic content to it. However, it is possible to re-purpose a "footer" tagged passage to act as a custom sidebar to display dynamic content below Harlowe's own sidebar.

Live Example

Download: Live Example

Twee Code

:: StoryTitle
Left Sidebar in Harlowe

:: UserStylesheet [stylesheet]
    Reposition the Sidebar 'footer' tagged passage.
tw-include[title="Sidebar"] {
    position: fixed;
    top: 0;
    left: 0;
    width: 20%;                        /* padding-right of the tw-story element. */
    max-height: 100%;
    margin-top: calc(5% + 171px);    /* padding-top of the tw-story element plus computed height of the tw-sidebar element. */
    padding: 0.5em;
    background-color: transparent;
    text-align: right;

:: Start
(set: $name to "Jane Doe", $location to "Work")\
[[Another passage]]

:: Sidebar [footer]
Name: $name
Location: $location

:: Another passage
(set: $name to "John Smith", $location to "Shop")\

Download: Twee Code

See Also

CSS and Passage Tags

results matching ""

    No results matching ""