"Left Sidebar": Harlowe (only v2.1.0 or later)

Summary

Harlowe v2.1.0 or later includes a built-in named hook named ?Sidebar. When combined with the (append:) macro, dynamic content can be added to the left, blank area containing the default Undo and Redo links. A "footer" tagged passage is used to update the dynamic content after each passage transition, and CSS is used to resize and position the existing <tw-sidebar> element.

Example

Download

Twee Code

:: StoryTitle
Left Sidebar in Harlowe (v2.1.0 or later)

:: UserStylesheet [stylesheet]
/*
  Reposition the Sidebar 'footer' tagged passage.
*/
tw-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 20%; /* padding-right of the tw-story element. */
  max-height: 100%;
  margin-top: 5%; /* padding-top of the tw-story element. */
  padding: 0 0.5em 0.5em 0.5em;
  text-align: right;
  background-color: transparent;
}
tw-icon {
  text-align: right;
  padding-right: 0.75em;
}

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

:: Sidebar [footer]
(append: ?SideBar)[\
Name: $name
Location: $location
]

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

Twee Download

See Also

CSS and Passage Tags