Sekce s filtry

templates/common.css

@@ -77,6 +77,37 @@ section.search input {
 	font-family: "roboto-light";
 }
 
+section.filter ul {
+	display: grid;
+	grid-template-columns: repeat(8, 1fr);
+	grid-row-gap: 1em;
+	grid-column-gap: 1em;
+	justify-content: space-between;
+
+	list-style-type: none;
+	padding: 0;
+	margin: 0 -1em 5em -1em;
+}
+section.filter ul li {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+	font-size: .9em;
+
+	padding: .8em;
+	border: 1px solid #808080;
+	border-radius: .5em;
+	color: #6F6F6F;
+	font-weight: bold;
+}
+section.filter ul li:hover {
+	border: 1px solid rgba(0,0,0,0);
+	box-shadow: 3px 3px 10px #00000026;
+	color: #dd4733;
+	cursor: pointer;
+}
+
 footer {
 	text-align: center;
 	padding: 2em;

templates/main.html

@@ -29,7 +29,24 @@
 			<input type="text" placeholder="Vyhledat téma &hellip;">
 		</section>
 		<section class="filter">
-			filter
+			<ul>
+				<li>Příroda</li>
+				<li>Historie</li>
+				<li>Jazyky</li>
+				<li>Hudba</li>
+				<li>Sport</li>
+				<li>Něco</li>
+				<li>Umění</li>
+				<li>Informatika</li>
+				<li>Literatura</li>
+				<li>Digitální marketing</li>
+				<li>Grafika</li>
+				<li>Právo</li>
+				<li>Politologie</li>
+				<li>Memes</li>
+				<li>Další</li>
+				<li>Další</li>
+			</ul>
 		</section>
 		<section class="list">
 			list