diff --git a/app/assets/images/merged/section_preview/section_feature.png b/app/assets/images/merged/section_preview/section_feature.png index b548340..f980d90 100644 Binary files a/app/assets/images/merged/section_preview/section_feature.png and b/app/assets/images/merged/section_preview/section_feature.png differ diff --git a/app/assets/images/merged/section_preview/section_small_image.png b/app/assets/images/merged/section_preview/section_small_image.png new file mode 100644 index 0000000..a675e87 Binary files /dev/null and b/app/assets/images/merged/section_preview/section_small_image.png differ diff --git a/app/assets/stylesheets/merged/merged.css b/app/assets/stylesheets/merged/merged.css index 9554c2e..31d1055 100644 --- a/app/assets/stylesheets/merged/merged.css +++ b/app/assets/stylesheets/merged/merged.css @@ -1646,6 +1646,10 @@ select { height: 14rem; } +.h-60 { + height: 15rem; +} + .h-24 { height: 6rem; } @@ -2216,14 +2220,34 @@ select { background-clip: padding-box; } -.bg-bottom { - background-position: bottom; +.bg-left-top { + background-position: left top; +} + +.bg-left { + background-position: left; } .bg-left-bottom { background-position: left bottom; } +.bg-top { + background-position: top; +} + +.bg-center { + background-position: center; +} + +.bg-bottom { + background-position: bottom; +} + +.bg-right-top { + background-position: right top; +} + .bg-right-bottom { background-position: right bottom; } diff --git a/app/views/merged/view/_section_small_image.haml b/app/views/merged/view/_section_small_image.haml new file mode 100644 index 0000000..3058bde --- /dev/null +++ b/app/views/merged/view/_section_small_image.haml @@ -0,0 +1,12 @@ +.flex.justify-center.p-8.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.mt-6.mx-auto{:class => "lg:w-2/3"} + .flex-1{color_option(section)} + %h2.text-4xl.font-bold.text-center.mb-4.lg:mb-8= section.header + -if section.has_option?("subheader") + %h4.text-xl.mt-4.lg:mt-8.md:text-2xl + = section.option("subheader") + .mt-3{ prose_classes } + = markdown(section) + =view_button(section , "my-2") diff --git a/config/merged/section_styles.yml b/config/merged/section_styles.yml index 73f618b..1fe2935 100644 --- a/config/merged/section_styles.yml +++ b/config/merged/section_styles.yml @@ -113,6 +113,24 @@ fields: - header - text + options: + - subheader + - margin + - order + - color + - text_align + - background + - button_link + - button_text +- template: section_small_image + header: One third image header with larger text area text + text: Smaller picture with Header and text offset that use more space. + Adjustable text alignment (left, center, right). + Text section may have background color. + Text color can be changed too + fields: + - header + - text options: - subheader - margin