gradient mask!

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>

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;