Style improvements

[Сухарик]

I applied my very poor design skills to the site. This is the result: https://gist.github.com/suhr/a1952cd7d002b48a55f2b5dd907e3b04

Now it looks like this. Still looks poorly, but I hope there's an improvement.

Speaking of improvements, it would be nice to align elements, so they won't look like a mess. Take a look on BeepBox, the settings look nice because they are aligned.

[Eva Short]

Thanks suhr, that looks cool, but I'm not sure its very practical.

1. I'm concerned that it will make the site harder to use for people with small monitors.
2. Some of the spacing you added doesn't correspond to related functionality. For example, I would rather add space between Title and Tempo, and remove the space above the textbox to indicate that Tempo, Key, and Lowest scale degree affect the textbox.
3. Using external or uncommon fonts is just not worth it to me.
4. You mentioned wanting to align elements (I assume textboxes, buttons, and dropdowns). The problem is that the elements are already baseline-aligned and styled by the operating system. I don't want to change that, as I explained here

[Сухарик]

I'm concerned that it will make the site harder to use for people with small monitors.

All right, there's actually a better way to do the layout:

body > div {
    margin: auto;
    padding-left: 1em;
    width: 58em;
}

Together with @media you can get an adaptive layout.

For example, I would rather add space between Title and Tempo, and remove the space above the textbox to indicate that Tempo, Key, and Lowest scale degree affect the textbox.

Tempo affects everything, not only the textbox. That's why there's a visual block, there are global settings.

You mentioned wanting to align elements (I assume textboxes, buttons, and dropdowns). The problem is that the elements are already baseline-aligned and styled by the operating system. I don't want to change that, as I explained here

I'm not talking about anything advanced. There should be a space between a setting name and a corresponding control, and that space should make a vertical edge. You actually could do this even with tables (don't do that).

[Eva Short]

The margin: auto thing is a good idea. I might use that.

The Tempo slider affects the textbox by adding a line like bpm: 100. Then the tempo stored in the textbox affects everything else.

I tried aligning the settings the way you explained and I don't like it. Here's how it looks.

[Сухарик]

All right, what about this (the gist is updated)? All Arial, sliders close to the textbox, Title is separated.

[Eva Short]

Sorry dude, I'm just not interested in doing this.