forked from wezm/wezm.net
Start work on the typography and styling
This commit is contained in:
Wesley Moore
parent
95e84aad4a
commit
29c67e61af
5 changed files with 117 additions and 101 deletions
|
|
@ -4,11 +4,17 @@
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||||
<title><%= @item[:title] %></title>
|
<title><%= @item[:title] %></title>
|
||||||
<link rel="stylesheet" href="/style.css" type="text/css" />
|
<link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen,projector" />
|
||||||
<script src="/script.js" type="text/javascript"></script>
|
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen,projector" />
|
||||||
|
<script src="/js/script.js" type="text/javascript"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="main">
|
<div id="main">
|
||||||
|
<h1><%= @item[:title] %></h1>
|
||||||
|
|
||||||
|
<p class="georgia">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.</p>
|
||||||
|
|
||||||
|
|
||||||
<%= yield %>
|
<%= yield %>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
53
output/css/reset.css
Normal file
53
output/css/reset.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
56
output/css/style.css
Normal file
56
output/css/style.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
BIN
output/fonts/TitilliumMaps26L001.otf
Normal file
BIN
output/fonts/TitilliumMaps26L001.otf
Normal file
Binary file not shown.
|
|
@ -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;
|
|
||||||
}
|
|
||||||
Loading…
Reference in a new issue