Permalink
Browse files

Re-design home page.

  • Loading branch information...
1 parent da47fe2 commit 44fb1c30292ede74a4209d30b4b24709fb7312d4 @jtrupiano committed Mar 26, 2013
View
BIN source/images/behind-the-scenes.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN source/images/tell-us.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN source/images/watch.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
40 source/index.html.erb
@@ -17,38 +17,18 @@
<% end %>
<div id="home" class="row">
- <div id="home-chrome">
- <div class="left">
- <h3>The AFC</h3>
- <p>Check out the tailgates for the AFC's final four.</p>
- </div>
- <div class="center">
- <h1>The Latest</h1>
- <h2>Episode <%= @episode.number %>: <%= @episode.title %></h2>
- </div>
- <div class="right">
- <h3>The NFC</h3>
- <p>How do they compare to the NFC's tailgates?</p>
- </div>
- <br class="clear" />
- </div>
<div id="home-video">
- <div id="recent-episodes" class="left">
- <%= partial :recent_episodes %>
- <p>
- Missed an episode?<br />
- <a href="/play">VIEW THE ARCHIVES</a>
- </p>
- </div>
- <div class="center">
+ <div class="left">
<div id="episode-highlight">
<div id="video-container">
- <iframe id="ytplayer" width="600" height="338" src="<%= @episode.youtube_embed_url %>" frameborder="0" allowFullScreen></iframe>
+ <!-- <iframe src="http://blip.tv/play/AYOK410A.x?p=1" width="600" height="366" frameborder="0" allowfullscreen></iframe><embed type="application/x-shockwave-flash" src="http://a.blip.tv/api.swf#AYOK410A" style="display:none"></embed> -->
+ <iframe src="http://player.vimeo.com/video/55050711?title=0&byline=0&portrait=0" width="600" height="338" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
+ <!-- <iframe id="ytplayer" width="600" height="338" src="<%= @episode.youtube_embed_url %>" frameborder="0" allowFullScreen></iframe> -->
</div>
<div id="social-media">
<div class="fb-like" data-href="http://www.facebook.com/Tailgate32" data-send="true" data-width="420" data-show-faces="false" data-color-scheme="dark"></div>
<div id="subscribe">
- Subscribe <a target="_blank" href="<%= @episode.itunes_url %>">iTunes</a> | <a target="_blank" href="<%= @episode.youtube_watch_url %>">YouTube</a> | <a target="_blank" href="http://feeds.feedburner.com/tailgate32">RSS</a>
+ Subscribe <a target="_blank" href="<%= @episode.itunes_url %>">iTunes</a> | <a target="_blank" href="<%= @episode.youtube_watch_url %>">YouTube</a> | <a target="_blank" href="http://blip.tv/tailgate32">Blip</a>
</div>
<br class="clear" />
<div id="twitter">
@@ -58,12 +38,10 @@
</div>
</div>
</div>
- <div id="upcoming-episodes" class="right">
- <%= partial :upcoming_episodes %>
- <p>
- Want the full scoop?<br />
- <%= link_to 'VIEW THE SCHEDULE', "/schedule" %>
- </p>
+ <div id="calls-to-action" class="right">
+ <a href="/episodes" id="watch" title="Watch all 32 episodes right now"><span class="displace">Watch all 32 episodes right now</span></a>
+ <a href="/b-sides" id="behind-the-scenes" title="Go behind the scenes with Mike and John"><span class="displace">Go behind the scenes with Mike and John</span></a>
+ <a href="#" id="tell-us" class="contact-us-link" title="Tell us what you think"><span class="displace">Tell us what you think</span></a>
</div>
<br class="clear" />
</div>
View
98 source/stylesheets/home.css
@@ -1,9 +1,5 @@
/** Styles specific to the home page of tailgate32.com **/
- #home-chrome {
- margin-top: -8px;
- }
-
#home h1 {
font-size: 36px;
}
@@ -31,37 +27,17 @@
}
#home .left {
- width: 180px;
- margin-right: 20px;
- float: left;
- }
-
- #home .center {
width: 600px;
+ margin-right: 20px;
float: left;
}
- #home .center h1 {
- text-align: center;
- }
-
- #home .center h2 {
- text-align: center;
- color: #c1c1c1;
- line-height: 28px;
- }
-
#home .right {
- width: 180px;
- margin-left: 20px;
+ width: 360px;
float: left;
- text-align: right;
}
- #home .left h3 { padding-left: 10px; }
- #home .right h3 { padding-right: 10px; }
-
#home p {
line-height: 1.3;
font-size: 13px;
@@ -96,53 +72,43 @@
margin-top: 8px;
}
- .recent-episode a, .upcoming-episode a,
- .recent-episode a:visited, .upcoming-episode a:visited {
- color: inherit;
+ #calls-to-action a {
+ display: block;
+ width: 360px;
+ text-decoration: none;
+ }
+
+ #watch {
+ height: 209px;
+ background: url("../images/watch.png");
}
- #recent-episodes .recent-episode {
- width: 176px;
- height: 76px;
- background: url("../images/recent-arrow.png") no-repeat;
- padding: 13px 0px 0px 13px;
- line-height: 1.3;
+ #watch:hover {
+ background-position: 0px -209px;
}
- #upcoming-episodes .upcoming-episode {
- width: 163px;
+ #behind-the-scenes {
+ margin-top: 20px;
height: 76px;
- text-align: right;
- background: url("../images/upcoming-arrow.png") no-repeat;
- padding: 13px 13px 0px 0px;
- line-height: 1.3;
+ background: url("../images/behind-the-scenes.png");
+ background-position: 0px -76px;
}
- .episode-number, .upcoming-welcome {
- font-size: 16px;
- font-weight: bold;
- display: block;
- }
-
- .episode-title, .upcoming-city {
- font-size: 16px;
- font-family: "Alfa Slab One", serif;
- color: #fff100;
- display: block;
- }
+ #behind-the-scenes:hover {
+ background-position: 0px 0px;
+ }
- .episode-date, .upcoming-date {
- font-size: 14px;
- font-style: italic;
- color: #c1c1c1;
- display: block;
- }
+ #tell-us {
+ margin-top: 20px;
+ height: 60px;
+ background: url("../images/tell-us.png");
+ }
- .episode-date {
- width: 150px;
- }
+ #tell-us:hover {
+ background-position: 0px -60px;
+ }
- .upcoming-date {
- padding-left: 10px;
- width: 153px;
- }
+ #calls-to-action a .displace {
+ position: absolute;
+ left: -5000px;
+ }

0 comments on commit 44fb1c3

Please sign in to comment.