css hell

static/style.css

@@ -4,7 +4,7 @@ body {
 	font-family: 'Open Sans', sans-serif;
 	color: #333333;
 	width: 90%;
-	max-width: 25em;
+	max-width: 20em;
 	margin: auto;
 	padding: 5px;
 }
@@ -17,4 +17,35 @@ ul {
 	list-style-type: none;
 	margin: 0;
 	padding: 0;
+}
+
+li {
+	margin: 6px 0;
+}
+
+form {
+	display: flex;
+	gap: 6px;
+}
+
+button {
+	font: inherit;
+	color: inherit;
+	height: 1lh;
+	width: 1lh;
+	flex-shrink: 0;
+}
+
+button > span {
+	position: relative;
+	top: -.15lh;
+}
+
+input[type=text] {
+	flex-grow: 1;
+	font: inherit;
+	color: inherit;
+	padding: 0;
+	border: 0;
+	border-bottom: solid black 1px;
 }

templates/index.html

@@ -7,6 +7,8 @@
 
 		<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
 		<link rel="shortcut icon" type="image/ico" href="{{ url_for('static', filename='icon.ico') }}">
+
+		<script>0</script>
 	</head>
 	<body>
 		<h1>
@@ -16,7 +18,7 @@
 		{%- for item in list %}
 			<li>
 				<form action="{{ url_for('remove') }}" method="POST">
-					<input type="submit" value="-" class="button">
+					<button><span>-</span></button>
 					<label>{{ item }}</label>
 					<input type="hidden" name="item" value="{{ item }}">
 				</form>
@@ -24,7 +26,7 @@
 		{%- endfor %}
 		</ul>
 		<form action="{{ url_for('add') }}" method="POST">
-			<input type="submit" value="+" class="button">
+			<button><span>+</span></button>
             <input type="text" name="item" autocomplete="off" autofocus>
         </form>
 	</body>