neutral preview images

app/assets/stylesheets/merged/merged.css

@@ -2262,6 +2262,21 @@ select {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
+.bg-slate-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
+}
+
+.bg-zinc-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 252 232 / var(--tw-bg-opacity));
+}
+
 .bg-cover {
   background-size: cover;
 }
@@ -2653,6 +2668,14 @@ select {
   text-decoration-line: underline;
 }
 
+.opacity-10 {
+  opacity: 0.1;
+}
+
+.opacity-90 {
+  opacity: 0.9;
+}
+
 .shadow-xl {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@@ -3074,6 +3097,10 @@ select {
 }
 
 @media (min-width: 1280px) {
+  .xl\:m-20 {
+    margin: 5rem;
+  }
+
   .xl\:mx-auto {
     margin-left: auto;
     margin-right: auto;

app/helpers/merged/options_helper.rb

@@ -149,7 +149,7 @@ module Merged
     def margin_for( section )
       { "0" =>  " m-0" ,
         "none" =>  "" ,
-        "20" => " m-20" ,
+        "20" => " 8 md:12 lg:16 xl:m-20" ,
       }[section.option("margin")] || ""
     end
     # need full color names for tailwind to pick it up

app/models/merged/section.rb

@@ -23,6 +23,10 @@ module Merged
       SectionStyle.find_by_template( template )
     end
 
+    def card_template_style
+      CardStyle.find_by_template( card_template )
+    end
+
     def set_template(new_template)
       self.template = new_template
       new_style = template_style

app/views/merged/sections/select_card_template.haml

@@ -6,7 +6,8 @@
 
 .grid.grid-cols-4.gap-6.m-8
   - @cards.each do |style|
-    .border.border-gray-300.rounded-lg.p-2
+    .flex.flex-col.border.border-gray-300.rounded-lg.p-2.bg-neutral-50
       = link_to( merged.section_set_card_template_path( card_template: style.template )) do
         .font-bold.text-lg.text-center.pb-4= style.header
         =image_tag(style.card_preview , class: "w-full object-contain")
+        .text-left.pt-4.bg-gray-50= style.text

app/views/merged/sections/select_template.haml

@@ -6,7 +6,8 @@
 
 .grid.grid-cols-4.gap-6.my-10.mx-20
   - @sections.each do |style|
-    .border.border-gray-300.rounded-lg.p-2
+    .flex.flex-col.border.border-gray-300.rounded-lg.p-2.bg-neutral-50
       = link_to( merged.section_set_template_path( template: style.template )) do
         .font-bold.text-lg.text-center.pb-4= style.header
         =image_tag(style.section_preview , class: "w-full object-contain")
+        .text-left.pt-4.bg-gray-50= style.text

app/views/merged/sections/show.haml

@@ -57,7 +57,7 @@
   - if( @section.has_cards? )
     .basis-full.h-0
     .basis-96
-      .mx-3.text-lg.font-bold Card Style #{@section.card_template}
+      .mx-3.text-lg.font-bold Card Style #{@section.card_template_style.header}
       =card_preview(@section , class: "my-3")
       %p.py-3
         = link_to merged.section_select_card_template_path(@section.id) do

app/views/merged/view/_section_large_image.haml

@@ -1,4 +1,4 @@
-.flex.justify-center.p-8.flex-col.md:flex-row{options(section , :margin , :background )}
+.flex.justify-center.flex-col.md:flex-row{options(section , :margin , :background )}
   .flex.items-center.h-40.md:h-60.lg:h-96.w-full.overflow-hidden{order_option(section, "lg:w-2/3")}
     = image_for(section ,"object-cover")
   .flex.items-center.w-full.max-w.px-6.mt-6.mx-auto{:class => "lg:w-1/3"}

app/views/merged/view/_section_small_image.haml

@@ -1,4 +1,4 @@
-.flex.justify-center.p-8.flex-col.lg:flex-row{options(section , :margin , :background )}
+.flex.justify-center.flex-col.lg:flex-row{options(section , :margin , :background )}
   .flex.justify-center.h-60.w-full.overflow-hidden{order_option(section, "lg:w-1/3")}
     = image_for(section ,"object-cover")
   .columns-1.md:columns-2.max-w-full.items-center.w-full.max-w.px-6.mx-auto.mt-6.lg:mt-0{text_color_option(section, "lg:w-2/3")}