Update all built-in components to the new gridlines
This commit is contained in:
parent
2df4029268
commit
87933747e3
@ -11,6 +11,7 @@ const default_html_options: Partial<HTMLOptions> = {
|
||||
showBottomNavbar: true,
|
||||
loadHamburgerMenu: true,
|
||||
loadSearchModal: true,
|
||||
classes: ["grid-layout-main"],
|
||||
};
|
||||
|
||||
export default function html({
|
||||
@ -40,7 +41,7 @@ export default function html({
|
||||
controllers.push("refresh-on-ts-changes");
|
||||
}
|
||||
|
||||
const classes = (htmlOptions?.bodyClasses || []).join(" ");
|
||||
const classes = (htmlOptions?.bodyClasses || ["grid-layout-main"]).join(" ");
|
||||
|
||||
return tempstreamAsync /* HTML */ ` <!DOCTYPE html>
|
||||
<html
|
||||
|
||||
@ -1,13 +1,18 @@
|
||||
/* stylelint-disable no-descending-specificity */
|
||||
.autoscrolling-images {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
grid-column: screen;
|
||||
justify-content: center;
|
||||
margin: 2rem 0;
|
||||
--gap-between-horizontal-images: 14px;
|
||||
}
|
||||
|
||||
.autoscrolling-images-wrapper {
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
width: 100%;
|
||||
grid-template-columns: subgrid;
|
||||
grid-column: screen;
|
||||
row-gap: 16px;
|
||||
}
|
||||
|
||||
.autoscrolling-images__img-wrapper {
|
||||
@ -24,7 +29,7 @@
|
||||
|
||||
.autoscrolling-images__carousel-container {
|
||||
position: relative;
|
||||
max-width: min(940px, calc(100dvw - 48px));
|
||||
grid-column: main-column;
|
||||
|
||||
picture,
|
||||
img {
|
||||
@ -54,26 +59,36 @@
|
||||
}
|
||||
|
||||
.autoscrolling-images__title-wrapper {
|
||||
max-width: 940px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-column: content;
|
||||
grid-template-columns: 1fr 100px;
|
||||
column-gap: 16px;
|
||||
|
||||
.autoscrolling-images__title {
|
||||
.autoscrolling-images__title {
|
||||
font-family: var(--font-headings);
|
||||
font-size: 32px;
|
||||
color: var(--color-brand-text-accent);
|
||||
margin: 0;
|
||||
}
|
||||
text-align: left;
|
||||
flex-basis: 200px;
|
||||
}
|
||||
|
||||
.autoscrolling-images__arrow-carousel-container {
|
||||
position: absolute;
|
||||
top: -51px;
|
||||
right: -90px;
|
||||
width: 92px;
|
||||
overflow-x: hidden;
|
||||
.autoscrolling-images__arrow-carousel-container {
|
||||
.autoscrolling-images__arrow-carousel {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
grid-template-rows: 1fr;
|
||||
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 {
|
||||
@ -193,11 +208,6 @@
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
.autoscrolling-images__carousel-container {
|
||||
margin: 0;
|
||||
max-width: calc(100cqw - 20px);
|
||||
}
|
||||
|
||||
.autoscrolling-images__carousel-page {
|
||||
display: flex;
|
||||
flex: none !important;
|
||||
@ -256,11 +266,6 @@
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
.autoscrolling-images__carousel-container {
|
||||
margin: 0;
|
||||
max-width: calc(100cqw - 20px);
|
||||
}
|
||||
|
||||
.autoscrolling-images__carousel-page {
|
||||
display: flex;
|
||||
flex: none !important;
|
||||
|
||||
@ -46,7 +46,10 @@ function renderimagePageArrows({
|
||||
imagePages: Array<Array<Record<string, unknown>>>;
|
||||
}) {
|
||||
return (
|
||||
<div class="autoscrolling-images__arrow-container">
|
||||
<div
|
||||
class="autoscrolling-images__arrow-container"
|
||||
data-page={pageIndex.toString()}
|
||||
>
|
||||
<label
|
||||
for={`${radioButtonIdPrefix}-autoscrolling-images__radio-${
|
||||
pageIndex == 0 ? imagePages.length - 1 : pageIndex - 1
|
||||
@ -159,24 +162,30 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
|
||||
>
|
||||
<style>
|
||||
{imagePages
|
||||
.map(
|
||||
(_, pageIndex) =>
|
||||
`#${radioButtonIdPrefix}-autoscrolling-images__radio-${pageIndex}:checked ~ .autoscrolling-images__imgs-carousel > .autoscrolling-images__carousel {
|
||||
.map((_, pageIndex) => {
|
||||
const radio_id = `${radioButtonIdPrefix}-autoscrolling-images__radio-${pageIndex}`;
|
||||
return `#${radio_id}:checked ~ .autoscrolling-images__imgs-carousel > .autoscrolling-images__carousel {
|
||||
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 {
|
||||
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}) {
|
||||
background-color: var(--color-brand-accent);
|
||||
|
||||
}`
|
||||
)
|
||||
}
|
||||
|
||||
.autoscrolling-images:has(#${radio_id}:checked)
|
||||
.autoscrolling-images__arrow-container[data-page="${pageIndex}"]{
|
||||
display:flex;
|
||||
}
|
||||
`;
|
||||
})
|
||||
.join("\n")}
|
||||
</style>
|
||||
|
||||
@ -186,6 +195,21 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
|
||||
>
|
||||
<div class="autoscrolling-images__title-wrapper">
|
||||
<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 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__carousel"
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
.code-snippet {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 16px 16px 16px;
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.code-snippet pre {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
.dynamic-grid-component {
|
||||
.dynamic-grid-title {
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.tabs-menu {
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
.header-with-image {
|
||||
display: flex;
|
||||
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);
|
||||
|
||||
@ -9,16 +14,7 @@
|
||||
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;
|
||||
}
|
||||
|
||||
@ -29,7 +25,7 @@
|
||||
|
||||
picture {
|
||||
max-width: 100cqw;
|
||||
width: 100%;
|
||||
width: 100% !important;
|
||||
border-radius: 10px;
|
||||
|
||||
img {
|
||||
@ -38,11 +34,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.container > div {
|
||||
padding: 0 0 0px 24px;
|
||||
}
|
||||
|
||||
.container > .img-container {
|
||||
& > .img-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -92,10 +84,8 @@
|
||||
|
||||
@container (width < 1024px) {
|
||||
.header-with-image {
|
||||
.container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.img-container {
|
||||
grid-column: 1/1;
|
||||
@ -104,13 +94,12 @@
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.container > div {
|
||||
& > div {
|
||||
grid-column: 1/1;
|
||||
padding: 0 16px;
|
||||
max-width: 650px;
|
||||
}
|
||||
|
||||
.container > .img-container {
|
||||
& > .img-container {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
|
||||
@ -24,13 +24,13 @@ export class HeaderWithImage extends Component<typeof component_arguments> {
|
||||
toHTML({
|
||||
args: { title, content, image_with_alt, button },
|
||||
jdd_context: { render_markdown, render_image, language },
|
||||
classes,
|
||||
}: ComponentToHTMLArgs<typeof component_arguments>): FlatTemplatable {
|
||||
const buttonText = button.text.toUpperCase();
|
||||
const titleUpperCase = title.toUpperCase();
|
||||
|
||||
return (
|
||||
<div class="header-with-image">
|
||||
<div class="container">
|
||||
<div class={["header-with-image", ...classes]}>
|
||||
<div class="img-container">
|
||||
{render_image(image_with_alt.image, {
|
||||
container: { width: 600, height: 450, objectFit: "contain" },
|
||||
@ -50,7 +50,6 @@ export class HeaderWithImage extends Component<typeof component_arguments> {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
.hero {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
|
||||
@ -4,7 +4,7 @@ import type {
|
||||
ExtractStructuredComponentArgumentsParsed,
|
||||
JDDContext,
|
||||
} 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";
|
||||
|
||||
const component_arguments = {
|
||||
@ -48,8 +48,10 @@ export class Hero extends Component<typeof component_arguments> {
|
||||
classes.push(`hero--color-${color}`);
|
||||
return (
|
||||
<div class={["hero", ...classes]}>
|
||||
<h1 class={[`hero__title--color-${title_color}`]}>{title}</h1>
|
||||
<span class={["hero__subtitle"]}>{subtitle}</span>
|
||||
<h1 class={[`hero__title--color-${title_color}`]}>
|
||||
{insert_nbsp(title)}
|
||||
</h1>
|
||||
<span class={["hero__subtitle"]}>{insert_nbsp(subtitle)}</span>
|
||||
<div class={["hero__content"]}>{render_markdown(language, content)}</div>
|
||||
<div class={["hero__buttons"]}>
|
||||
{buttons.map((button_data) => button(button_data))}
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
.horizontal-gallery {
|
||||
--max-image-width: 600px;
|
||||
|
||||
&[data-bleed="true"] {
|
||||
grid-column: bleed;
|
||||
}
|
||||
|
||||
.horizontal-gallery__top-bar {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
|
||||
@ -16,6 +16,7 @@ const component_arguments = {
|
||||
alt: new ComponentArguments.ShortText(),
|
||||
})
|
||||
),
|
||||
bleed: new ComponentArguments.Boolean(),
|
||||
} as const;
|
||||
|
||||
export class HorizontalGallery extends Component<typeof component_arguments> {
|
||||
@ -31,7 +32,7 @@ export class HorizontalGallery extends Component<typeof component_arguments> {
|
||||
}
|
||||
|
||||
toHTML({
|
||||
args: { title, images },
|
||||
args: { title, images, bleed },
|
||||
classes,
|
||||
jdd_context: { render_image },
|
||||
index,
|
||||
@ -39,6 +40,7 @@ export class HorizontalGallery extends Component<typeof component_arguments> {
|
||||
return (
|
||||
<div
|
||||
class={["horizontal-gallery", ...classes]}
|
||||
data-bleed={bleed ? "true" : "false"}
|
||||
style={`--jdd-index: ${index}`}
|
||||
>
|
||||
{horizontalScroller({
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
}
|
||||
|
||||
.ordered-blocks__article-list {
|
||||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(36ch, 1fr));
|
||||
padding: 0 24px;
|
||||
@ -38,7 +39,6 @@
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.ordered-blocks .article-list-item {
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
grid-column-gap: 2rem;
|
||||
grid-auto-rows: minmax(7rem, auto);
|
||||
grid-row-gap: 1rem;
|
||||
margin: 1rem auto;
|
||||
padding: 0 1rem;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile {
|
||||
@ -140,9 +140,9 @@
|
||||
|
||||
@container (max-width: 880px) {
|
||||
.pictogram-tiles {
|
||||
display: block;
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
row-gap: var(--row-gap);
|
||||
|
||||
.pictogram-tiles__tile {
|
||||
max-width: 21rem;
|
||||
@ -156,6 +156,7 @@
|
||||
.pictogram-tiles__tile:nth-child(even) {
|
||||
grid-column: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-width: 440px) {
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
.split-view {
|
||||
width: 100%;
|
||||
border: 1px solid red;
|
||||
|
||||
.split-view__wrapper {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
gap: 24px;
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
|
||||
@container (max-width: 640px) {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
gap: var(--row-gap);
|
||||
}
|
||||
|
||||
.split-view__half {
|
||||
@ -19,5 +19,9 @@
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:nth-child(2) {
|
||||
grid-column: right-half;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -40,7 +40,6 @@ export class SplitView extends Component<typeof component_arguments> {
|
||||
}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
|
||||
return (
|
||||
<div class={["split-view", ...classes]}>
|
||||
<div class="split-view__wrapper">
|
||||
<div class="split-view__half">
|
||||
{ComponentArguments.NestedComponent.render({
|
||||
jdd_context,
|
||||
@ -54,7 +53,6 @@ export class SplitView extends Component<typeof component_arguments> {
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,14 @@
|
||||
font-family: var(--font-long-text);
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
padding: 16px;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p + p {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
&.tekst--color-transparent {
|
||||
background-color: transparent;
|
||||
|
||||
@ -2,4 +2,8 @@
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
|
||||
video {
|
||||
max-width: 100cqw;
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,7 +23,10 @@ export class Video extends Component<typeof component_arguments> {
|
||||
{file instanceof PathFilePointer ? (
|
||||
<video
|
||||
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} />
|
||||
Your browser does not support video —{" "}
|
||||
|
||||
@ -62,9 +62,9 @@ export const customUrlView =
|
||||
showFooter: !hideNavigation,
|
||||
},
|
||||
body: (
|
||||
<main class="custom-page jdd-outer-container">
|
||||
<main class="custom-page">
|
||||
{heading?.trim() ? <h1>{heading}</h1> : ""}
|
||||
<div class="jdd-container">{jdd.render()}</div>
|
||||
{jdd.render()}
|
||||
</main>
|
||||
),
|
||||
makeHead: (...args) =>
|
||||
|
||||
@ -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";
|
||||
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";
|
||||
application.register("refresh-on-ts-changes", RefreshOnTsChanges);
|
||||
|
||||
|
||||
82
src/main.css
82
src/main.css
@ -8,12 +8,82 @@ html {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 1024px;
|
||||
margin: 1rem auto;
|
||||
.grid-layout-main {
|
||||
display: grid;
|
||||
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);
|
||||
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 {
|
||||
@ -57,10 +127,6 @@ a {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.jdd-outer-container {
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user