preliminary redesign of stuff above the fold

views/pages/home.html.php

@@ -1,29 +1,57 @@
-<div>
-	<div id="recent">
-		<h2>The Otaku Social Network</h2>
-		<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-		eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
-	</div>
-	<div id="signup">
-		<h2>Sign up:</h2>
-		<form method="post" action="/users/signup">
-			<table>
-				<tr>
-					<td><label for="username">Username</label></td>
-					<td><input type="text" name="username" id="username">
-				</tr>
-				<tr>
-					<td><label for="password">Password</label></td>
-					<td><input type="password" id="password" name="password"></td>
-				</tr>
-				<tr>
-					<td><label for="email">Email</label></td>
-					<td><input type="text" id="email" name="email"></td>
-				</tr>
-			</table>
-			<input class="button green" type="submit" value="Sign up">
-		</form>
+<h1>The Otaku Social Network</h1>
+<a href="/users/signup">Sign up!</a>
+<div id="scrollwrapper">
+	<a class="prev browse left"></a>
+	<div id="browsable" class="scrollable">
+		<div class="items">
+			<div>
+				<img src="/img/scrollable/10737.jpg" alt="" />
+	Donec ligula lorem, blandit luctus hendrerit eu, sodales a tellus. Praesent
+	condimentum tincidunt auctor. Sed adipiscing lorem in erat lobortis fermentum.
+	Vivamus leo tellus, commodo sit amet rutrum et, pretium nec dui. Aliquam mi
+	erat, tempus eget ullamcorper eu, semper vitae nisi. Quisque ut viverra ipsum.
+	Nulla ac arcu in nisi eleifend mollis. Cras elementum, quam eget dapibus
+	auctor, ipsum nisi suscipit massa, vitae congue massa metus at enim. Cras ac
+	orci purus, nec malesuada nibh. Class aptent taciti sociosqu ad litora torquent
+	per conubia nostra, per inceptos himenaeos. Phasellus commodo felis elementum
+	dolor hendrerit non sollicitudin sem dignissim. Sed mi velit, malesuada vel
+	suscipit vel, tempor eu tellus.
+			</div>
+			<div>
+				<img src="/img/scrollable/45297.jpg" alt="" />
+	Quisque vulputate pretium eros eu elementum. Vestibulum massa purus, aliquet
+	sit amet cursus id, vehicula ac risus. Praesent dapibus congue feugiat. Ut
+	sagittis, arcu sed placerat consequat, felis sapien suscipit erat, tincidunt
+	adipiscing nulla dolor non tortor. Vivamus placerat lobortis congue. Quisque id
+	augue diam, non auctor eros. Sed nec lacus nec nulla vulputate euismod quis
+	quis felis. Sed sollicitudin adipiscing nibh, eu malesuada sem vehicula vitae.
+	Vivamus at tellus ac libero lobortis placerat. Nulla rhoncus iaculis odio, quis
+	cursus odio consequat non. Donec vel orci in nunc tristique congue sit amet sit
+	amet erat. In vitae lectus dolor, eu varius ligula. Nulla sollicitudin lacus
+	eget leo luctus malesuada. Etiam et scelerisque metus. Nullam id ante a lacus
+	commodo mollis sed non neque. Nullam condimentum magna ac tortor ultricies nec
+	tempus urna accumsan. Phasellus pulvinar, ligula et viverra tincidunt, risus
+	nunc iaculis tortor, a accumsan massa mi at libero.
+			</div>
+			<div>
+				<img src="/img/scrollable/12018.jpg" alt="" />
+	Ut non tortor justo. Phasellus non leo sit amet justo gravida tempor. Donec
+	sollicitudin enim nec neque aliquet aliquam. Praesent sollicitudin, odio vitae
+	blandit euismod, arcu nisi eleifend ante, nec tempor quam lorem ut ipsum. Cras
+	porta faucibus imperdiet. Integer ante sem, vestibulum in bibendum ut, pretium
+	in tortor. Praesent rhoncus, libero a luctus gravida, diam risus dignissim
+	nibh, vel luctus urna lectus sed orci. Duis non lorem vitae ipsum euismod
+	rutrum eget at lorem. Cras luctus dui eu nisl bibendum aliquam. Curabitur
+	eleifend sodales purus eu convallis. Aliquam tempor enim dictum lacus
+	vestibulum congue. Fusce ultricies volutpat metus in lobortis. Nam et diam
+	eros, non sagittis ante. Nulla facilisi. Integer nec leo est. Proin metus enim,
+	porttitor vitae euismod sit amet, tempor ut ligula. Nam leo dolor, sodales non
+	suscipit ut, consectetur sit amet ante. Nunc sagittis neque sit amet est
+	blandit vel facilisis metus commodo.
+			</div>
+		</div>
 	</div>
+	<a class="next browse right"></a>
 </div>
 
 <h2 class="ribbon">Why you'll &#9825; OtakuHub~</h2>
@@ -42,45 +70,3 @@
 	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 </p>
 <br class="cl" />
-
-<!-- "previous page" action -->
-<a class="prev browse left"></a>
-<div id="browsable" class="scrollable">   
-   
-   <!-- root element for the items -->
-   <div class="items">
-   
-      <!-- 1-5 -->
-      <div>
-         <img src="/img/screenshots/buttons.jpg" height="100" width="100" alt="" />
-            <img src="/img/screenshots/gallery.jpg" height="100" width="100" alt="" />
-            <img src="/img/screenshots/calendars.jpg" height="100" width="100" alt="" />
-            <img src="/img/screenshots/charts.jpg" height="100" width="100" alt="" />
-            <img src="/img/screenshots/coding.jpg" height="100" width="100" alt="" />
-      </div>
-      
-      <!-- 5-10 -->
-      <div>
-         <img src="/img/screenshots/docs.jpg" height="100" width="100" alt="" />
-            <img src="/img/screenshots/forms.jpg" height="100" width="100" alt="" />
-            <img src="/img/screenshots/gallery.jpg" height="100" width="100" alt="" />
-            <img src="/img/screenshots/notifications.jpg" height="100" width="100" alt="" />
-            <img src="/img/screenshots/pagination.jpg" height="100" width="100" alt="" />
-      </div>
-      
-      <!-- 10-15 -->
-      <div>
-         <img src="/img/screenshots/psd.jpg" height="100" width="100" alt="" />
-            <img src="/img/screenshots/switches.jpg" height="100" width="100" alt="" />
-            <img src="/img/screenshots/tabs.jpg" height="100" width="100" alt="" />
-            <img src="/img/screenshots/themes.jpg" height="100" width="100" alt="" />
-            <img src="/img/screenshots/tips.jpg" height="100" width="100" alt="" />
-      </div>
-      
-   </div>
-   
-</div>
-<!-- "next page" action -->
-<a class="next browse right"></a>
-
-<br class="cl" />

views/users/signup.html.php

@@ -11,4 +11,27 @@ Confirmation Link: <a href="<?=$link ?>/<?=$key->key ?>"> Link </a>
 	<?=$this->form->field('email'); ?>
 	<?=$this->form->submit('Signup!'); ?>
 <?=$this->form->end(); ?>
-<?php endif; ?>
+<?php endif; ?>
+
+<!--
+	<div id="signup">
+		<h2>Sign up:</h2>
+		<form method="post" action="/users/signup">
+			<table>
+				<tr>
+					<td><label for="username">Username</label></td>
+					<td><input type="text" name="username" id="username">
+				</tr>
+				<tr>
+					<td><label for="password">Password</label></td>
+					<td><input type="password" id="password" name="password"></td>
+				</tr>
+				<tr>
+					<td><label for="email">Email</label></td>
+					<td><input type="text" id="email" name="email"></td>
+				</tr>
+			</table>
+			<input class="button green" type="submit" value="Sign up">
+		</form>
+	</div>
+-->

webroot/css/base.css

@@ -2,10 +2,10 @@ a:hover {
 	text-decoration:none;
 }
 h1 {
-	font-weight:bold;
-	font-size:220%;
-	float:left;
-	margin-top:5px;
+	font-weight: bold;
+	font-size: 220%;
+	float: left;
+	margin-top: 5px;
 }
 h2 {
 	font-size:200%;
@@ -36,10 +36,6 @@ h2.ribbon {
 	z-index: -1;
 }
 
-#recent {
-	float: left;
-	width: 560px;
-}
 #signup {
 	float: right;
 	text-align: center;
@@ -214,6 +210,7 @@ nav a {
 	font-size:113%;
 	-webkit-border-radius: 3px;
 	-moz-border-radius: 3px;
+	border-radius: 3px;
 }
 nav a:hover {
 	background: #000;
@@ -465,53 +462,55 @@ dl.definition dd {
 	margin-right:10px;
 }
 
-
+#scrollwrapper {
+	padding: 15px;
+	border: 1px solid #ccc;
+	float: left;
+	margin: 15px 32px;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+}
 .scrollable {
-	height:110px;
-	overflow:hidden;
-	position:relative;
-	width:100%;
+	height: 330px;
+	overflow: hidden;
+	position: relative;
+	width: 800px;
+	float: left;
 }
 .scrollable .items {
-	clear:both;
-	position:absolute;
-	width:20000em;
+	clear: both;
+	position: absolute;
+	width: 20000em;
 }
 .items div {
-	float:left;
-	width:740pxpx;
+	float: left;
+	width: 740px;
 }
 .scrollable img {
-	-moz-border-radius:4px 4px 4px 4px;
-	background-color:#FFFFFF;
-	border:1px solid #CCCCCC;
-	float:left;
-	height:100px;
-	margin:0 4px 0 35px;
-	padding:2px;
-	width:100px;
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+	background-color: #fff;
+	border: 1px solid #ccc;
+	float: left;
+	height: 300px;
 }
 .scrollable .active {
-	border:2px solid #000000;
-	cursor:default;
-	position:relative;
-}
-/* this makes it possible to add next button beside scrollable */
-.scrollable {
-	float:left;
+	border: 2px solid #000;
+	cursor: default;
+	position: relative;
 }
-/* prev, next, prevPage and nextPage buttons */
 a.browse {
-	background:url(../img/scrollable.png) no-repeat;
-	display:block;
-	width:30px;
-	height:30px;
-	margin:40px 10px;
-	cursor:pointer;
-	font-size:1px;
-	position:absolute;
+	background: url(../img/scrollable.png) no-repeat;
+	display: block;
+	width: 30px;
+	height: 30px;
+	margin: 150px 10px;
+	cursor: pointer;
+	font-size: 1px;
+	position: absolute;
 }
-/* right */
 a.right {
 	background-position: 0 -30px;
 	clear:right;
@@ -524,7 +523,6 @@ a.right:hover {
 a.right:active {
 	background-position:-60px -30px;
 }
-/* left */
 a.left {
 	margin-left: 0px;
 	left:25px;
@@ -535,32 +533,8 @@ a.left:hover {
 a.left:active {
 	background-position:-60px 0;
 }
-/* up and down */
-a.up, a.down {
-	background:url(../img/scrollable/arrow/vert_large.png) no-repeat;
-	float: none;
-	margin: 10px 50px;
-}
-/* up */
-a.up:hover {
-	background-position:-30px 0;
-}
-a.up:active {
-	background-position:-60px 0;
-}
-/* down */
-a.down {
-	background-position: 0 -30px;
-}
-a.down:hover {
-	background-position:-30px -30px;
-}
-a.down:active {
-	background-position:-60px -30px;
-}
-/* disabled navigational button */
 a.disabled {
-	visibility:hidden !important;
+	visibility: hidden !important;
 }
 
 .search {