docs(fix): escape chevrons in included CSS

ffoodd · Sep 26, 2023 · 4a37606 · 4a37606
1 parent 0b1047f
commit 4a37606
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 43 deletions.
diff --git a/_site/templates/bar-charts.njk b/_site/templates/bar-charts.njk
@@ -129,7 +129,7 @@
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">{% include 'css/examples/bar.css' %}</code></pre>
+			<pre><code class="language-css">{% filter escape %}{% include 'css/examples/bar.css' %}{% endfilter %}</code></pre>
 		</div>
 	</details>
 
@@ -192,7 +192,7 @@
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">{% include 'css/examples/waterfall.css' %}</code></pre>
+			<pre><code class="language-css">{% filter escape %}{% include 'css/examples/waterfall.css' %}{% endfilter %}</code></pre>
 		</div>
 	</details>
 {% endblock %}
diff --git a/_site/templates/column-charts.njk b/_site/templates/column-charts.njk
@@ -116,7 +116,7 @@
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">{% include 'css/examples/column.css' %}</code></pre>
+			<pre><code class="language-css">{% filter escape %}{% include 'css/examples/column.css' %}{% endfilter %}</code></pre>
 		</div>
 	</details>
 
@@ -240,7 +240,7 @@
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">{% include 'css/examples/columns.css' %}</code></pre>
+			<pre><code class="language-css">{% filter escape %}{% include 'css/examples/columns.css' %}{% endfilter %}</code></pre>
 		</div>
 	</details>
 {% endblock %}
diff --git a/_site/templates/line-charts.njk b/_site/templates/line-charts.njk
@@ -199,7 +199,7 @@
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">{% include 'css/examples/line.css' %}</code></pre>
+			<pre><code class="language-css">{% filter escape %}{% include 'css/examples/line.css' %}{% endfilter %}</code></pre>
 		</div>
 	</details>
 	<details>
@@ -336,7 +336,7 @@
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">{% include 'css/examples/lines.css' %}</code></pre>
+			<pre><code class="language-css">{% filter escape %}{% include 'css/examples/lines.css' %}{% endfilter %}</code></pre>
 		</div>
 	</details>
 

diff --git a/_site/templates/pie-charts.njk b/_site/templates/pie-charts.njk
@@ -196,7 +196,7 @@
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">{% include 'css/examples/pie.css' %}</code></pre>
+			<pre><code class="language-css">{% filter escape %}{% include 'css/examples/pie.css' %}{% endfilter %}</code></pre>
 		</div>
 	</details>
 	<details id="calculation-twist">
@@ -439,7 +439,7 @@
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">{% include 'css/examples/donut.css' %}</code></pre>
+			<pre><code class="language-css">{% filter escape %}{% include 'css/examples/donut.css' %}{% endfilter %}</code></pre>
 		</div>
 	</details>
 
@@ -504,7 +504,7 @@
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">{% include 'css/examples/polar.css' %}</code></pre>
+			<pre><code class="language-css">{% filter escape %}{% include 'css/examples/polar.css' %}{% endfilter %}</code></pre>
 		</div>
 	</details>
 {% endblock %}
diff --git a/_site/templates/radar-charts.njk b/_site/templates/radar-charts.njk
@@ -172,7 +172,7 @@
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">{% include 'css/examples/radar.css' %}</code></pre>
+			<pre><code class="language-css">{% filter escape %}{% include 'css/examples/radar.css' %}{% endfilter %}</code></pre>
 		</div>
 	</details>
 	<details>
@@ -344,7 +344,7 @@
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">{% include 'css/examples/radars.css' %}</code></pre>
+			<pre><code class="language-css">{% filter escape %}{% include 'css/examples/radars.css' %}{% endfilter %}</code></pre>
 		</div>
 	</details>
 {% endblock %}
diff --git a/docs/column-charts.html b/docs/column-charts.html
@@ -182,7 +182,7 @@ <h1>Column charts</h1>
   margin: 0;
 }
 
-.chaarts[class*=column] tr > * + * {
+.chaarts[class*=column] tr &gt; * + * {
   text-align: center;
 }
 
@@ -318,7 +318,7 @@ <h1>Column charts</h1>
 .chaarts.column-single :is([scope=col], [scope=colgroup])::after {
   background: var(--background) var(--stripes);
   background-blend-mode: exclusion;
-  content: "";
+  content: &quot;&quot;;
   inline-size: var(--width);
   inset-block-end: 4rem;
   inset-block-start: 1rem;
@@ -587,7 +587,7 @@ <h2>Multiple columns</h2>
 .chaarts.column-multiple [scope=colgroup]:nth-child(even)::after {
   background: var(--background) var(--stripes);
   background-blend-mode: exclusion;
-  content: "";
+  content: &quot;&quot;;
   inline-size: calc(var(--width) * 2 + var(--gap) / 2 + 1px);
   inset-block-end: 4rem;
   inset-block-start: calc(1rem + 2ex);

diff --git a/docs/line-charts.html b/docs/line-charts.html
@@ -273,7 +273,7 @@ <h2>Area charts</h2>
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">@charset "UTF-8";
+			<pre><code class="language-css">@charset &quot;UTF-8&quot;;
 .chaarts.line {
   --offset: calc((100% / var(--x)) / 2);
   --height: calc(32em - 2rem);
@@ -286,7 +286,7 @@ <h2>Area charts</h2>
 .chaarts.line::after {
   --scale: calc((100% - (var(--y) * 1px)) / var(--y));
   background: repeating-linear-gradient(to bottom, var(--background-lighter) 0 var(--scale), var(--foreground-o-25) calc(var(--scale) + 1px));
-  content: "";
+  content: &quot;&quot;;
   inline-size: 100%;
   inset-block-end: var(--bottom);
   inset-block-start: 0;
@@ -295,7 +295,7 @@ <h2>Area charts</h2>
 }
 
 .chaarts.line tr::before {
-  content: "";
+  content: &quot;&quot;;
   position: absolute;
 }
 
@@ -308,7 +308,7 @@ <h2>Area charts</h2>
 .chaarts.line [style]::before {
   background: linear-gradient(to top, var(--chaarts-blue), var(--chaarts-red) 75%);
   clip-path: var(--polygon);
-  content: "";
+  content: &quot;&quot;;
   inline-size: 100%;
   inset-block-end: var(--bottom);
   inset-block-start: 0;
@@ -354,7 +354,7 @@ <h2>Area charts</h2>
   background: var(--background-lighter) var(--stripes);
   background-blend-mode: exclusion;
   block-size: calc(100% - 4rem);
-  content: "";
+  content: &quot;&quot;;
   inline-size: inherit;
   inset-block-end: 4rem;
   inset-inline-start: calc(100% / var(--x) * var(--index));
@@ -434,7 +434,7 @@ <h2>Area charts</h2>
 
 .chaarts.line td::before {
   block-size: 1.5rem;
-  content: "";
+  content: &quot;&quot;;
   inline-size: inherit;
   position: absolute;
   translate: calc(-50% * var(--is-rtl, 1)) 0;
@@ -457,7 +457,7 @@ <h2>Area charts</h2>
   background-color: var(--foreground-lighter);
   clip-path: var(--polygon);
   color: var(--background-lighter);
-  content: var(--term) " " var(--year) "\a" counter(value) " " var(--unit);
+  content: var(--term) &quot; &quot; var(--year) &quot;&#92;a&quot; counter(value) &quot; &quot; var(--unit);
   counter-reset: value var(--integer);
   inset-block-start: var(--top, 0);
   inset-inline-start: calc(var(--offset) * 3);
@@ -841,7 +841,7 @@ <h3>Line chart with dots</h3>
 .chaarts.points [style] th::before {
   background: var(--color, currentcolor) var(--background);
   block-size: 1rem;
-  content: "";
+  content: &quot;&quot;;
   display: inline-block;
   inline-size: 1rem;
   translate: -0.2rem 0.1rem 0;
@@ -855,7 +855,7 @@ <h3>Line chart with dots</h3>
   border: 2px solid var(--background-lighter);
   border-radius: 50%;
   box-shadow: 0 0 0.25rem var(--foreground-o-50);
-  content: "";
+  content: &quot;&quot;;
   inline-size: var(--size);
   inset-block-start: var(--top, 100%);
   inset-inline-start: calc(var(--offset) * 3);

diff --git a/docs/pie-charts.html b/docs/pie-charts.html
@@ -280,7 +280,7 @@ <h2>Law of sines</h2>
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">@charset "UTF-8";
+			<pre><code class="language-css">@charset &quot;UTF-8&quot;;
 .chaarts.pie {
   --radius: 32em;
   margin: 0 auto;
@@ -328,7 +328,7 @@ <h2>Law of sines</h2>
 .chaarts.pie [scope=row]::before {
   background: var(--color, currentcolor) var(--background);
   block-size: 1rem;
-  content: "";
+  content: &quot;&quot;;
   display: inline-block;
   inline-size: 1rem;
   translate: calc(-0.2rem * var(--is-rtl, 1)) 0.1rem 0;
@@ -377,7 +377,7 @@ <h2>Law of sines</h2>
   block-size: var(--radius);
   border-radius: 50%;
   clip-path: var(--polygon);
-  content: "";
+  content: &quot;&quot;;
   inline-size: var(--radius);
   mask-image: var(--mask);
   transform: translate3d(calc(-50% * var(--is-rtl, 1)), -50%, 0) rotate(var(--position)) scale(var(--zoom));
@@ -400,7 +400,7 @@ <h2>Law of sines</h2>
   --integer: calc(var(--value));
   background-color: var(--foreground-lighter);
   color: var(--background-lighter);
-  content: var(--term) " : " counter(value) " %";
+  content: var(--term) &quot; : &quot; counter(value) &quot; %&quot;;
   counter-reset: value var(--integer);
   opacity: 0;
   padding: 0.5rem;

diff --git a/docs/radar-charts.html b/docs/radar-charts.html
@@ -221,7 +221,7 @@ <h1>Radar charts</h1>
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">@charset "UTF-8";
+			<pre><code class="language-css">@charset &quot;UTF-8&quot;;
 .chaarts[class*=radar] {
   --radius: 12.8em;
   --unitless-radius: calc(1024 / 16 / 5);
@@ -257,31 +257,31 @@ <h1>Radar charts</h1>
   transform: translate3d(-50%, -50%, 0) rotate(calc(var(--part) * var(--index, 1))) translate(var(--away)) rotate(calc(var(--part) * var(--index, 1) * -1));
 }
 
-.chaarts[class*=radar] tr > *:nth-of-type(1) {
+.chaarts[class*=radar] tr &gt; *:nth-of-type(1) {
   --index: 1;
 }
 
-.chaarts[class*=radar] tr > *:nth-of-type(2) {
+.chaarts[class*=radar] tr &gt; *:nth-of-type(2) {
   --index: 2;
 }
 
-.chaarts[class*=radar] tr > *:nth-of-type(3) {
+.chaarts[class*=radar] tr &gt; *:nth-of-type(3) {
   --index: 3;
 }
 
-.chaarts[class*=radar] tr > *:nth-of-type(4) {
+.chaarts[class*=radar] tr &gt; *:nth-of-type(4) {
   --index: 4;
 }
 
-.chaarts[class*=radar] tr > *:nth-of-type(5) {
+.chaarts[class*=radar] tr &gt; *:nth-of-type(5) {
   --index: 5;
 }
 
-.chaarts[class*=radar] tr > *:nth-of-type(6) {
+.chaarts[class*=radar] tr &gt; *:nth-of-type(6) {
   --index: 6;
 }
 
-.chaarts[class*=radar] tr > *:nth-of-type(7) {
+.chaarts[class*=radar] tr &gt; *:nth-of-type(7) {
   --index: 7;
 }
 
@@ -365,43 +365,43 @@ <h1>Radar charts</h1>
 
 .chaarts.radar [scope=col]:nth-child(1)::after {
   --integer: calc(var(--1));
-  content: counter(value) " / " counter(scale);
+  content: counter(value) &quot; / &quot; counter(scale);
   counter-reset: value var(--integer);
 }
 
 .chaarts.radar [scope=col]:nth-child(2)::after {
   --integer: calc(var(--2));
-  content: counter(value) " / " counter(scale);
+  content: counter(value) &quot; / &quot; counter(scale);
   counter-reset: value var(--integer);
 }
 
 .chaarts.radar [scope=col]:nth-child(3)::after {
   --integer: calc(var(--3));
-  content: counter(value) " / " counter(scale);
+  content: counter(value) &quot; / &quot; counter(scale);
   counter-reset: value var(--integer);
 }
 
 .chaarts.radar [scope=col]:nth-child(4)::after {
   --integer: calc(var(--4));
-  content: counter(value) " / " counter(scale);
+  content: counter(value) &quot; / &quot; counter(scale);
   counter-reset: value var(--integer);
 }
 
 .chaarts.radar [scope=col]:nth-child(5)::after {
   --integer: calc(var(--5));
-  content: counter(value) " / " counter(scale);
+  content: counter(value) &quot; / &quot; counter(scale);
   counter-reset: value var(--integer);
 }
 
 .chaarts.radar [scope=col]:nth-child(6)::after {
   --integer: calc(var(--6));
-  content: counter(value) " / " counter(scale);
+  content: counter(value) &quot; / &quot; counter(scale);
   counter-reset: value var(--integer);
 }
 
 .chaarts.radar [scope=col]:nth-child(7)::after {
   --integer: calc(var(--7));
-  content: counter(value) " / " counter(scale);
+  content: counter(value) &quot; / &quot; counter(scale);
   counter-reset: value var(--integer);
 }
 </code></pre>
@@ -614,7 +614,7 @@ <h2>Overlapping radars</h2>
 .chaarts.radar-multiple [scope=row]::before {
   background: var(--color, currentcolor);
   block-size: 1rem;
-  content: "";
+  content: &quot;&quot;;
   display: inline-block;
   inline-size: 1rem;
   margin-inline-end: 0.25rem;