improve blog header

app/helpers/merged/pages_helper.rb

@@ -9,5 +9,9 @@ module Merged
       return last unless last&.template == "section_news"
       sorted.last
     end
+
+    def header_list
+      markdown("- one \n- two\n- three\n- four")
+    end
   end
 end

app/views/merged/view/_blog_header.haml

@@ -1,11 +1,14 @@
-%section.overflow-hidden.grid.grid-cols-2.m-5.md:m-12.lg:m-20
-  %div{ order_option(section)}
-    = image_for( section , "h-56 w-full object-cover sm:h-full")
-  .p-8.md:p-6.lg:px-16.lg:pt-10{ background_option(section)}
-    .mx-auto.max-w-xl{options(section , :text_align , :color)}
-      %h4.text-xl.mt-10.md:text-2xl
-        = date_precision(section.page , "published_date")
-      %h2.mt-12.text-2xl.font-bold.md:text-4xl
-        = section.header
-      .mt-8.md:block{ prose_classes }
-        = markdown(section)
+.flex.justify-center.p-8.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-1/3")}
+    = image_for(section ,"")
+  .flex.items-center.w-full.max-w.px-6.mt-6.mx-auto{:class => "lg:w-2/3"}
+    .flex-1{color_option(section)}
+      .text-center
+        %h2.text-4xl.font-bold.text-center.mb-2
+          = section.header
+        .font-bold.text-center.mb-4.lg:mb-8
+          = date_precision(section.page , "published_date")
+
+        .max-w-full.mt-4.gap-16{ options(section , :text_column , :prose ) }
+          = markdown(section)
+          = header_list

app/views/merged/view/_section_half_image.haml

@@ -3,7 +3,7 @@
     = image_for( section , "h-56 w-full object-cover sm:h-full")
   .p-8.md:p-12.lg:px-16.lg:py-24{ background_option(section)}
     .mx-auto.max-w-xl{options(section , :text_align , :color)}
-      %h2.mt-12.text-2xl.font-bold.md:text-4xl
+      %h2.text-2xl.font-bold.md:text-4xl
         = section.header
       -if section.has_option?("subheader")
         %h4.text-xl.mt-10.md:text-2xl

app/views/merged/view/_section_large_image.haml

@@ -1,6 +1,6 @@
 .flex.justify-center.p-8.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 ,"")
+    = image_for(section ,"object-cover")
   .flex.items-center.w-full.max-w.px-6.mt-6.mx-auto{:class => "lg:w-1/3"}
     .flex-1{color_option(section)}
       .text-center

app/views/merged/view/_section_news.haml

@@ -1,5 +1,5 @@
 - if blog = last_blog
-  %section.border.py-20{ options(section , :background )}
+  %section.border.border-xl.mt-20{ options(section , :background )}
     .flex.mx-20.justify-between.items-center
       .text-2xl.font-bold.tracking-tight.sm:text-4xl
         = section.header
@@ -7,3 +7,5 @@
         = section.text
     - template = find_template(last_blog)
     = render( template , section: last_blog)
+    .mr-20.text-lg
+      = section.text

config/merged/section_styles.yml

@@ -144,5 +144,6 @@
     - text
   options:
     - order
+    - columns
     - background
     - color