Site: Add checkmark list-style to whats new, Twitter and G+ buttons, …

…and Twitter and Open Graph meta tags
amdgigabyte · Jul 25, 2012 · c40460b · c40460b
1 parent 77d4871
commit c40460b
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -3,8 +3,12 @@
 <head>
 	<meta charset="utf-8">
 	<title>TodoMVC</title>
-	<meta name="description" content="Helping you select a MV* framework">
+        <meta name="description" content="Helping you select an MV* framework - Todo apps for Backbone.js, Ember.js, AngularJS, Spine and many more">
 	<meta name="viewport" content="width=device-width,initial-scale=1">
+        <meta name="twitter:card" content="summary">
+        <meta property="og:url" content="http://todomvc.com">
+        <meta property="og:title" content="TodoMVC">
+        <meta property="og:description" content="Helping you select an MV* framework - Todo apps for Backbone.js, Ember.js, AngularJS, Spine and many more">
 	<!--[if lt IE 9]>
 	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 	<![endif]-->
@@ -34,6 +38,8 @@ <h2>Introduction</h2>
 				<p>Developers these days are spoiled with choice when it comes to selecting an <strong>MV* framework</strong> for structuring and organizing their JavaScript web apps.</p>
 				<p>Backbone, Ember, AngularJS, Spine... the list of new and stable solutions continues to grow, but just how do you decide on which to use in a sea of so many options?</p>
 				<p>To help solve this problem, we created <a href="https://github.com/addyosmani/todomvc">TodoMVC</a> - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.</p>
+                                <a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="http://todomvc.com" data-text="TodoMVC - Helping you select an MV* framework - Todo apps for Backbone.js, Ember.js, AngularJS, Spine and many more"></a>
+                                <div class="g-plusone" data-size="medium" data-annotation="none" data-href="http://todomvc.com"></div>
 			</div>
 			<div class="span8">
 				<h2>Our Stable Apps</h2>
@@ -99,12 +105,11 @@ <h2>Compare these to a non-framework implementation</h2>
 		</div>
 		<hr>
 		<div class="row">
-			<h2 style="text-align:center;font-weight:300">Scroll down for 30 more framework apps in Labs</h2>
+                        <h2 style="text-align:center;font-weight:300">Scroll down for 30+ more framework apps in Labs</h2>
 		</div>
 		<hr>
 		<div class="row">
 			<div class="span6">
-				<h2>Thoughts on the project</h2>
 				<blockquote class="quote speech-bubble">
 					<p></p>
 					<footer>
@@ -119,18 +124,18 @@ <h2>Thoughts on the project</h2>
 		</div>
 		<hr>
 		<div class="row">
-			<div class="span3">
+                        <div class="span4">
 				<h2>What's new in 1.0</h2>
-				<ul>
+                                <ul class="whats-new">
 					<li>All main apps have been completely rewritten for consistency</li>
 					<li>Routing has been added to many of these</li>
-					<li>We now have 30 apps being worked on in Labs</li>
+                                        <li>We now have 30+ apps being worked on in Labs</li>
 					<li>We're using a kick-ass new template</li>
 					<li>Framework authors and contributors have been consulted to ensure our apps adhere to best practices</li>
 					<li>We're helping AMD users by adding AMD versions of many apps</li>
 				</ul>
 			</div>
-			<div class="span5">
+                        <div class="span4">
 				<h2>Selecting a Framework</h2>
 				<p>Once you've downloaded the latest release and played around with the apps, you'll want to decide on a specific framework to try out.</p>
 				<p>Study the syntax required for defining models, views and (where applicable) controllers and classes in the frameworks you're interested in and try your hand at editing the code to see how it feels using it first-hand.</p>
@@ -142,7 +147,7 @@ <h2>Getting Involved</h2>
 				<p>If so, feel free to fork the repo, read our <a href="https://github.com/addyosmani/todomvc/wiki">contribution guidelines</a>, and submit a pull request &mdash; we'll be happy to review it for inclusion.</p>
 				<p>Make sure you use the <a href="https://github.com/addyosmani/todomvc/tree/master/template">template</a> as a starting point and read the <a href="https://github.com/addyosmani/todomvc/wiki/App-Specification">app specification</a>.</p>
 				<p>
-					<a class="zocial small gray" href="https://github.com/addyosmani/todomvc/pull/new/master">Submit Pull Request &raquo;</a>
+                                        <a class="zocial small gray" href="https://github.com/addyosmani/todomvc/wiki">Submit Pull Request &raquo;</a>
 				</p>
 			</div>
 		</div>
@@ -256,6 +261,7 @@ <h2>Labs</h2>
 	<script src="site/js/bootstrap.min.js"></script>
 	<script src="site/js/main.js"></script>
 	<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+        <script>(function(){var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();</script>
 	<script>var _gaq=[['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));</script>
 </body>
 </html>
diff --git a/site/css/main.css b/site/css/main.css
@@ -106,6 +106,21 @@ header nav a:first-child {
 	margin-bottom: 20px;
 }
 
+.whats-new {
+        list-style: none;
+}
+
+.whats-new li {
+        position: relative;
+        margin: 15px 0;
+}
+
+.whats-new li:before {
+        content: '✔';
+        position: absolute;
+        left: -20px;
+}
+
 .applist {
 	list-style: none;
 	margin: 0;
@@ -300,6 +315,7 @@ a.zocial {
 	background-image:         linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .05) 49%, rgba(0, 0, 0, .05) 51%, rgba(0, 0, 0, .1));
 }
 
+
 @media (max-width: 480px) {
 	body .applist {
 		-webkit-columns: auto !important;
@@ -314,8 +330,7 @@ a.zocial {
 	}
 }
 
-@media (min-width: 768px) and (max-width: 980px) {
-}
+@media (min-width: 768px) and (max-width: 980px) {}
 
 @media (max-width: 768px) {
 	h2 {
@@ -360,5 +375,4 @@ a.zocial {
 	}
 }
 
-@media (max-width: 1200px) {
-}
+@media (max-width: 1200px) {}