Move infobox headers from left to above #13
Conversation
On my display, the code is long enough that it wraps, which is ugly. We could just make the code shorter, but there's a better solution. The low-resolution responsive view puts the infobox headers *above*, rather than to the left, which not only wastes less space but also just plain looks better. So let's just do that on the high-res view.
Move infobox headers from left to above
|
@bstrie Out of curiosity, what is your screen resolution? On Firefox? I do a lot of web dev. these days but I'm still kind of a newbie esp. for responsive design questions and I thought it was cut up to the right width. :/ EDIT: [1] .boxhead h2 { margin-top: 10px; }. |
|
To be honest, having the titles scrunched up in their own mostly-empty column has been a peeve of mine for a while. Seeing the small-res view put them on top was just the kick I needed to do something about it. Didn't have anything to do with text alignment. As for more concrete questions of design... I dunno! Piecemeal design like what the three of us are doing doesn't really scale. If you have something that you think looks good, host the repo somewhere and let brson be the final decider of whether or not to accept it. |
|
I see, well I meant like before ~ w/10px margin: http://adrientetar.legtux.org/cached/rust-www/ PS: on a side note, I like the overall design of the website. It's simple, clean and useful (esp. if you compare it with other programming languages homepages that are either too complicated/cluttered or just make marketing, programmers don't need marketing). Earlier this year I was hesitating between D and Rust and of course I didn't choose Rust because of its website but it's something that, when it's nicely done really gives you the lust to learn more imo (not that D homepage is any bad, just that Rust website is simpler and better to look at). |
|
That modification still causes the code to wrap on my screen. Again, we could manually break that line at the comma... but it's just 78 characters, which isn't egregiously long in the first place, and I think putting the headers above the box is a better-looking solution anyway (to reiterate, my peeve is the way the wrapped text in the leftmost columns looks, rather than any complaint about padding). My screen is more than large enough for resolution to not be a factor, zoom level is normal, and it happens in all the browsers I try. Do you have the Monaco font installed? If not, that could explain why you don't observe this behavior on your end. |
|
You're right, I use Consolas (great one!) but Monaco is wide and same with Menlo (found this BTW). If you're ok with that change I will send a patch to fix the width problem and go back to the previous layout scheme on large res then. |
As discussed on rust-lang#13, this goes back to the original layout, namely side titles on large res, but aligns them to the left and gives enough spacing to display the code snippets with large monospaced fonts (e.g Monaco, Menlo).
|
@bstrie I have updated my cached copy in case you want to check it out. Now the table and code both use .col-md-10 (resized to 20%) instead of .col-md-9. |
On my display, the code is long enough that it wraps, which is ugly.
We could just make the code shorter, but there's a better solution.
The low-resolution responsive view puts the infobox headers above,
rather than to the left, which not only wastes less space but also
just plain looks better. So let's just do that on the high-res view.