peak sound

chee · Mar 25, 2013 · 53b1090 · 53b1090
1 parent 01a92c3
commit 53b1090
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -12,7 +12,7 @@
 		<h1><strong>Peak</strong>Sound</h1>
 		<nav>
 			<ul>
-				<li><a class="selected" href="about.html">about us</a>
+				<li><a href="about.html" class="selected">about us</a>
 				<li><a href="system.html">sound system</a>
 				<li><a href="service.html">services &amp; pricing</a>
 				<li><a href="contact.html">contact</a>
@@ -21,4 +21,4 @@ <h1><strong>Peak</strong>Sound</h1>
 	</header>
 	<div class="main" role="main">
 	</div>
-</div>	
+</div>
diff --git a/style/gorgeous.css b/style/gorgeous.css
diff --git a/style/gorgeous.scss b/style/gorgeous.scss
@@ -18,18 +18,22 @@
 	transition-property:         $property;
 }
 
-body {
+html, body {
 	background: #e0e0e0;
-	font-family: roboto;
+	font-family: helvetica neue;
+	width: 90%;
+	margin: auto;
 }
 
 .top-header {
-	background: #e7e7e7;
 	overflow: hidden;
 
 	h1 {
 		font-weight: 100;
+		font-size: 3em;
 		text-shadow: -1px 1px white;
+		text-align: center;
+		margin: .25em;
 
 		strong {
 			font-weight: 400;
@@ -39,7 +43,7 @@ body {
 	nav {
 		width: 100%;
 		margin: auto;
-		box-shadow: 1px 1px 1px rgba( 0, 0, 0, 0.1 );
+		box-shadow: 0 2px 2px rgba( 0, 0, 0, 0.2 );
 		ul {
 			list-style-type: none;
 			width: 100%;
@@ -50,23 +54,36 @@ body {
 				width: 25%;
 
 				a {
-					color: #333;
-					background: white;
+					position: relative;
+					display: block;
+					background-color: #444;
+					background: linear-gradient( #fff 0%, #444 3%, #000);
+					@include transition( (border,color), .24s, ease-out );
+					color: #e7e7e7;
 					text-decoration: none;
 					line-height: 3;
 					height: 3em;
-					display: block;
 					width: 100%;
 					text-align: center;
-					border-bottom: 1px solid #d7d7f7;
-					@include transition( ( border-color,background-color ), .3s, ease-in );
 					overflow: hidden;
 					text-overflow: ellipsis;
 					white-space: nowrap;
+					border: 1px solid rgba( 0, 0, 0, 0.5 );
+					border-bottom: 1px solid black;
+					margin-left: 0px;
+					border-left: none;
 
 					&:hover {
 						border-bottom-color: red;
-						background: #eee;
+						background-color: #333;
+						background: linear-gradient( #fff 0%, #333 3%, #000);
+						color: #eee;
+					}
+
+					&:active {
+						background-color: #111;
+						background: #111;
+						color: #f4f4f4;
 					}
 				}
 
@@ -85,4 +102,46 @@ body {
 .main {
 	width: 95%;
 	margin: auto;
+}
+
+button,
+.button {
+	font-size: 0.875em;
+	font-weight: bold;
+	background-color: #fefefe;
+	background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#e8e8e8));
+	background-image: -webkit-linear-gradient(top, #fefefe, #e8e8e8);
+	background-image: -moz-linear-gradient(top, #fefefe, #e8e8e8);
+	background-image: -ms-linear-gradient(top, #fafafa, #d8d8d8);
+	background-image: -o-linear-gradient(top, #fefefe, #e8e8e8);
+	background-image: linear-gradient(to bottom, #fefefe, #e8e8e8);
+	border: 1px solid #c2c2c2;
+	border-radius: 5px;
+	padding: 0.5em 1em;
+}
+
+button:hover,
+.button:hover {
+	background-color: #fafafa;
+	background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#d8d8d8));
+	background-image: -webkit-linear-gradient(top, #fafafa, #d8d8d8);
+	background-image: -moz-linear-gradient(top, #fafafa, #d8d8d8);
+	background-image: -ms-linear-gradient(top, #fafafa, #d8d8d8);
+	background-image: -o-linear-gradient(top, #fafafa, #d8d8d8);
+	background-image: linear-gradient(to bottom, #fafafa, #d8d8d8);
+	border: 1px solid #888;
+	box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
+}
+
+button:active,
+.button:active {
+	background-color: #fafafa;
+	background-image: -webkit-gradient(linear, left top, left bottom, from(#d8d8d8), to(#fafafa));
+	background-image: -webkit-linear-gradient(top, #d8d8d8, #fafafa);
+	background-image: -moz-linear-gradient(top, #d8d8d8, #fafafa);
+	background-image: -ms-linear-gradient(to bottom, #d8d8d8, #fafafa);
+	background-image: -o-linear-gradient(top, #d8d8d8, #fafafa);
+	background-image: linear-gradient(to bottom, #d8d8d8, #fafafa);
+	box-shadow: inset 0 1px rgba( 0, 0, 0, 0.4 );
+	border: 1px solid #aaa;
 }
diff --git a/textarea.html b/textarea.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<textarea>