Compare commits
No commits in common. "36c6f1ff3507dfffb109f22d8dbe0414c3a3f31c" and "5e34d0d62630201469680813116819c47c7c521a" have entirely different histories.
36c6f1ff35
...
5e34d0d626
@ -75,7 +75,7 @@ export default class TheApp extends App {
|
||||
},
|
||||
};
|
||||
manifest = {
|
||||
name: "Strona Czynna",
|
||||
name: "Strona Czynna — nieformalna grupa aktywistyczna",
|
||||
logo: locreq.resolve("assets/logotyp.svg"),
|
||||
version: "0.0.1",
|
||||
default_language: "en",
|
||||
|
||||
@ -25,8 +25,7 @@ export function defaultHead({
|
||||
description: string;
|
||||
}): JSX.Element | Readable {
|
||||
const origin = ctx.URL.origin;
|
||||
return tempstream /* HTML */ `<meta charset="utf-8" />
|
||||
<title>${title} — Grupa aktywistyczna Poznań</title>
|
||||
return tempstream /* HTML */ `<meta charset="utf-8" /> <title>${title}</title>
|
||||
${SCAN_A11Y ? `<link rel="stylesheet" href="/dist/a11y.css/a11y-en.css">` : ""}
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
@ -5,14 +5,12 @@ import { tempstreamAsync } from "tempstream";
|
||||
import { DEFAULT_HTML_LANG } from "./config.js";
|
||||
import { defaultHead } from "./defaultHead.js";
|
||||
import { default_navbar } from "./routes/common/navbar.js";
|
||||
import footer from "./routes/common/footer.js";
|
||||
|
||||
const default_html_options: Partial<HTMLOptions> = {
|
||||
showFooter: true,
|
||||
showBottomNavbar: true,
|
||||
loadHamburgerMenu: true,
|
||||
loadSearchModal: true,
|
||||
classes: ["grid-layout-main"],
|
||||
};
|
||||
|
||||
export default function html({
|
||||
@ -42,7 +40,7 @@ export default function html({
|
||||
controllers.push("refresh-on-ts-changes");
|
||||
}
|
||||
|
||||
const classes = (htmlOptions?.bodyClasses || ["grid-layout-main"]).join(" ");
|
||||
const classes = (htmlOptions?.bodyClasses || []).join(" ");
|
||||
|
||||
return tempstreamAsync /* HTML */ ` <!DOCTYPE html>
|
||||
<html
|
||||
@ -65,7 +63,7 @@ export default function html({
|
||||
${classes ? `class="${classes}"` : ""}
|
||||
>
|
||||
${!hideNavigation ? (htmlOptions?.navbar || default_navbar)(ctx) : ""}
|
||||
${body} ${footer(ctx)}
|
||||
${body}
|
||||
</body>
|
||||
</html>`;
|
||||
}
|
||||
|
||||
@ -1,18 +1,13 @@
|
||||
/* stylelint-disable no-descending-specificity */
|
||||
.autoscrolling-images {
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
grid-column: screen;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 2rem 0;
|
||||
--gap-between-horizontal-images: 14px;
|
||||
}
|
||||
|
||||
.autoscrolling-images-wrapper {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: subgrid;
|
||||
grid-column: screen;
|
||||
row-gap: 16px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.autoscrolling-images__img-wrapper {
|
||||
@ -29,7 +24,7 @@
|
||||
|
||||
.autoscrolling-images__carousel-container {
|
||||
position: relative;
|
||||
grid-column: main-column;
|
||||
max-width: min(940px, calc(100dvw - 48px));
|
||||
|
||||
picture,
|
||||
img {
|
||||
@ -59,36 +54,26 @@
|
||||
}
|
||||
|
||||
.autoscrolling-images__title-wrapper {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-column: content;
|
||||
grid-template-columns: 1fr 100px;
|
||||
column-gap: 16px;
|
||||
max-width: 940px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.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-container {
|
||||
position: absolute;
|
||||
top: -51px;
|
||||
right: -90px;
|
||||
width: 92px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.autoscrolling-images__arrow-carousel {
|
||||
@ -208,6 +193,11 @@
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
.autoscrolling-images__carousel-container {
|
||||
margin: 0;
|
||||
max-width: calc(100cqw - 20px);
|
||||
}
|
||||
|
||||
.autoscrolling-images__carousel-page {
|
||||
display: flex;
|
||||
flex: none !important;
|
||||
@ -266,6 +256,11 @@
|
||||
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,10 +46,7 @@ function renderimagePageArrows({
|
||||
imagePages: Array<Array<Record<string, unknown>>>;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
class="autoscrolling-images__arrow-container"
|
||||
data-page={pageIndex.toString()}
|
||||
>
|
||||
<div class="autoscrolling-images__arrow-container">
|
||||
<label
|
||||
for={`${radioButtonIdPrefix}-autoscrolling-images__radio-${
|
||||
pageIndex == 0 ? imagePages.length - 1 : pageIndex - 1
|
||||
@ -162,30 +159,24 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
|
||||
>
|
||||
<style>
|
||||
{imagePages
|
||||
.map((_, pageIndex) => {
|
||||
const radio_id = `${radioButtonIdPrefix}-autoscrolling-images__radio-${pageIndex}`;
|
||||
return `#${radio_id}:checked ~ .autoscrolling-images__imgs-carousel > .autoscrolling-images__carousel {
|
||||
.map(
|
||||
(_, pageIndex) =>
|
||||
`#${radioButtonIdPrefix}-autoscrolling-images__radio-${pageIndex}:checked ~ .autoscrolling-images__imgs-carousel > .autoscrolling-images__carousel {
|
||||
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 {
|
||||
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}) {
|
||||
background-color: var(--color-brand-accent);
|
||||
|
||||
}
|
||||
|
||||
.autoscrolling-images:has(#${radio_id}:checked)
|
||||
.autoscrolling-images__arrow-container[data-page="${pageIndex}"]{
|
||||
display:flex;
|
||||
}
|
||||
`;
|
||||
})
|
||||
}`
|
||||
)
|
||||
.join("\n")}
|
||||
</style>
|
||||
|
||||
@ -195,21 +186,6 @@ 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">
|
||||
@ -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__carousel"
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
.code-snippet {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
padding: 0 16px 16px 16px;
|
||||
}
|
||||
|
||||
.code-snippet pre {
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
.dynamic-grid-component {
|
||||
.dynamic-grid-title {
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.tabs-menu {
|
||||
|
||||
@ -1,11 +1,6 @@
|
||||
.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);
|
||||
|
||||
@ -14,7 +9,16 @@
|
||||
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;
|
||||
}
|
||||
|
||||
@ -25,7 +29,7 @@
|
||||
|
||||
picture {
|
||||
max-width: 100cqw;
|
||||
width: 100% !important;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
|
||||
img {
|
||||
@ -34,7 +38,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
& > .img-container {
|
||||
.container > div {
|
||||
padding: 0 0 0px 24px;
|
||||
}
|
||||
|
||||
.container > .img-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -84,8 +92,10 @@
|
||||
|
||||
@container (width < 1024px) {
|
||||
.header-with-image {
|
||||
.container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.img-container {
|
||||
grid-column: 1/1;
|
||||
@ -94,12 +104,13 @@
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
& > div {
|
||||
.container > div {
|
||||
grid-column: 1/1;
|
||||
padding: 0 16px;
|
||||
max-width: 650px;
|
||||
}
|
||||
|
||||
& > .img-container {
|
||||
.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", ...classes]}>
|
||||
<div class="header-with-image">
|
||||
<div class="container">
|
||||
<div class="img-container">
|
||||
{render_image(image_with_alt.image, {
|
||||
container: { width: 600, height: 450, objectFit: "contain" },
|
||||
@ -50,6 +50,7 @@ export class HeaderWithImage extends Component<typeof component_arguments> {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
.hero {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
|
||||
@ -4,7 +4,7 @@ import type {
|
||||
ExtractStructuredComponentArgumentsParsed,
|
||||
JDDContext,
|
||||
} 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";
|
||||
|
||||
const component_arguments = {
|
||||
@ -48,10 +48,8 @@ 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}`]}>
|
||||
{insert_nbsp(title)}
|
||||
</h1>
|
||||
<span class={["hero__subtitle"]}>{insert_nbsp(subtitle)}</span>
|
||||
<h1 class={[`hero__title--color-${title_color}`]}>{title}</h1>
|
||||
<span class={["hero__subtitle"]}>{subtitle}</span>
|
||||
<div class={["hero__content"]}>{render_markdown(language, content)}</div>
|
||||
<div class={["hero__buttons"]}>
|
||||
{buttons.map((button_data) => button(button_data))}
|
||||
|
||||
@ -2,10 +2,6 @@
|
||||
--max-image-width: 600px;
|
||||
background-color: var(--color-brand-text-bg);
|
||||
|
||||
&[data-bleed="true"] {
|
||||
grid-column: bleed;
|
||||
}
|
||||
|
||||
.horizontal-gallery__top-bar {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
|
||||
@ -21,7 +21,6 @@ const component_arguments = {
|
||||
caption: new ComponentArguments.ShortText().setExampleValues([""]),
|
||||
})
|
||||
),
|
||||
bleed: new ComponentArguments.Boolean(),
|
||||
} as const;
|
||||
|
||||
export class HorizontalGallery extends Component<typeof component_arguments> {
|
||||
@ -37,7 +36,7 @@ export class HorizontalGallery extends Component<typeof component_arguments> {
|
||||
}
|
||||
|
||||
toHTML({
|
||||
args: { title, images, heading_level, heading_align, bleed },
|
||||
args: { title, images, heading_level, heading_align },
|
||||
classes,
|
||||
jdd_context: { render_image },
|
||||
index,
|
||||
@ -45,7 +44,6 @@ export class HorizontalGallery extends Component<typeof component_arguments> {
|
||||
return (
|
||||
<div
|
||||
class={["horizontal-gallery", ...classes]}
|
||||
data-bleed={bleed ? "true" : "false"}
|
||||
style={`--jdd-index: ${index}`}
|
||||
data-controller="glightbox"
|
||||
>
|
||||
|
||||
@ -15,7 +15,6 @@
|
||||
}
|
||||
|
||||
.ordered-blocks__article-list {
|
||||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(36ch, 1fr));
|
||||
padding: 0 24px;
|
||||
@ -39,6 +38,7 @@
|
||||
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: 0 auto;
|
||||
padding: 0;
|
||||
margin: 1rem auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile {
|
||||
@ -140,9 +140,9 @@
|
||||
|
||||
@container (max-width: 880px) {
|
||||
.pictogram-tiles {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
row-gap: var(--row-gap);
|
||||
display: block;
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile {
|
||||
max-width: 21rem;
|
||||
@ -156,7 +156,6 @@
|
||||
.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;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
.split-view__wrapper {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
gap: 24px;
|
||||
|
||||
@container (max-width: 640px) {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: var(--row-gap);
|
||||
}
|
||||
}
|
||||
|
||||
.split-view__half {
|
||||
@ -19,9 +19,5 @@
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:nth-child(2) {
|
||||
grid-column: right-half;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -40,6 +40,7 @@ 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,
|
||||
@ -53,6 +54,7 @@ export class SplitView extends Component<typeof component_arguments> {
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,15 +3,6 @@
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
p + p {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
&.tekst--color-transparent {
|
||||
background-color: transparent;
|
||||
color: var(--color-brand-text-fg);
|
||||
@ -40,4 +31,8 @@
|
||||
hyphens: auto;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,8 +2,4 @@
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
|
||||
video {
|
||||
max-width: 100cqw;
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,10 +23,7 @@ export class Video extends Component<typeof component_arguments> {
|
||||
{file instanceof PathFilePointer ? (
|
||||
<video
|
||||
controls
|
||||
style={[
|
||||
`${max_width ? `max-width: min(${max_width}px, 100cqw);` : ""}`,
|
||||
`${max_height ? `max-height: min(${max_height}px, 80cqh);` : ""}`,
|
||||
].join("; ")}
|
||||
style={`max-width: ${max_width}px; max-height: ${max_height}px`}
|
||||
>
|
||||
<source src={file.getURL()} type={file.mimetype} />
|
||||
Your browser does not support video —{" "}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
@ -62,9 +62,9 @@ export const customUrlView =
|
||||
showFooter: !hideNavigation,
|
||||
},
|
||||
body: (
|
||||
<main class="custom-page">
|
||||
<main class="custom-page jdd-outer-container">
|
||||
{heading?.trim() ? <h1>{heading}</h1> : ""}
|
||||
{jdd.render()}
|
||||
<div class="jdd-container">{jdd.render()}</div>
|
||||
</main>
|
||||
),
|
||||
makeHead: (...args) =>
|
||||
|
||||
83
src/main.css
83
src/main.css
@ -6,90 +6,14 @@ html {
|
||||
background: var(--color-brand-canvas);
|
||||
font-family: var(--font-sans-serif);
|
||||
font-size: 14px;
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
body {
|
||||
grid-auto-rows: min-content min-content min-content auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.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
|
||||
)
|
||||
)
|
||||
);
|
||||
max-width: 1024px;
|
||||
margin: 1rem auto;
|
||||
background: var(--color-brand-text-bg);
|
||||
color: var(--color-brand-text-fg);
|
||||
|
||||
@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;
|
||||
}
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
@ -108,7 +32,6 @@ nav {
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
margin-top: 24px;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user