improved look and feel

yorek · yorek · commit b14c84466a75 · 2021-09-16T10:08:05.000-07:00
diff --git a/client/client-graphql.html b/client/client-graphql.html
@@ -9,13 +9,24 @@
 		[v-cloak] {
 			display: none;
 		}
+		.todoapp h2 {	
+			position: absolute;		
+			top: -40px;
+			left: 80px;
+			width: 100%;
+			font-size: 20px;
+			font-weight: bold;
+			text-align: center;
+			color: rgba(175, 47, 47, 0.15)
+		}
 	</style>
 </head>
 
 <body>
 	<section class="todoapp">
 		<header class="header">
-			<h1>GraphQL todos</h1>
+			<h1>todos</h1>
+			<h2>GraphQL style</h2>
 			<input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" v-model="newTodo"
 				@keyup.enter="addTodo" />
 		</header>
diff --git a/client/client-rest.html b/client/client-rest.html
@@ -9,13 +9,24 @@
 		[v-cloak] {
 			display: none;
 		}
+		.todoapp h2 {	
+			position: absolute;		
+			top: -40px;
+			left: 80px;
+			width: 100%;
+			font-size: 20px;
+			font-weight: bold;
+			text-align: center;
+			color: rgba(175, 47, 47, 0.15)
+		}
 	</style>
 </head>
 
 <body>
 	<section class="todoapp">
 		<header class="header">
-			<h1>REST todos</h1>
+			<h1>todos</h1>
+			<h2>REST style</h2>
 			<input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" v-model="newTodo"
 				@keyup.enter="addTodo" />
 		</header>
diff --git a/client/index.html b/client/index.html
@@ -4,18 +4,33 @@
 <head>
 	<title>TodoMVC</title>
 	<script src="https://unpkg.com/vue"></script>
-	<link rel="stylesheet" type="text/css" href="https://unpkg.com/todomvc-app-css@2.2.0/index.css" />
+	<link rel="stylesheet" type="text/css" href="https://unpkg.com/todomvc-app-css@2.2.0/index.css" />	
+	<style>
+		li.todo {
+			text-align: center
+		}
+		li.todo label {
+			padding-left:15px
+		}
+		li.todo label a {
+			text-decoration: none;
+			color: inherit;
+		}
+		li.todo label a:hover {
+			text-decoration: underline;
+		}			
+	</style>
 </head>
 
 <body>
 	<section class="todoapp">
 		<header class="header">
-			<h1>todos</h1>
+			<h1>TodoMVC</h1>
 		</header>
 		<section class="main">
-			<ul>
-				<li><a href="client-rest.html">Go to the REST Sample</a></li>
-				<li><a href="client-graphql.html">Go to the GraphQL Sample</a></li>
+			<ul class="todo-list">
+				<li class="todo"><label><a href="client-rest.html">Go to the REST Sample</a></label></li>
+				<li class="todo"><label><a href="client-graphql.html">Go to the GraphQL Sample</a></label></li>
 			</ul>
 		</section>
 	</section>
