From 0327fdb8d86791709bb6bb408b04d7889ed1d1d5 Mon Sep 17 00:00:00 2001
From: Claude Paroz <claude@2xlibre.net>
Date: Sat, 3 Jul 2021 21:09:00 +0200
Subject: [PATCH] Style results as cards

---
 templates/index.html | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 272a058..cea450f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,6 +6,7 @@
 {% block extrahead %}
 <style>
 ul { list-style-type: none; padding: 0; }
+a { text-decoration: none; }
 input#id_text { padding: 10px 0; }
 form#search-form p, form#search-form ul {
   display: inline-block;
@@ -13,9 +14,20 @@ form#search-form p, form#search-form ul {
   vertical-align: top;
 }
 
-ul.results li { margin: 0; padding: 2px; }
-ul.results li, ul.results li * { vertical-align: middle; }
-ul.results li:nth-child(odd) { background-color: #eee; }
+ul.results { display: flex; flex-wrap: wrap; }
+ul.results li {
+  width: 15em;
+  padding: 5px 0;
+  margin: 1.5em;
+  text-align: center;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+  font-size: 108%;
+  font-weight: bold;
+  font-family: sans-serif;
+}
+ul.results li:hover { background-color: #ddd; }
+ul.results li img { width: 100%; }
 </style>
 {% endblock %}
 
@@ -33,8 +45,11 @@ ul.results li:nth-child(odd) { background-color: #eee; }
 <ul class="results">
 {% for recette in recettes %}
     <li>
-        <a href="{{ recette.get_absolute_url }}">{{ recette.nom }}</a>
-        <img src="{{ recette.photo|thumbnail_url:'thumbnail' }}">
+        <a href="{{ recette.get_absolute_url }}">
+            {{ recette.nom }}
+            <img src="{{ recette.photo|thumbnail_url:'thumbnail' }}">
+            <img src="{{ recette.photo.url }}">
+        </a>
     </li>
 {% endfor %}
 </ul>