From a620275a1cb1b204167088887885bc93fe65d857 Mon Sep 17 00:00:00 2001
From: Torsten <torsten@rubydesign.fi>
Date: Sun, 8 Jan 2023 19:53:12 +0200
Subject: [PATCH] improve blog header

---
 app/helpers/merged/pages_helper.rb            |  4 +++
 app/views/merged/view/_blog_header.haml       | 25 +++++++++++--------
 .../merged/view/_section_half_image.haml      |  2 +-
 .../merged/view/_section_large_image.haml     |  2 +-
 app/views/merged/view/_section_news.haml      |  4 ++-
 config/merged/section_styles.yml              |  1 +
 6 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/app/helpers/merged/pages_helper.rb b/app/helpers/merged/pages_helper.rb
index 0cb3766..7ff05ff 100644
--- a/app/helpers/merged/pages_helper.rb
+++ b/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
diff --git a/app/views/merged/view/_blog_header.haml b/app/views/merged/view/_blog_header.haml
index 4087882..d9482b4 100644
--- a/app/views/merged/view/_blog_header.haml
+++ b/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
diff --git a/app/views/merged/view/_section_half_image.haml b/app/views/merged/view/_section_half_image.haml
index 36a51f7..e4c686e 100644
--- a/app/views/merged/view/_section_half_image.haml
+++ b/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
diff --git a/app/views/merged/view/_section_large_image.haml b/app/views/merged/view/_section_large_image.haml
index e87e1cb..e9a8a1e 100644
--- a/app/views/merged/view/_section_large_image.haml
+++ b/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
diff --git a/app/views/merged/view/_section_news.haml b/app/views/merged/view/_section_news.haml
index 8952b97..a92ad4f 100644
--- a/app/views/merged/view/_section_news.haml
+++ b/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
diff --git a/config/merged/section_styles.yml b/config/merged/section_styles.yml
index b95a035..f616019 100644
--- a/config/merged/section_styles.yml
+++ b/config/merged/section_styles.yml
@@ -144,5 +144,6 @@
     - text
   options:
     - order
+    - columns
     - background
     - color