From 35e6337d2005a69db2a6f4eb2c8f8161aec86872 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20M=C3=BCller?= <mail@mueller-martin.net>
Date: Tue, 18 Jul 2017 22:12:00 +0200
Subject: [PATCH] Style tag list for button view

---
 static/main.css      | 12 ++++++++++++
 templates/index.html |  4 ++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/static/main.css b/static/main.css
index 5266282..4f61fcb 100644
--- a/static/main.css
+++ b/static/main.css
@@ -44,13 +44,25 @@ input {
 }
 
 .tags li {
+	display: inline-block;
+	list-style-type: none;
+}
+
+.tags li a {
 	background-color: #333;
+	border: 1px solid #999;
 	border-radius: 2px;
+	color: #999;
 	font-size: 0.9em;
 	margin: 5px;
 	padding: 2px 5px 2px 5px;
 }
 
+.tags li a:hover {
+	background-color: #eee;
+	color: #333;
+}
+
 .youtube label {
 	vertical-align: middle;
 }
diff --git a/templates/index.html b/templates/index.html
index affb5d2..d418a40 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,9 +2,9 @@
 {% block content %}
 			<section id="sounds">
 				<div><input type="text" id="search" /><span class="reset">⨯</span></div>
-				<ul>
+				<ul class="tags">
 				{% for tag in tags %}
-					<li>{{ tag.name }}</li>
+					<li><a href="#">{{ tag.name }}</a></li>
 				{% endfor %}
 				</ul>
 				{% for sound in sounds %}