site css

ok, after a veeeeeeery long time here's a tiny bit of nerdy
tech bLog blabla. just a itsy bitsy nerdy one - i promise.

well, i always thought about giving my homepage an additional
inverted colour look, since loads of people always complained
it's so dark and gothic and whatever. problem was, there are -
by now - tons of galleries, or other links on my homepage. so
this would mean a lot of changes if i would go through all those
files by hand. but... of course there must be a better and also
easier way out. and there was... luckily.
i already had cleaned out the gallery sites to use only one css
file a while ago - that was a big messy sed-battle that took my
brain quite a while to process and get it right. also i had the
css file itself cleaned (though i'm not a master of css styling,
to be honest). same applied to the bLog css files - cleaned a
while ago. so everything was ready for the big switch to be im-
plemented. and here's how the trick works...

1. cgi scripts:
for each css file, put a cgi-script in place that delivers all
content of type "text/css". for me there were three files: the
main sites css file, the gallery css and the bLog css file. also
include some nice query_string and referer processing to deliver
alternative css styles.  perl (with "-w" and, of course, "use
strict;") did the trick here - what else?

2. apache2 config:
next, do some mod_rewrite + apache2 magic. create a rewrite rule
that meets the following requirements: a) the query_string does
not contain any alternate-style index ("a=<style_index>", where
"style_index" can be one of "n"ormal, "i"nverted, "r"otated, or
"f"lipped), b) the request_uri is not for a css, jpg, gif, png,
or ico file, since there's no css to apply to those file types
anyway, c) the http_referer contains some alternate-style index.
if all those criteria meet, rewrite the url and append the al-
ternate-style index to the request_uri to have the perl script
from 1. deliver the right css content again. simple as that,
here's what it looks like in the apache2 config file:

    RewriteEngine On
    RewriteCond %{QUERY_STRING} !^a=[irfn]$
    RewriteCond %{REQUEST_URI}  !^/(.*)\.(css|jpg|gif|png|ico)$
    RewriteCond %{HTTP_REFERER} ^(.*)(\?a=[irfn])$
    RewriteRule ^/(.*)$ $1%2    [R,L]

3. apache2 mod_expires:
set expire headers in apache2's mod_expires config for css files
to zero, since they now are highly dynamical.

    ExpiresByType  text/css     A0

4. inverted random images:
modify the cgi script that delivers the random images at the
bottom of the page to provide inverted images in the inverted
mode, or deliver colour inverted post-graph on the bLog site.

5. make links on the main page to the alternative styles:
easy.

this all worked surprisingly well, only the css magic for the
rotate and flip effect are... still a bit messy and unpredict-
able when it comes to browser compatibility. but... since this
is just a nice bonus i hadn't planned to implement anyway, i'm
fine with that.

so, feel free to enjoy the new site in inverted, rotated,
or flipped style. or the inverted bLog. but no rotated or
flipped one, since the css here really totally messes the site
layout up.

oh, and i think the inverted style looks awful. but, that's what
people get when they complain about the wonderful, beautiful,
nice, well balanced, eye pleasing & catching, well thought out,
lovingly assembled cyan/black combination. don't blame me.

[ permanent link ]