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.
No commentsMoqaBilling Screenshots (1)
MoqaBilling, my web application for hourly invoicing, is coming along nicely. Below are some screenshots (client and personal details have been blotted out for obvious reasons). They show the “Orange Kiwi” template in use. I intend to make the application completely skinnable using only external .css files.
Studio Moqa Logo
Created With The Gimp, using fonts Guanine and Crapola.
Transparent .png
Transparent .gif
Transparent Interlaced .gif
Kioku’s First Open-Air Show
Kioku played at the Noguchi Museum last Sunday to a varied crowd. Below are a couple of pics (taken with a Samsung Blackjack).
“I Am Trying To Believe” - Typographic Distortion Effects with CSS/HTML
Much has already been written (Billboard, Wikipedia) about Nine Inch Nails’ viral marketing campaign for Year Zero (2007), their most recent album. The marketing campaign consisted of clues, a bit like The DaVinci Code: things like USB drives left in NIN concert bathrooms; coded messages on T-shirts that yielded URLs; ‘fake’ forums, etc. In essence, various media were used to direct the curious and the fanatic to peculiar websites, such as
Even more striking, as a media/marketing effect, was ‘embedding’ an image in the static at the end of the song “The Warning”. This shape, like an elongated arm, is known as The Presence, and is featured on the album cover. (You might speculate that the spectrograph was what it was, and the hand-like pattern got noticed and then the album-cover was conceived. But that would make you an unbeliever.)
Other sources (1, 2) claim the image is in the song “My Violent Heart”, but I have not seen it there. I have only seen it in “The Warning” (see the detail from my spectrograph, created with Audacity).
Leaving aside the cleverness of the campaign, this article takes a closer look at one of the campaign sites, http://iamtryingtobelieve.com/ , in order to learn some of the CSS/HTML techniques used. http://iamtryingtobelieve.com/ was created by 42 Entertainment. Below is a screenshot.
Typographic Distortion Effects
Below is a screenshot detail from the “How Does Parepin Affect You?” page, http://iamtryingtobelieve.com/howdoes.htm. As you can see, there are a couple of typographic effects—larger font sizes and the weird unfocus/distortion effect (’administration approved’)
These effects are, in fact, not created graphically in an editor, but through CSS/HTML rendering in the browser. Thus, all the text is in fact live text, and easily digested by search engines.
Code
Here is another screenshot detail:
The code looks like this (reformatted for readibility):
<span style="color:Red; font-family:Georgia;
font-size:30px; font-weight:bold;">
HOW DOES PAREPIN AFFECT
<br />
YOU?
</span>
<p style="width:520px; padding-left:20px;
position:absolute; top:234px;">
We’ve all heard a lot about how Parepin isn’t addictive, and
h<span class="one">ow its side effec</span><!--ts are rare-->
<br />
an<span class="left">d mos</span>tly mild. I can attest that
<span class="bigWhite">Parepin isn’t addictive</span>, at least
in my
<br />
case, because
<span class="bigWhite">
I eli
<span class="leftUp">
minated it
</span>
from my system about two
<br />
months ago and had n<span class="left">o adver</span>se
affects.</span>
</p>
<p style="width:520px; padding-left:20px;
position:absolute; top:234px;">
We’ve all heard a lot about how Parepin isn’t addictive, and
how its side effects are rare
<br />
and mostly mild. I can attest that <span class="bigWhite">
Parepin isn’t addictive</span>, at least in my
<br />
case, because <span class="bigWhite">I eliminated it from my
system about two
<br />
months ago and had no adverse affects.</span>
</p>
That is not a typo. The same content is entered twice, in two separate <p> tags, which overlap each other exactly, thanks to the position:absolute in-line CSS in the code, <p style="width:520px; padding-left:20px; position:absolute; top:234px;">. Thus, certain distortion effects will occur when the text does not overlap perfectly.
The first of these is employed using the tag. The CSS for this is:
.one {
letter-spacing:-1px;
text-transform:uppercase;
}
This is self-explanatory—it converts the text to uppercase, and changes the letter-spacing to -1px.
Let’s take a look at the two effects separately:
- Text-transform:
E pluribus unum
(
<p>E pluribus unum<p>)E pluribus unum
(
<p style="text-transform:uppercase">E pluribus unum<p>) - Letter-spacing:
E pluribus unum
(
<p>E pluribus unum<p>)E pluribus unum
(
<p style="letter-spacing: -1px">E pluribus unum<p>)
Combining the two:
E pluribus unum
Overlaying this on top of “E pluribus unum” would mimic the first distortion effect we see in the “How Does Parepin Affect You?” snippet above.
E pluribus unum
E pluribus unum
A second class, <span class="left">, is used for the text “and mostly mild”. Its mechanism is to print “d mos” 2px to the left the first time, and overlay a normal copy of “and mostly mild” on top of it:
.left {
left: 2px;
position: relative;
}
E pluribus unum
E pluribus unum
.one {
letter-spacing:-1px;
text-transform:uppercase;
}
.left {
left: 2px;
position: relative;
}
.bigWhite {
font-weight:bold;
font-size:18px;
font-family:Georgia;
}
.leftUp {
left: 3px;
top: 1px;
position: relative;
}
Hourly Client Billing System — MoqaBilling
I’ve been working on a custom billing system. It serves two purposes—to replace my current ’system’, and to serve as a first application with which to learn CodeIgniter.
Here are some screenshots, after two days’ work. The template was inspired by various gelatos at Capogiro, including kiwi and orange cardamom:
Automatically generated .pdf invoice (rough!)
