Code boxes could do with a little bit of love

[spacemonaut]

Quotes look really nice:

Beep boop

But code boxes are just a little bit left out in the cold by comparison in terms of presentation:

Code: Select all

#postform #postingbox #subject {
  width: 300px !important;
  padding: 5px;
  border-radius: 6px;
}
.inputbox:hover {
  border-color: #6bc;
}

Things I'd really like to see:

• the header bar be given better alignment & treatment
• the spacing inside the text box being given a little bit of care: there's a massive one line gap above and below the code, but the text is flush against the side. Instead it'd be good to see some even spacing all around, like 8px top and side.
• a better monospace font for Windows. This currently uses Courier New, but that particular font is kind of awful and is falling out of favour compared to newer fonts like Consolas.

Here's a before/after with just these minimal changes:

Before

After

[spacemonaut]

also sidenote the CSS applied to the DL/DT structure in these attachment images gives them a REALLY weird spacing that's kinda opposite to the text i put in: i put a blank line ABOVE the "after", but instead i get a blank BELOW the "after" and no blank line above.

[Feyd_Ruin]

How's it look now?

Code: Select all

#postform #postingbox #subject {
  width: 300px !important;
  padding: 5px;
  border-radius: 6px;
}
.inputbox:hover {
  border-color: #6bc;
}

And yeah, line breaks with certain block elements are really weird with phpbb.
Your above only has one line break, but the file attachment has a hefty margin-top.

You've got a good eye, so feel free to offer any other suggestions you think would improve the visuals/ux

[spacemonaut]

Cousine's not a bad choice! Thanks, this is looking a lot better.

I'd consider bumping the line height for .codebox code up to about 20px or 1.33em. The code looks a bit vertically cramped with a line height of only around 17px/1.1em.

Our regular posts just so happen to already be using 1.4em line height! You could use that too, it'd equal just 21px for the code box, so no big difference.

Line heights around 1.33em/1.4em tend to be really nice for legibility.

[Feyd_Ruin]

Went with 20 as a nice middle ground.
(Any bigger is bothersome to me [and maybe others] heh)