Permalink
Browse files

Merge

  • Loading branch information...
davidjrice committed Sep 15, 2011
2 parents cecb02f + 5c1db40 commit 457ea613a38ecbdc210b825cf2f759cffde2e7fe
@@ -5,11 +5,11 @@
/* #Basic Styles
================================================== */
body {
-background: #fff;
-font: 16px/21px myriad-pro-semi-condensed, Helvetica, Arial, sans-serif;
-color: $sqsh-mid-copy;
--webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
--webkit-text-size-adjust: 100%;
+ background: #fff;
+ font: 16px/21px myriad-pro-semi-condensed, Helvetica, Arial, sans-serif;
+ color: $sqsh-mid-copy;
+ -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
+ -webkit-text-size-adjust: 100%;
}
@@ -76,6 +76,9 @@ hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px
width: 260px;
height: 61px;
margin: 60px 0 10px 350px;
+ &:hover {
+ opacity: 0.9;
+ }
}
}
h2 {
@@ -99,8 +102,6 @@ hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px
background: -ms-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 2%,rgba(0,0,0,0) 4%,rgba(0,0,0,0) 96%,rgba(0,0,0,0) 98%,rgba(0,0,0,0.1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a000000', endColorstr='#1a000000',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 2%,rgba(0,0,0,0) 4%,rgba(0,0,0,0) 96%,rgba(0,0,0,0) 98%,rgba(0,0,0,0.1) 100%); /* W3C */
-
-
padding: 50px 0;
input[type="text"] {
width: 540px;
@@ -129,6 +130,91 @@ hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px
}
}
+.footer-wrapper {
+ background: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 2%, rgba(0,0,0,0) 4%, rgba(0,0,0,0) 96%, rgba(0,0,0,0) 98%, rgba(0,0,0,0.1) 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(2%,rgba(0,0,0,0)), color-stop(4%,rgba(0,0,0,0)), color-stop(96%,rgba(0,0,0,0)), color-stop(98%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.1))); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 2%,rgba(0,0,0,0) 4%,rgba(0,0,0,0) 96%,rgba(0,0,0,0) 98%,rgba(0,0,0,0.1) 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 2%,rgba(0,0,0,0) 4%,rgba(0,0,0,0) 96%,rgba(0,0,0,0) 98%,rgba(0,0,0,0.1) 100%); /* Opera11.10+ */
+ background: -ms-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 2%,rgba(0,0,0,0) 4%,rgba(0,0,0,0) 96%,rgba(0,0,0,0) 98%,rgba(0,0,0,0.1) 100%); /* IE10+ */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a000000', endColorstr='#1a000000',GradientType=0 ); /* IE6-9 */
+ background: linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 2%,rgba(0,0,0,0) 4%,rgba(0,0,0,0) 96%,rgba(0,0,0,0) 98%,rgba(0,0,0,0.1) 100%); /* W3C */
+
+ margin-top: 60px;
+ .container {
+ padding: 40px 0;
+ }
+
+}
+
+.link-table {
+ width: 780px;
+ text-align:left;
+ margin-left: 90px;
+ margin-top: 60px;
+ th {
+ border-bottom: 1px solid $sqsh-mid-grey;
+ height: 42px;
+ vertical-align: middle;
+ font-size: 14px;
+ color: $sqsh-light-copy;
+ &:first-child {
+ padding-left: 40px;
+ }
+ &:last-child {
+ padding-right: 40px;
+ }
+ }
+ td {
+ height: 54px;
+ vertical-align: middle;
+ &.short-url {
+ a {
+ font-weight: 600;
+ text-decoration: none;
+ }
+ }
+ &.long-url {
+ a {
+ text-decoration: none;
+ font-size:14px;
+ color:$sqsh-mid-copy;
+ }
+ }
+ &.num-views {
+ span {
+ display:block;
+ background-color: $sqsh-blue;
+ width: 20px;
+ text-align: center;
+ color: $sqsh-white;
+ font-size: 14px;
+ font-weight: 600;
+ @include border-radius (2px);
+ }
+ }
+ &.time-since {
+ font-size: 14px;
+ color:$sqsh-mid-copy;
+ text-style: italics;
+ }
+ }
+ tr {
+ &:nth-child(even){
+ background: $sqsh-light-grey;
+ }
+ td:first-child {
+ padding-left: 40px;
+ }
+ td:last-child {
+ padding-right: 40px;
+ }
+ }
+}
+
+
+
+
+
#github {
left: -65px;
@@ -21,7 +21,7 @@
<%= yield %>
- <div class="full-width">
+ <div class="full-width footer-wrapper">
<footer class="container">
<p>A <a href="http://rumblelabs.com">Rumble Labs</a> Creation</p>
<a id="github" href="https://github.com/rumblelabs/couchbase-tinyurl">
@@ -1,6 +1,6 @@
<tr>
- <td><%= link_to short_url(link.key), short_url(link.key) %></td>
- <td><%= link.views %></td>
- <td><%= link_to(link.url, link.url) %></td>
- <td><%= distance_of_time_in_words link.created_at, Time.zone.now %></td>
+ <td class="short-url"><%= link_to short_url(link.key), short_url(link.key) %></td>
+ <td class="long-url"><%= link_to(link.url, link.url) %></td>
+ <td class="num-views"><span><%= link.views %></span></td>
+ <td class="time-since"><%= distance_of_time_in_words link.created_at, Time.zone.now %></td>
</tr>
@@ -1,8 +1,8 @@
-<table>
+<table class="link-table">
<thead>
- <th>Shortened Link</th>
- <th>Views</th>
+ <th>Squished Link</th>
<th>Long Link</th>
+ <th>Views</th>
<th>When</th>
</thead>
<tbody>
@@ -5,17 +5,14 @@
</div>
<div class="container">
<%- if @popular.size > 0 -%>
- <h3>Popular</h3>
<%= render 'links', :links => @popular %>
<%- end -%>
<%- if @my_links.size > 0 -%>
- <h3>My Links</h3>
<%= render 'links', :links => @my_links %>
<%- end -%>
<%- if @recent.size > 0 -%>
- <h3>Recent</h3>
<%= render 'links', :links => @recent %>
<%- end -%>
</div>
@@ -1,5 +1,8 @@
-<h3>Short Link</h3>
-<%= link_to short_url(@link), short_url(@link) %>
-<h3>Long Link</h3>
-<%= link_to @link.url, @link.url %>
-
+<div class="full-width squish-wrapper">
+ <div class="container">
+ <h3>Short Link</h3>
+ <%= link_to short_url(@link), short_url(@link) %>
+ <h3>Long Link</h3>
+ <%= link_to @link.url, @link.url %>
+ </div>
+</div>

0 comments on commit 457ea61

Please sign in to comment.