New structure for filters

sass/style.scss

@@ -10,8 +10,8 @@ body {
 }
 
 main.songs {
-	display: grid;
-	grid-template-columns: 1fr 3fr;
+	display: flex;
+	flex-direction: column;
 	gap: 1em;
 	max-width: 50em;
 	margin: 0 auto;
@@ -22,7 +22,23 @@ main.songs {
 	}
 
 	.filters {
-		// ...
+		// `display: grid` is set via JS to prevent displaying the inputs
+		// on browsers wih JavaScript disabled.
+		display: none;
+		grid-template-columns: 2fr 1fr 1fr;
+		gap: 1em;
+		margin: 1em 0;
+
+		&>* {
+			border: 1px solid #aaa;
+			border-radius: .5em;
+			padding: .5em 1em;
+			font-size: 1em;
+		}
+
+		&>.button {
+			text-align: center;
+		}
 	}
 
 	.song-list {

templates/index.html

@@ -12,7 +12,9 @@
 {% block content %}
 	<main class="songs">
 		<section class="filters">
-			FILTERS
+			<input type="text" placeholder="Hledat">
+			<div class="button">classic</div>
+			<div class="button">mixtape</div>
 		</section>
 		<section class="song-list">
 			{% for song in section.pages %}