eigenclass logo
MAIN  Index  Search  Changes  PageRank  Login

Ruby rewrites my CSS, eigenclass.org repainted (think of the children and their eyes)

update.png new design, eigenclass.org believed not to be carcinogenic anymore (eyeballs needed for further research)

_why has repainted eigenclass.org, and made me realize that eigenclass' design can be tiring to the eye if you've not set your monitor to fairly low brightness & contrast levels (which I have).

I used a quick Ruby script to rewrite the CSS stylesheets (making most colors 20% darker), and you're getting a new logo with a 50% probability on each pageview.

Here's the (trivial) code:

#!/usr/bin/env ruby

FACTOR = 0.8

def transform_color(r, g, b)
  case r + g + b
  when 255..600
    [r, g, b].map{|x| (FACTOR * x).to_i}
  else
    [r, g, b]
  end
end

css = ARGF.read
css.gsub!(/#[0-9A-Fa-f]{6}/) do |color|
  "#" + 
    transform_color(*color[1..6].scan(/../).map{|x| Integer("0x#{x}") }).map{|x| "%02X" % x}.join("") 
end

css.gsub!(/#[0-9A-Fa-f]{3}(?=[^0-9A-Fa-f])/) do |color|
  r, g, b = color[1..3].scan(/./).map{|x| Integer("0x#{x}#{x}") }
  "#" + 
    transform_color(r, g, b).map{|x| "%02X" % x}.join("") 
end

puts css

Now's the time to speak out if the new design is still too stressing to your eyes (it works well for me, on my monitors...).

(btw. is it just me, or is the default calibration on an iMac really tiresome for the eye?)



long time reader, first time commenter - Evan M (2006-12-28 (Thr) 11:03:11)

I read you through an RSS feed, and every time I click through to the site I find it overwhelming. I'm no visual designer and I don't mean to slam on your design but here are some things you might at least think about:

  • there are seemingly hundreds of links in the left column, so many that I'd never look through them
  • the title of the entry is so spaced out and weird-looking it's not worth the effort to read
  • you have lots of whitespace between your lines of text in the entry, but comparitively little between semantically distinct parts of your page

Andrea 28-12-2006 (Gio) 11:04:27

I definitely agree.

mfp 2006-12-28 (Thr) 12:09:41

Thanks for the feedback (and don't hesitate to give non-positive critiques regarding the design or the contents; exposing the flaws is the first step to fix them).

I'm using a modified version of the dot-sky tdiary theme (hiki can reuse tdiary's themes http://www.tdiary.org/20021001.html --- the current stylesheets are derived from http://www.tdiary.org/theme.sample.rhtml?theme=dot-sky). Silly of me, I realize after 1 year that several things that worked fine with kanji+kana don't make sense with ASCII text.

I've fixed titles + line spacing (just removing the unneeded non-default settings). Does it look better now?

As for the links, there are 44 automatic ones (11 recent, 13 popular nodes, top 20 by page count) and some 10 manual ones at the top.

The problem is that there are many nodes now (approaching 150) but they don't age as quickly as in most blogs, and several remain relevant after the ~1 month exposure they get in the "recent" block on the left hand side menu. Automatically generated lists seemed an easy way to dig older, yet useful postings, but they also clutter up the page.

I've begun to classify some nodes, but it takes a long time. Hiki is a wiki, so enabling external page modifications could be a solution, but I'll have to solve the spam problem first (I've managed to avoid comment spam so far, but spammish pages will be harder to prevent).


No Title - cows (2006-12-28 (Thr) 11:36:29)

The referer thing and multiple input text boxes are hideous. Your code is beautiful... but the site is not. ;p

mfp 2006-12-28 (Thr) 12:19:30

After much thought, I've decided that limited threading (2 levels) is a good thing; maybe some javascript to hide the comment boxes would make them more visually acceptable?

Do referrer lists matter that much? I find them useful at times myself (helps me to see when an article was linked from reddit & friends, and I've found a few interesting blogs through them).

cows 2006-12-28 (Thr) 13:55:38

hiding the threaded comment boxes under a 'reply' link of some kind would be awesomesauce with macaroni.


uh... the post... right up there... yeah, you see it - rluv (2006-12-28 (Thr) 18:40:26)

The referrers are useless, since they have no description, and the top ones always point to yourself anyway. I agree that the links list on the right is unreadable and overwhelming (what's the difference between "popular" and "most seen", anyway?). The line-height of the paragraphs is too small, now, making everything run together, and you wash out your heading's contrast, rather than increase it for emphasis. And there's no extra whitespace between paragraphs. I've always read Eigenclass in spite of the design.

And why do comments need subjects? The subject is always the post.

:(

mfp 2006-12-29 (Fri) 03:30:42

Changed referrer list to

  • ignore self-references (plus google searches, google groups, and a couple annoying referrers like stumbleupon)
  • show URLs ("long" format)

"Most seen" = top nodes by page views, "popularity" is computed with { page views } over { age sup 0.7 }.

I'm changing line-height to 2.5ex or so (dot-sky's orig was 3ex), and will increase the spacing around most elements (headers etc.)

Top-level comments take a subject because... hiki's bbs.rb plugin says so; probably changing it (making it optional at least).


Station - fREW (2006-12-28 (Thr) 23:56:37)

I agree with rluv, comments don't really need subjects.

But, I think the site has come a long way in the past 14 hours! No more eye cancer! Thanks!

pmcm 2007-01-07 (Sun) 03:31:00

Yeah, massive improvement! It's still not exactly beautiful, but it no longer makes me feel queasy!

Last modified:2006/12/28 09:44:25
Keyword(s):[blog] [ruby] [frontpage] [subpar] [eigenclass.org] [CSS]
References: