Update template.css

[PeteHaughie]

I've been doing a lot of work with P5 visualisations which also use generated form elements. This small update brings the output in line with the overall Bela branding and forces the flex layout into a column format.

[giuliomoro]

Thanks for your contribution. I see the advantage in having GUIs (and text) that by default are styled closer to what is in the Bela IDE, however I am wondering if making this a default would break people's expectation, "why doesn't my GUI look like the example?". Maybe these should go in a dedicated css file that a keen user can load it from P5's preload() ?
E.g.:

function loadCss(src, parent, dom=document, module=false) {
    let promise = new Promise(function(resolve, reject) {
        let scriptElement = dom.createElement('link');
        scriptElement.setAttribute('type', 'text/css');
        scriptElement.setAttribute('rel', 'stylesheet');
        scriptElement.setAttribute('href', src);
        if(module) {
                scriptElement.setAttribute('type', 'module');
        }
        let parentElement = dom.getElementById(parent) || dom.head;

        parentElement.appendChild(scriptElement);
        scriptElement.onerror = (error) => {
            reject(null);
        }
        scriptElement.onload = () => {
            resolve(scriptElement);
        }
    });
    return promise;
}
function preload() {
        loadCss('css/template-bela.css');
}

(and we can make loadCss() a library function, just like we currently have loadScript()).

Finally, I am not sold on the "dark mode" defaults

Good thing is that by making these loadable, we could have two, one for dark mode and one for bright mode.

[PeteHaughie]

I'll have a look at implementing that and update the branch