Slightly Remarkable

Yep, I’ve yet again redesigned. If you’re using Firefox or Chrome, the site will be beautiful, and if you’re using Safari, it’ll be almost as beautiful (Safari 4 still doesn’t support inset box shadows in CSS3 *sigh*).

So a few details about the design.

• Grayscale. The color one chooses when he does not know which color to choose.
• Heavy CSS3. If you look at it in IE, it’ll probably puke. Sorry. Upgrade your browser. =)
• Design took place amidst other activities, including a very lonely The Office marathon.
• The comment form uses an ordered list. The comment form button is pretty CSS3 stuff.
• The web site makes heavy use of alpha transparency, both in PNG graphics and background colors/gradients. This means that the design can be completely transformed, in full color, simply by applying another background image (yes: another).
• Expect to see the background change from time to time as I get bored with the grayscale.
• The home page 3-column layout is some cool CSS3 trickery.
• All of the designing was done in the browser, not in Photoshop. I think this approach dramatically changed my attention to detail, particularly the fonts and colors (well, shades, if you will).
• I took a minimalist approach with the design and stripped out almost all of the plugins I was using for Wordpress. I’m much happier with my content and a few pages, and I think the refocus on “less is more” allows me to write more, fix less, and by extension allows folks to read more and be confused less.

If you’re a graphic designer and would like to see your work on my site, drop me a line. ;-)

Well, that’s all for now. =)

Update: Okay, here’s more. Pick a color to see how the design changes.

• Red
• Green
• Blue
• Pick your own

Today, I upgraded to Wordpress 2.9.2, and in the process I decided to play with some CSS3. If you’re browsing with Firefox, you may notice a completely new look here. Expect it to change frequently. I’m not serving the CSS3 goodness to other browsers that support it (notably WebKit-based browsers and Opera) because of the sheer magnitude of non-standard CSS3 properties (I can’t just duplicate and copy vendor prefixes — the actual order of the properties changes).

So, if you are using Firefox, you’re going to see a new gray/brown/green theme that’s going on. Complete with shadows, rounded corners, and some interesting gradient combinations. I managed to procure some fairly complex gradients, but you may be surprised when you learn that the new look has absolutely no graphics whatsoever. All the gradients (even those ones that look like images) are CSS3. It’s beautiful, no?

I’m looking forward to the day when I can serve these kinds of styles to all browsers and have them behave as expected.

Oh, and for the record, the only thing that Firefox users get is the stylesheet — I’m not serving any different HTML or anything, despite how reorganized the content actually is presented.

So, enjoy! =)

My entry is the third one that was published. It’s nothing exceptional, but I like the bold colors and thought that I could contribute to the project by submitting a design.

An exhoration to anyone reading this: are you up to a CSS challenge?

I used a background image, that much is clear, but it’s not a remote link to an image. That would consume bandwidth, and what if I changed the address or something later on? It’s just unreliable to do such a thing. Instead, I embedded the image in the Greasemonkey script.

How in the world would I do that? Well, it’s not something you see everyday (probably because Internet Explorer, our loving, caring friend, doesn’t support it), but there’s a URI scheme called “data.” You know how there’s “javascript:” and “about:”? It’s the same thing (and, it’s part of an official RFC specification). By using this URI scheme, we can have the browser interpret a string as binary data (and even non-binary data, and even data inside of data — check out an example, and yes that’s a data URI link). Very cool. (If you look closely, the second level’s LINK tag is to a data URI which is a stylesheet, and in that stylesheet is a data URI with a rainbow gradient image.)

Oh, you want to know how to use it, do you? It’s nothing difficult. Basically anywhere you would normally place a URL to a file or a file itself (be it in a CSS background property, a web page itself, a link to a CSS stylesheet, etc.) you can put a data URI object there instead. To compress a file or some data into a data URI, head to the data URI kitchen and give it a shot. What think you?

Perhaps I should say feast, as the delicious skins I’ve tasted didn’t work for me (they all try to make the top menu float over the rest of the page, which works but the sidebar always overlaps it, making half of the menu inaccessible). So, let’s feast on something good for once.

Don’t know how to feast on my delicious CSS? Get the URI ID Firefox extension, locate your Firefox chrome folder (in your profile folder), download the CSS file, and either rename the CSS file to userContent.css in the chrome folder, or append it to your already-existing userContent.css file.

Update: more delicious bling coming your way in the form of a Greasemonkey script. Stay tuned!

I’m a fan of some great sites — namely Backpack and Delicious — but I have to say that I’m not entirely pleased with the way they look. They function well and serve their purpose, but they don’t look all that great (more so Delicious than Backpack; Backpack just needs quite a few minor tweaks). Has anyone already done a sort of Firefox + userContent.css + URI ID styling of either site? Or will I have to do it myself? (I’ve already seen and tried to use one Delicious style that I found, but it doesn’t work correctly — menus overlap and such. I want something that actually works.) Any help?

The bug basically is when you put a comment in the middle of a CSS attribute. I’ve only tested this with backgrounds, but I’m guessing it will “work” (the bug, that is) if used in the middle of any mutli-value CSS property.


background: #FFF /* #EEF */ url(background.jpg) 50% 0 no-repeat;


IE 5.5 outputs no background image, though it does get the background color right. Removing the /* #EEF */ comment from the CSS makes it work fine. Does anyone know why this is? It’s interesting to also make note that IE 5.01 doesn’t have this problem, nor does IE6. I think there are fewer bugs in IE 5.01 (although it supports less CSS) than IE 5.5. A few simple things (text-align center and such) to center my current design, and it worked absolutely fine in IE 5.01; IE5.5, however, didn’t center the menu or display the background (due to the bug I just mentioned). In order to center the menu for IE 5.5, which I’m guessing more people use, I had to offset the menu’s centeredness for IE5.01. I’m sure that’s acceptable, as you can still use the navigation. It might not look as pretty, but I doubt many people will be browing my site with IE5.01 (and if they use an old version of IE, there’s not much of a chance that the version will be prior to IE5.5). Thoughts? Anyone encountered this problem before? What were your experiences with it?