responsive css: multi-column list on wide screens

This commit is contained in:
Luke Smith 2021-03-15 08:57:49 -04:00
parent 1cf5284fcd
commit c3287d9a19
No known key found for this signature in database
GPG Key ID: 4C50B54A911F6252
5 changed files with 12 additions and 4 deletions

View File

@ -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

View File

@ -53,3 +53,11 @@ li img {
color: black ;
}
}
@media (min-width: 55em) {
#artlist { column-count: 2 ;}
}
@media (min-width: 100em) {
#artlist { column-count: 3 ;}
}

View File

@ -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

View File

@ -1,2 +1,2 @@
<h2>Recipes</h2>
<ul>
<ul id=artlist>

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang=en>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./style.css">