reorganize CSS... with fire

views/layouts/default.html.php

@@ -7,8 +7,9 @@ use \lithium\security\Auth;
 	<?= $this->html->charset() ?>
 	<title>OtakuHub<?php $title = $this->title(); if ($title) echo " > $title" ?></title>
 	<?= $this->html->style(array('style', 'base')) ?>
-	<?= $this->html->style(array('themes/light')) ?>
-	<?= $this->html->style(array('prettyPhoto')) ?>
+	<?= $this->html->style('themes/light') ?>
+	<?= $this->html->style('prettyPhoto') ?>
+	<?= $this->styles(); ?>
 
 	<script type="text/javascript" >
 	function clearDefault(el) {

views/pages/feed.html.php

@@ -1,3 +1,7 @@
+<?php
+$this->styles($this->html->style("/css/feed.css"));
+?>
+
 <h2 class="ribbon full">edude03's feed</h2>
 <div class="triangle-ribbon"></div>
 <br class="cl" />
@@ -11,4 +15,4 @@
       </ul>
       </div>
       <br class="cl">
-      </div>
+      </div>

views/pages/home.html.php

@@ -1,3 +1,7 @@
+<?php
+$this->styles($this->html->style("/css/home.css"));
+?>
+
 <h1>The Otaku Social Network</h1>
 <a href="/users/signup">Sign up!</a>
 <svg height="0">

views/users/signup.html.php

@@ -1,3 +1,7 @@
+<?php
+$this->styles($this->html->style("/css/signup.css"));
+?>
+
 <?php if (isset($key)): ?>
 Confirmation Link: <a href="<?=$link ?>/<?=$key->key ?>"> Link </a>
 <?php else: ?>

webroot/css/base.css

@@ -40,21 +40,6 @@ h2.ribbon {
 	z-index: -1;
 }
 
-#signup {
-	float: right;
-	text-align: center;
-}
-#signup table {
-	margin-bottom: 5px;
-}
-#signup table tr td:first-child {
-	text-align: right;
-}
-#signup table td {
-	padding: 3px;
-	vertical-align: middle;
-}
-
 h2 span {
 	position:absolute;
 	right:25px;
@@ -66,14 +51,6 @@ h3 {
 	font-weight: bold;
 	margin-bottom:15px;
 }
-aside h3 {
-	font-size:138.5%;
-	font-weight:bold;
-	margin-bottom:15px;
-	color:#333333;
-	padding-bottom:10px;
-	border-bottom:1px solid #D9D9D9;
-}
 h4 {
 	font-size:128%;
 	font-weight: bold;
@@ -87,29 +64,11 @@ h5.inline {
 	float:left;
 	margin-right:10px;
 }
-h6 {
-	font-size:93%;
-}
 h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {
 	margin-right:5px;
 	vertical-align:-2px;
 }
 
-.fl {
-	float:left;
-}
-img.fl {
-	margin:0 25px 25px 0;
-}
-.fr {
-	float:right;
-}
-img.fr {
-	margin:0 0 25px 25px;
-}
-.fn {
-	float:none!important;
-}
 .cl {
 	background: none;
 	border: 0;
@@ -125,71 +84,6 @@ img.fr {
 	width: 0;
 	height: 0;
 }
-.tl {
-	text-align:left;
-}
-.tr {
-	text-align:right;
-}
-.tc {
-	text-align:center;
-}
-.hd {
-	display: none;
-}
-.strong {
-	font-weight: 700!important;
-}
-.no-margin {
-	margin:0!important;
-}
-.no-padding {
-	padding:0!important;
-}
-.margin-left {
-	margin-left:20px;
-}
-.margin-right {
-	margin-right:20px;
-}
-.margin-top {
-	margin-top:20px;
-}
-.margin-bottom {
-	margin-bottom:20px;
-}
-.border-top {
-	border-top:1px solid #D9D9D9;
-	padding-top:10px;
-	margin-top:20px;
-}
-.border-left {
-	border-left:1px solid #D9D9D9;
-	padding-left:10px;
-	margin-left:20px;
-}
-.border-bottom {
-	border-bottom:1px solid #D9D9D9;
-	padding-bottom:10px;
-	margin-bottom:20px;
-}
-.border-right {
-	border-top:1px solid #D9D9D9;
-	padding-top:10px;
-	margin-top:20px;
-}
-.txt-smaller {
-	font-size:85%
-}
-.txt-small {
-	font-size:93%
-}
-.txt-light {
-	color:#4d4d4d;
-}
-.txt-lighter {
-	color:#666;
-}
 
 nav {
 	float: left;
@@ -287,17 +181,6 @@ footer {
 .breadcrumbs li {
 	display:inline;	
 }
-aside {
-	float:left;
-	width:260px;
-	color:#333333;
-	display:inline;
-}
-section {
-	margin-bottom:20px;
-	padding-bottom:20px;
-	border-bottom:1px solid #d9d9d9;
-}
 .inlinepic {
 	background:#fafafa;
 	border:1px solid #ccc;
@@ -318,103 +201,6 @@ blockquote cite {
 	font-size:12px;
 	font-style:italic;
 }
-/*//   About Page   //*/
-#teamlist {
-	margin:0;
-	list-style:none;
-}
-#teamlist li {
-	margin-bottom:20px;
-	padding-bottom:10px;
-	border-bottom:1px solid #D9D9D9;
-}
-#teamlist li.last {
-	border-bottom:0;
-	margin-bottom:0;
-	padding-bottom:0;
-}
-/*//   Services Page   //*/
-
-.services-list {
-	margin:0;
-	list-style:none;
-}
-.services-list li {
-	float:left;
-	width:270px;
-	margin-right:30px;
-	margin-bottom:20px;
-	font-size:93%;
-}
-.services-list li p {
-	margin-bottom:5px;
-}
-.services-list li a {
-	float:right;
-}
-.services-list li img {
-	float:left;
-	margin:5px 20px 30px 0;
-}
-.services-list li.last {
-	margin-right:0;
-}
-.process {
-	height:31px;
-	width:31px;
-	background: url(../img/process.gif);
-	color:#fff;
-	display:block;
-	font-size:138%;
-	font-weight:bold;
-	line-height:28px;
-	text-align:center;
-	margin:5px 20px 30px 0;
-	float:left;
-}
-/*//   Portfolio Page   //*/
-.portfolio-small {
-	list-style:none outside none;
-	margin:0 -35px 0;
-}
-.portfolio-small li a {
-	display:block;
-}
-.portfolio-small li {
-	float:left;
-	margin-bottom:20px;
-	margin-left:35px;
-	width:275px;
-}
-.portfolio-small li img {
-	margin-bottom:10px;
-}
-.portfolio-small li h4 {
-	margin-bottom:10px;
-}
-.portfolio-small li p {
-	margin-bottom:10px;
-}
-.portfolio-list {
-	list-style:none outside none;
-	margin:0;
-}
-.portfolio-list li {
-	margin-bottom:20px;
-	padding-bottom:20px;
-}
-.portfolio-list li img {
-	float:left;
-}
-.portfolio-list li.last {
-	padding-bottom:0;
-}
-.portfolio-list li div {
-	margin-left: 390px;
-}
-.portfolio-list li p {
-	margin-bottom:15px;
-}
 
 p {
 	line-height:1.6;
@@ -430,19 +216,7 @@ p {
 .list ul {
 	margin-bottom:15px;
 }
-dl.definition {
-	margin-bottom:20px;
-}
-dl.definition dt {
-	font-weight:bold;
-	margin-bottom:5px;
-	padding-left:20px;
-}
-dl.definition dd {
-	color:#666666;
-	margin-bottom:15px;
-	padding-left:20px;
-}
+
 .tags {
 	margin:0 0 15px;
 	list-style:none;
@@ -457,153 +231,12 @@ dl.definition dd {
 	-moz-border-radius:20px;
 	-webkit-border-radius:20px;
 }
-.social {
-	margin:0 0 15px;
-	list-style:none;
-}
-.social li {
-	display:inline;
-	margin-right:10px;
-}
-
-#scrollwrapper {
-	padding: 15px 20px;
-	border: 1px solid #ccc;
-	float: left;
-	margin: 10px 25px;
-	-moz-border-radius: 3px;
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
-}
-.scrollable {
-	height: 330px;
-	overflow: hidden;
-	position: relative;
-	width: 800px;
-	float: left;
-}
-.scrollable .items {
-	clear: both;
-	position: absolute;
-	width: 20000em;
-}
-.items div {
-	float: left;
-	width: 740px;
-}
-.scrollable img {
-	-moz-border-radius: 4px;
-	-webkit-border-radius: 4px;
-	border-radius: 4px;
-	background-color: #fff;
-	border: 1px solid #ccc;
-	float: left;
-	height: 300px;
-	margin-right: 15px;
-}
-.scrollable .active {
-	border: 2px solid #000;
-	cursor: default;
-	position: relative;
-}
-a.browse {
-	background: url(../img/scrollable.png) no-repeat;
-	display: block;
-	width: 30px;
-	height: 30px;
-	margin: 150px 10px;
-	cursor: pointer;
-	font-size: 1px;
-	position: absolute;
-}
-a.right {
-	background-position: 0 -30px;
-	clear:right;
-	margin-right: 0px;
-	right:25px;
-}
-a.right:hover {
-	background-position:-30px -30px;
-}
-a.right:active {
-	background-position:-60px -30px;
-}
-a.left {
-	margin-left: 0px;
-	left:25px;
-}
-a.left:hover {
-	background-position:-30px 0;
-}
-a.left:active {
-	background-position:-60px 0;
-}
-a.disabled {
-	visibility: hidden !important;
-}
 
 .search {
 	float: right;
 	margin-top: 5px;
 }
 
-.pricing-table h4 {
-	color:#FFFFFF;
-	font-size:240%;
-	margin-bottom:5px;
-}
-.pricing-table h5 {
-	color:#FFFFFF;
-	font-size:140%;
-	margin-bottom:5px;
-}
-.pricing-table .header {
-	background:url(../img/grad-blue.gif) repeat-x scroll center top #166890;
-	border:1px solid #11506F;
-	color:#FFFFFF;
-	text-align:center;
-	width:28%;
-	padding:5px;
-}
-.pricing-table .blank {
-	background:#fff;
-	border:none;
-}
-.pricing-table {
-	border-right:1px solid #58bbec;
-	border-bottom:1px solid #58bbec;
-	width:100%;
-	margin-bottom:20px;
-}
-.pricing-table thead th, .pricing-table thead td {
-	padding:6px 10px;
-	font-weight: 700;
-	color: #333;
-	background: #EAEBFA;
-	border-bottom: 1px solid #D9D9D9;
-	border-right:1px solid #D9D9D9;
-}
-.pricing-table thead th.last, .pricing-table thead td.last {
-	border-right:0;
-}
-.pricing-table tbody th, .pricing-table tbody td {
-	background:#EAEBFA;
-	border-right:1px dotted #D9D9D9;
-	vertical-align:middle;
-	padding:12px;
-	font-size:93%;
-	text-align:center;
-}
-.pricing-table tbody tr.alt td {
-	background:#e4e6fa;
-}
-.pricing-table tbody th.last, .pricing-table tbody td.last {
-	border-right:0 none;
-}
-.pricing-table tbody tr.last td {
-	border-bottom:0 none;
-}
-/*////   - Forms -   ////*/
 body.ie7 form, body.ie8 {
 	margin-bottom:40px;
 }
@@ -617,9 +250,6 @@ form input, form textarea {
 	-moz-border-radius: 3px;
 	-webkit-border-radius: 3px;
 }
-form input.small {
-	width:35px;
-}
 input[type="button"], input[type="submit"], button {
 	cursor: pointer;
 	display: inline-block;
@@ -639,25 +269,6 @@ input[type="button"]:hover, input[type="submit"]:hover, button:hover {
 	background: #eee;
 }
 
-#message {
-	margin-bottom:20px;
-}
-.error-message {
-	background:url("../img/error.png") no-repeat 10px center #FECDC6;
-	padding:10px 35px;
-	border-radius:3px;
-	-moz-border-radius:3px;
-	-webkit-border-radius:3px;
-}
-.success-message {
-	background:url(../img/success.png) no-repeat 10px center #F1FFBF;
-	padding:10px 35px;
-	border-radius:3px;
-	-moz-border-radius:3px;
-	-webkit-border-radius:3px;
-}
-
-/* notifications */
 .notification.success {
 	background:#f1ffbf url('../img/icons/success.png') no-repeat 10px 10px;
 	border-color:#a6d50f;
@@ -726,56 +337,7 @@ input[type="button"]:hover, input[type="submit"]:hover, button:hover {
 .notification span.strong {
 	margin-right:10px;
 }
-/* Bullet List */
 
-.bullet-list {
-	list-style:none;
-	margin-bottom:15px;
-	margin-left:0;
-}
-.bullet-list li {
-	background:url("../img/bullet_arrow_right.png") no-repeat left center transparent;
-	margin-bottom:5px;
-	padding:6px 6px 6px 20px;
-}
-.bullet-list li a {
-	-webkit-border-radius:3px;
-	-moz-border-radius:3px;
-	border-radius:3px;
-	color:#181818;
-	display:block;
-	margin:-6px;
-	padding:6px;
-	text-decoration:none;
-}
-.bullet-list li a:hover {
-	background-color:#E2E2E2;
-	margin:-6px -6px -6px -20px;
-	padding:6px 6px 6px 20px;
-}
-.bullet-list.grey li {
-	-webkit-border-radius:3px;
-	-moz-border-radius:3px;
-	border-radius:3px;
-	background-color:#f2f2f2;
-	width:50%;
-}
-/* Definition List */
-dl.definition {
-	margin-bottom:20px;
-}
-dl.definition dt {
-	background:url("../img/icons/16/bullet_arrow_right.png") no-repeat left center;
-	font-weight: 700;
-	margin-bottom:5px;
-	padding-left:20px;
-}
-dl.definition dd {
-	color:#666666;
-	margin-bottom:15px;
-	padding-left:20px;
-}
-/* Pagination */
 .pagination {
 	display: inline-block;
 	font-size: 77%;
@@ -804,23 +366,12 @@ dl.definition dd {
 .pagination a.number.current {
 	color: #444;
 }
-/* Small Pagination */
-.pagination.small a, .pagination.small .dots {
-	margin-right: 1px;
-	padding: 1px 4px;
-	-moz-border-radius: 6px;
-	-webkit-border-radius: 6px;
-	border-radius: 6px;
-}
-/* Table Styles */
+
 .table {
 	border:1px solid #CCCCCC;
 	width:100%;
 	margin-bottom:20px;
 }
-.table.no-border {
-	border:none
-}
 .table thead th, .table thead td {
 	padding:6px 10px;
 	font-weight: 700;
@@ -854,36 +405,3 @@ dl.definition dd {
 .table tbody tr:hover th, .table tbody tr:hover td {
 	background:#d3ecf9;
 }
-/* Tispy Tooltips */
-.tipsy {
-	padding: 5px;
-	font-size: 93%;
-	opacity: 0.8;
-	filter: alpha(opacity=80);
-	background-repeat: no-repeat;
-	background-image: url(../img/tipsy.gif);
-}
-.tipsy-inner {
-	padding: 5px 8px 4px 8px;
-	background-color: black;
-	color: white;
-	max-width: 200px;
-	text-align: center;
-}
-.tipsy-inner {
-	border-radius:3px;
-	-moz-border-radius:3px;
-	-webkit-border-radius:3px;
-}
-.tipsy-north {
-	background-position: top center;
-}
-.tipsy-south {
-	background-position: bottom center;
-}
-.tipsy-east {
-	background-position: right center;
-}
-.tipsy-west {
-	background-position: left center;
-}

webroot/css/feed.css

@@ -0,0 +1,57 @@
+aside {
+	float:left;
+	width:260px;
+	color:#333333;
+	display:inline;
+}
+
+aside h3 {
+	font-size:138.5%;
+	font-weight:bold;
+	margin-bottom:15px;
+	color:#333333;
+	padding-bottom:10px;
+	border-bottom:1px solid #D9D9D9;
+}
+
+.social {
+	margin:0 0 15px;
+	list-style:none;
+}
+.social li {
+	display:inline;
+	margin-right:10px;
+}
+
+.tipsy {
+	padding: 5px;
+	font-size: 93%;
+	opacity: 0.8;
+	filter: alpha(opacity=80);
+	background-repeat: no-repeat;
+	background-image: url(../img/tipsy.gif);
+}
+.tipsy-inner {
+	padding: 5px 8px 4px 8px;
+	background-color: black;
+	color: white;
+	max-width: 200px;
+	text-align: center;
+}
+.tipsy-inner {
+	border-radius:3px;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+}
+.tipsy-north {
+	background-position: top center;
+}
+.tipsy-south {
+	background-position: bottom center;
+}
+.tipsy-east {
+	background-position: right center;
+}
+.tipsy-west {
+	background-position: left center;
+}

webroot/css/home.css

@@ -0,0 +1,75 @@
+#scrollwrapper {
+	padding: 15px 20px;
+	border: 1px solid #ccc;
+	float: left;
+	margin: 10px 25px;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+}
+.scrollable {
+	height: 330px;
+	overflow: hidden;
+	position: relative;
+	width: 800px;
+	float: left;
+}
+.scrollable .items {
+	clear: both;
+	position: absolute;
+	width: 20000em;
+}
+.items div {
+	float: left;
+	width: 740px;
+}
+.scrollable img {
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+	background-color: #fff;
+	border: 1px solid #ccc;
+	float: left;
+	height: 300px;
+	margin-right: 15px;
+}
+.scrollable .active {
+	border: 2px solid #000;
+	cursor: default;
+	position: relative;
+}
+a.browse {
+	background: url(../img/scrollable.png) no-repeat;
+	display: block;
+	width: 30px;
+	height: 30px;
+	margin: 150px 10px;
+	cursor: pointer;
+	font-size: 1px;
+	position: absolute;
+}
+a.right {
+	background-position: 0 -30px;
+	clear:right;
+	margin-right: 0px;
+	right:25px;
+}
+a.right:hover {
+	background-position:-30px -30px;
+}
+a.right:active {
+	background-position:-60px -30px;
+}
+a.left {
+	margin-left: 0px;
+	left:25px;
+}
+a.left:hover {
+	background-position:-30px 0;
+}
+a.left:active {
+	background-position:-60px 0;
+}
+a.disabled {
+	visibility: hidden !important;
+}

webroot/css/signup.css

@@ -0,0 +1,14 @@
+#signup {
+	float: right;
+	text-align: center;
+}
+#signup table {
+	margin-bottom: 5px;
+}
+#signup table tr td:first-child {
+	text-align: right;
+}
+#signup table td {
+	padding: 3px;
+	vertical-align: middle;
+}

webroot/js/functions.js

@@ -4,14 +4,6 @@ jQuery(document).ready(function($) {
 	login.attr('title', '');
 	login.prettyPhoto({deeplinking: false, social_tools: false});
 
-	$('.portfolio-small li img, .portfolio-list li img').hover(function() {
-		$(this).children('a').show();
-		$('.portfolio-small li img, .portfolio-list li img').stop().animate({ opacity: .5 }, 300);
-		$(this).stop().css('opacity', 1);
-	}, function() {
-		$('.portfolio-small li img, .portfolio-list li img').stop().animate({ opacity: 1 }, 300);
-	});
-
 	$('.tooltip').tipsy({fade: true});
 	$('.tooltip.north').tipsy({fade: true, gravity: 's'});
 	$('.tooltip.east').tipsy({fade: true, gravity: 'w'});