Update to new structure

README.md

@@ -1,22 +1,19 @@
-Codrops Template
-=========
+## How to use this template:
 
-*How to use this template:*
-
 - Change the HTML as you wish, the only thing needed is the "codrops-top" division
 - The general styles for the demo page are in demo.css
 - The styles for the component go into component.css
 - If there are more demos, call the files index.html, index2.html, index3.html etc. and link to them from the "codrops-demos" nav
-- Modernizr is used for HTML5Shiv. If you need anything else just replace it with your [custom build](http://modernizr.com/download/)
 - Add JS files to the js folder
 - The README.md can be used to add licensing information of resources used
 - For writing the tutorial, take a look at some guidelines in article.html
-- Delete this 'how to' in the final version and leave the following lines:
+- Delete this 'how to' in the final version and leave the following lines (we'll fill it):
 
 
 The Title
 =========
 
+*description*
 
 [Article on Codrops]()
 
@@ -27,4 +24,6 @@ Integrate or build upon it for free in your personal or commercial projects. Don
 Read more here: [License](http://tympanus.net/codrops/licensing/)
 
 
-[© Codrops 2013](http://www.codrops.com)
+[© Codrops 2014](http://www.codrops.com)
+
+

css/demo.css

@@ -1,4 +1,4 @@
-@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
+@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
 @font-face {
 	font-weight: normal;
 	font-style: normal;
@@ -11,35 +11,42 @@
 }
 
 *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
+.clearfix:before, .clearfix:after { content: ''; display: table; }
+.clearfix:after { clear: both; }
 
 body {
 	background: #fff;
-	color: #333;
+	color: #555;
 	font-weight: 400;
 	font-size: 1em;
 	font-family: 'Lato', Arial, sans-serif;
 }
 
 a {
-	color: #888;
+	color: #333;
 	text-decoration: none;
 	outline: none;
 }
 
 a:hover, a:focus {
-	color: #333;
+	color: #555;
+}
+
+section {
+	padding: 1em;
+	text-align: center;
 }
 
+/* Header */
 .codrops-header {
 	margin: 0 auto;
 	padding: 2em;
-	background: rgba(0,0,0,0.01);
 	text-align: center;
 }
 
 .codrops-header h1 {
 	margin: 0;
-	font-weight: 400;
+	font-weight: 300;
 	font-size: 2.5em;
 	line-height: 1.3;
 }
@@ -58,6 +65,7 @@ a:hover, a:focus {
 	font-weight: 700;
 	font-size: 0.69em;
 	line-height: 2.2;
+	background: #fff;
 }
 
 .codrops-top a {
@@ -120,9 +128,34 @@ a:hover, a:focus {
 	border-color: #333;
 }
 
-.related {
+/* Related demos */
+.related > a {
+	border: 1px solid #333;
+	display: inline-block;
 	text-align: center;
-	font-size: 1.5em;
+	margin: 20px 10px;
+	padding: 25px;
+}
+
+.related a:hover {
+	border-color: #333;
+}
+
+.related a img {
+	max-width: 100%;
+	opacity: 0.8;
+}
+
+.related a:hover img,
+.related a:active img {
+	opacity: 1;
+}
+
+.related a h3 {
+	margin: 0;
+	padding: 0.5em 0 0.3em;
+	max-width: 300px;
+	text-align: left;
 }
 
 @media screen and (max-width: 25em) {

index.html

@@ -34,11 +34,17 @@ <h1>The Title <span>A short description</span></h1>
 			<div class="component">
 				<!-- the component -->
 			</div>
+			<!-- Related demos -->
 			<section class="related">
-				<p>If you enjoyed these effects you might also like:</p>
-				<div><a href=""><h4>Title</h4></a></div>
-				<div><a href=""><h4>Title</h4></a></div>
-				<div><a href=""><h4>Title</h4></a></div>
+				<p>If you enjoyed this demo you might also like:</p>
+				<a href="">
+					<img src="" />
+					<h3>Title</h3>
+				</a>
+				<a href="">
+					<img src="" />
+					<h3>Title</h3>
+				</a>
 			</section>
 		</div><!-- /container -->
 	</body>