Delicious new template

assets/base.css

@@ -4,205 +4,386 @@ body {
 	padding: 0;
 }
 
+button {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	font-size: 100%;
+	vertical-align: baseline;
+	font-family: inherit;
+	color: inherit;
+	-webkit-appearance: none;
+	/*-moz-appearance: none;*/
+	-ms-appearance: none;
+	-o-appearance: none;
+	appearance: none;
+}
+
 body {
-	font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
+	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
 	line-height: 1.4em;
-	background: #eeeeee;
-	color: #333333;
-	width: 520px;
+	background: #eeeeee url('bg.png');
+	color: #4d4d4d;
+	width: 550px;
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	-ms-font-smoothing: antialiased;
+	-o-font-smoothing: antialiased;
+	font-smoothing: antialiased;
 }
 
 #todoapp {
 	background: #fff;
-	padding: 20px;
-	margin-bottom: 40px;
-	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-	-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-	box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-	-webkit-border-radius: 0 0 5px 5px;
-	-moz-border-radius: 0 0 5px 5px;
-	-ms-border-radius: 0 0 5px 5px;
-	-o-border-radius: 0 0 5px 5px;
-	border-radius: 0 0 5px 5px;
+	background: rgba(255, 255, 255, 0.9);
+	margin: 130px 0 40px 0;
+	border: 1px solid #ccc;
+	position: relative;
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
+				0 25px 50px 0 rgba(0, 0, 0, 0.15);
+}
+
+#todoapp:before {
+	content: '';
+	border-left: 1px solid #f5d6d6;
+	border-right: 1px solid #f5d6d6;
+	width: 2px;
+	position: absolute;
+	top: 0;
+	left: 40px;
+	height: 100%;
 }
 
 #todoapp h1 {
-	font-size: 36px;
+	position: absolute;
+	top: -120px;
+	width: 100%;
+	font-size: 70px;
 	font-weight: bold;
 	text-align: center;
-	padding: 0 0 10px 0;
+	color: #b3b3b3;
+	color: rgba(255, 255, 255, 0.3);
+	text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
+	-webkit-text-rendering: optimizeLegibility;
+	-moz-text-rendering: optimizeLegibility;
+	-ms-text-rendering: optimizeLegibility;
+	-o-text-rendering: optimizeLegibility;
+	text-rendering: optimizeLegibility;
+}
+
+#header {
+	padding-top: 15px;
+	border-radius: inherit;
+}
+
+#todoapp header:before {
+	content: '';
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	height: 15px;
+	z-index: 2;
+	border-bottom: 1px solid #6c615c;
+	background: #8d7d77;
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
+	background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
+	border-radius: inherit;
+}
+
+#todoapp input::-webkit-input-placeholder {
+	font-style: italic;
+}
+
+#todoapp input:-moz-placeholder {
+	font-style: italic;
+	color: #a9a9a9;
 }
 
-#todoapp input[type="text"] {
-	width: 466px;
+#new-todo,
+.edit {
+	margin: 0;
+	width: 100%;
 	font-size: 24px;
 	font-family: inherit;
 	line-height: 1.4em;
 	border: 0;
 	outline: none;
+	color: inherit;
 	padding: 6px;
-	border: 1px solid #999999;
-	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-	-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-	box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+	border: 1px solid #999;
+	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	-ms-box-sizing: border-box;
+	-o-box-sizing: border-box;
+	box-sizing: border-box;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	-ms-font-smoothing: antialiased;
+	-o-font-smoothing: antialiased;
+	font-smoothing: antialiased;
 }
 
-#todoapp input::-webkit-input-placeholder {
-	font-style: italic;
+#new-todo {
+	padding: 16px 16px 16px 60px;
+	border: none;
+	background: rgba(0, 0, 0, 0.02);
+	position: relative;
+	z-index: 2;
+	box-shadow: none;
 }
 
 #main {
+	position: relative;
+	z-index: 2;
+	border-top: 1px dotted #adadad;
+}
+
+label[for='toggle-all'] {
 	display: none;
 }
 
+#toggle-all {
+	position: absolute;
+	top: -42px;
+	left: 12px;
+	text-align: center;
+	-webkit-appearance: none;
+	/*-moz-appearance: none;*/
+	-ms-appearance: none;
+	-o-appearance: none;
+	appearance: none;
+	-webkit-transform: rotate(90deg);
+	/*-moz-transform: rotate(90deg);*/
+	-ms-transform: rotate(90deg);
+	/*-o-transform: rotate(90deg);*/
+	transform: rotate(90deg);
+}
+
+#toggle-all:before {
+	content: '»';
+	font-size: 28px;
+	color: #d9d9d9;
+	padding: 0 25px 7px;
+}
+
+#toggle-all:checked:before {
+	color: #737373;
+}
+
+/* Need this ugly hack, since only
+WebKit supports styling of inputs */
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+	#toggle-all {
+		top: -52px;
+		left: -11px;
+	}
+}
+
 #todo-list {
-	margin: 10px 0;
+	margin: 0;
 	padding: 0;
 	list-style: none;
 }
 
 #todo-list li {
-	padding: 18px 20px 18px 0;
 	position: relative;
 	font-size: 24px;
-	border-bottom: 1px solid #cccccc;
+	border-bottom: 1px dotted #ccc;
 }
 
 #todo-list li:last-child {
 	border-bottom: none;
 }
 
-#todo-list li.done label {
-	color: #777777;
+#todo-list li.editing {
+	border-bottom: none;
+	padding: 0;
+}
+
+#todo-list li.editing .edit {
+	display: block;
+	width: 506px;
+	padding: 13px 17px 12px 17px;
+	margin: 0 0 0 43px;
+}
+
+#todo-list li.editing .view {
+	display: none;
+}
+
+#todo-list li .toggle {
+	text-align: center;
+	width: 35px;
+	-webkit-appearance: none;
+	/*-moz-appearance: none;*/
+	-ms-appearance: none;
+	-o-appearance: none;
+	appearance: none;
+}
+
+#todo-list li .toggle:after {
+	font-size: 18px;
+	content: '✔';
+	line-height: 40px;
+	font-size: 20px;
+	color: #d9d9d9;
+	text-shadow: 0 -1px 0 #bfbfbf;
+}
+
+#todo-list li .toggle:checked:after {
+	color: #85ada7;
+	text-shadow: 0 1px 0 #669991;
+	bottom: 1px;
+	position: relative;
+}
+
+#todo-list li label {
+	word-break: break-word;
+	margin: 20px 15px;
+	display: inline-block;
+	-webkit-transition: color 0.4s;
+	-moz-transition: color 0.4s;
+	-ms-transition: color 0.4s;
+	-o-transition: color 0.4s;
+	transition: color 0.4s;
+}
+
+#todo-list li.complete label {
+	color: #a9a9a9;
 	text-decoration: line-through;
 }
 
 #todo-list li .destroy {
 	display: none;
 	position: absolute;
-	top: 20px;
+	top: 10px;
 	right: 10px;
-	cursor: pointer;
-	width: 20px;
-	height: 20px;
-	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAABGdBTUEAALGPC/xhBQAAACdQTFRFzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMAAAA////zMzMhnu0WAAAAAt0Uk5T5u3pqtV3jFQEKAC0bVelAAAAfUlEQVQI12NYtWpFsc8R865VqxhWrZpyBgg8QcylZ8AgCsjMgTCPrWJYfgYKqhjWwJgaDDVnzpw+c2bPmTPHGWzOnNm95/TuM2cOM/AARXfvBooeZAAp270bRCIz4QoOIGtDMqwJZoUEQzvCYrhzuhhWtUKYEahOX7UK6iEA3A6NUGwCTZIAAAAASUVORK5CYII=') no-repeat center center;
+	width: 40px;
+	height: 40px;
+	font-size: 22px;
+	color: #a88a8a;
+	-webkit-transition: all 0.2s;
+	-moz-transition: all 0.2s;
+	-ms-transition: all 0.2s;
+	-o-transition: all 0.2s;
+	transition: all 0.2s;
+}
+
+#todo-list li .destroy:hover {
+	text-shadow: 0 0 1px #000,
+				 0 0 10px rgba(199, 107, 107, 0.8);
+	-webkit-transform: scale(1.3);
+	-moz-transform: scale(1.3);
+	-ms-transform: scale(1.3);
+	-o-transform: scale(1.3);
+	transform: scale(1.3);
+}
+
+#todo-list li .destroy:after {
+	content: '✖';
 }
 
 #todo-list li:hover .destroy {
 	display: block;
 }
 
-#todo-list li.editing {
-	border-bottom: none;
-	margin-top: -1px;
-	padding: 0;
+#todo-list li .edit {
+	display: none;
 }
 
 #todo-list li.editing:last-child {
 	margin-bottom: -1px;
 }
 
-#todo-list li.editing .edit {
-	display: block;
-	width: 444px;
-	padding: 13px 15px 14px 20px;
-	margin: 0;
+#footer {
+	color: #777;
+	padding: 0 15px;
+	position: absolute;
+	right: 0;
+	bottom: -31px;
+	left: 0;
+	z-index: 1;
+	text-align: center;
 }
 
-#todo-list li.editing .view {
-	display: none;
+#footer:before {
+	content: '';
+	position: absolute;
+	right: 0;
+	bottom: 31px;
+	left: 0;
+	height: 100px;
+	z-index: -1;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
+				0 6px 0 -3px rgba(255, 255, 255, 0.8),
+				0 7px 1px -3px rgba(0, 0, 0, 0.3),
+				0 42px 0 -6px rgba(255, 255, 255, 0.8),
+				0 43px 2px -6px rgba(0, 0, 0, 0.2);
 }
 
-#todo-list li .view label {
-	word-break: break-word;
+#todo-count {
+	float: left;
+	text-align: left;
 }
 
-#todo-list li .edit {
-	display: none;
+#filters {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	position: absolute;
+	right: 0;
+	left: 0;
 }
 
-#todoapp footer {
-	display: none;
-	margin: 0 -20px -20px -20px;
-	overflow: hidden;
-	color: #555555;
-	background: #f4fce8;
-	border-top: 1px solid #ededed;
-	padding: 0 20px;
-	line-height: 37px;
-	-webkit-border-radius: 0 0 5px 5px;
-	-moz-border-radius: 0 0 5px 5px;
-	-ms-border-radius: 0 0 5px 5px;
-	-o-border-radius: 0 0 5px 5px;
-	border-radius: 0 0 5px 5px;
+#filters li {
+	display: inline;
+}
+
+#filters li a {
+	color: #83756f;
+	margin: 2px;
+	text-decoration: none;
+}
+
+#filters li a.selected {
+	font-weight: bold;
 }
 
 #clear-completed {
-	display: none;
 	float: right;
 	line-height: 20px;
 	text-decoration: none;
 	background: rgba(0, 0, 0, 0.1);
-	color: #555555;
 	font-size: 11px;
-	margin-top: 8px;
-	margin-bottom: 8px;
-	padding: 0 10px 1px;
-	cursor: pointer;
-	-webkit-border-radius: 12px;
-	-moz-border-radius: 12px;
-	-ms-border-radius: 12px;
-	-o-border-radius: 12px;
-	border-radius: 12px;
-	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-	-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+	padding: 0 10px;
+	position: relative;
+	border-radius: 3px;
+	box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
 }
 
 #clear-completed:hover {
 	background: rgba(0, 0, 0, 0.15);
-	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-	-ms-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-	-o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-	box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-}
-
-#clear-completed:active {
-	position: relative;
-	top: 1px;
-}
-
-#todo-count span {
-	font-weight: bold;
-}
-
-#instructions {
-	margin: 10px auto;
-	color: #777777;
-	text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
-	text-align: center;
-}
-
-#instructions a {
-	color: #336699;
+	box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
 }
 
-#credits {
-	margin: 30px auto;
-	color: #999;
-	text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
+#info {
+	margin: 65px auto 0;
+	color: #a6a6a6;
+	font-size: 12px;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
 	text-align: center;
 }
 
-#credits a {
-	color: #888;
+#info a {
+	color: inherit;
 }
\ No newline at end of file

template/index.html

@@ -2,51 +2,65 @@
 <html lang="en">
 <head>
 	<meta charset="utf-8">
-	<title>Template - TodoMVC</title>
+	<title>Template • TodoMVC</title>
 	<link rel="stylesheet" href="../assets/base.css">
+	<!-- CSS overrides - remove if you don't need it -->
 	<link rel="stylesheet" href="css/app.css">
 </head>
 <body>
-	<div id="todoapp">
-		<header>
-			<h1>Todos</h1>
-			<input id="new-todo" type="text" placeholder="What needs to be done?">
+	<section id="todoapp">
+		<header id="header">
+			<h1>todos</h1>
+			<input id="new-todo" placeholder="What needs to be done?" autofocus>
 		</header>
-		<!-- this section is hidden by default and you be shown when there are todos and hidden when not -->
+		<!-- this section should hidden by default and shown when there are todos -->
 		<section id="main">
 			<input id="toggle-all" type="checkbox">
 			<label for="toggle-all">Mark all as complete</label>
 			<ul id="todo-list">
-				<li class="done">
+				<li class="complete">
 					<div class="view">
 						<input class="toggle" type="checkbox" checked>
 						<label>Create a TodoMVC template</label>
-						<a class="destroy"></a>
+						<button class="destroy"></button>
 					</div>
-					<input class="edit" type="text" value="Create a TodoMVC template">
+					<input class="edit" value="Create a TodoMVC template">
 				</li>
 				<li>
 					<div class="view">
 						<input class="toggle" type="checkbox">
 						<label>Rule the web</label>
-						<a class="destroy"></a>
+						<button class="destroy"></button>
 					</div>
-					<input class="edit" type="text" value="Rule the web">
+					<input class="edit" value="Rule the web">
 				</li>
 			</ul>
 		</section>
-		<!-- this footer needs to be shown with JS when there are todos and hidden when not -->
-		<footer>
-			<a id="clear-completed">Clear completed</a>
-			<div id="todo-count"></div>
+		<!-- this footer should hidden by default and shown when there are todos -->
+		<footer id="footer">
+			<span id="todo-count"><strong>1</strong> item left</span>
+			<!-- remove this if you don't implement routing -->
+			<ul id="filters">
+				<li>
+					<a class="selected" href="#/">All</a>
+				</li>
+				<li>
+					<a href="#/active">Active</a>
+				</li>
+				<li>
+					<a href="#/completed">Completed</a>
+				</li>
+			</ul>
+			<button id="clear-completed">Clear completed (1)</button>
+		</footer>
+	</section>
+	<footer id="info">
+		<p>Double-click to edit a todo</p>
+		<!-- delete this ↓ -->
+		<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
+		<!-- change this out with your name and url ↓ -->
+		<p>Created by <a href="http://addyosmani.github.com/todomvc/">you</a></p>
 	</footer>
-	</div>
-	<div id="instructions">
-		Double-click to edit a todo.
-	</div>
-	<div id="credits">
-		Created by <a href="http://addyosmani.github.com/todomvc/">you</a>.
-	</div>
 	<!-- scripts here -->
 	<script src="js/app.js"></script>
 </body>