From 412936bd395b8a9b853a197b434548605dd00d51 Mon Sep 17 00:00:00 2001
From: Matthew Lemon <y@yulqen.org>
Date: Wed, 23 Oct 2024 17:45:07 +0100
Subject: wip: working on feature card styling

---
 .../templates/resources/resource_card_featured.html           | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

(limited to 'alphabetlearning/templates')

diff --git a/alphabetlearning/templates/resources/resource_card_featured.html b/alphabetlearning/templates/resources/resource_card_featured.html
index 2145eb4..bca4f53 100644
--- a/alphabetlearning/templates/resources/resource_card_featured.html
+++ b/alphabetlearning/templates/resources/resource_card_featured.html
@@ -4,20 +4,19 @@
 <div class="featured-card" style="border-color: {{ resource.main_resource_category_colour_css_class }};">
     <img class="featured-img" src="{{ resource.thumbnail_urls|first }}" alt="{{ resource.thumbnail_filename }}">
     <div>
-        <div>
-            <h5><a href="{% url 'resources:resource_detail' resource_id=resource.id %}">{{ resource.name }}</a></h5>
-        </div>
-        <div>
+        <a class="card-title-link" href="{% url 'resources:resource_detail' resource_id=resource.id %}">{{ resource.name }}</a>
+        <div class="card-metadata-row">
             <span>{{ resource.age_range }}</span>
             {% if resource.main_resource_category_name == "English as a Foreign Language (EFL)" %}
-                <span style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">EFL</span>
+                <span class="card-category-badge" style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">EFL</span>
             {% else %}
-                <span style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">{{ resource.main_resource_category_name }}</span>
+                <span class="card-category-badge"  style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">{{ resource.main_resource_category_name }}</span>
             {% endif %}
             {% if request.user.is_authenticated and request.user.is_staff %}
                 <span>Feature slot: {{ resource.feature_slot }}</span>
             {% endif %}
         </div>
+        <hr>
         <div>
             <p class="featured-card-description">{{ resource.card_description }}</p>
         </div>
-- 
cgit v1.2.3