kuba/strona-czynna
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update all built-in components to the new gridlines

Browse Source
This commit is contained in:
Kuba Orlik 2026-05-26 14:51:32 +02:00
parent 2df4029268
commit 87933747e3
21 changed files with 351 additions and 257 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/back/html.tsx
View File

@ -11,6 +11,7 @@ const default_html_options: Partial<HTMLOptions> = {
showBottomNavbar: true, showBottomNavbar: true,
loadHamburgerMenu: true, loadHamburgerMenu: true,
loadSearchModal: true, loadSearchModal: true,
classes: ["grid-layout-main"],
}; };
export default function html({ export default function html({
@ -40,7 +41,7 @@ export default function html({
controllers.push("refresh-on-ts-changes"); controllers.push("refresh-on-ts-changes");
} }
const classes = (htmlOptions?.bodyClasses || []).join(" "); const classes = (htmlOptions?.bodyClasses || ["grid-layout-main"]).join(" ");
return tempstreamAsync /* HTML */ ` <!DOCTYPE html> return tempstreamAsync /* HTML */ ` <!DOCTYPE html>
<html <html

69
src/back/jdd-components/autoscrolling-images/autoscrolling-images.css
View File

@ -1,13 +1,18 @@
/* stylelint-disable no-descending-specificity */
.autoscrolling-images { .autoscrolling-images {
display: flex; display: grid;
grid-template-columns: subgrid;
grid-column: screen;
justify-content: center; justify-content: center;
margin: 2rem 0;
--gap-between-horizontal-images: 14px; --gap-between-horizontal-images: 14px;
} }
.autoscrolling-images-wrapper { .autoscrolling-images-wrapper {
display: grid; display: grid;
gap: 24px; width: 100%;
grid-template-columns: subgrid;
grid-column: screen;
row-gap: 16px;
} }
.autoscrolling-images__img-wrapper { .autoscrolling-images__img-wrapper {
@ -24,7 +29,7 @@
.autoscrolling-images__carousel-container { .autoscrolling-images__carousel-container {
position: relative; position: relative;
max-width: min(940px, calc(100dvw - 48px)); grid-column: main-column;
picture, picture,
img { img {
@ -54,26 +59,36 @@
} }
.autoscrolling-images__title-wrapper { .autoscrolling-images__title-wrapper {
max-width: 940px; display: grid;
display: flex; width: 100%;
justify-content: center; grid-column: content;
align-items: center; grid-template-columns: 1fr 100px;
text-align: center; column-gap: 16px;
}
.autoscrolling-images__title { .autoscrolling-images__title {
font-family: var(--font-headings); font-family: var(--font-headings);
font-size: 32px; font-size: 32px;
color: var(--color-brand-text-accent); color: var(--color-brand-text-accent);
margin: 0; margin: 0;
} text-align: left;
flex-basis: 200px;
}
.autoscrolling-images__arrow-carousel-container { .autoscrolling-images__arrow-carousel-container {
position: absolute; .autoscrolling-images__arrow-carousel {
top: -51px; display: grid;
right: -90px; height: 100%;
width: 92px; grid-template-rows: 1fr;
overflow-x: hidden; grid-template-columns: 1fr;
.autoscrolling-images__arrow-container {
display: none; /* to be overwritten in CSS within the generated HTML */
grid-row: 1/2;
grid-column: 1/2;
justify-content: space-between;
}
}
}
} }
.autoscrolling-images__arrow-carousel { .autoscrolling-images__arrow-carousel {
@ -193,11 +208,6 @@
animation-timing-function: linear; animation-timing-function: linear;
} }
.autoscrolling-images__carousel-container {
margin: 0;
max-width: calc(100cqw - 20px);
}
.autoscrolling-images__carousel-page { .autoscrolling-images__carousel-page {
display: flex; display: flex;
flex: none !important; flex: none !important;
@ -256,11 +266,6 @@
animation-timing-function: linear; animation-timing-function: linear;
} }
.autoscrolling-images__carousel-container {
margin: 0;
max-width: calc(100cqw - 20px);
}
.autoscrolling-images__carousel-page { .autoscrolling-images__carousel-page {
display: flex; display: flex;
flex: none !important; flex: none !important;

55
src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx
View File

@ -46,7 +46,10 @@ function renderimagePageArrows({
imagePages: Array<Array<Record<string, unknown>>>; imagePages: Array<Array<Record<string, unknown>>>;
}) { }) {
return ( return (
<div class="autoscrolling-images__arrow-container"> <div
class="autoscrolling-images__arrow-container"
data-page={pageIndex.toString()}
>
<label <label
for={`${radioButtonIdPrefix}-autoscrolling-images__radio-${ for={`${radioButtonIdPrefix}-autoscrolling-images__radio-${
pageIndex == 0 ? imagePages.length - 1 : pageIndex - 1 pageIndex == 0 ? imagePages.length - 1 : pageIndex - 1
@ -159,24 +162,30 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
> >
<style> <style>
{imagePages {imagePages
.map( .map((_, pageIndex) => {
(_, pageIndex) => const radio_id = `${radioButtonIdPrefix}-autoscrolling-images__radio-${pageIndex}`;
`#${radioButtonIdPrefix}-autoscrolling-images__radio-${pageIndex}:checked ~ .autoscrolling-images__imgs-carousel > .autoscrolling-images__carousel { return `#${radio_id}:checked ~ .autoscrolling-images__imgs-carousel > .autoscrolling-images__carousel {
transform: translateX(calc(${pageIndex} * (-100%))); transform: translateX(calc(${pageIndex} * (-100%)));
} }
#${radioButtonIdPrefix}-autoscrolling-images__radio-${pageIndex}:checked ~ .autoscrolling-images__arrow-carousel-container #${radio_id}:checked ~ .autoscrolling-images__arrow-carousel-container
> .autoscrolling-images__arrow-carousel { > .autoscrolling-images__arrow-carousel {
transform: translateX(calc(${pageIndex} * (-100%))); transform: translateX(calc(${pageIndex} * (-100%)));
} }
#${radioButtonIdPrefix}-autoscrolling-images__radio-${pageIndex}:checked ~ .autoscrolling-images__dots-container #${radio_id}:checked ~ .autoscrolling-images__dots-container
> label:nth-child(${pageIndex + 1}) { > label:nth-child(${pageIndex + 1}) {
background-color: var(--color-brand-accent); background-color: var(--color-brand-accent);
}` }
)
.autoscrolling-images:has(#${radio_id}:checked)
.autoscrolling-images__arrow-container[data-page="${pageIndex}"]{
display:flex;
}
`;
})
.join("\n")} .join("\n")}
</style> </style>
@ -186,6 +195,21 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
> >
<div class="autoscrolling-images__title-wrapper"> <div class="autoscrolling-images__title-wrapper">
<h2 class="autoscrolling-images__title">{title}</h2> <h2 class="autoscrolling-images__title">{title}</h2>
{imagePages.length > 1 ? (
<div class="autoscrolling-images__arrow-carousel-container">
<div class="autoscrolling-images__arrow-carousel">
{imagePages.map((_, pageIndex) =>
renderimagePageArrows({
pageIndex,
imagePages,
radioButtonIdPrefix,
})
)}
</div>
</div>
) : (
""
)}
</div> </div>
<div class="autoscrolling-images__carousel-container"> <div class="autoscrolling-images__carousel-container">
@ -202,21 +226,6 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
/> />
))} ))}
{imagePages.length > 1 ? (
<div class="autoscrolling-images__arrow-carousel-container">
<div class="autoscrolling-images__arrow-carousel">
{imagePages.map((_, pageIndex) =>
renderimagePageArrows({
pageIndex,
imagePages,
radioButtonIdPrefix,
})
)}
</div>
</div>
) : (
""
)}
<div class="autoscrolling-images__imgs-carousel"> <div class="autoscrolling-images__imgs-carousel">
<div <div
class="autoscrolling-images__carousel" class="autoscrolling-images__carousel"

27
src/back/jdd-components/code-snippet/code-snippet.css
View File

@ -1,22 +1,25 @@
.code-snippet { .code-snippet {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 16px 16px 16px;
h2 {
margin-top: 0;
}
} }
.code-snippet pre { .code-snippet pre {
margin: 0; margin: 0;
} }
.code-snippet__language-error { .code-snippet__language-error {
color: red; color: red;
font-size: 16px; font-size: 16px;
} }
.code-snippet__language { .code-snippet__language {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
margin: 0; margin: 0;
margin-top: 20px; margin-top: 20px;
gap: 8px; gap: 8px;
} }

1
src/back/jdd-components/dynamic-grid/dynamic-grid.css
View File

@ -1,6 +1,7 @@
.dynamic-grid-component { .dynamic-grid-component {
.dynamic-grid-title { .dynamic-grid-title {
text-align: center; text-align: center;
margin-top: 0;
} }
.tabs-menu { .tabs-menu {

37
src/back/jdd-components/header-with-image/header-with-image.css
View File

@ -1,6 +1,11 @@
.header-with-image { .header-with-image {
display: flex;
justify-content: center; justify-content: center;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
align-items: center;
gap: 10px;
grid-column: content;
color: var(--color-brand-text-accent-04); color: var(--color-brand-text-accent-04);
@ -9,16 +14,7 @@
margin: 0; margin: 0;
} }
.container { & > * {
max-width: 1210px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
align-items: center;
gap: 10px;
}
.container > * {
grid-column: 2/2; grid-column: 2/2;
} }
@ -29,7 +25,7 @@
picture { picture {
max-width: 100cqw; max-width: 100cqw;
width: 100%; width: 100% !important;
border-radius: 10px; border-radius: 10px;
img { img {
@ -38,11 +34,7 @@
} }
} }
.container > div { & > .img-container {
padding: 0 0 0px 24px;
}
.container > .img-container {
padding: 0; padding: 0;
} }
@ -92,10 +84,8 @@
@container (width < 1024px) { @container (width < 1024px) {
.header-with-image { .header-with-image {
.container { grid-template-columns: 1fr;
grid-template-columns: 1fr; gap: 0;
gap: 0;
}
.img-container { .img-container {
grid-column: 1/1; grid-column: 1/1;
@ -104,13 +94,12 @@
margin-top: 16px; margin-top: 16px;
} }
.container > div { & > div {
grid-column: 1/1; grid-column: 1/1;
padding: 0 16px;
max-width: 650px; max-width: 650px;
} }
.container > .img-container { & > .img-container {
padding: 0 16px; padding: 0 16px;
} }

39
src/back/jdd-components/header-with-image/header-with-image.jdd.tsx
View File

@ -24,32 +24,31 @@ export class HeaderWithImage extends Component<typeof component_arguments> {
toHTML({ toHTML({
args: { title, content, image_with_alt, button }, args: { title, content, image_with_alt, button },
jdd_context: { render_markdown, render_image, language }, jdd_context: { render_markdown, render_image, language },
classes,
}: ComponentToHTMLArgs<typeof component_arguments>): FlatTemplatable { }: ComponentToHTMLArgs<typeof component_arguments>): FlatTemplatable {
const buttonText = button.text.toUpperCase(); const buttonText = button.text.toUpperCase();
const titleUpperCase = title.toUpperCase(); const titleUpperCase = title.toUpperCase();
return ( return (
<div class="header-with-image"> <div class={["header-with-image", ...classes]}>
<div class="container"> <div class="img-container">
<div class="img-container"> {render_image(image_with_alt.image, {
{render_image(image_with_alt.image, { container: { width: 600, height: 450, objectFit: "contain" },
container: { width: 600, height: 450, objectFit: "contain" }, alt: image_with_alt.alt,
alt: image_with_alt.alt, // crop: { width: 600, height: 450 },
// crop: { width: 600, height: 450 }, })}
})}
</div>
<div class="title-wrapper">
<h2 class="title">{titleUpperCase}</h2>
</div>
<div class="content">{render_markdown(language, content)}</div>
{button.text === "" ? null : (
<div class="button-container">
<a class="button" href={button.link}>
{buttonText}
</a>
</div>
)}
</div> </div>
<div class="title-wrapper">
<h2 class="title">{titleUpperCase}</h2>
</div>
<div class="content">{render_markdown(language, content)}</div>
{button.text === "" ? null : (
<div class="button-container">
<a class="button" href={button.link}>
{buttonText}
</a>
</div>
)}
</div> </div>
); );
} }

1
src/back/jdd-components/hero/hero.css
View File

@ -1,5 +1,4 @@
.hero { .hero {
padding: 16px;
text-align: center; text-align: center;
h1 { h1 {

8
src/back/jdd-components/hero/hero.jdd.tsx
View File

@ -4,7 +4,7 @@ import type {
ExtractStructuredComponentArgumentsParsed, ExtractStructuredComponentArgumentsParsed,
JDDContext, JDDContext,
} from "@sealcode/jdd"; } from "@sealcode/jdd";
import { Component, ComponentArguments } from "@sealcode/jdd"; import { Component, ComponentArguments, insert_nbsp } from "@sealcode/jdd";
import { button, button_variants } from "src/back/elements/button.js"; import { button, button_variants } from "src/back/elements/button.js";
const component_arguments = { const component_arguments = {
@ -48,8 +48,10 @@ export class Hero extends Component<typeof component_arguments> {
classes.push(`hero--color-${color}`); classes.push(`hero--color-${color}`);
return ( return (
<div class={["hero", ...classes]}> <div class={["hero", ...classes]}>
<h1 class={[`hero__title--color-${title_color}`]}>{title}</h1> <h1 class={[`hero__title--color-${title_color}`]}>
<span class={["hero__subtitle"]}>{subtitle}</span> {insert_nbsp(title)}
</h1>
<span class={["hero__subtitle"]}>{insert_nbsp(subtitle)}</span>
<div class={["hero__content"]}>{render_markdown(language, content)}</div> <div class={["hero__content"]}>{render_markdown(language, content)}</div>
<div class={["hero__buttons"]}> <div class={["hero__buttons"]}>
{buttons.map((button_data) => button(button_data))} {buttons.map((button_data) => button(button_data))}

4
src/back/jdd-components/horizontal-gallery/horizontal-gallery.css
View File

@ -1,6 +1,10 @@
.horizontal-gallery { .horizontal-gallery {
--max-image-width: 600px; --max-image-width: 600px;
&[data-bleed="true"] {
grid-column: bleed;
}
.horizontal-gallery__top-bar { .horizontal-gallery__top-bar {
display: flex; display: flex;
gap: 16px; gap: 16px;

4
src/back/jdd-components/horizontal-gallery/horizontal-gallery.jdd.tsx
View File

@ -16,6 +16,7 @@ const component_arguments = {
alt: new ComponentArguments.ShortText(), alt: new ComponentArguments.ShortText(),
}) })
), ),
bleed: new ComponentArguments.Boolean(),
} as const; } as const;
export class HorizontalGallery extends Component<typeof component_arguments> { export class HorizontalGallery extends Component<typeof component_arguments> {
@ -31,7 +32,7 @@ export class HorizontalGallery extends Component<typeof component_arguments> {
} }
toHTML({ toHTML({
args: { title, images }, args: { title, images, bleed },
classes, classes,
jdd_context: { render_image }, jdd_context: { render_image },
index, index,
@ -39,6 +40,7 @@ export class HorizontalGallery extends Component<typeof component_arguments> {
return ( return (
<div <div
class={["horizontal-gallery", ...classes]} class={["horizontal-gallery", ...classes]}
data-bleed={bleed ? "true" : "false"}
style={`--jdd-index: ${index}`} style={`--jdd-index: ${index}`}
> >
{horizontalScroller({ {horizontalScroller({

182
src/back/jdd-components/ordered-blocks/ordered-blocks.css
View File

@ -1,184 +1,184 @@
.ordered-blocks { .ordered-blocks {
padding-bottom: 96px; padding-bottom: 96px;
position: relative; position: relative;
} }
.ordered-blocks ol { .ordered-blocks ol {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
} }
.ordered-blocks__body { .ordered-blocks__body {
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
.ordered-blocks__article-list { .ordered-blocks__article-list {
display: grid; margin: 0;
grid-template-columns: repeat(auto-fit, minmax(36ch, 1fr)); display: grid;
padding: 0 24px; grid-template-columns: repeat(auto-fit, minmax(36ch, 1fr));
padding: 0 24px;
} }
.ordered-blocks__buttons { .ordered-blocks__buttons {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 24px; gap: 24px;
} }
.ordered-blocks__button-wrapper { .ordered-blocks__button-wrapper {
text-align: center; text-align: center;
} }
@container (max-width: 400px) { @container (max-width: 400px) {
.ordered-blocks__article-list { .ordered-blocks__article-list {
display: block; display: block;
max-width: 100%; max-width: 100%;
padding: 0; padding: 0;
margin: auto; margin: auto;
} }
} }
.ordered-blocks .article-list-item { .ordered-blocks .article-list-item {
background-color: var(--main); background-color: var(--main);
padding: 0 24px; padding: 0 24px;
padding-top: 24px; padding-top: 24px;
} }
.ordered-blocks .article-list-item__number { .ordered-blocks .article-list-item__number {
display: block; display: block;
font-family: var(--font-sans-serif); font-family: var(--font-sans-serif);
font-feature-settings: "tnum"; font-feature-settings: "tnum";
font-weight: 800; font-weight: 800;
font-size: 24px; font-size: 24px;
line-height: 24px; line-height: 24px;
padding-bottom: calc(12px - 1px); padding-bottom: calc(12px - 1px);
border-bottom: 1px solid #000000; border-bottom: 1px solid #000000;
margin-bottom: 12px; margin-bottom: 12px;
} }
.ordered-blocks .article-list-item__image { .ordered-blocks .article-list-item__image {
padding-bottom: calc(24px - 1px); padding-bottom: calc(24px - 1px);
border-bottom: 1px solid #000000; border-bottom: 1px solid #000000;
margin-bottom: 12px; margin-bottom: 12px;
} }
.ordered-blocks .article-list-item__image img { .ordered-blocks .article-list-item__image img {
height: 60px; height: 60px;
} }
.ordered-blocks .article-list-item--above .article-list-item__image { .ordered-blocks .article-list-item--above .article-list-item__image {
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.ordered-blocks .article-list-item h3 { .ordered-blocks .article-list-item h3 {
font-size: 20px; font-size: 20px;
line-height: 24px; line-height: 24px;
font-family: var(--font-slab-serif); font-family: var(--font-slab-serif);
font-weight: 400; font-weight: 400;
} }
.ordered-blocks .article-list-item p { .ordered-blocks .article-list-item p {
font-family: var(--font-sans-serif); font-family: var(--font-sans-serif);
font-size: 15px; font-size: 15px;
padding-top: 24px; padding-top: 24px;
} }
.ordered-blocks .article-list-item--above .header { .ordered-blocks .article-list-item--above .header {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
padding-bottom: calc(9.6px - 1px); padding-bottom: calc(9.6px - 1px);
border-bottom: 1px solid #000000; border-bottom: 1px solid #000000;
margin-bottom: 12px; margin-bottom: 12px;
align-items: center; align-items: center;
} }
.ordered-blocks .article-list-item--purple .article-list-item__image { .ordered-blocks .article-list-item--purple .article-list-item__image {
border-color: hsl(287.3, 13.1%, 50.8%); border-color: hsl(287.3, 13.1%, 50.8%);
} }
.ordered-blocks .article-list-item--above .article-list-item__number { .ordered-blocks .article-list-item--above .article-list-item__number {
padding-bottom: 0; padding-bottom: 0;
border-bottom: none; border-bottom: none;
margin-bottom: 0; margin-bottom: 0;
} }
.ordered-blocks .article-list-item--above p { .ordered-blocks .article-list-item--above p {
padding-top: 0; padding-top: 0;
} }
@media (max-width: 460px) { @media (max-width: 460px) {
.ordered-blocks .article-list-item--above .article-list-item__number { .ordered-blocks .article-list-item--above .article-list-item__number {
display: block; display: block;
padding-left: 0; padding-left: 0;
border-bottom: 1px solid #000000; border-bottom: 1px solid #000000;
padding-bottom: calc(12px - 1px); padding-bottom: calc(12px - 1px);
margin-bottom: 12px; margin-bottom: 12px;
} }
.ordered-blocks .article-list-item--above .header { .ordered-blocks .article-list-item--above .header {
display: block; display: block;
border: none; border: none;
} }
.ordered-blocks .article-list-item--above .header h3 { .ordered-blocks .article-list-item--above .header h3 {
margin-left: 0; margin-left: 0;
padding-top: 0; padding-top: 0;
} }
} }
.ordered-blocks .article-list-item--purple .header { .ordered-blocks .article-list-item--purple .header {
border-color: hsl(287.3, 13.1%, 50.8%); border-color: hsl(287.3, 13.1%, 50.8%);
} }
.ordered-blocks .article-list-item--purple .article-list-item__number { .ordered-blocks .article-list-item--purple .article-list-item__number {
color: var(--main-bg-text); color: var(--main-bg-text);
border-color: hsl(287.3, 13.1%, 50.8%); border-color: hsl(287.3, 13.1%, 50.8%);
} }
.ordered-blocks .article-list-item--purple h3 { .ordered-blocks .article-list-item--purple h3 {
color: var(--main-bg-text); color: var(--main-bg-text);
} }
.ordered-blocks .article-list-item--purple p { .ordered-blocks .article-list-item--purple p {
color: hsl(286.4, 15.5%, 83.2%); color: hsl(286.4, 15.5%, 83.2%);
} }
.ordered-blocks .article-list-item--wild-sand { .ordered-blocks .article-list-item--wild-sand {
background: none; background: none;
} }
.ordered-blocks .article-list-item--wild-sand .header { .ordered-blocks .article-list-item--wild-sand .header {
border-color: var(--alto-gray); border-color: var(--alto-gray);
} }
.ordered-blocks .article-list-item--wild-sand .article-list-item__number { .ordered-blocks .article-list-item--wild-sand .article-list-item__number {
color: var(--secondary-dark-01); color: var(--secondary-dark-01);
border-color: var(--alto-gray); border-color: var(--alto-gray);
} }
.ordered-blocks .article-list-item--wild-sand .article-list-item__image { .ordered-blocks .article-list-item--wild-sand .article-list-item__image {
border-color: var(--alto-gray); border-color: var(--alto-gray);
} }
.ordered-blocks .article-list-item--wild-sand h3 { .ordered-blocks .article-list-item--wild-sand h3 {
color: var(--wild-sand-bg-text); color: var(--wild-sand-bg-text);
} }
.ordered-blocks .article-list-item--above .header h3 { .ordered-blocks .article-list-item--above .header h3 {
padding-top: 2.4px; padding-top: 2.4px;
margin-left: 12px; margin-left: 12px;
} }
.ordered-blocks .article-list-item--wild-sand p { .ordered-blocks .article-list-item--wild-sand p {
color: var(--dove-gray); color: var(--dove-gray);
} }
.ordered-blocks .article-list-item .button { .ordered-blocks .article-list-item .button {
margin: 6px auto; margin: 6px auto;
display: block; display: block;
} }

29
src/back/jdd-components/ordered-pictogram-tiles/ordered-pictogram-tiles.css
View File

@ -5,8 +5,8 @@
grid-column-gap: 2rem; grid-column-gap: 2rem;
grid-auto-rows: minmax(7rem, auto); grid-auto-rows: minmax(7rem, auto);
grid-row-gap: 1rem; grid-row-gap: 1rem;
margin: 1rem auto; margin: 0 auto;
padding: 0 1rem; padding: 0;
} }
.pictogram-tiles__tile { .pictogram-tiles__tile {
@ -140,21 +140,22 @@
@container (max-width: 880px) { @container (max-width: 880px) {
.pictogram-tiles { .pictogram-tiles {
display: block; display: flex;
grid-template-columns: auto; flex-flow: column;
} row-gap: var(--row-gap);
.pictogram-tiles__tile { .pictogram-tiles__tile {
max-width: 21rem; max-width: 21rem;
margin: 0 auto; margin: 0 auto;
} }
.pictogram-tiles__tile:nth-child(odd) { .pictogram-tiles__tile:nth-child(odd) {
grid-column: auto; grid-column: auto;
} }
.pictogram-tiles__tile:nth-child(even) { .pictogram-tiles__tile:nth-child(even) {
grid-column: auto; grid-column: auto;
}
} }
} }

18
src/back/jdd-components/split-view/split-view.css
View File

@ -1,14 +1,14 @@
.split-view { .split-view {
width: 100%; width: 100%;
border: 1px solid red;
.split-view__wrapper { display: grid;
grid-template-columns: subgrid;
@container (max-width: 640px) {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: column;
gap: 24px; gap: var(--row-gap);
@container (max-width: 640px) {
flex-flow: column;
}
} }
.split-view__half { .split-view__half {
@ -19,5 +19,9 @@
flex-flow: row; flex-flow: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&:nth-child(2) {
grid-column: right-half;
}
} }
} }

24
src/back/jdd-components/split-view/split-view.jdd.tsx
View File

@ -40,19 +40,17 @@ export class SplitView extends Component<typeof component_arguments> {
}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> { }: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
return ( return (
<div class={["split-view", ...classes]}> <div class={["split-view", ...classes]}>
<div class="split-view__wrapper"> <div class="split-view__half">
<div class="split-view__half"> {ComponentArguments.NestedComponent.render({
{ComponentArguments.NestedComponent.render({ jdd_context,
jdd_context, data: component1 as Record<string, unknown>,
data: component1 as Record<string, unknown>, })}
})} </div>
</div> <div class="split-view__half">
<div class="split-view__half"> {ComponentArguments.NestedComponent.render({
{ComponentArguments.NestedComponent.render({ jdd_context,
jdd_context, data: component2 as Record<string, unknown>,
data: component2 as Record<string, unknown>, })}
})}
</div>
</div> </div>
</div> </div>
); );

9
src/back/jdd-components/tekst/tekst.css
View File

@ -2,7 +2,14 @@
font-family: var(--font-long-text); font-family: var(--font-long-text);
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
padding: 16px;
p {
margin: 0;
}
p + p {
margin-top: 16px;
}
&.tekst--color-transparent { &.tekst--color-transparent {
background-color: transparent; background-color: transparent;

4
src/back/jdd-components/video/video.css
View File

@ -2,4 +2,8 @@
display: flex; display: flex;
flex-flow: column; flex-flow: column;
align-items: center; align-items: center;
video {
max-width: 100cqw;
}
} }

5
src/back/jdd-components/video/video.jdd.tsx
View File

@ -23,7 +23,10 @@ export class Video extends Component<typeof component_arguments> {
{file instanceof PathFilePointer ? ( {file instanceof PathFilePointer ? (
<video <video
controls controls
style={`max-width: ${max_width}px; max-height: ${max_height}px`} style={[
`${max_width ? `max-width: min(${max_width}px, 100cqw);` : ""}`,
`${max_height ? `max-height: min(${max_height}px, 80cqh);` : ""}`,
].join("; ")}
> >
<source src={file.getURL()} type={file.mimetype} /> <source src={file.getURL()} type={file.mimetype} />
Your browser does not support video —{" "} Your browser does not support video —{" "}

4
src/back/routes/middlewares/customUrlView.tsx
View File

@ -62,9 +62,9 @@ export const customUrlView =
showFooter: !hideNavigation, showFooter: !hideNavigation,
}, },
body: ( body: (
<main class="custom-page jdd-outer-container"> <main class="custom-page">
{heading?.trim() ? <h1>{heading}</h1> : ""} {heading?.trim() ? <h1>{heading}</h1> : ""}
<div class="jdd-container">{jdd.render()}</div> {jdd.render()}
</main> </main>
), ),
makeHead: (...args) => makeHead: (...args) =>

3
src/front/controllers.ts
View File

@ -37,9 +37,6 @@ application.register("jdd-table-paste", JddTablePaste);
import { default as JsonEditor } from "./../../node_modules/@sealcode/jdd-editor/src/controllers/json-editor.stimulus.js"; import { default as JsonEditor } from "./../../node_modules/@sealcode/jdd-editor/src/controllers/json-editor.stimulus.js";
application.register("json-editor", JsonEditor); application.register("json-editor", JsonEditor);
import { default as MarkdownTextarea } from "./../../node_modules/@sealcode/jdd-editor/src/controllers/markdown-textarea.stimulus.js";
application.register("markdown-textarea", MarkdownTextarea);
import { default as RefreshOnTsChanges } from "./../../node_modules/@sealcode/jdd-editor/src/controllers/refresh-on-ts-changes.stimulus.js"; import { default as RefreshOnTsChanges } from "./../../node_modules/@sealcode/jdd-editor/src/controllers/refresh-on-ts-changes.stimulus.js";
application.register("refresh-on-ts-changes", RefreshOnTsChanges); application.register("refresh-on-ts-changes", RefreshOnTsChanges);

82
src/main.css
View File

@ -8,12 +8,82 @@ html {
font-size: 14px; font-size: 14px;
} }
body { .grid-layout-main {
max-width: 1024px; display: grid;
margin: 1rem auto; container-type: inline-size;
row-gap: var(--row-gap);
grid-template-columns:
[screen-start] var(--screen-padding)
[totalbleed-start] 1fr [bleed-start] var(--bleed-outer-width)
[main-column-start] var(--column-padding)
[content-start left-half-start] var(--half-width)
[left-half-end] var(--margin-between-halves) [right-half-start] var(--half-width)
[content-end right-half-end] var(--column-padding)
[main-column-end] var(--bleed-outer-width)
[bleed-end] 1fr [totalbleed-end] var(--screen-padding)
[screen-end];
margin: 0;
padding: 0;
--total-available-space: 100cqw;
--row-gap: 16px;
--column-padding: 16px;
--target-column-width: 800px;
--screen-padding: 16px;
--margin-between-halves: 8px;
--total-horizontal-spacing: 2 * var(--screen-padding) - 2 * var(--column-padding) -
var(--margin-between-halves);
--half-width: min(
calc((var(--total-available-space) - var(--total-horizontal-spacing)) / 2),
calc(
(
var(--target-column-width) - var(--margin-between-halves) -
var(--column-padding) * 2
) /
2
)
);
--bleed-outer-width: min(
150px,
max(
0px,
calc(
(
var(--total-available-space) - var(--target-column-width) -
var(--total-horizontal-spacing)
) /
2
)
)
);
background: var(--color-brand-text-bg); background: var(--color-brand-text-bg);
color: var(--color-brand-text-fg); color: var(--color-brand-text-fg);
padding: 1rem;
@container (max-width: 800px) {
--screen-padding: 8px;
}
@container (max-width: 600px) {
--screen-padding: 0px;
}
@container (max-width: 400px) {
--column-padding: 8px;
}
& > * {
grid-column: content;
}
}
.subgrid-layout {
display: grid;
grid-template-columns: subgrid;
grid-column: screen-start / screen-end;
row-gap: var(--row-gap);
& > * {
grid-column: main-column-content-start / main-column-content-end;
}
} }
.delete-button { .delete-button {
@ -57,10 +127,6 @@ a {
gap: 16px; gap: 16px;
} }
.jdd-outer-container {
container-type: inline-size;
}
h1, h1,
h2, h2,
h3, h3,