The Website: jKs Site Changes

[jK]

I already fixed most of the banner images, they are just not part of git and so need to be applied manually.

[AF]

In the current setup, a topbannerfade element provides the necessary transition from banner to non-banner, modification of the banner images should be unnecessary.

[abma]

if this is the only problem found, than i'll apply tomorrow as its imo no blocker (and can/has to be fixed later).

[abma]

http://validator.w3.org/check?uri=http% ... rts.com%2F

div inside span is invalid:

https://github.com/spring/spring-websit ... ge.html#L6

[dansan]

I like the new width, font and box color :)

[SirArtturi]

It's better!

I would get rid of gradient from newsitem class, it's not neccessary to have gradient in every content box while the site has so many frames already. Feels just heavy.

[abma]

width (and height?!) of quote and code is broken again:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Code: Select all

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

VERY annoying...

very likely this commit: https://github.com/spring/spring-websit ... 7dcd796d18

edit: fixed: https://github.com/spring/spring-websit ... a8c164b6d5

[Forboding Angel]

word-wrap: break-word;

[abma]

imo no, linebreak is not wanted, scrollbars are more useful in this case.

[jK]

Problem is that browser silently ignore `max-width:100%` even when they are able to detect the absolute pixels of it (opera determines it as max-width:1000px and still ignores it).
I assume it is caused by the table-wtf (there are like 3-4 tables between #content and the quote).

[Forboding Angel]

Width and max-width don't work that way.

http://www.w3schools.com/cssref/css3_pr_word-wrap.asp

Set a max-width, and apply break word to it and problem will be solved.

[jK]

Width and max-width don't work that way.

http://www.w3schools.com/cssref/css3_pr_word-wrap.asp

Set a max-width, and apply break word to it and problem will be solved.

No, I obviously used `overflow:hidden` and it still enlarges the tables beyond their max-width. Word-wrap won't help at all.

[abma]

@Forb:

what you currently see is the already fixed version. the breakage was, that with max-width: 100%; the whole width of the page was increased which broke the layout. with the scrollbars everything is fine!

(don't hit your head against walls, that hurts!)

[Forboding Angel]

If it was fixed, I would not be seeing horizontal scrollbars here. You're doing it wrong.

Code: Select all

.codecontent .quotecontent {
    word-wrap: break-word;
}

Jesus.



The width was not the main problem. Max width should be 100%. Don't put in fixed pixel widths, that's fail.

[Forboding Angel]

This monospace font is terrible and should never be used like this. It is bad for readability. For something like this you need a high readability font, such as arial, open sans, or droid sans are good examples.

So this travesty of typography:


Becomes this:


Ahh, much better.

But there is a worse problem. The line heights are crap. Moreover they use em instead of unitless which is complete fail, so lets fix that:


But why is the text in the box gray? Gah, lets fix that too:


There, readability improved.

[knorke]

For me text looks much sharper than in that screenshot.
zoomed in: (mine at bottom)

looks exactly like the bluring from cleartype: (turn off in windows)


Text in code-tags should never linebreak...that is one of its purposes.

[Forboding Angel]

Text in code-tags should never linebreak...that is one of its purposes.

It doesn't insert a break, damnit! If you're going to try to talk to me about css, then you need to know wtf you're talking about before opening your mouth.


Edit:
Sorry, but I'm very annoyed at the moment. Let me explain it in another way.

If in your code editor, you turn on word wrapping. Does the editor insert crlf at the end of each wrapped line? No, it just splits the content and most decent editor put a little u shaped arrow at the end indicating that the line was wrapped.

Css isn't dumb. It's actually very advanced (especially when you start getting into advanced SASS/SCSS), but you end up with really bad behavior when people who don't understand what they are doing try to do styling.

[knorke]

If in your code editor, you turn on word wrapping. Does the editor insert crlf at the end of each wrapped line? No, it just splits the content and most decent editor put a little u shaped arrow at the end indicating that the line was wrapped.

In your proposal I see no little u shaped arrow at the end indicating that the line was wrapped http://i.imgur.com/sYtn72O.png

So better to keep scrollbars for that.

[Forboding Angel]

Oh for fucks sake, you can't possibly be this dense...

For this example, we will use some SCSS that I wrote a few weeks ago (feel free to use it for replacing checkboxes in forms... It's quite useful):

Code: Select all

	/* Start checkbox drop-in snip */
	/* For checkbox images we use data uris. Much faster drawing, reduces http calls, easier to manipulate */
	input[type=radio] {
		opacity: 0;
		float: left;
		width: 0;
	}
	
	input[type='radio'] + label {
		@include span-columns(6);
		margin: 0;
		clear: none;
		
		/* Left padding makes room for image */
		padding: 5px 0 4px 40px;

		/* Make the entire thing look clickable (it is) (checkbox and label) */
		cursor: pointer;
		
		background-repeat: no-repeat;
		background-position: left center;
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHonAACAgwAA+mQAAIDSAAB2hgAA7OkAADmeAAAV/sZ+0zoAAAMQSURBVHjatJbPbxNHGIafnVnvbv3bTkKcTXAgJlAapUUtkg/Q4lalt17MrfTAnb8h4uAz/wOqSm/kwtGlpOQQRYImEjU0AdxgjB3XdZ0mcWQ76yyHrCFQ06bEfk+j0c776NsZfd+r2LZNJ81MT7WXx4FvgC+Bw0AUyAHPgB+BH4DlN88nkqmXa/VfAJ8D33sCpukLjeD29qNqbly6m+3GVtRqbkW3Nv88s1HNX6n9XSgA3wK3O/mpHQA68HNwIBbvG/oAb3AIVdWRqgshJCgK2DY7Oy1a1jaWdYrNtaJZKT74aa38ZB44BzTeCpmZngoD9w9FPzaHx+JougfVpSGkilB2AQ5jF2S32GlZGO/58YdHeJ6dj/+R+yULTAJ/tX2V9p3MTE+5gGcj458ODh35ZBegaihCARTeLht7x8aymjQbNYor98g/mi0BhxPJ1DaA2HMHs5HR04PDsTiGO4BL01GE+A8AgIIiBC5Nx3AHGI7FiYyeHgRm249HOF9e6Dcn4qMnE+iGFynlPsz/CZNSohteRk8m6Dcn4sAFAJn4sKUA6WMffe3z+PqRUn0HwJ6qFIEQKprho5RbOLfy8PZVAUwGB2KmP2Q6FRxcUkr8IZPgQGwQmBTAxXBkHCldB6igw69TXYQj4wAXBfBFIDzivKLuSVEEgXAU4CsBHDM8fV2s4pUMTwjgiACCmuamF3J8gwJYs6xGTyCO75oAVpr1jZ5AHN8VAdzaqBZ6AnF8bwngu0rxYU8gldUlgOsCuF8uPCjVa9WuAuq1KuXnv5aARZFIpmzgcv7JXFchjt/lRDJltxvkjfzjubu5pTtdAeSW7pB/PHcXuPGyCzvz+Gw2ky6tPl04EGD16QLZTLoEnG3PeWVvkJiZnhoAFscmzpvRE5+9UwXZTLoAnEokU+X2vngjYZSBsWwmPb+8eJPaemlf5rX1EsuLN8lm0vPAGFB+rY91ikTORDsPXOuLnDD7ht7HFzLRDT+a4aVZ36RRX2ejWqBS/I3K6lIBuASkO0Ui5X/mrqOACRSA3/ebu14MAEZcF3fUgARKAAAAAElFTkSuQmCC);
	}
	
	input[type='radio']:checked + label {
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHonAACAgwAA+mQAAIDSAAB2hgAA7OkAADmeAAAV/sZ+0zoAAAP3SURBVHjarJZdTJNnFMd/70c/6BfQAisfwiJDy7p1ujrQJZpebGKWwDJiwrJ4Z6IXuzHuykSuuDRL9MILl3g3l3FhLyYMN5bAXDIcCaMygSJKtPJRYOWz7Upt++6Ct2TQt8iM/+Qkb56cc37vOc+T5zmCoihoqd/fnv0sA04CTUA94AWGgHHgJ+BnYGFnvK+1Y+tb3gVQD3xvLqzwWIurMFlKkPUmdAYTLzbi3lQy7o1H/z6zvjxNbHV2BPhcBedI1gDIwLdFpbVtjvK3sRSVI8sGJFmHKEogCKAoZDJp0qkXpFKHiK7MeSJzY2Mri086gTNAKi+k399uAgbKqt/3VO5vRG8wI+v0iJKMKGwCVMYmSEmTSacwFtiw2auYmfqjbSH0Zz1wDIhn8wrZPen3t0vAw6q6467yN72bAFmPIAqAQH4pKBmFVCpJciPG3NMhpid/CwLv+Fo70gDif/bglrPmiKuythGjqRCd3oAgii8BAAgIoohOb8BoKqSythFnzREXcCt7eETVs6Gkwt1WU+/DYLQgSdIekufCJEnCYLRQU++jpMLdBjQASD5PGuDHt95rfsNsLUGSZE1AOLbEr6EA/c8ChGNL2AxmLPqC3KoEEVGU0RutzIeGjz8d77suA1VFpbUeW3GFWkGuvhn+ga9+uU40+c/WmkVfwNcffcm5wy05/pIkYSuuoKi01rWy+KRKBJrszjokSadZwc3hLs53XSGaiENG2bJoIs75rivcHO7Sbp2sw+6sA2gSgU8K7VXqKdrRougSF3quQVrJaxd6rhGOLuViBJFCezXApyLwgdHs0Kzi7uT9nAp2WjQR5+7kfc02G83FAIdkYJ9eb9J0Cq9FNv/4JZpZXdBcV/PuE4HnqdSGppPTYt+1VVmrtJZqxqt5n4tAIJlY13Q6deAoFtkAmUxes8gGTh04qhmv5g2IQPf68qx2JVYHV5sv7lrF1eaLOK0OzXg1b7cIdEfmxvP2+2xjCzdOX8KiK9i24RZdATdOX+JsY0ve2Eh4AqBHBqYXZ8eCidiySz0NOTp37DNa3CcYDI0ys7pAZWEZDdVunDZHXkAitszizMMgEEJRFPpuX26YfNCtvE5NPuhW+m5fblAUZeuCHJx+POAPTdzjdSg0cY/pxwN+YHDneyIDf7m8rS5nzeFXBoSfDRMc8geBd32tHaltEBVkBn7f7/7YU33wxCtVMDXaOwJ86GvtiGXXxR0TRgzwTo32dj4K3CG2Nr+n5LG1eR4F7jA12tupTjOxbfeY1kikvmhu4DuH86DHUe7CWlyBwWhDb7SQTETZSKyxvjxLZC5IJDwxAnwBjGqNRML/nLs8qo2otqe5698BAP0vEByQoEeYAAAAAElFTkSuQmCC);
	}
	/* End checkbox drop-in snip */

Current look:


Fixed wrapping:


Now these data uris are quite long, but the point remains. Introducing horizontal scrolling makes code very difficult to read because lines that would normally wrap will no longer wrap and will instead be covered up by the right edge, making the user horizontally scroll to read even relatively short lines.

[Jools]

This monospace font is terrible and should never be used like this. It is bad for readability. For something like this you need a high readability font, such as arial, open sans, or droid sans are good examples.

Do not use arial for anything. Why not use a serious font such as comic sans instead if arial is what you planned to use?