static styling with CSS - jackdarker/TwineTest GitHub Wiki

The good thing with html is that you can use CSS to style everything and can even create simple effects like animated color change.

Twine comes already with a minimal predefined style but you can easily create your own. There are multiple ways that you can combine

• Add a twee-file and call it :: Story Stylesheet [stylesheet] (the important thing is the tag stylesheet that tells the compiler its not a simple passage)
• add a css-file in src\styles
• add a style-section to your passage
• modify the style/class directly in DOM

Write your css just like in a css-file, f.e. to modify the links
a {
line-height: 150%;
background-color: transparent;
color:initial;
text-decoration-color: initial;
margin-left:0.25em;
margin-right:0.25em;
} a:hover {
color: #008929;
text-decoration-color: #008929;
}

Tips:

• if you want to have your html fill out the complete browser screen, add to your top element
  height: 100vh; not height: 100% !
  width: 100vW works too but maybe its better to use max-width:60em because reading long lines gets difficult.