add fiveshift assets for 5by5Browser

f/fiveshift.css

@@ -0,0 +1,47 @@
+
+/* Fluid widths */
+
+body
+{ width: 100%
+; min-width: 0
+; font-size: 80%
+}
+
+#masthead
+{ width: 100% }
+
+#masthead .grid_24
+{ text-align: center }
+
+#header .container_24,
+#footer .container_24
+#masthead .container_24,         /* doesn't seem to work */
+#content .container_24,          /* doesn't seem to work */
+#content .container_24 .grid_15, /* doesn't seem to work */
+.sidebar,                        /* doesn't seem to work */
+{ width: 97% }
+
+#masthead .grid_24 { width: 97% }
+#masthead .grid_24 .grid_7 { width: 100%; margin-bottom: 1em }
+#masthead .grid_24 .grid_11 { width: 95% }
+#masthead .hosts { width: 100%; padding-right: 10px }
+
+#masthead .hosts .host
+{ width: 44%
+; display: inline-block
+; float: none
+; clear: left
+}
+
+#episode { min-height: 0 }
+#episode h2 { font-size: 1.4em }
+h5, #episode h5 { font-size: 0.8em; line-height: 1.2em }
+
+#episode p,
+#episode #sponsors
+{ font-size: 0.7em; line-height: 1.3em }
+
+#episode #episode_links { font-size: 0.7em; line-height: 1.2em }
+
+.player { width: 100% }
+.player .transport { width: 65% }

f/fiveshift.js

@@ -0,0 +1,23 @@
+if (!window.__fiveShiftInjected__) {
+  window.__fiveShiftInjected__ = true
+
+  // load custom css
+  var head  = document.getElementsByTagName('head')[0]
+    , css  = document.createElement('link')
+  css.rel  = 'stylesheet'
+  css.type = 'text/css'
+  css.href = 'http://samhuri.net/f/fiveshift.css?t=' + +new Date()
+  head.appendChild(css)
+
+  // These don't center properly via CSS for some reason
+  ;[ '#masthead .container_24'
+   , '#content .container_24'
+   , '#content .container_24 .grid_15'
+   , '.sidebar'
+   ].forEach(function(selector) {
+     $(selector).css('width', '97%')
+   })
+
+  // Fix up the viewport
+  $('meta[name="viewport"]').attr('content','width=device-width,initial-scale=1.0')
+}