danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2025-01-22 22:01:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

Different approach to preventing <p> tags with nested code examples

Browse Source
This commit is contained in:
Jonny Gerig Meyer 2023-06-22 11:09:08 -04:00
parent 7f585bc68b
commit 537f3de9e8
No known key found for this signature in database
2 changed files with 122 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
source/documentation/modules/color.md
View File

@ -254,10 +254,9 @@ title: sass:color
the HSL lightness of `$color` by that amount.
{% headsUp %}
{% # Un-indented because 4-space indentation causes extra <p> tags in Markdown %}
The `darken()` function decreases lightness by a fixed amount, which is often
not the desired effect. To make a color a certain percentage darker than it
was before, use [`color.scale()`](#scale) instead.
The `darken()` function decreases lightness by a fixed amount, which is
often not the desired effect. To make a color a certain percentage darker
than it was before, use [`color.scale()`](#scale) instead.
Because `darken()` is usually not the best way to make a color darker, it's
not included directly in the new module system. However, if you have to
@ -307,15 +306,14 @@ title: sass:color
the HSL saturation of `$color` by that amount.
{% headsUp %}
{% # Un-indented because 4-space indentation causes extra <p> tags in Markdown %}
The `desaturate()` function decreases saturation by a fixed amount, which is
often not the desired effect. To make a color a certain percentage less
saturated than it was before, use [`color.scale()`](#scale) instead.
Because `desaturate()` is usually not the best way to make a color less
saturated, it's not included directly in the new module system. However, if
you have to preserve the existing behavior, `desaturate($color, $amount)` can
be written [`color.adjust($color, $saturation: -$amount)`](#adjust).
you have to preserve the existing behavior, `desaturate($color, $amount)`
can be written [`color.adjust($color, $saturation: -$amount)`](#adjust).
{% codeExample 'color-desaturate', false %}
// #d2e1dd has saturation 20%, so when desaturate() subtracts 30% it just
@ -502,13 +500,12 @@ title: sass:color
the HSL lightness of `$color` by that amount.
{% headsUp %}
{% # Un-indented because 4-space indentation causes extra <p> tags in Markdown %}
The `lighten()` function increases lightness by a fixed amount, which is often
not the desired effect. To make a color a certain percentage lighter than it
was before, use [`scale()`](#scale) instead.
The `lighten()` function increases lightness by a fixed amount, which is
often not the desired effect. To make a color a certain percentage lighter
than it was before, use [`scale()`](#scale) instead.
Because `lighten()` is usually not the best way to make a color lighter, it's
not included directly in the new module system. However, if you have to
Because `lighten()` is usually not the best way to make a color lighter,
it's not included directly in the new module system. However, if you have to
preserve the existing behavior, `lighten($color, $amount)` can be written
[`adjust($color, $lightness: $amount)`](#adjust).
@ -602,10 +599,9 @@ title: sass:color
alpha channel of `$color` by that amount.
{% headsUp %}
{% # Un-indented because 4-space indentation causes extra <p> tags in Markdown %}
The `opacify()` function increases the alpha channel by a fixed amount, which
is often not the desired effect. To make a color a certain percentage more
opaque than it was before, use [`scale()`](#scale) instead.
The `opacify()` function increases the alpha channel by a fixed amount,
which is often not the desired effect. To make a color a certain percentage
more opaque than it was before, use [`scale()`](#scale) instead.
Because `opacify()` is usually not the best way to make a color more opaque,
it's not included directly in the new module system. However, if you have to
@ -672,15 +668,14 @@ title: sass:color
the HSL saturation of `$color` by that amount.
{% headsUp %}
{% # Un-indented because 4-space indentation causes extra <p> tags in Markdown %}
The `saturate()` function increases saturation by a fixed amount, which is
often not the desired effect. To make a color a certain percentage more
saturated than it was before, use [`scale()`](#scale) instead.
Because `saturate()` is usually not the best way to make a color more
saturated, it's not included directly in the new module system. However, if
you have to preserve the existing behavior, `saturate($color, $amount)` can be
written [`adjust($color, $saturation: $amount)`](#adjust).
you have to preserve the existing behavior, `saturate($color, $amount)` can
be written [`adjust($color, $saturation: $amount)`](#adjust).
{% codeExample 'color-saturate', false %}
// #0e4982 has saturation 80%, so when saturate() adds 30% it just becomes
@ -796,15 +791,16 @@ title: sass:color
alpha channel of `$color` by that amount.
{% headsUp %}
{% # Un-indented because 4-space indentation causes extra <p> tags in Markdown %}
The `transparentize()` function decreases the alpha channel by a fixed amount,
which is often not the desired effect. To make a color a certain percentage
more transparent than it was before, use [`color.scale()`](#scale) instead.
The `transparentize()` function decreases the alpha channel by a fixed
amount, which is often not the desired effect. To make a color a certain
percentage more transparent than it was before, use
[`color.scale()`](#scale) instead.
Because `transparentize()` is usually not the best way to make a color more
transparent, it's not included directly in the new module system. However, if
you have to preserve the existing behavior, `transparentize($color, $amount)`
can be written [`color.adjust($color, $alpha: -$amount)`](#adjust).
transparent, it's not included directly in the new module system. However,
if you have to preserve the existing behavior, `transparentize($color,
$amount)` can be written [`color.adjust($color, $alpha:
-$amount)`](#adjust).
{% codeExample 'transparentize', false %}
// rgba(#036, 0.3) has alpha 0.3, so when transparentize() subtracts 0.3 it

6
source/helpers/components/index.ts
View File

@ -17,7 +17,8 @@ export {getDocTocData, getToc};
*/
export const funFact = async (contents: string, useMarkdown = true) => {
const html = await liquidEngine.renderFile('fun_fact', {
contents: stripIndent(contents),
// Un-indent nested markup to prevent unwanted `<p>` tags.
contents: stripIndent(contents).replaceAll(/\n +</g, '\n<'),
useMarkdown,
});
return html.trim();
@ -29,7 +30,8 @@ export const funFact = async (contents: string, useMarkdown = true) => {
*/
export const headsUp = async (contents: string, useMarkdown = true) => {
const html = await liquidEngine.renderFile('heads_up', {
contents: stripIndent(contents),
// Un-indent nested markup to prevent unwanted `<p>` tags.
contents: stripIndent(contents).replaceAll(/\n +</g, '\n<'),
useMarkdown,
});
return html.trim();