From 61a261470d5118a2afa729f11c22d9047ad45763 Mon Sep 17 00:00:00 2001
From: Torsten <torsten@rubydesign.fi>
Date: Thu, 5 Jan 2023 17:46:27 +0200
Subject: [PATCH] more feature work, looking good

---
 app/views/merged/view/cards/_card_feature.haml    |  8 --------
 .../merged/view/cards/_card_feature_box.haml      | 15 +++++++++++++++
 config/merged/card_styles.yml                     |  4 ++--
 3 files changed, 17 insertions(+), 10 deletions(-)
 delete mode 100644 app/views/merged/view/cards/_card_feature.haml
 create mode 100644 app/views/merged/view/cards/_card_feature_box.haml

diff --git a/app/views/merged/view/cards/_card_feature.haml b/app/views/merged/view/cards/_card_feature.haml
deleted file mode 100644
index bbba85f..0000000
--- a/app/views/merged/view/cards/_card_feature.haml
+++ /dev/null
@@ -1,8 +0,0 @@
-.max-w-md.sm:mx-auto.sm:text-center
-  .flex.items-center.justify-center.mb-4.rounded-full.mx-auto.w-40.h-40{options(card,:background )}
-    = image_for( card , "h-20 w-20")
-  %h6.mb-3.text-xl.font-bold.leading-5{options(card, :color)}= card.header
-  .mb-3.text-sm.text-gray-900{ prose_classes }
-    = markdown(card)
-  - if card.has_option?("button_link")
-    %a.inline-flex.items-center.font-semibold.transition-colors.duration-200.text-deep-purple-accent-400.hover:text-deep-purple-800{"aria-label" => "", :href => "/"} Learn more
diff --git a/app/views/merged/view/cards/_card_feature_box.haml b/app/views/merged/view/cards/_card_feature_box.haml
new file mode 100644
index 0000000..25f7ad3
--- /dev/null
+++ b/app/views/merged/view/cards/_card_feature_box.haml
@@ -0,0 +1,15 @@
+.relative.p-px.overflow-hidden.transition.duration-300.transform.border.rounded.shadow-sm.hover:scale-105.group.hover:shadow-xl
+  .absolute.bottom-0.left-0.w-full.h-1.duration-300.origin-left.transform.scale-x-0.bg-deep-purple-accent-400.group-hover:scale-x-100
+  .absolute.bottom-0.left-0.w-1.h-full.duration-300.origin-bottom.transform.scale-y-0.bg-deep-purple-accent-400.group-hover:scale-y-100
+  .absolute.top-0.left-0.w-full.h-1.duration-300.origin-right.transform.scale-x-0.bg-deep-purple-accent-400.group-hover:scale-x-100
+  .absolute.bottom-0.right-0.w-1.h-full.duration-300.origin-top.transform.scale-y-0.bg-deep-purple-accent-400.group-hover:scale-y-100
+  .relative.p-5.bg-white.rounded-sm
+    .flex.flex-col.mb-2.lg:items-center.lg:flex-row
+      .flex.items-center.justify-center.w-16.h-16.mb-4.mr-2.rounded-full.lg:mb-0{options(card,:background )}
+        = image_for( card , "h-8 w-8")
+      %h6.font-semibold.leading-5{options(card, :color)}= card.header
+    %p.mb-2.text-sm.text-gray-900{ prose_classes }
+      = markdown(card)
+    - if card.has_option?("button_link")
+      %a.inline-flex.items-center.text-sm.font-semibold.transition-colors.duration-200.text-deep-purple-accent-400.hover:text-deep-purple-800{"aria-label" => "", :href => "/"} Learn more
+      
diff --git a/config/merged/card_styles.yml b/config/merged/card_styles.yml
index 8cd4361..37eec3a 100644
--- a/config/merged/card_styles.yml
+++ b/config/merged/card_styles.yml
@@ -63,8 +63,8 @@
     - text_align
     - button_link
     - button_text
-- template: card_feature_small
-  header: Card looking feature, smaller version
+- template: card_feature_box
+  header: Feature card with box
   text: For things where no image is available or apropriate.
         Making lists a little more interesting to look at.
         May use svg as image.