Yep, this blog design was inspired by a puffer fish: a green spotted puffer fish. Joanne Leung took an amazing photo of her puffer, Blinky, that inspired the colors of my blog design.
The color scheme wasn't taken directly from the photo but uses a similar colors with variable saturation.
Home and Index
The landing page is very simple and uses some CSS3 features including rounded-borders and text-shadows. There are only three categories and only the most recent post is displayed as an excerpt. All other posts are displayed as a vertical list of headers and dates.
The pastel-grey-green is necessary because any hint of over-saturation in a background could be overwhelming for the overall color scheme. The background colors may seem more grey than green because it is not a web-safe color, so the colors may vary from desktop-to-desktop
Yellow is the contrasting color of the scheme that is used to highlight interactive elements such as buttons, links and tabs.
Because I'm such a huge fan of Mark Boulton's grid theory and type rhythm, the
content flows cohesively throughout the entire site in a tidy
960px grid and
24px base line height.
Posts and Comments
Content is king. The best way to embody this principle is to individually design types of content as modules such as paragraphs, lists, block quotes, and code blocks.
Syntax Highlighting is done by Highlight.js (Russian author?) because I prefer simplicity over functionality. Because the audience follows the F-pattern, if line numbers existed, they would be read before the code; thus, I omitted them because they would impede code readability.
There is also a nice anti-aliasing trick that I figured out in CSS3 for
Webkit-based browsers such as Chromium. By using
text-shadow with no blur
size and a color that matches the background color, all text becomes
anti-aliased by illusion. This doesn't work well on code blocks but it's
especially useful for large headers that become jagged as they scale larger in
Appease your lust for screenshots
Commentary alone cannot describe the entire design; instead, indulge yourself in screenshots and engage the design.
Still want more? View some posts. Click some links. Add some comments. Experience the design for yourself.