From 04768d5433f3fdade45b18dacf1159177f2f8fa8 Mon Sep 17 00:00:00 2001
From: Marcin Chrzanowski <m@m-chrzan.xyz>
Date: Sun, 12 Sep 2021 19:57:37 +0200
Subject: Modify list columns with screen width

---
 src/index.html.erb |  2 +-
 src/style.css      | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/index.html.erb b/src/index.html.erb
index 5447ce6..3748018 100644
--- a/src/index.html.erb
+++ b/src/index.html.erb
@@ -1,6 +1,6 @@
 Śpiewnik polskiej muzyki tradycyjnej.
 
-<ul>
+<ul id='songs'>
 <%- songs.keys.sort.each do |song_id| -%>
   <li>
     <a href='<%= path_to (song_html song_id) %>'><%= songs[song_id].title %></a>
diff --git a/src/style.css b/src/style.css
index f6ec3cc..9cde21f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -15,9 +15,20 @@ a:hover {
     color: #55f;
 }
 
-ul {
+#songs {
     list-style-type: '';
-    column-count: 3;
+}
+
+@media (min-width: 55em) {
+  #songs {
+    column-count: 2 ;
+  }
+}
+
+@media (min-width: 100em) {
+  #songs {
+    column-count: 3 ;
+  }
 }
 
 li {
-- 
cgit v1.2.3