diff --git a/layouts/default.html b/layouts/default.html index e6869ec..7b047ab 100644 --- a/layouts/default.html +++ b/layouts/default.html @@ -4,11 +4,17 @@ <%= @item[:title] %> - - + + +
+

<%= @item[:title] %>

+ +

Something that seems to be a regression on the iPhone relative to all previous iPods is that song titles get truncated. Even in the original iPod the Now Playing screen would scroll the current song title so that you could read it all when it didn't fit on screen. Later model iPods also scrolled text that was wider than the screen when browsing menus. It seems the iPhone 3G does neither of these. I tried the three main views: Now Playing, List view (flip side of album art in now playing screen) and the track browsing screen. All three are pictured at the end of this post (which incidently was written using the very cool iPhone WordPress app). It seems the only way to see the full track name is to rotate the iPhone into the Coverflow view where the text fits given the added width of the screen. If anyone has any better suggestions I'd love to hear them.

+ + <%= yield %>
diff --git a/output/css/reset.css b/output/css/reset.css new file mode 100644 index 0000000..1c85489 --- /dev/null +++ b/output/css/reset.css @@ -0,0 +1,53 @@ +/* http://meyerweb.com/eric/tools/css/reset/ */ +/* v1.0 | 20080212 */ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +/* remember to define focus styles! */ +:focus { + outline: 0; +} + +/* remember to highlight inserts somehow! */ +ins { + text-decoration: none; +} +del { + text-decoration: line-through; +} + +/* tables still need 'cellspacing="0"' in the markup */ +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/output/css/style.css b/output/css/style.css new file mode 100644 index 0000000..ab50b2b --- /dev/null +++ b/output/css/style.css @@ -0,0 +1,56 @@ +@font-face { + font-family: "Titillium"; + src: url(/fonts/TitilliumMaps26L001.otf) format("opentype"); +} +/*@font-face { + font-family: "Contra"; + src: url(/fonts/CONTRA__.ttf) format("truetype"); +} +@font-face { + font-family: "League Gothic"; + src: url(/fonts/League%20Gothic.otf) format("opentype"); +}*/ + +body { + font-family: Constantia, Georgia, "Bitstream Vera Serif", "Liberation Serif", serif; + font-size: 62.5%; +} + +p { + font-size: 1.6em; + line-height: 1.2; + margin: 1em 0; +} + +p.georgia { + font-family: Georgia, Palatino, Times, 'Times New Roman', sans-serif; +} + +h1 { + font-size: 4.5em; +} + +h1,h2,h3,h4,h5,h6 { +/* font-family: "League Gothic", Contra, Titillium, Calibri, Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif;*/ + font-family: Titillium, Calibri, Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif; + margin: 0.75em 0 0.25em 0; +} + +body { + background: #fff; + padding: 1em; +} + +a { + text-decoration: none; +} + +a:link, +a:visited { + color: #f30; +} + +a:hover { + color: #f90; +} + diff --git a/output/fonts/TitilliumMaps26L001.otf b/output/fonts/TitilliumMaps26L001.otf new file mode 100644 index 0000000..5eef9df Binary files /dev/null and b/output/fonts/TitilliumMaps26L001.otf differ diff --git a/output/style.css b/output/style.css deleted file mode 100644 index f955a9b..0000000 --- a/output/style.css +++ /dev/null @@ -1,99 +0,0 @@ -* { - margin: 0; - padding: 0; - - font-family: Georgia, Palatino, Times, 'Times New Roman', sans-serif; -} - -body { - background: #fff; -} - -a { - text-decoration: none; -} - -a:link, -a:visited { - color: #f30; -} - -a:hover { - color: #f90; -} - -#main { - position: absolute; - - top: 40px; - left: 280px; - - width: 500px; -} - -#main h1 { - font-size: 40px; - font-weight: normal; - - line-height: 40px; - - letter-spacing: -1px; -} - -#main p { - margin: 20px 0; - - font-size: 15px; - - line-height: 20px; -} - -#main ul { - margin: 20px; -} - -#main li { - list-style-type: square; - - font-size: 15px; - - line-height: 20px; -} - -#sidebar { - position: absolute; - - top: 40px; - left: 20px; - width: 200px; - - padding: 20px 20px 0 0; - - border-right: 1px solid #ccc; - - text-align: right; -} - -#sidebar h2 { - text-transform: uppercase; - - font-size: 13px; - - color: #333; - - letter-spacing: 1px; - - line-height: 20px; -} - -#sidebar ul { - list-style-type: none; - - margin: 20px 0; -} - -#sidebar li { - font-size: 14px; - - line-height: 20px; -}