New Template for Moqa::Blog
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:
<code class="html">and
<code class="css">tags,
and the JavaScripts automatically highlight them for you. (The JS is called in a <body onload=""> 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 <pre> and <code> 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.
Leave a Reply
You must be logged in to post a comment.
