Modify list columns with screen width

2 files changed, 14 insertions, 3 deletions

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 {