more feature work, looking good

This commit is contained in:
Torsten 2023-01-05 17:46:27 +02:00
parent d071217cf0
commit 61a261470d
3 changed files with 17 additions and 10 deletions

View File

@ -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

View File

@ -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

View File

@ -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.