Whole Note Music Studio
- Single page, responsive design using HTML5 and CSS3 media queries
- Layouts for handheld, tablet, and desktop screens of 320px to 992px+ wide
- Handheld, tablet, and aural layouts include navigation and links back to navigation after each section
- Desktop widths utilize two columns. Contact information is brought to the top of the page and the navigation is hidden.
- Typeset to a 24px baseline
- Black and white print stylesheet (browsers tend to darken print colours)
- Two-tone blue border on the left side of the screen for widths wider than 360px
- Two sets of bullet points for list items created using generated content:
- ♪ and ♫ for plain text
- accidentals (sharp, flat, and natural signs) for links
- Styled ampersands and question marks in headers
- Mottled background for texture
Accessible in FF3.6+, IE6+, Opera 9.5+, and the latest versions of Chrome and Safari.
- IE6 - Basic screen layout intended for handheld devices. (CSS media query polyfill disabled.)
- IE7 - Lists styled with square bullets instead of musical notation. (No support for generated content.)
:nth-childCSS3 selector workaround with classes.
- Webkit - extra pixel added to
line-heighton lists with custom font-faces using different font-weights avoided with a conditional media query on a
- Browsers lacking support for media queries receive the mobile layout (with navigation)
- Interactive map falls back to static image (both provided by MapBox)
- IE6-8 HTML5, IE7 clearfix, and IE8 CSS3 selector polyfills not executed. NB: Internal navigation is not accessible without the HTML5 polyfill.