Update demo page

Author: vdw

index.html

@@ -53,9 +53,9 @@ <h2>A jQuery plugin for tabs</h2>
 		<!-- <h3>About</h3> -->
 		<section id="body" role="main">
 			<article>
-				<h2>...is yet another jQuery plugin for tabs and more...</h2>
-				<h2>...is compatible with IE7+, Chrome, Firefox, Safari and jQuery 1.8.1, 1.9.1, 1.10.1, 2.0.2.</h2>
-				<h2>...supports <a class="anchorLink" href="#custom_event">custom events</a>, <a class="anchorLink" href="#rotation">rotation</a> and <a class="anchorLink" href="#animation">animation</a></h2>
+				<h2>
+					Tabslet is yet another jQuery plugin for tabs, is compatible with IE7+, Chrome, Firefox, Safari and jQuery 1.8.1, 1.9.1, 1.10.1, 2.0.2. and
+					supports <a class="anchorLink" href="#custom_event">custom events</a>, <a class="anchorLink" href="#rotation">rotation</a> and <a class="anchorLink" href="#animation">animation</a></h2>
 			</article>
 		</section>
 		<h3>Demonstration</h3>
@@ -234,4 +234,4 @@ <h2>The attribute "data-toggle"</h2>
 	<!-- JS ends -->
 
 </body>
-</html>
+</html>

javascripts/vendor/jquery.anchor.js

@@ -30,7 +30,7 @@ jQuery.fn.anchorAnimate = function(settings) {
 			var elementClick = $(caller).attr("href")
 
 			var destination = $(elementClick).offset().top;
-			$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination - 225}, settings.speed, function() {
+			$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination - 128}, settings.speed, function() {
 				window.location.hash = elementClick
 			});
 		  	return false;

stylesheets/styles.css

@@ -64,15 +64,16 @@ HEADER {
 HEADER H1 {
 	color: inherit;
 	font-size: 48px;
-	line-height: 48px;
+	letter-spacing: 4px;
+	line-height: 78px;
 	padding-top: 120px;
 	text-transform: uppercase;
 }
 
 HEADER H2 {
 	color: inherit;
 	font-size: 18px;
-	letter-spacing: 2px;
+	letter-spacing: 5px;
 	text-transform: uppercase;
 }
 
@@ -99,14 +100,15 @@ HEADER H2 {
 }
 
 SECTION#body {
-	background: #F17C71;
+	background: #a0cac0;
 }
 
 SECTION#body H2 {
 	color: white;
 	font-size: 18px;
-	font-weight: 100;
-	line-height: 25px;
+	font-weight: 300;
+	letter-spacing: 1px;
+	line-height: 34px;
 }
 
 SECTION {
@@ -122,7 +124,7 @@ SECTION {
 
 ARTICLE {
 	margin: 0 auto;
-	padding: 20px 0;
+	padding: 30px 0 20px;
 	max-width: 940px;
 }
 
@@ -185,17 +187,17 @@ FOOTER {
 }
 
 .tabs LI:hover {
-	background: #F17C71;
-	border-bottom: 4px solid #E95855;
+	background: #a0cac0;
+	border-bottom: 4px solid #68a697;
 }
 
 .tabs LI:hover A {
 	color: white;
 }
 
 .active {
-	background: #F17C71 !important;
-	border-bottom: 4px solid #E95855 !important;
+	background: #a0cac0 !important;
+	border-bottom: 4px solid #68a697 !important;
 }
 
 .active A {
@@ -209,8 +211,9 @@ FOOTER {
 	display: block;
 	float: left;
 	font-size: 14px;
+	letter-spacing: 2px;
 	margin-top: 20px;
-	margin-right: 22px;
+	margin-right: 26px;
 	padding: 15px 20px;
 	text-align: center;
 	text-transform: uppercase;
@@ -232,12 +235,21 @@ FOOTER {
 	display: block;
 	float: left;
 	font-size: 14px;
-	font-weight: 500;
+	font-weight: 300;
+	letter-spacing: 1px;
 	line-height: 48px;
 	margin-top: 20px;
 	text-decoration: none;
 }
 
 .link:hover {
 	text-decoration: underline;
+}
+
+.anchorLink {
+	border-bottom: 1px dashed white;
+}
+
+.anchorLink:hover {
+	text-decoration: none;
 }