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

Compare commits

base: kuba:36c6f1ff3507dfffb109f22d8dbe0414c3a3f31c
Branches Tags
kuba:master
..
compare: kuba:5e34d0d62630201469680813116819c47c7c521a
Branches Tags
kuba:master

No commits in common. "36c6f1ff3507dfffb109f22d8dbe0414c3a3f31c" and "5e34d0d62630201469680813116819c47c7c521a" have entirely different histories.
36c6f1ff35 ... 5e34d0d626

24 changed files with 255 additions and 444 deletions
Show Stats Expand all files Collapse all files

2
src/back/app.ts
View File

@ -75,7 +75,7 @@ export default class TheApp extends App {
}, },
}; };
manifest = { manifest = {
name: "Strona Czynna", name: "Strona Czynna — nieformalna grupa aktywistyczna",
logo: locreq.resolve("assets/logotyp.svg"), logo: locreq.resolve("assets/logotyp.svg"),
version: "0.0.1", version: "0.0.1",
default_language: "en", default_language: "en",

3
src/back/defaultHead.tsx
View File

@ -25,8 +25,7 @@ export function defaultHead({
description: string; description: string;
}): JSX.Element | Readable { }): JSX.Element | Readable {
const origin = ctx.URL.origin; const origin = ctx.URL.origin;
return tempstream /* HTML */ `<meta charset="utf-8" /> return tempstream /* HTML */ `<meta charset="utf-8" /> <title>${title}</title>
<title>${title} — Grupa aktywistyczna Poznań</title>
${SCAN_A11Y ? `<link rel="stylesheet" href="/dist/a11y.css/a11y-en.css">` : ""} ${SCAN_A11Y ? `<link rel="stylesheet" href="/dist/a11y.css/a11y-en.css">` : ""}
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

6
src/back/html.tsx
View File

@ -5,14 +5,12 @@ import { tempstreamAsync } from "tempstream";
import { DEFAULT_HTML_LANG } from "./config.js"; import { DEFAULT_HTML_LANG } from "./config.js";
import { defaultHead } from "./defaultHead.js"; import { defaultHead } from "./defaultHead.js";
import { default_navbar } from "./routes/common/navbar.js"; import { default_navbar } from "./routes/common/navbar.js";
import footer from "./routes/common/footer.js";
const default_html_options: Partial<HTMLOptions> = { const default_html_options: Partial<HTMLOptions> = {
showFooter: true, showFooter: true,
showBottomNavbar: true, showBottomNavbar: true,
loadHamburgerMenu: true, loadHamburgerMenu: true,
loadSearchModal: true, loadSearchModal: true,
classes: ["grid-layout-main"],
}; };
export default function html({ export default function html({
@ -42,7 +40,7 @@ export default function html({
controllers.push("refresh-on-ts-changes"); controllers.push("refresh-on-ts-changes");
} }
const classes = (htmlOptions?.bodyClasses || ["grid-layout-main"]).join(" "); const classes = (htmlOptions?.bodyClasses || []).join(" ");
return tempstreamAsync /* HTML */ ` <!DOCTYPE html> return tempstreamAsync /* HTML */ ` <!DOCTYPE html>
<html <html
@ -65,7 +63,7 @@ export default function html({
${classes ? `class="${classes}"` : ""} ${classes ? `class="${classes}"` : ""}
> >
${!hideNavigation ? (htmlOptions?.navbar || default_navbar)(ctx) : ""} ${!hideNavigation ? (htmlOptions?.navbar || default_navbar)(ctx) : ""}
${body} ${footer(ctx)} ${body}
</body> </body>
</html>`; </html>`;
} }

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

@ -1,18 +1,13 @@
/* stylelint-disable no-descending-specificity */
.autoscrolling-images { .autoscrolling-images {
display: grid; display: flex;
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;
width: 100%; gap: 24px;
grid-template-columns: subgrid;
grid-column: screen;
row-gap: 16px;
} }
.autoscrolling-images__img-wrapper { .autoscrolling-images__img-wrapper {
@ -29,7 +24,7 @@
.autoscrolling-images__carousel-container { .autoscrolling-images__carousel-container {
position: relative; position: relative;
grid-column: main-column; max-width: min(940px, calc(100dvw - 48px));
picture, picture,
img { img {
@ -59,36 +54,26 @@
} }
.autoscrolling-images__title-wrapper { .autoscrolling-images__title-wrapper {
display: grid; max-width: 940px;
width: 100%; display: flex;
grid-column: content; justify-content: center;
grid-template-columns: 1fr 100px; align-items: center;
column-gap: 16px; text-align: center;
}
.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 {
.autoscrolling-images__arrow-carousel { position: absolute;
display: grid; top: -51px;
height: 100%; right: -90px;
grid-template-rows: 1fr; width: 92px;
grid-template-columns: 1fr; overflow-x: hidden;
.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 {
@ -208,6 +193,11 @@
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;
@ -266,6 +256,11 @@
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,10 +46,7 @@ function renderimagePageArrows({
imagePages: Array<Array<Record<string, unknown>>>; imagePages: Array<Array<Record<string, unknown>>>;
}) { }) {
return ( return (
<div <div class="autoscrolling-images__arrow-container">
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
@ -162,30 +159,24 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
> >
<style> <style>
{imagePages {imagePages
.map((_, pageIndex) => { .map(
const radio_id = `${radioButtonIdPrefix}-autoscrolling-images__radio-${pageIndex}`; (_, pageIndex) =>
return `#${radio_id}:checked ~ .autoscrolling-images__imgs-carousel > .autoscrolling-images__carousel { `#${radioButtonIdPrefix}-autoscrolling-images__radio-${pageIndex}:checked ~ .autoscrolling-images__imgs-carousel > .autoscrolling-images__carousel {
transform: translateX(calc(${pageIndex} * (-100%))); transform: translateX(calc(${pageIndex} * (-100%)));
} }
#${radio_id}:checked ~ .autoscrolling-images__arrow-carousel-container #${radioButtonIdPrefix}-autoscrolling-images__radio-${pageIndex}:checked ~ .autoscrolling-images__arrow-carousel-container
> .autoscrolling-images__arrow-carousel { > .autoscrolling-images__arrow-carousel {
transform: translateX(calc(${pageIndex} * (-100%))); transform: translateX(calc(${pageIndex} * (-100%)));
} }
#${radio_id}:checked ~ .autoscrolling-images__dots-container #${radioButtonIdPrefix}-autoscrolling-images__radio-${pageIndex}: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>
@ -195,21 +186,6 @@ 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">
@ -226,6 +202,21 @@ 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"

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

@ -1,10 +1,7 @@
.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 {

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

@ -1,7 +1,6 @@
.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 {

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

@ -1,11 +1,6 @@
.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);
@ -14,7 +9,16 @@
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;
} }
@ -25,7 +29,7 @@
picture { picture {
max-width: 100cqw; max-width: 100cqw;
width: 100% !important; width: 100%;
border-radius: 10px; border-radius: 10px;
img { img {
@ -34,7 +38,11 @@
} }
} }
& > .img-container { .container > div {
padding: 0 0 0px 24px;
}
.container > .img-container {
padding: 0; padding: 0;
} }
@ -84,8 +92,10 @@
@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;
@ -94,12 +104,13 @@
margin-top: 16px; margin-top: 16px;
} }
& > div { .container > div {
grid-column: 1/1; grid-column: 1/1;
padding: 0 16px;
max-width: 650px; max-width: 650px;
} }
& > .img-container { .container > .img-container {
padding: 0 16px; padding: 0 16px;
} }

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

@ -24,13 +24,13 @@ 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", ...classes]}> <div class="header-with-image">
<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" },
@ -50,6 +50,7 @@ export class HeaderWithImage extends Component<typeof component_arguments> {
</div> </div>
)} )}
</div> </div>
</div>
); );
} }
} }

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

@ -1,4 +1,5 @@
.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, insert_nbsp } from "@sealcode/jdd"; import { Component, ComponentArguments } 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,10 +48,8 @@ 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}`]}> <h1 class={[`hero__title--color-${title_color}`]}>{title}</h1>
{insert_nbsp(title)} <span class={["hero__subtitle"]}>{subtitle}</span>
</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

@ -2,10 +2,6 @@
--max-image-width: 600px; --max-image-width: 600px;
background-color: var(--color-brand-text-bg); background-color: var(--color-brand-text-bg);
&[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

@ -21,7 +21,6 @@ const component_arguments = {
caption: new ComponentArguments.ShortText().setExampleValues([""]), caption: new ComponentArguments.ShortText().setExampleValues([""]),
}) })
), ),
bleed: new ComponentArguments.Boolean(),
} as const; } as const;
export class HorizontalGallery extends Component<typeof component_arguments> { export class HorizontalGallery extends Component<typeof component_arguments> {
@ -37,7 +36,7 @@ export class HorizontalGallery extends Component<typeof component_arguments> {
} }
toHTML({ toHTML({
args: { title, images, heading_level, heading_align, bleed }, args: { title, images, heading_level, heading_align },
classes, classes,
jdd_context: { render_image }, jdd_context: { render_image },
index, index,
@ -45,7 +44,6 @@ 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}`}
data-controller="glightbox" data-controller="glightbox"
> >

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

@ -15,7 +15,6 @@
} }
.ordered-blocks__article-list { .ordered-blocks__article-list {
margin: 0;
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(36ch, 1fr)); grid-template-columns: repeat(auto-fit, minmax(36ch, 1fr));
padding: 0 24px; padding: 0 24px;
@ -39,6 +38,7 @@
padding: 0; padding: 0;
margin: auto; margin: auto;
} }
} }
.ordered-blocks .article-list-item { .ordered-blocks .article-list-item {

11
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: 0 auto; margin: 1rem auto;
padding: 0; padding: 0 1rem;
} }
.pictogram-tiles__tile { .pictogram-tiles__tile {
@ -140,9 +140,9 @@
@container (max-width: 880px) { @container (max-width: 880px) {
.pictogram-tiles { .pictogram-tiles {
display: flex; display: block;
flex-flow: column; grid-template-columns: auto;
row-gap: var(--row-gap); }
.pictogram-tiles__tile { .pictogram-tiles__tile {
max-width: 21rem; max-width: 21rem;
@ -156,7 +156,6 @@
.pictogram-tiles__tile:nth-child(even) { .pictogram-tiles__tile:nth-child(even) {
grid-column: auto; grid-column: auto;
} }
}
} }
@container (max-width: 440px) { @container (max-width: 440px) {

14
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;
display: grid; .split-view__wrapper {
grid-template-columns: subgrid; display: flex;
flex-flow: row nowrap;
gap: 24px;
@container (max-width: 640px) { @container (max-width: 640px) {
display: flex;
flex-flow: column; flex-flow: column;
gap: var(--row-gap); }
} }
.split-view__half { .split-view__half {
@ -19,9 +19,5 @@
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;
}
} }
} }

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

@ -40,6 +40,7 @@ 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,
@ -53,6 +54,7 @@ export class SplitView extends Component<typeof component_arguments> {
})} })}
</div> </div>
</div> </div>
</div>
); );
} }
} }

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

@ -3,15 +3,6 @@
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
p {
margin: 0;
text-align: justify;
}
p + p {
margin-top: 16px;
}
&.tekst--color-transparent { &.tekst--color-transparent {
background-color: transparent; background-color: transparent;
color: var(--color-brand-text-fg); color: var(--color-brand-text-fg);
@ -40,4 +31,8 @@
hyphens: auto; hyphens: auto;
} }
} }
p {
text-align: justify;
}
} }

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

@ -2,8 +2,4 @@
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,10 +23,7 @@ export class Video extends Component<typeof component_arguments> {
{file instanceof PathFilePointer ? ( {file instanceof PathFilePointer ? (
<video <video
controls controls
style={[ style={`max-width: ${max_width}px; max-height: ${max_height}px`}
`${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 —{" "}

49
src/back/routes/common/footer.css
View File

@ -1,49 +0,0 @@
footer {
background-color: var(--color-brand-accent2);
color: var(--color-brand-text-on-accent2);
grid-column: screen !important;
align-self: end;
display: grid;
grid-template-columns: subgrid;
padding: 16px 0;
gap: 16px;
& > * {
grid-column: content;
}
ul {
margin: 0;
padding: 0;
display: flex;
flex-flow: row wrap;
column-gap: 16px;
justify-content: center;
align-items: center;
li {
list-style: none;
display: inline-flex;
flex-basis: 100px;
justify-content: center;
a {
text-decoration: none;
color: var(--color-brand-text-on-accent2);
font-weight: bold;
padding: 16px 8px;
white-space: nowrap;
&:hover {
text-decoration: underline;
}
}
}
}
.footer__attribution {
text-align: center;
align-self: end;
opacity: 0.6;
}
}

32
src/back/routes/common/footer.tsx
View File

@ -1,32 +0,0 @@
import { insert_nbsp } from "@sealcode/jdd";
import type { Context } from "koa";
import { TempstreamJSX } from "tempstream";
export default async function footer(ctx: Context) {
const { items: navbar_items } = await ctx.$app.collections["navbar-links"]
.list(ctx.$context)
.fetch();
const linkData = navbar_items.map((e) => ({
text: e.get("label"),
url: e.get("href"),
}));
return (
<footer>
<ul class="footer__navlinks">
<li>
<a href="/">{ctx.$app.manifest.name}</a>
</li>
{linkData.map((link) => (
<li>
<a href={link.url}>{insert_nbsp(link.text || "")}</a>
</li>
))}
</ul>
<div class="footer__attribution">
Implented using open technologies from{" "}
<a href="https://www.sealcode.it/">Sealcode</a>
</div>
</footer>
);
}

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"> <main class="custom-page jdd-outer-container">
{heading?.trim() ? <h1>{heading}</h1> : ""} {heading?.trim() ? <h1>{heading}</h1> : ""}
{jdd.render()} <div class="jdd-container">{jdd.render()}</div>
</main> </main>
), ),
makeHead: (...args) => makeHead: (...args) =>

83
src/main.css
View File

@ -6,90 +6,14 @@ html {
background: var(--color-brand-canvas); background: var(--color-brand-canvas);
font-family: var(--font-sans-serif); font-family: var(--font-sans-serif);
font-size: 14px; font-size: 14px;
container-type: inline-size;
} }
body { body {
grid-auto-rows: min-content min-content min-content auto; max-width: 1024px;
min-height: 100vh; 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); background: var(--color-brand-text-bg);
color: var(--color-brand-text-fg); color: var(--color-brand-text-fg);
padding: 1rem 0;
@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 {
@ -108,7 +32,6 @@ nav {
flex-flow: row wrap; flex-flow: row wrap;
justify-content: space-between; justify-content: space-between;
padding: 0 16px; padding: 0 16px;
margin-top: 24px;
ul { ul {
display: flex; display: flex;