enable styling from tags

Is your feature request related to a problem? Please describe. I want to style some passages in a similar way easily, based on their type.

In some story their type is a location, in other a time period (Medieval, Renaissance, Modern Ages), or architectural style (Roman, Art Nouveau), all with a matching color scheme, font and text/boxes decorations, background image or more...

Styling each passage manually is repetitive and error prone. Including a styling passage is possible but not nice looking.

Describe the solution you'd like I would like the passage tag to enable styling.

Tag a passage "medieval" or "art-nouveau", and include elsewhere the definition for all these different styles, in a single place easy to update.

CSS based classes is an easy option, others are welcome.

Describe alternatives you've considered Including a generic styling passage with some variable triggering the inclusion of some styling command is possible... but setting the variable manually in each passage is not nice.

Additional context all to make visual novel more visually dynamic.

alternative solution I use so far, not using tags, is to create a few "CSS only" passages; such as purpleStyle

config.style.page.link.lineColor: "indigo-9"
config.style.page.link.active.color: "indigo-8 on indigo-1"
--

[CSS]
#page {
    background-color: rebeccapurple;
}
[continued]

and passage poemStyle:

[CSS]
#page {
    background-image: radial-gradient(circle at center center, rgba(247, 251, 253, 0.85) 0%, rgb(177, 223, 246) 66%, rgba(79, 186, 232, 0.8) 67%, rgba(247, 251, 253, 0.2) 100%);
}

#page article {
    text-align:center;
    font-family: sans serif;
}
[continued]

and then I embed one (or more) of these CSS passages in the story passages.

{embed passage: 'purpleStyle'}
{embed passage: 'poemStyle'}

[[Lune]] melliflueuse aux lèvres des déments\
Les vergers et les bourgs cette nuit sont gourmands\
Les astres assez bien figurent les abeilles\
De ce miel lumineux qui dégoutte des treilles\
Car voici que tout doux et leur tombant du ciel\
Chaque rayon de lune est un rayon de miel\
Or caché je conçois la très douce aventure\
J'ai peur du dard de feu de cette abeille Arcture\
Qui posa dans mes mains des rayons décevants\
Et prit son miel lunaire à la rose des vents

***

[[Guillaume Apollinaire]], [[Alcools]]

updating general look and feel is then easy enough... but still not as nice looking as it would be if I could simply remove all embed in favor of tag.

And, by the way, a lot of very nice looking things can be achieved with just a bit of CSS such as a stacked paper style... adapted from https://onaircode.com/html-css-paper-effect-examples/

[CSS]
article, article:before, article:after  {
  background-color: #f4f4db;
  border: 1px solid #ccc;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2);
}

article {
  position: relative;
  padding: 2em;
  margin: 50px auto;
}

article:before, article:after  {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: rotateZ(2.5deg);
  -o-transform: rotate(2.5deg);
  transform: rotateZ(2.5deg);
  z-index: 1;
}

article:after  {
  -webkit-transform: rotateZ(-2.5deg);
  -o-transform: rotate(-2.5deg);
  transform: rotateZ(-2.5deg);
}

article>div {
  z-index: 10;
  -webkit-transform: rotateZ(-2.5deg);
  -o-transform: rotate(-2.5deg);
  transform: rotateZ(-2.5deg);
}
[continued]

Forgot to say: thanks for your great work on Chapbook. Love it and esp. the fact it works great on many devices.

Berteh.

klembot / chapbook

enable styling from tags #63