Very simple border round feature block for EY Literacy

3 files changed, 17 insertions, 4 deletions

diff --git a/pyblackbird_cc/static/css/custom.css b/pyblackbird_cc/static/css/custom.css
index a26cd3c..c4fc153 100644
--- a/pyblackbird_cc/static/css/custom.css
+++ b/pyblackbird_cc/static/css/custom.css
@@ -6187,6 +6187,11 @@ h2, .h2 {
   color: black;
 }
 
+.ey_literacy_border {
+  border-color: #ebde34;
+  border-width: 0.6em;
+}
+
 .form-label {
   font-weight: 500;
 }
diff --git a/pyblackbird_cc/static/scss/custom.scss b/pyblackbird_cc/static/scss/custom.scss
index f565f16..75f574a 100644
--- a/pyblackbird_cc/static/scss/custom.scss
+++ b/pyblackbird_cc/static/scss/custom.scss
@@ -6,6 +6,7 @@
 
 // 2. Include any default variable overrides here
 $primary: #51635EFF;
+$ey_literacy: #ebde34;
 $display-font-weight: 600;
 $ml-font-label-weight: 500;
 
@@ -33,14 +34,20 @@ $ml-font-label-weight: 500;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
 }
 
+
 h2 {
   color: $primary;
 }
 
 .ey_literacy {
-  background-color: #ebde34;
+  background-color: $ey_literacy;
   color: black;
- }
+}
+
+.ey_literacy_border {
+  border-color: $ey_literacy;
+  border-width: 0.6em;
+}
 
 .form-label {
   font-weight: $ml-font-label-weight;
diff --git a/pyblackbird_cc/templates/resources/resource_list.html b/pyblackbird_cc/templates/resources/resource_list.html
index 13d2a61..6f9edef 100644
--- a/pyblackbird_cc/templates/resources/resource_list.html
+++ b/pyblackbird_cc/templates/resources/resource_list.html
@@ -45,7 +45,8 @@
         </div>
         <div class="d-flex flex-row justify-content-between flex-wrap">
           {% for resource in featured_resources %}
-            <div class="card mx-2 mt-2 shadow-sm border border-2" style="width: 24rem;">
+          <!-- <div class="card mx-2 mt-2 shadow-sm ey_literacy_border" style="width: 24rem;"> -->
+            <div class="card mx-2 mt-2 shadow-sm ey_literacy_border" style="width: 24rem;">            
               <img class="card-img-top"
                    src="{{ resource.thumbnail_urls|first }}"
                    alt="{{ resource.thumbnail_filename }}" />
@@ -53,7 +54,7 @@
                 <h5 class="card-title"><a href="{% url 'resources:resource_detail' resource_id=resource.id %}">{{ resource.name }}</a></h5>
                 <div class="d-flex flex-row justify-content-start align-content-center">
                   <div>
-                    <span class="badge {{ resource.main_resource_category.colour_css_class }} me-2">{{ resource.main_resource_category_name }}</span>
+                    <span class="badge {{ resource.main_resource_category_colour_css_class }} me-2">{{ resource.main_resource_category_name }}</span>
                   </div>
                   <div>
                     <span class="badge bg-secondary me-2">{{ resource.age_range }}</span>