Sigma Complex

Finally got around to writing a WordPress template from scratch. The new theme is optimized for readability, specifically of code, and of text i.e. paragraph after paragraph of text.

The old template for Moqa::Blog, which was based on BlackPhoto and used an image from the White Stripes’ De Stijl album cover, looked like this:

After months of service, I retired it, in favour of the new theme (as yet unnamed, so going by ‘Blog-Simple’ for the moment):

Text Readability

I wanted to style a font so that the ‘Writing’ posts on this blog (pieces of alleged fiction) would approximate the fonts found in novels etc. Given the small number of web-accessible fonts, this is pretty hard to do — and, in fact, I settled on “Trebuchet MS”, and threw in the following (reference):

.entrybody p {
    text-indent: 20px;
    margin: 0;
    padding: 0;
}
.entrybody p:first-letter {
    font-weight: normal;
}
span.firstletter{
    font-size:450%;
    float:left;
    line-height:.85em;
    color:#D4D4C7;
    text-indent: 0;
}

The result seems to hold up fairly well.

Code Readability

I finally implemented a feature I have seen on many developers’ sites, and had often wondered about: syntax highlighting of code, speficially HTML and CSS. I shamelessly stole two scripts from here. They’re very clever. Basically, you enclose your code in:

and

tags,

and the JavaScripts automatically highlight them for you. (The JS is called in a function.)

The scripts determine the selector, declaration, properties and values of the HTML and CSS, and color them according to some inline CSS:

code.html span.tag {
    color: blue;
}
code.html span.attribute {
    color: red;
}
code.html span.value {
    color: green;
}
code.css,
code.html {
	font-weight: bold;
}
code.css span.idselector {
    color: red;
}
code.css span.classselector {
    color: green;
}
code.css span.property {
    color: blue;
}
code.css span.value {
    color: orange;
}

I also did some

 and  styling:

code {
	font-size: 11px;
	font-family: mono;
	font-weight: normal;
	color: #111;
}
.entrybody pre {
	font-family: mono;
	background: #eee;
	margin: 10px 20px 10px 35px;
	padding: 10px;
	border: solid 1px #999;
	letter-spacing: -1px;
	line-height: 20px;
}


Put it together, and you see the indented, bordered, grey-backgrounded sections of code that this theme supports.

								
				

					
						This entry was posted
												on Thursday, June 28th, 2007 at 2:37 pm						and is filed under CSS/HTML.
						You can follow any responses to this entry through the RSS 2.0 feed.

													You can leave a response, or trackback from your own site.