From 9da3c406dd3680a96394e0408025711638c46d6c Mon Sep 17 00:00:00 2001
From: Emil Miler <em@0x45.cz>
Date: Wed, 7 Feb 2024 11:09:04 +0100
Subject: [PATCH] New structure for filters

---
 sass/style.scss      | 22 +++++++++++++++++++---
 templates/index.html |  4 +++-
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/sass/style.scss b/sass/style.scss
index 6e3d0eb..1df0e7b 100644
--- a/sass/style.scss
+++ b/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 {
diff --git a/templates/index.html b/templates/index.html
index d2a6fe2..c82d933 100644
--- a/templates/index.html
+++ b/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 %}