danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2025-01-23 06:11:57 +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. the HSL lightness of `$color` by that amount.
{% headsUp %} {% headsUp %}
{% # Un-indented because 4-space indentation causes extra <p> tags in Markdown %} The `darken()` function decreases lightness by a fixed amount, which is
The `darken()` function decreases lightness by a fixed amount, which is often often not the desired effect. To make a color a certain percentage darker
not the desired effect. To make a color a certain percentage darker than it than it was before, use [`color.scale()`](#scale) instead.
was before, use [`color.scale()`](#scale) instead.
Because `darken()` is usually not the best way to make a color darker, it's 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 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. the HSL saturation of `$color` by that amount.
{% headsUp %} {% headsUp %}
{% # Un-indented because 4-space indentation causes extra <p> tags in Markdown %}
The `desaturate()` function decreases saturation by a fixed amount, which is The `desaturate()` function decreases saturation by a fixed amount, which is
often not the desired effect. To make a color a certain percentage less often not the desired effect. To make a color a certain percentage less
saturated than it was before, use [`color.scale()`](#scale) instead. saturated than it was before, use [`color.scale()`](#scale) instead.
Because `desaturate()` is usually not the best way to make a color less 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 saturated, it's not included directly in the new module system. However, if
you have to preserve the existing behavior, `desaturate($color, $amount)` can you have to preserve the existing behavior, `desaturate($color, $amount)`
be written [`color.adjust($color, $saturation: -$amount)`](#adjust). can be written [`color.adjust($color, $saturation: -$amount)`](#adjust).
{% codeExample 'color-desaturate', false %} {% codeExample 'color-desaturate', false %}
// #d2e1dd has saturation 20%, so when desaturate() subtracts 30% it just // #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. the HSL lightness of `$color` by that amount.
{% headsUp %} {% headsUp %}
{% # Un-indented because 4-space indentation causes extra <p> tags in Markdown %} The `lighten()` function increases lightness by a fixed amount, which is
The `lighten()` function increases lightness by a fixed amount, which is often often not the desired effect. To make a color a certain percentage lighter
not the desired effect. To make a color a certain percentage lighter than it than it was before, use [`scale()`](#scale) instead.
was before, use [`scale()`](#scale) instead.
Because `lighten()` is usually not the best way to make a color lighter, it's Because `lighten()` is usually not the best way to make a color lighter,
not included directly in the new module system. However, if you have to 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 preserve the existing behavior, `lighten($color, $amount)` can be written
[`adjust($color, $lightness: $amount)`](#adjust). [`adjust($color, $lightness: $amount)`](#adjust).
@ -602,10 +599,9 @@ title: sass:color
alpha channel of `$color` by that amount. alpha channel of `$color` by that amount.
{% headsUp %} {% headsUp %}
{% # Un-indented because 4-space indentation causes extra <p> tags in Markdown %} The `opacify()` function increases the alpha channel by a fixed amount,
The `opacify()` function increases the alpha channel by a fixed amount, which which is often not the desired effect. To make a color a certain percentage
is often not the desired effect. To make a color a certain percentage more more opaque than it was before, use [`scale()`](#scale) instead.
opaque than it was before, use [`scale()`](#scale) instead.
Because `opacify()` is usually not the best way to make a color more opaque, 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 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. the HSL saturation of `$color` by that amount.
{% headsUp %} {% headsUp %}
{% # Un-indented because 4-space indentation causes extra <p> tags in Markdown %}
The `saturate()` function increases saturation by a fixed amount, which is The `saturate()` function increases saturation by a fixed amount, which is
often not the desired effect. To make a color a certain percentage more often not the desired effect. To make a color a certain percentage more
saturated than it was before, use [`scale()`](#scale) instead. saturated than it was before, use [`scale()`](#scale) instead.
Because `saturate()` is usually not the best way to make a color more 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 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 you have to preserve the existing behavior, `saturate($color, $amount)` can
written [`adjust($color, $saturation: $amount)`](#adjust). be written [`adjust($color, $saturation: $amount)`](#adjust).
{% codeExample 'color-saturate', false %} {% codeExample 'color-saturate', false %}
// #0e4982 has saturation 80%, so when saturate() adds 30% it just becomes // #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. alpha channel of `$color` by that amount.
{% headsUp %} {% headsUp %}
{% # Un-indented because 4-space indentation causes extra <p> tags in Markdown %} The `transparentize()` function decreases the alpha channel by a fixed
The `transparentize()` function decreases the alpha channel by a fixed amount, amount, which is often not the desired effect. To make a color a certain
which is often not the desired effect. To make a color a certain percentage percentage more transparent than it was before, use
more transparent than it was before, use [`color.scale()`](#scale) instead. [`color.scale()`](#scale) instead.
Because `transparentize()` is usually not the best way to make a color more 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 transparent, it's not included directly in the new module system. However,
you have to preserve the existing behavior, `transparentize($color, $amount)` if you have to preserve the existing behavior, `transparentize($color,
can be written [`color.adjust($color, $alpha: -$amount)`](#adjust). $amount)` can be written [`color.adjust($color, $alpha:
-$amount)`](#adjust).
{% codeExample 'transparentize', false %} {% codeExample 'transparentize', false %}
// rgba(#036, 0.3) has alpha 0.3, so when transparentize() subtracts 0.3 it // 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) => { export const funFact = async (contents: string, useMarkdown = true) => {
const html = await liquidEngine.renderFile('fun_fact', { 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, useMarkdown,
}); });
return html.trim(); return html.trim();
@ -29,7 +30,8 @@ export const funFact = async (contents: string, useMarkdown = true) => {
*/ */
export const headsUp = async (contents: string, useMarkdown = true) => { export const headsUp = async (contents: string, useMarkdown = true) => {
const html = await liquidEngine.renderFile('heads_up', { 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, useMarkdown,
}); });
return html.trim(); return html.trim();