diff --git a/src/back/jdd-components/horizontal-gallery/horizontal-gallery.css b/src/back/jdd-components/horizontal-gallery/horizontal-gallery.css index 4c844b0..3e1e7ea 100644 --- a/src/back/jdd-components/horizontal-gallery/horizontal-gallery.css +++ b/src/back/jdd-components/horizontal-gallery/horizontal-gallery.css @@ -7,10 +7,14 @@ gap: 16px; width: 100%; margin-bottom: 16px; + align-items: center; - h2 { - font-size: 32px; - line-height: 48px; + h1, + h2, + h3, + h4, + h5, + h6 { font-family: var(--font-headings); text-align: center; color: var(--color-brand-text-fg); @@ -18,9 +22,8 @@ margin-top: 0; margin-bottom: 0; - @container (max-width: 600px) { - font-size: 28px; - line-height: 34px; + &[data-align="left"] { + text-align: left; } } @@ -46,6 +49,12 @@ } } + &:has([data-align="left"]) { + &::before { + display: none; + } + } + button { border: none; background: none; @@ -74,6 +83,7 @@ max-height: min(75vh, 700px); grid-template-rows: 1fr min-content; height: 100%; + min-width: 80px; } &, diff --git a/src/back/jdd-components/horizontal-gallery/horizontal-gallery.jdd.tsx b/src/back/jdd-components/horizontal-gallery/horizontal-gallery.jdd.tsx index ed33f2c..ae1969c 100644 --- a/src/back/jdd-components/horizontal-gallery/horizontal-gallery.jdd.tsx +++ b/src/back/jdd-components/horizontal-gallery/horizontal-gallery.jdd.tsx @@ -12,6 +12,8 @@ import { PathFilePointer } from "@sealcode/file-manager"; const component_arguments = { title: new ComponentArguments.ShortText(), + heading_level: new ComponentArguments.Enum(["h1", "h2", "h3", "h4", "h5", "h6"]), + heading_align: new ComponentArguments.Enum(["left", "center"]), images: new ComponentArguments.List( new ComponentArguments.Structured({ image: new ComponentArguments.Image(), @@ -34,7 +36,7 @@ export class HorizontalGallery extends Component { } toHTML({ - args: { title, images }, + args: { title, images, heading_level, heading_align }, classes, jdd_context: { render_image }, index, @@ -72,7 +74,7 @@ export class HorizontalGallery extends Component { render: async ({ scroller, markers }) => (