diff --git a/package-lock.json b/package-lock.json index 67b1063..c06898f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "@sealcode/jdd": "^0.8.13", "@sealcode/jdd-editor": "^0.2.37", "@sealcode/monaco-wrapper": "^0.0.12", - "@sealcode/sealgen": "^0.19.23", + "@sealcode/sealgen": "^0.19.25", "@sealcode/show-first-row": "^0.1.0", "@sealcode/simplemde": "^1.12.1", "@sealcode/sortable": "^0.0.1", @@ -1463,9 +1463,9 @@ "integrity": "sha512-N4BuMuantv2A63PbFwLg53AJbDZ2/BzKxpgBIRd7jDWyZLw58en6FFZgcbXMLDU7gwKNYfyLOJMLwXyn6aEsnQ==" }, "node_modules/@sealcode/sealgen": { - "version": "0.19.23", - "resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.19.23.tgz", - "integrity": "sha512-jKMp4LdOWC5lwOzHC6bT9y98NxZ5U6CpzdjoqtghwBIZZQh9Z58FX5+wgLO+u6Vzec7+7Gyt3097x6r4L18DdA==", + "version": "0.19.25", + "resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.19.25.tgz", + "integrity": "sha512-ryWLuKn9S53XDsSEmttWjM57Wa/thrOEaMvM2uy5xOYkBVo9saTTBFmInm53In1nnrh44kNkuYogBLG4dXhNfw==", "dependencies": { "@koa/router": "^12.0.1", "@sealcode/file-manager": "^1.0.2", @@ -16383,9 +16383,9 @@ "integrity": "sha512-N4BuMuantv2A63PbFwLg53AJbDZ2/BzKxpgBIRd7jDWyZLw58en6FFZgcbXMLDU7gwKNYfyLOJMLwXyn6aEsnQ==" }, "@sealcode/sealgen": { - "version": "0.19.23", - "resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.19.23.tgz", - "integrity": "sha512-jKMp4LdOWC5lwOzHC6bT9y98NxZ5U6CpzdjoqtghwBIZZQh9Z58FX5+wgLO+u6Vzec7+7Gyt3097x6r4L18DdA==", + "version": "0.19.25", + "resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.19.25.tgz", + "integrity": "sha512-ryWLuKn9S53XDsSEmttWjM57Wa/thrOEaMvM2uy5xOYkBVo9saTTBFmInm53In1nnrh44kNkuYogBLG4dXhNfw==", "requires": { "@koa/router": "^12.0.1", "@sealcode/file-manager": "^1.0.2", diff --git a/package.json b/package.json index 68f1aaa..c3bd221 100644 --- a/package.json +++ b/package.json @@ -104,7 +104,7 @@ "@sealcode/jdd": "^0.8.13", "@sealcode/jdd-editor": "^0.2.37", "@sealcode/monaco-wrapper": "^0.0.12", - "@sealcode/sealgen": "^0.19.23", + "@sealcode/sealgen": "^0.19.25", "@sealcode/show-first-row": "^0.1.0", "@sealcode/simplemde": "^1.12.1", "@sealcode/sortable": "^0.0.1", diff --git a/src/back/elements/button.tsx b/src/back/elements/button.tsx index e1f333f..09577e7 100644 --- a/src/back/elements/button.tsx +++ b/src/back/elements/button.tsx @@ -12,6 +12,7 @@ export function button({ submit = false, icon, centered = false, + classes = [], }: { text: string; href: string; @@ -20,6 +21,7 @@ export function button({ submit?: boolean; icon?: string; centered?: boolean; + classes?: string[]; }): JSX.Element { const classstr = `button button--color-${variant}`; if (submit) { @@ -33,6 +35,7 @@ export function button({ "button", `button--color-${variant}`, { "button--centered": centered }, + ...classes, ]} href={disabled ? false : href} disabled={disabled} diff --git a/src/back/email/send-eml.ts b/src/back/email/send-eml.ts index a5a8abf..33ca609 100644 --- a/src/back/email/send-eml.ts +++ b/src/back/email/send-eml.ts @@ -14,7 +14,7 @@ export async function sendEml( for (const [key, value] of Object.entries(template_data)) { eml_content = eml_content.replaceAll(`{{${key}}}`, htmlEscape(value)); } - const parsed = await simpleParser(eml_content); + const parsed = await simpleParser(eml_content, { skipImageLinks: true }); const mailer = context.$app.mailer; diff --git a/src/back/jdd-components/anchor/anchor.jdd.tsx b/src/back/jdd-components/anchor/anchor.jdd.tsx new file mode 100644 index 0000000..0c81c80 --- /dev/null +++ b/src/back/jdd-components/anchor/anchor.jdd.tsx @@ -0,0 +1,20 @@ +import { TempstreamJSX } from "tempstream"; +import type { ComponentToHTMLArgs } from "@sealcode/jdd"; +import { Component, ComponentArguments } from "@sealcode/jdd"; + +const component_arguments = { + id: new ComponentArguments.ShortText(), +} as const; + +export class Anchor extends Component { + getArguments() { + return component_arguments; + } + + async toHTML({ + args: { id }, + classes, + }: ComponentToHTMLArgs): Promise { + return
; + } +} diff --git a/src/back/jdd-components/background-wrapper/background-wrapper.css b/src/back/jdd-components/background-wrapper/background-wrapper.css index accd43a..5103a00 100644 --- a/src/back/jdd-components/background-wrapper/background-wrapper.css +++ b/src/back/jdd-components/background-wrapper/background-wrapper.css @@ -7,6 +7,18 @@ padding: var(--vertical-padding) 0; + &.background-wrapper--bleed-none { + grid-column: content !important; + } + + &.background-wrapper--bleed-bleed { + grid-column: bleed !important; + } + + &.background-wrapper--bleed-screen { + grid-column: 1/-1 !important; + } + &.background-wrapper--padding-no { padding: 0; } @@ -37,4 +49,30 @@ color: var(--color-brand-text-on-accent2); --color-brand-text-fg: var(--color-brand-text-on-accent2); } + + &.background-wrapper--frame1 { + padding: 16px; + border: 16px dashed var(--color-brand-accent); + background-color: color-mix( + in srgb, + var(--color-brand-accent) 20%, + transparent 80% + ); + --color-brand-text-bg: transparent; + } + + &.background-wrapper--frame2 { + padding: 16px; + border: 16px dashed var(--color-brand-accent2); + background-color: color-mix( + in srgb, + var(--color-brand-accent2) 20%, + transparent 80% + ); + --color-brand-text-bg: transparent; + } + + &.background-wrapper--crooked { + transform: scale(1.05) rotate(-2deg); + } } diff --git a/src/back/jdd-components/background-wrapper/background-wrapper.jdd.tsx b/src/back/jdd-components/background-wrapper/background-wrapper.jdd.tsx index 2e68af2..53d328e 100644 --- a/src/back/jdd-components/background-wrapper/background-wrapper.jdd.tsx +++ b/src/back/jdd-components/background-wrapper/background-wrapper.jdd.tsx @@ -6,7 +6,7 @@ import type { } from "@sealcode/jdd"; import { Component, ComponentArguments } from "@sealcode/jdd"; -export const background_variants = ["variant1", "variant2"]; +export const background_variants = ["variant1", "variant2", "frame1", "frame2"]; const component_arguments = { variant: new ComponentArguments.Enum(background_variants), @@ -14,6 +14,10 @@ const component_arguments = { padding: new ComponentArguments.Boolean(), big_padding: new ComponentArguments.Boolean(), margin: new ComponentArguments.Boolean(), + bleed: new ComponentArguments.Enum(["none", "bleed", "screen"]).setDefaultValue( + "screen" + ), + crooked: new ComponentArguments.Boolean().setDefaultValue(false), content: new ComponentArguments.NestedComponent(), } as const; @@ -31,7 +35,16 @@ export class BackgroundWrapper extends Component { } async toHTML({ - args: { variant, content, grow_to_screen_height, padding, margin, big_padding }, + args: { + variant, + content, + grow_to_screen_height, + padding, + margin, + big_padding, + bleed, + crooked, + }, classes, jdd_context, }: ComponentToHTMLArgs): Promise { @@ -40,10 +53,12 @@ export class BackgroundWrapper extends Component { class={[ "background-wrapper", `background-wrapper--${variant}`, + `background-wrapper--bleed-${bleed}`, `background-wrapper--padding-${padding ? "yes" : "no"}`, `background-wrapper--big-padding-${big_padding ? "yes" : "no"}`, { "background-wrapper--grow-height": grow_to_screen_height, + "background-wrapper--crooked": crooked, "jdd-no-gap": !margin, }, ...classes, diff --git a/src/back/jdd-components/buttons/buttons.css b/src/back/jdd-components/buttons/buttons.css index 8b2029e..dbb6758 100644 --- a/src/back/jdd-components/buttons/buttons.css +++ b/src/back/jdd-components/buttons/buttons.css @@ -25,7 +25,51 @@ gap: 24px; } + &.buttons--bleed-none { + grid-column: content !important; + } + + &.buttons--bleed-bleed { + grid-column: bleed !important; + } + + &.buttons--bleed-screen { + grid-column: 1/-1 !important; + } + .button { margin: 0; + + &.button--size-tiny { + font-size: 10px; + } + + &.button--size-small { + font-size: 14px; + } + + &.button--size-medium { + font-size: 16px; + + @container (max-width: 500px) { + font-size: 15px; + } + } + + &.button--size-large { + font-size: 24px; + + @container (max-width: 500px) { + font-size: 18px; + } + } + + &.button--size-extra-large { + font-size: 32px; + + @container (max-width: 500px) { + font-size: 24px; + } + } } } diff --git a/src/back/jdd-components/buttons/buttons.jdd.tsx b/src/back/jdd-components/buttons/buttons.jdd.tsx index 6672541..06c9378 100644 --- a/src/back/jdd-components/buttons/buttons.jdd.tsx +++ b/src/back/jdd-components/buttons/buttons.jdd.tsx @@ -6,11 +6,21 @@ import { button, button_variants } from "src/back/elements/button.js"; const component_arguments = { mode: new ComponentArguments.Enum(["column", "row"]), gap: new ComponentArguments.Enum(["none", "narrow", "medium", "wide"]), + bleed: new ComponentArguments.Enum(["none", "bleed", "screen"]).setDefaultValue( + "none" + ), buttons: new ComponentArguments.List( new ComponentArguments.Structured({ variant: new ComponentArguments.Enum(button_variants), text: new ComponentArguments.ShortText(), href: new ComponentArguments.ShortText(), + size: new ComponentArguments.Enum([ + "tiny", + "small", + "medium", + "large", + "extra-large", + ]).setDefaultValue("medium"), }) ), } as const; @@ -21,7 +31,7 @@ export class Buttons extends Component { } async toHTML({ - args: { buttons, mode, gap }, + args: { buttons, mode, gap, bleed }, classes, }: ComponentToHTMLArgs): Promise { return ( @@ -30,10 +40,17 @@ export class Buttons extends Component { "buttons", `buttons--mode-${mode}`, `buttons--gap-${gap}`, + `buttons--bleed-${bleed}`, ...classes, ]} > - {buttons.map((b) => button({ ...b, text: insert_nbsp(b.text) }))} + {buttons.map((b) => + button({ + ...b, + text: insert_nbsp(b.text), + classes: [`button--size-${b.size}`], + }) + )} ); } diff --git a/src/back/jdd-components/dynamic-grid-v2/dynamic-grid-v2.css b/src/back/jdd-components/dynamic-grid-v2/dynamic-grid-v2.css new file mode 100644 index 0000000..4b2e8ae --- /dev/null +++ b/src/back/jdd-components/dynamic-grid-v2/dynamic-grid-v2.css @@ -0,0 +1,272 @@ +.dynamic-grid { + container-type: inline-size; + + &.dynamic-grid--bleed-bleed { + grid-column: bleed !important; + } + + &.dynamic-grid--bleed-screen { + grid-column: screen !important; + } + + .dynamic-grid-title { + text-align: center; + margin-top: 0; + } + + .tiles-container { + display: grid; + grid-gap: 24px; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: min-content; + grid-auto-flow: row dense; + + @container (min-width: 900px) { + grid-template-columns: repeat(4, 1fr); + } + + .tile { + overflow: hidden; + display: grid; + gap: 0; + + grid-template-columns: subgrid; + grid-template-rows: subgrid; + + color: var(--color-brand-text-fg); + text-decoration: none; + + .tile-content { + grid-row: 2/3; + background-color: var(--tile-bg-color); + color: var(--tile-fg-color); + width: 100%; + padding: 16px; + z-index: 1; + overflow: hidden; + bottom: 0; + box-sizing: border-box; + + .tile-content-wrapper { + display: flex; + flex-flow: column; + gap: 16px; + + .tile-title { + font-weight: bold; + line-height: 20px; + margin: 0; + } + + .tile-subtitle { + line-height: 20px; + margin: 0; + } + } + } + + .tile-image { + z-index: 0; + width: 100%; + height: 100%; + grid-row: 1/2; + + picture { + height: 100%; + width: 100% !important; + } + } + } + + .tile.square { + grid-column: span 1; + grid-row: span 2; + + .tile-content { + grid-row: 2/3; + } + + .tile-image--horizontal { + display: none; + } + + .tile-image--vertical { + display: none; + } + + .tile-image--square { + grid-row: 1/2; + + picture img { + display: block !important; + } + } + } + + .tile.horizontal { + grid-column: span 2; + grid-row: span 2; + + .tile-content { + grid-column: 1/3; + } + + .tile-image--vertical { + display: none; + } + + .tile-image--square { + display: none; + } + + .tile-image--horizontal { + grid-column: 1/3; + + picture img { + display: block !important; + } + } + } + + .tile.vertical { + grid-row: span 4; + grid-column: span 1; + + .tile-content { + grid-row: 4/5; + } + + .tile-image--horizontal { + display: none; + } + + .tile-image--square { + display: none; + } + + .tile-image--vertical { + grid-row: 1/4; + + picture img { + display: block !important; + } + } + } + + .buttons-container { + margin-top: 36px; + display: flex; + justify-content: center; + flex-flow: row wrap; + column-gap: 18px; + row-gap: 16px; + + .button { + display: inline-block; + text-align: center; + padding: 8px 24px; + border: 1px solid var(--color-brand-text-fg); + color: var(--text-color); + min-width: 240px; + line-height: 23px; + font-size: 16px; + + &.accent { + background-color: var(--color-brand-accent); + --text-color: var(--color-brand-text-on-accent); + } + + &.accent2 { + background-color: var(--color-brand-accent2); + --text-color: var(--color-brand-text-on-accent2); + } + } + } + } + + @container (max-width: 900px) { + .tiles-container { + grid-template-columns: repeat(3, 1fr); + } + } + + @container (max-width: 700px) { + .tiles-container { + grid-template-columns: repeat(2, 1fr); + + .tile.vertical { + grid-row: span 2; + grid-column: span 1; + + .tile-image--vertical { + display: none; + } + + .tile-image--horizontal { + display: none; + } + + .tile-image--square { + display: block; + + picture img { + display: block !important; + } + } + } + } + } + + @container (max-width: 500px) { + .tiles-container { + grid-template-columns: 1fr; + max-width: 700px; + margin: 0 auto; + + .tile { + grid-column: span 1 !important; + grid-row: span 2 !important; + + .tile-content { + grid-row: 2/3 !important; + } + + .tile-image--vertical { + display: none !important; + } + + .tile-image--square { + display: none !important; + } + + .tile-image--horizontal { + display: block !important; + grid-row: 1/2 !important; + + picture img { + display: block !important; + } + } + } + } + } + + &.dynamic-grid--style-pop-out { + .tile { + overflow: visible; + + .tile-content { + transform: translateY(-20px) translateX(20px); + box-shadow: -10px 10px 0px #00000026; + } + + .tile-image { + grid-row: 1/3 !important; + } + + .tile-image--vertical { + grid-row: 1/5 !important; + } + } + } +} diff --git a/src/back/jdd-components/dynamic-grid-v2/dynamic-grid-v2.jdd.tsx b/src/back/jdd-components/dynamic-grid-v2/dynamic-grid-v2.jdd.tsx new file mode 100644 index 0000000..ca3318c --- /dev/null +++ b/src/back/jdd-components/dynamic-grid-v2/dynamic-grid-v2.jdd.tsx @@ -0,0 +1,119 @@ +import type { FlatTemplatable } from "tempstream"; +import { TempstreamJSX } from "tempstream"; +import type { ComponentToHTMLArgs, ExtractParsed, JDDContext } from "@sealcode/jdd"; +import { Component, ComponentArguments, insert_nbsp } from "@sealcode/jdd"; +import { getFgColorVariable } from "src/back/colors.js"; + +type ExtractArray = T extends Array ? X : never; + +const component_arguments = { + bleed: new ComponentArguments.Enum(["none", "bleed", "screen"]).setDefaultValue( + "none" + ), + style: new ComponentArguments.Enum(["flat", "pop-out"]), + tiles: new ComponentArguments.List( + new ComponentArguments.Structured({ + title: new ComponentArguments.ShortText(), + subtitle: new ComponentArguments.ShortText(), + url: new ComponentArguments.ShortText().setDefaultValue(""), + photo: new ComponentArguments.Structured({ + image: new ComponentArguments.Image(), + alt: new ComponentArguments.ShortText(), + }), + shape: new ComponentArguments.Enum([ + "square", + "horizontal", + "vertical", + ]).setDefaultValue("square"), + background: new ComponentArguments.Enum([ + "accent", + "accent2", + "text-bg", + ]).setDefaultValue("accent"), + }) + ), +} as const; + +export class DynamicGridV2 extends Component { + getArguments() { + return component_arguments; + } + + public image_sizes = { + square: { width: 700, height: 700 }, + horizontal: { width: 824, height: 400 }, + vertical: { width: 400, height: 824 }, + }; + + renderTile( + jdd_context: JDDContext, + tile: ExtractArray> + ) { + return ( + +
+
+ {tile.title ? ( +

{insert_nbsp(tile.title)}

+ ) : ( + "" + )} + {tile.subtitle ? ( +

{insert_nbsp(tile.subtitle)}

+ ) : ( + "" + )} +
+
+ + {(["square", "horizontal", "vertical"] as const).map((shape) => ( +
+ {!tile.photo + ? "" + : jdd_context.render_image(tile.photo.image, { + sizesAttr: + "(max-width: 730px) 100vw, (max-width: 980px) 50vw, 810px", + alt: tile.photo.alt, + container: { + ...this.image_sizes[shape], + objectFit: "cover", + }, + crop: this.image_sizes[shape], + imgStyle: "display: none;", + })} +
+ ))} + + ); + } + + toHTML({ + args: { tiles, bleed, style }, + jdd_context, + classes, + index, + }: ComponentToHTMLArgs): FlatTemplatable { + return ( +
+
+ {tiles.map((tile) => this.renderTile(jdd_context, tile))} +
+
+ ); + } +} diff --git a/src/back/jdd-components/faq-component/faq-component.css b/src/back/jdd-components/faq-component/faq-component.css index f3f7f56..4529390 100644 --- a/src/back/jdd-components/faq-component/faq-component.css +++ b/src/back/jdd-components/faq-component/faq-component.css @@ -139,13 +139,11 @@ } .question { - font-size: 14px; line-height: 21px; padding: 10px 0; } .answer p { - font-size: 14px; line-height: 21px; } diff --git a/src/back/jdd-components/faq-component/faq-component.jdd.tsx b/src/back/jdd-components/faq-component/faq-component.jdd.tsx index 7f11597..dd38356 100644 --- a/src/back/jdd-components/faq-component/faq-component.jdd.tsx +++ b/src/back/jdd-components/faq-component/faq-component.jdd.tsx @@ -41,7 +41,7 @@ export class FaqComponent extends Component {
-
{title}
+ {title ?
{title}
: ""}
{render_markdown(language, content.text)}{" "}
diff --git a/src/back/jdd-components/heading/heading.css b/src/back/jdd-components/heading/heading.css index 9c4dbc5..43de1b7 100644 --- a/src/back/jdd-components/heading/heading.css +++ b/src/back/jdd-components/heading/heading.css @@ -1,4 +1,7 @@ .heading { + text-wrap: pretty; + text-wrap: balance; + & > * { margin-top: 0; margin-bottom: 0; @@ -10,18 +13,46 @@ &.heading--font-size-small > * { font-size: 24px; + + @container (max-width: 600px) { + font-size: 22px; + } } &.heading--font-size-medium > * { font-size: 32px; + + @container (max-width: 600px) { + font-size: 24px; + } } &.heading--font-size-large > * { font-size: 48px; + + @container (max-width: 600px) { + font-size: 32px; + } } &.heading--font-size-extra_large > * { font-size: 64px; + + @container (max-width: 600px) { + font-size: 56px; + } + } + + &.heading--align-left { + text-align: left; + } + + &.heading--align-right { + text-align: right; + } + + &.heading--align-center { + text-align: center; } &.heading--color-normal { diff --git a/src/back/jdd-components/heading/heading.jdd.tsx b/src/back/jdd-components/heading/heading.jdd.tsx index 93e3daa..db4a611 100644 --- a/src/back/jdd-components/heading/heading.jdd.tsx +++ b/src/back/jdd-components/heading/heading.jdd.tsx @@ -18,6 +18,9 @@ const component_arguments = { "large", "extra_large", ]).setDefaultValue("medium"), + align: new ComponentArguments.Enum(["left", "right", "center"]).setDefaultValue( + "left" + ), color: new ComponentArguments.Enum(["normal", "accent1", "accent2"]).setDefaultValue( "normal" ), @@ -30,7 +33,7 @@ export class Heading extends Component { } async toHTML({ - args: { title, level, font_size, color }, + args: { title, level, font_size, color, align }, classes, }: ComponentToHTMLArgs): Promise { return ( @@ -39,6 +42,7 @@ export class Heading extends Component { "heading", `heading--font-size-${font_size}`, `heading--color-${color}`, + `heading--align-${align}`, ...classes, ]} > diff --git a/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.css b/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.css index bd82528..dead306 100644 --- a/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.css +++ b/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.css @@ -27,9 +27,9 @@ background-color: var(--tile-bg-color); display: grid; grid-template-rows: subgrid; - grid-row: span 2; + grid-row: span 4; flex-flow: column; - gap: 32px; + --gap: 16px; min-height: 320px; max-width: 400px; text-decoration: none; /* in case it's an a href */ @@ -39,13 +39,8 @@ color: var(--tile-fg-color); } - &:has(.icon), - &:has(.icon-tiles__tile__cta) { - grid-row: span 3; - } - - &:has(.icon):has(.icon-tiles__tile__cta) { - grid-row: span 4; + & > * + * { + margin-top: var(--gap); } svg { @@ -80,7 +75,10 @@ &:hover { transform: scale(1.05); + } + &:hover, + &.icon-tiles-grid__tile--force-cta { .icon-tiles__tile__cta { text-align: right; opacity: 1; diff --git a/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.jdd.tsx b/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.jdd.tsx index c932a0c..07034cd 100644 --- a/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.jdd.tsx +++ b/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.jdd.tsx @@ -23,6 +23,7 @@ const component_arguments = { description: new Args.ShortText(), url: new Args.ShortText().setExampleValues([""]), cta: new Args.ShortText().setExampleValues([""]), + always_show_cta: new Args.Boolean().setDefaultValue(false), }) ), } as const; @@ -42,6 +43,7 @@ export class IconTilesGrid extends Component { class={[ "icon-tiles-grid", { "icon-tiles-grid--bleed": bleed }, + ...classes, ]} > @@ -50,7 +52,13 @@ export class IconTilesGrid extends Component {
{tiles.map((tile) => ( diff --git a/src/back/jdd-components/split-view/split-view.css b/src/back/jdd-components/split-view/split-view.css index 48a8ced..07b3552 100644 --- a/src/back/jdd-components/split-view/split-view.css +++ b/src/back/jdd-components/split-view/split-view.css @@ -3,7 +3,7 @@ display: grid; grid-template-columns: subgrid; - grid-column: screen !important; + grid-column: 1/-1 !important; .split-view__half { flex-basis: 50%; diff --git a/src/back/jdd-components/subtree/subtree.css b/src/back/jdd-components/subtree/subtree.css index 75b7c43..fb9e7fa 100644 --- a/src/back/jdd-components/subtree/subtree.css +++ b/src/back/jdd-components/subtree/subtree.css @@ -104,7 +104,7 @@ .horizontal-scroller__element { width: var(--horizontal-scroller-item-width) !important; - max-width: calc(100cqw - 80px); + max-width: calc(100cqw - 110px); flex-shrink: 0; container-type: inline-size; flex-flow: column; @@ -115,3 +115,13 @@ } } } + +.grid-layout-main > .subtree, +.subgrid-layout > .subtree { + display: grid !important; + grid-template-columns: subgrid; + + & > * { + grid-column: content; + } +} diff --git a/src/back/jdd-components/tekst/tekst.css b/src/back/jdd-components/tekst/tekst.css index fe08ca7..defe556 100644 --- a/src/back/jdd-components/tekst/tekst.css +++ b/src/back/jdd-components/tekst/tekst.css @@ -11,6 +11,14 @@ font-size: 20px; } + &.tekst--bleed-none { + grid-column: content !important; + } + + &.tekst--bleed-bleed { + grid-column: bleed !important; + } + p { margin: 0; text-align: justify; diff --git a/src/back/jdd-components/tekst/tekst.jdd.tsx b/src/back/jdd-components/tekst/tekst.jdd.tsx index 3e16258..6352b88 100644 --- a/src/back/jdd-components/tekst/tekst.jdd.tsx +++ b/src/back/jdd-components/tekst/tekst.jdd.tsx @@ -17,6 +17,7 @@ const component_arguments = { size: new ComponentArguments.Enum(["small", "normal", "large"]).setDefaultValue( "normal" ), + bleed: new ComponentArguments.Enum(["none", "bleed"]).setDefaultValue("none"), content: new ComponentArguments.Markdown(), side_content: new ComponentArguments.NestedComponent(), } as const; @@ -42,7 +43,7 @@ export class Tekst extends Component { } toHTML({ - args: { color, content, side_content, size }, + args: { color, content, side_content, size, bleed }, classes, jdd_context, index, @@ -55,6 +56,7 @@ export class Tekst extends Component { ...classes, `tekst--color-${color}`, `tekst--size-${size}`, + `tekst--bleed-${bleed}`, ]} style={`--jdd-index: ${index}`} > diff --git a/src/back/routes/common/footer.css b/src/back/routes/common/footer.css index c0b6997..06f6949 100644 --- a/src/back/routes/common/footer.css +++ b/src/back/routes/common/footer.css @@ -51,11 +51,15 @@ footer { .footer__social_media_icons { display: flex; flex-flow: row wrap; + flex-wrap: row balance; flex-grow: 1; justify-content: space-between; + row-gap: 16px; + column-gap: 8px; a { padding: 2px 8px; + display: inline-flex; svg { width: 24px; @@ -66,6 +70,18 @@ footer { } } } + + @media (max-width: 800px) { + display: block; + text-align: center; + text-wrap: balance; + line-height: 40px; + + & > a { + display: inline; + text-decoration: none; + } + } } .footer__attribution { diff --git a/src/icons/mobilizon.svg b/src/icons/mobilizon.svg new file mode 100644 index 0000000..db5b3ef --- /dev/null +++ b/src/icons/mobilizon.svg @@ -0,0 +1,60 @@ + + + +