From ef19013d7ec45318845b565b91ff042a93bea031 Mon Sep 17 00:00:00 2001
From: raylu <raylu@mixpanel.com>
Date: Mon, 4 Jul 2011 01:22:09 -0700
Subject: gradient mask!

---
 views/pages/home.html.php | 17 ++++++++++++++---
 webroot/css/base.css      |  5 +++--
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/views/pages/home.html.php b/views/pages/home.html.php
index 46d96cb..9d39b95 100644
--- a/views/pages/home.html.php
+++ b/views/pages/home.html.php
@@ -1,7 +1,18 @@
 <h1>The Otaku Social Network</h1>
 <a href="/users/signup">Sign up!</a>
-<div id="scrollwrapper">
-	<a class="prev browse left"></a>
+<svg height="0">
+	<mask id="scrollmask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
+		<linearGradient id="g" gradientUnits="objectBoundingBox" x2="1" y2="0">
+			<stop stop-color="white" stop-opacity="0" offset="0"/>
+			<stop stop-color="white" stop-opacity="1" offset="0.03"/>
+			<stop stop-color="white" stop-opacity="1" offset="0.89"/>
+			<stop stop-color="white" stop-opacity="0" offset="1"/>
+		</linearGradient>
+		<rect x="0.0" y="0.0" width="1.0" height="1.0" fill="url(#g)"/>
+	</mask>
+</svg>
+<a class="prev browse left"></a>
+<div id="scrollwrapper" style="mask: url(#scrollmask)">
 	<div id="browsable" class="scrollable">
 		<div class="items">
 			<div>
@@ -51,8 +62,8 @@
 			</div>
 		</div>
 	</div>
-	<a class="next browse right"></a>
 </div>
+<a class="next browse right"></a>
 
 <h2 class="ribbon">Why you'll &#9825; OtakuHub~</h2>
 <div class="triangle-ribbon"></div>
diff --git a/webroot/css/base.css b/webroot/css/base.css
index 5a2cb29..ec4ddf9 100644
--- a/webroot/css/base.css
+++ b/webroot/css/base.css
@@ -463,10 +463,10 @@ dl.definition dd {
 }
 
 #scrollwrapper {
-	padding: 15px;
+	padding: 15px 20px;
 	border: 1px solid #ccc;
 	float: left;
-	margin: 15px 32px;
+	margin: 10px 25px;
 	-moz-border-radius: 3px;
 	-webkit-border-radius: 3px;
 	border-radius: 3px;
@@ -495,6 +495,7 @@ dl.definition dd {
 	border: 1px solid #ccc;
 	float: left;
 	height: 300px;
+	margin-right: 15px;
 }
 .scrollable .active {
 	border: 2px solid #000;
-- 
cgit v1.2.3