Website for Lara deBeyer's music studio. HTML5 + CSS + Leaflet for MapBox OpenStreetMaps.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Whole Note Music Studio

Source code for by


  • 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.)
  • IE8 - JavaScript :nth-child CSS3 selector workaround with classes.
  • Webkit - extra pixel added to line-height on lists with custom font-faces using different font-weights avoided with a conditional media query on a -webkit- prefixed property.
  • The site is readable without JavaScript:
    • 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.


  • Leaflet - interactive map rendering and controls
  • respond.js - CSS3 media query polyfill