Which format to use?

jonniemarbles

I want to write a story which includes a lot of atmosphere - to give an example, at the start of the story I would like the background colour to be black, then change when the character opens their eyes. I have played around with tags and CSS but they don't seem to work as expected (or as any of the descriptions I was given led me to expect).

Here's a quick example of a thing that currently doesn't with on Harlowe 1.22:

body {
background: white
}

body[data-tags="asleep"] {
background-color: black;
}

The colour stays white (or whatever colour I am using, I have generally tested with something else) throughout regardless of the tags.

Should I switch to a different format? If so which one? I am reluctant to do so as I have been watching tutorials and reading up on Harlowe, so would prefer to stick with it if possible. I am happy to do complex workarounds, javascript holds no fear for me (though javascript may not feel the same way about me considering the number of bugs I usually produce). I just want something that works.

I'm using Twine 2.11 if that makes a difference here (recently returned here after a long time having learned some CSS for school, so giving things another try!)

Many thanks in advance!

jonniemarbles

Can't see how to edit my own post, so I will add here: I would ideally like to have backgrounds and much else which is currently ruled by the cruel and unmovable domain of CSS dictated by in-game variables. For example - as your health gets lower, the "r" value of the background RGB could increase proportionally. Tiredness could make all the text shudder or pulse. The game I want to make would't tell you these values transparently - instead I'd like there to be a viscerality to the experience, which can often be lost in text based games. This is a very appealing idea to me because it's arguably more interactive than seeing a health bar (or whatever) as we so often do in graphics-reliant games. We experience numbers (or even shapes, like the size of a health bar) and sensations very differently, and I want to see what immersive qualities I can add to my game by going outside of the norm in terms of UI feeback.

greyelf

Please use the C button on the toolbar above the Comment field to wrap your code example(s) within a code tag, it makes them easier to read.

You have been reading descriptions for other Story Formats, the Basic Harlowe Passage Tag Based Styling thread should answer your question about tag based styling.

The Harlowe - How to change type-styles with variable and if statements thread should answer your question about changing styles based on variables.

jonniemarbles

Thank you this is great! Have you considered graduating from elf the grey to elf the white?

Quick follow up: is there anywhere I could get a rundown of how to write the code for other text-styles, colours etc. in a similar fashion to that which you've mentioned for blurrier in this thread?

Huge thanks again

greyelf

I cheated and used my web-browser's Inspect (Development Tools) to look at the CSS associated with HTML elements Harlowe generated for the following code:

(text-style: "blurrier")[Blurrier text]

The other two places I look in relation to Harlowe's default CSS is:

a. The source code of a Story HTML file generated via Publish to File option.

b. The SCSS section of the Harlowe project, but you may need to extrapolate the resulting CSS if you use that code.