Guides Index button with hover and click states

sproutcore · May 9, 2011 · 5b4ce01 · 5b4ce01
1 parent 11ba7f8
commit 5b4ce01
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 13 deletions.
diff --git a/assets/images/strobe/guide-button-active.png b/assets/images/strobe/guide-button-active.png
diff --git a/assets/images/strobe/guide-button-hover.png b/assets/images/strobe/guide-button-hover.png
diff --git a/assets/images/strobe/guide-button.png b/assets/images/strobe/guide-button.png
diff --git a/assets/stylesheets/overrides.style.css b/assets/stylesheets/overrides.style.css
@@ -15,18 +15,21 @@ dd img {
   background-repeat: repeat;
   border-bottom: 1px #fff;
   padding: 1px;
-
-  text-shadow: 0 0 1px #fff;
-  text-shadow: 0 0 3px #fff;
-  text-shadow: 0 0 5px #fff;
 }
 
 #feature .wrapper {
   height: 70px;
   margin-top: 80px;
   margin-bottom: 30px;
-  width: 670px;
-  padding-right: 290px;
+  padding: 0;
+  width: 960px;
+}
+
+#feature .feature_header {
+  width: 680px;
+  text-shadow: 0 0 1px #fff;
+  text-shadow: 0 0 3px #fff;
+  text-shadow: 0 0 5px #fff;
 }
 
 #feature img {
@@ -46,6 +49,40 @@ dd img {
   margin-top: -0.5em;
 }
 
+#feature .feature_sidebar {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 280px;
+}
+
+#feature #guidesMenu,
+#feature #guides .guidesMenu {
+  font-size: 115%;
+  text-transform: uppercase;
+  font-weight: bold;
+  color: #454b54;
+  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.32);
+}
+
+#feature #guidesMenu {
+  display: block;
+  width: 214px;
+  height: 49px;
+  margin: 1.2em auto;
+  text-align: center;
+  padding-top: 14px;
+  background: url(../images/strobe/guide-button.png) no-repeat;
+}
+
+#feature #guidesMenu:hover {
+  background-image: url(../images/strobe/guide-button-hover.png);
+}
+
+#feature #guidesMenu:active {
+  background-image: url(../images/strobe/guide-button-active.png);
+}
+
 #container {
   background: white url(../images/strobe/containergradient.png) repeat-x scroll;
 }

diff --git a/source/layout.html.erb b/source/layout.html.erb
@@ -42,13 +42,20 @@
 
   <div id="feature">
     <div class="wrapper">
-    <% if page_header = yield(:page_header).presence %>
-      <%= page_header %>
-    <% else %>
-      <a href="/"><img src="../images/strobe/guides.png"></a>
-      <h2><a href="/"><%= Guides.meta["title"] %></a></h2>
-      <p><%= Guides.meta["description"] %></p>
-    <% end %>
+      <div class="feature_header">
+      <% if page_header = yield(:page_header).presence %>
+        <%= page_header %>
+      <% else %>
+        <a href="/"><img src="../images/strobe/guides.png"></a>
+        <h2><a href="/"><%= Guides.meta["title"] %></a></h2>
+        <p><%= Guides.meta["description"] %></p>
+      <% end %>
+      </div>
+      <div class="feature_sidebar">
+        <a href="index.html" onclick="guideMenu(); return false;" id="guidesMenu">
+          Guides Index <span id="guidesArrow">&#9656;</span>
+        </a>
+      </div>
     </div>
   </div>