A site for Science Hack Day
I spent the weekend immersing myself in HTML5 and CSS3.
I gave Principia Gastronomica a bit of a fine-tuning under the hood. I decided to ditch all the background images I was using to get rounded corners and drop shadows, and just use border-radius and box-shadow instead. Internet Explorer gets the same content with more pointy corners and without the illusion of depth.
I also launched a brand new site: ScienceHackDay.com. It’s a small little site designed to quickly dispense relevant information on the upcoming geektastic Science Hack Day in London on June 19th and 20th.
The front page is also a blog. I’ll be posting updates about the event there and I’ll also be highlighting science projects and hack ideas. Subscribe to the feed if you want get updates.
I couldn’t be bothered installing or writing blogging software for the site. It seemed like overkill for such a quick’n’nimble project so I’m just blogging in HTML using hAtom. It’s converted to Atom using Luke Arno’s handy service. I was going to use the transcoder on Microformatic.com but I think it uses Tidy which means it won’t work on the new HTML5 elements.
The underlying structure is a combination of microformats, HTML5 structural elements and ARIA roles. The styling is over-the-top CSS3. There’s border-radius, opacity and RGBa a-plenty. Setting colours using opacity and alpha transparency makes it a breeze to customise the colours on each page, so the schedule, location and not-so-FAQ pages all have a slightly different tint.
Internet Explorer doesn’t get any of this colourful or roundy goodness. It does however, get the typography and layout, much like the print stylesheet view. I wouldn’t do that for client work but I’m perfectly happy to do it for a weekend project.
Check out the site and if you decide that Science Hack Day looks like your kind of event, add your name on the wiki.
You can also follow @sciencehackday on Twitter to get bite-sized updates as they happen.
Monday, May 10th, 2010 5:12pm
Tagged with science hackday html html5 css3 css
Illustrations
Thanks to the magic of machine tags, you can illustrate this post by tagging a picture on Flickr with:
Related
Flickr
Find photos I've tagged with science, hackday, html, html5, css3, css, etc. on Flickr.
Find photos that I took on May 10th, 2010.
