Balladeer

Themes

CSS

The best way to change how your Story looks is to apply CSS rules to the HTML5 output.

The examples have some CSS files to get you started. I recommend separate files for different purposes. Here’s my own naming convention, which you are welcome to adopt for yourself.

CSS file

Focus

basics.css

Normalization. Generic defaults.

layout.css

Flex and Grid structures.

object.css

Thumbnails and decoration for specific story entities.

reveal.css

Animations and transitions.

style*.css

Scene-specific styling. See the Styles page below.

Class

You can assign CSS classes to your dialogue using the class parameter like so:

speech = Speech("<?class=warning>Watch out!")

That will include your class in the HTML containing the speech:

<blockquote class="warning" ...>

Theming

In order to maintain a consistency to the look of your Story, it’s a good idea to use CSS variables to record your favourite colours, fonts, etc. That way, when you tweak them the changes will apply to all the elements you have rules for.

The Balladeer Page class has a themes dictionary where you can organise your CSS settings under convenient labels.

class Page:
    themes = {
        "default": {
            "ink": {
                "gravity": "hsl(282.86, 100%, 14.12%)",
                "shadows": "hsl(203.33, 96.92%, 8.75%)",
                "lolight": "hsl(203.39, 96.72%, 11.96%)",
                "midtone": "hsl(203.39, 96.72%, 31.96%)",
                "hilight": "hsl(203.06, 97.3%, 56.47%)",
                "washout": "hsl(50.00, 0%, 100%)",
                "glamour": "hsl(66.77, 96.92%, 72.75%)",
            },
        }
    }

This default theme is rendered into each HTML page like so:

<style type="text/css">
:root {
--ballad-ink-gravity: hsl(282.86, 0%, 6.12%);
--ballad-ink-shadows: hsl(293.33, 0%, 22.75%);
--ballad-ink-lolight: hsl(203.39, 0%, 31.96%);
--ballad-ink-midtone: hsl(203.39, 0%, 41.96%);
--ballad-ink-hilight: hsl(203.06, 0%, 56.47%);
--ballad-ink-washout: hsl(66.77, 0%, 82.75%);
--ballad-ink-glamour: hsl(50.00, 0%, 100%);
}
</style>

You can modify the default, or create themes of your own simply by adding them to the themes dictionary.

Page.themes["grey"] = {
    "ink": {
        "gravity": "hsl(282.86, 0%, 6.12%)",
        "shadows": "hsl(293.33, 0%, 22.75%)",
        "lolight": "hsl(203.39, 0%, 31.96%)",
        "midtone": "hsl(203.39, 0%, 41.96%)",
        "hilight": "hsl(203.06, 0%, 56.47%)",
        "washout": "hsl(66.77, 0%, 82.75%)",
        "glamour": "hsl(50.00, 0%, 100%)",
    },
}

Balladeer switches the theme for you when you want to depart from the default:

speech = Speech("<?theme=grey>Another gloomy day!")