test css moche

static/style.css

@@ -0,0 +1,114 @@
+/* Include the padding and border in an element's total width and height */
+* {
+  box-sizing: border-box;
+}
+
+/* Remove margins and padding from the list */
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+/* Style the list items */
+ul li {
+  cursor: pointer;
+  position: relative;
+  padding: 12px 8px 12px 40px;
+  background: #eee;
+  font-size: 18px;
+  transition: 0.2s;
+
+  /* make the list items unselectable */
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* Set all odd list items to a different color (zebra-stripes) */
+ul li:nth-child(odd) {
+  background: #f9f9f9;
+}
+
+/* Darker background-color on hover */
+ul li:hover {
+  background: #ddd;
+}
+
+/* When clicked on, add a background color and strike out text */
+ul li:checked {
+  background: #888;
+  color: #fff;
+  text-decoration: line-through;
+}
+
+/* Add a "checked" mark when clicked on */
+ul li:checked::before {
+  content: '';
+  position: absolute;
+  border-color: #fff;
+  border-style: solid;
+  border-width: 0 2px 2px 0;
+  top: 10px;
+  left: 16px;
+  transform: rotate(45deg);
+  height: 15px;
+  width: 7px;
+}
+
+/* Style the close button */
+.close {
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 12px 16px 12px 16px;
+}
+
+.close:hover {
+  background-color: #f44336;
+  color: white;
+}
+
+/* Style the header */
+.header {
+  background-color: #f44336;
+  padding: 30px 40px;
+  color: white;
+  text-align: center;
+}
+
+/* Clear floats after the header */
+.header:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+/* Style the input */
+input {
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  width: 75%;
+  padding: 10px;
+  float: left;
+  font-size: 16px;
+}
+
+/* Style the "Add" button */
+.addBtn {
+  padding: 10px;
+  width: 25%;
+  background: #d9d9d9;
+  color: #555;
+  float: left;
+  text-align: center;
+  font-size: 16px;
+  cursor: pointer;
+  transition: 0.3s;
+  border-radius: 0;
+}
+
+.addBtn:hover {
+  background-color: #bbb;
+}

templates/base.html

@@ -5,7 +5,7 @@
 		<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
 		<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
 		<link rel="manifest" href="/static/site.webmanifest">
-		{# <link rel="stylesheet" href="style.css" /> #}
+		<link rel="stylesheet" href="/static/style.css" />
 		{% block head %}
 		<title>Liste de courses</title>
 		{# <title>{% block title %}{% endblock %} - My Webpage</title> #}

templates/liste.html

@@ -20,23 +20,30 @@
 	</script>
 {% endblock %}
 {% block content %}
-	<ul id="liste">
+	<div class="header">
+		<form method="post">
+			<input type="text" name="new_value" autofocus/>
+			<input type="submit" value="Add" />
+		</form>
+	</div>
+	<ul>
 	{% for item in liste.items %}
 		<li name="{{ item.id }}">
 			<input	onclick="toggle(this);"
 					type="checkbox"
 					{% if item.checked %}
 						checked="checked"
 					{% endif %}
-			/>{{ item.text }}
+	  				id="checkbox-{{ item.id }}"
+			/>
+			<label for="checkbox-{{ item.id }}">
+				{{ item.text }}
+			</label>
 			<a href="#" onclick="remove(this); return false">
-				<img src="static/recycle_bin.png"/>
+				{#<img src="static/recycle_bin.png"/>#}
+				<span class="closed">&#x00D7;</span>
 			</a>
 		</li>
 	{% endfor %}
 	</ul>
-	<form method="post">
-		<input type="text" name="new_value" autofocus/>
-		<input type="submit" value="Add" />
-	</form>
 {% endblock %}