Add pared shortcode for content warning component
This commit is contained in:
parent
9f3b12eedc
commit
bda9ac14d4
|
@ -121,6 +121,16 @@ module.exports = function (eleventyConfig) {
|
||||||
</details>`;
|
</details>`;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Paired shorcode: Content warning accordion
|
||||||
|
eleventyConfig.addPairedShortcode('contentWarning', (content, warning) => {
|
||||||
|
const warningMarkup = markdownLibrary.renderInline(warning);
|
||||||
|
const contentMarkup = markdownLibrary.render(content);
|
||||||
|
return `<details class="contnet-warning">
|
||||||
|
<summary class="contnet-warning__warning"><strong>⚠️ Content Warning:</strong> ${warningMarkup}</summary>
|
||||||
|
<div class="contnet-warning__content">${contentMarkup}</div>
|
||||||
|
</details>`;
|
||||||
|
});
|
||||||
|
|
||||||
/* This is the part that tells 11ty to swap to our custom config */
|
/* This is the part that tells 11ty to swap to our custom config */
|
||||||
eleventyConfig.setLibrary("md", markdownLibrary);
|
eleventyConfig.setLibrary("md", markdownLibrary);
|
||||||
}
|
}
|
||||||
|
|
|
@ -85,6 +85,37 @@
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Content warning accordion */
|
||||||
|
* + .contnet-warning {
|
||||||
|
margin-top: var(--sz-paragraph-margin);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contnet-warning {
|
||||||
|
border: 0.1em solid var(--clr-title-border);
|
||||||
|
border-radius: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contnet-warning__warning {
|
||||||
|
padding: 0.8em;
|
||||||
|
--stripe-color: rgb(0 0 0 / 0.1);
|
||||||
|
background-image: repeating-linear-gradient(
|
||||||
|
45deg,
|
||||||
|
transparent,
|
||||||
|
transparent 0.5em,
|
||||||
|
var(--stripe-color) 0.5em,
|
||||||
|
var(--stripe-color) 1em
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contnet-warning__warning:hover,
|
||||||
|
.contnet-warning__warning:focus {
|
||||||
|
--stripe-color: rgb(150 0 0 / 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contnet-warning__content {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
/* Web button lists */
|
/* Web button lists */
|
||||||
.web-btn-wrapper {
|
.web-btn-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
Loading…
Reference in New Issue