From c3287d9a19558f3e8146cee78fb0dda4b28aecaa Mon Sep 17 00:00:00 2001
From: Luke Smith <luke@lukesmith.xyz>
Date: Mon, 15 Mar 2021 08:57:49 -0400
Subject: responsive css: multi-column list on wide screens

---
 Makefile                           | 2 +-
 data/style.css                     | 8 ++++++++
 src/rice.md                        | 2 +-
 templates/article_list_header.html | 2 +-
 templates/header.html              | 2 +-
 5 files changed, 12 insertions(+), 4 deletions(-)
diff --git a/Makefile b/Makefile
index 13d363e61..8a358c19c 100644
--- a/Makefile
+++ b/Makefile
@@ -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
diff --git a/data/style.css b/data/style.css
index 2e6aa32ae..a606dd599 100644
--- 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 ;}
+}
diff --git a/src/rice.md b/src/rice.md
index b913148a7..3a8b7fc53 100644
--- 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
 
diff --git a/templates/article_list_header.html b/templates/article_list_header.html
index 54ba16f74..e9a20ee44 100644
--- a/templates/article_list_header.html
+++ b/templates/article_list_header.html
@@ -1,2 +1,2 @@
 <h2>Recipes</h2>
-<ul>
+<ul id=artlist>
diff --git a/templates/header.html b/templates/header.html
index 7756d4f54..0607af4b9 100644
--- 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">
-- 
cgit v1.2.3

