The issue is known in Chrome, and a workaround is suggested here(Comment 7). The SVG needs to be opened up in a text editor, and 'preserveAspectRatio="none"' needs to be added to the beginning SVG tag.

The issue in Firefox is also a known bug, and is discussed here. To fix the issue in the example, the height attribute was removed from the beginning SVG tag.

This is the SVG XML used in the examples before the edits:

This is the SVG XML after the edits:

These are the rendered elements after the edits have been made:

Nice.

The base font size was set at 14px, and the base line height at 21px. In order to try and maintain a vertical rhythm as much as possible, all the font sizes were set using Compass's Vertical Rhythm mixin, which automagically works out the line height needed. All the vertical margin's and padding were set to a multiple (or 50%) of the base line height.

Font Awesome More 2.0 is being used for all the icons on the site. There are a number of advantages of icon fonts instead of images, including the fact that seperate versions are not needed for Retina displays as they are scalable. Also, as they are styled with CSS, it makes things pretty easy if I want to tweak the design in the future. They're pretty awesome.

Google web fonts are being used throughout the site, with Pacifico used for the logo, Oswald for the heading text, and Open Sans for the body text. Oswald has a few minor rendering issues, but is perfectly acceptable.

The site was developed mobile first using the Susy grid framework. After comparing several alternatives, Susy was chosen primarily for the following reasons:

• I would be using Sass/Compass.
• I just wanted it to handle responsiveness, and didn't want a kitchen sink solution.
• The framework doesn't require any unsemantic mark-up in the HTML.

Sass was chosen as the CSS pre-processor primarily for a couple of reasons:

• Compass, which is a library of useful mixins that is kept updated.
• Addons are available for Firefox and Chrome that display the Sass file names and line numbers within Firebug/Developer Tools.

Other advantages of Sass over Less can be read here, and here.

ExpressionEngine was chosen as the CMS primarily for following reasons:

• No restrictions in templating
• Incredibly flexible and extensible
• Fantastic support from developers and community
• Great looking control panel

Scott Jehl's Picturefill is used in conjuction with CE Image to display the most appropriate image for each device. Picturefill closely mimics the proposed picture element, and is currently the best solution for responsive images. CE Image is used to dynamically generate images at the required resolutions and populate the mark-up used by Picturefill.

That's about it.