responsive css: multi-column list on wide screens

3 years ago · c3287d9a19
parent 1cf5284fcd
commit c3287d9a19
5 changed files with 12 additions and 4 deletions
--- a/2
+++ b/2
@ -33,7 +33,7 @@ init:
 	printf '<a href="$$URL">$$NAME</a>' > templates/tag_entry.html
 	printf ', ' > templates/tag_separator.html
 	printf '</p>' > templates/tag_list_footer.html
-	printf '<h2>Articles</h2><ul>' > templates/article_list_header.html
+	printf '<h2>Articles</h2><ul id=artlist>' > templates/article_list_header.html
 	printf '<li><a href="$$URL">$$DATE $$TITLE</a></li>' > templates/article_entry.html
 	printf '' > templates/article_separator.html
 	printf '</ul>' > templates/article_list_footer.html
--- a/data/style.css
+++ b/data/style.css
@ -53,3 +53,11 @@ li img {
 		color: black ;
 	}
 }
+
+@media (min-width: 55em) {
+	#artlist { column-count: 2 ;}
+}
+
+@media (min-width: 100em) {
+	#artlist { column-count: 3 ;}
+}
--- a/src/rice.md
+++ b/src/rice.md
@ -1,7 +1,7 @@
 # Rice

 Rice is easy to make in any pot.
-The simple use of different spices can change
+The simple use of different spices can change its use or what it accents.

 ## Ingredients

--- a/templates/article_list_header.html
+++ b/templates/article_list_header.html
@ -1,2 +1,2 @@
 <h2>Recipes</h2>
-<ul>
+<ul id=artlist>
--- a/templates/header.html
+++ b/templates/header.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang=en>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="./style.css">