Point Pedro Design
Really need to sleep but wtf. My dad gave me his Frequent Flyer Miles in exchange for a website, for his friend Sarvi. ‘Bout the right rate, actually a little good. I haven’t done it till yet, but just started. Doing a site invariably consists of doing fuck-all for a month and then going on a 2-day binge. The client will probably want to change it completely so I’m including screenshots as I like it. It’s for a Point Pedro (North-East) economic researcher and his papers. I used some Tamil kolams/rangoli as iconic and border elements, and he wanted a map of Sri Lanka. Getting CSS to simulate layers was a little tricky. The kolams are a really cool art form, I’d like to see more of them. This is going to be of Zero interest to anyone except the people at Vesses. I think the xHTML actually validates, though the CSS doesn’t yet. The URL is www.pointpedro.org, but it’s not really live yet.
*Rich Typography (Fonts)*
Websafe fonts are like Georgia, Arial, Verdana, Lucida, etc. You can sorta count on 95% of users having those fonts installed. I like Georgia and Lucida but the rest are gross. To use another font on a site you have to use SIFR (Flash) like Prabath, or image replacement. I instinctively hate Flash cause it turns the Internet into TV – taking away right-clicking and copying and hacking ability. It was also just easier to use…
Cold Forged Headline Images: This is a WordPress plugin. You stick some fonts on the server and then use the options page to set them up. Can add shadow and transparency and stuff easily. Pretty straightforward.
I’m using the font Maiandra, which I found somewhere. I’m not especially attached to it, but I now feel like it may all be for naught. The client wants to use this weird blocky font. It’s his site, but I won’t link to it looking like that. The site is kinda simpled and relaxed, but that font just yells ugly.
*Layered CSS Images*
Basically, the map looks like it goes over the horizontal kolam, but it doesn’t. CSS isn’t really great at handling layers (like Photoshop). I’m using a fluid layout which expands and contracts on different sized screens. That means that I can’t just Photoshop it as I like it and make that one background, each layer has to be actually independent. Basically, the way it stacked the horizontal kolam would go over the map, which I though looked ugly. The way the CSS was set it rendered background images in the following order:
[body] – map
[header] – horizontal kolam
I couldn’t switch them without really fucking up the code. What I need is for the line to go under Sri Lanka, but I can’t do that. The image is actually shaped like a rectangle, not an island. Even if I put the line under the image it’ll look stupid. I could save the map as PNG, which supports transparency, but Internet Explore is 7 years old and can’t understand that. Could use a GIF, but it fucks up the shaddow. What I did was make a dummy image which looks like this:
Made a div and stuck the image in the bottom right corner, then moved the margins around till it covered up the overlap.
[body] – map
[header] – horizontal kolam
[cover] – cover image (position:absolute, so it doesn’t really matter where it stacks)
That basically masks the map so it looks like the kolam flows underneath it, though it doesn’t. A silly hack, but it works.
*Kolams*
I was looking for Tamil Art and I came across these kolams. They go outside, draw a bunch of dots, uh, here…
Kolam is an auspicious art of decorating courtyards and pooja rooms/prayer halls in South India drawn mainly by women and girls. Some women use rice flour to draw a kolam, which is the traditional medium to be used while others use sandstone or limestone powder.
Generally, a kolam is drawn with bare fingers using predetermined dots. The dots are either connected together to make a pattern or loops are drawn encircling the dots to complete a design. Nowadays there are perforated rolling tubes, perforated trays and stencils available to speed the process of making kolams. During festivals and weddings, rice flour paste is used instead of the flour. This tradition of decorating with kolams is passed on from generation to generation. (i-kolam.com)
They’re very mathematical and beautiful, I like them. I used some colorful ones to go next to each post title, as you can see above. Those little rangoli are nice. Using PhotoMatt’s random image script to keep the site looking kinda fresh. As long as the font doesn’t change I’ll be happy with it. Just need to start uploading content.
That image hack is quite neat.
Flash is rather shitty, as you say, but the advantage of using sIFR over image replacement techniques are the reduction in file size (it’s a 15kb dowonload that gets cached), lesser number of server requests, and in this case, less processing to be done at the server end. At Nidahas I use a plain “Continue Reading” link to allow right-clicks, but that’s not an option you always have. Some time ago, I had the main navigation in sIFR too, which really sucked.