search style (not finished)

assets/styles/app.css

@@ -134,3 +134,41 @@ main:is(#login, #register) > form {
         }
     }
 }
+
+main#searchResults {
+    & > h1 {
+        padding: 2rem;
+        text-align: center;
+    }
+    & div.results {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        justify-items: stretch;
+        gap: 2rem;
+    }
+}
+
+section.album {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0.7rem;
+    width: auto;
+    transition: all ease-out 0.2s;
+    box-shadow: var(--shadow);
+    & > span {
+        width: fit-content;
+        & > * {
+            display: inline;
+        }
+    }
+    & > img {
+        min-width: 180px;
+        width: 100%;
+        max-width: 260px;
+    }
+    &:hover {
+        transform: scale(1.02);
+        box-shadow: var(--shadow-hover);
+    }
+}

templates/base.html.twig

@@ -48,7 +48,7 @@
         </header>
         {% endblock %}
 
-        <main>{% block body %}{% endblock %}</main>
+        {% block body %}{% endblock %}
 
         {% block footer %}
         <footer>

templates/search/search.html.twig

@@ -1,27 +1,34 @@
-{% extends 'base.html.twig' %}
+{% extends 'base.html.twig' %} {% block title %} results for {{ query }} !{%
-
+endblock %} {% block body %}
-{% block title %} results for {{ query }} !{% endblock %}
+<main id="searchResults">
-
-{% block body %}
-<style>
-    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
-    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
-</style>
-
-<div class="example-wrapper">
     <h1>Results for "{{ query }}" with {{fruit_emoji}}:</h1>
-    {% for result in results %}
+    <div class="results">
-        {% set array = result['title']|split('-') %}
+        {% for result in results %} {% set array = result['title']|split('-') %}
-        {% set artist = array[0] %}
+        {% set artist = array[0] %} {% set album = array[1] %}
-        {% set song = array[1] %}
+        <section class="album">
-        <div>
+            <span>
-            <p>artist : {{artist}}</p>
+                <h2>{{album}}</h2>
-            <p>song : {{song}}</p>
+                by
-            <img loading="lazy" src={{result['cover_image']}} alt="{{song ~ ' by ' ~ artist}}" />
+                <h3>{{artist}}</h3>
-        </div>
+            </span>
+            <img
+                loading="lazy"
+                src="{{result['cover_image']}}"
+                alt="{{album ~ ' by ' ~ artist}}"
+            />
+            <br />
+        </section>
         {% endfor %}
-    <a href="/search?q={{query}}&page={{previous_page}}&fruit={{fruit_emoji}}">previous page</a>
+    </div>
+    <nav>
+        <a
+            href="/search?q={{query}}&page={{previous_page}}&fruit={{fruit_emoji}}"
+            >previous page</a
+        >
         <p>{{page}}</p>
-    <a href="/search?q={{query}}&page={{next_page}}&fruit={{fruit_emoji}}">next page</a>
+        <a href="/search?q={{query}}&page={{next_page}}&fruit={{fruit_emoji}}"
-</div>
+            >next page</a
+        >
+    </nav>
+</main>
 {% endblock %}