From cf6b6d56c1793402995c0519eecfbb563de34bb3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Tue, 3 Oct 2023 11:54:50 +0200 Subject: [PATCH] docs(columns): mention col/colgroup --- _site/templates/column-charts.njk | 12 +- _site/templates/includes/_bar-markup.njk | 32 +++--- _site/templates/includes/_column-markup.njk | 39 ++++--- _site/templates/includes/_columns-markup.njk | 45 ++++---- .../templates/includes/_inclusive-toggle.njk | 18 +-- _site/templates/includes/_line-markup.njk | 30 ++--- _site/templates/includes/_pie-markup.njk | 28 ++--- _site/templates/includes/_pie-styles:44.njk | 26 ++--- _site/templates/includes/_pie-styles:64.njk | 26 ++--- _site/templates/includes/_pie-styles:88.njk | 26 ++--- _site/templates/includes/_radar-markup.njk | 26 ++--- _site/templates/includes/_radars-markup.njk | 34 +++--- _site/templates/includes/_svg-encoding.njk | 16 +-- docs/bar-charts.html | 32 +++--- docs/column-charts.html | 96 +++++++++------- docs/index.html | 34 +++--- docs/line-charts.html | 30 ++--- docs/pie-charts.html | 106 +++++++++--------- docs/radar-charts.html | 60 +++++----- src/abstracts/_variables.scss | 3 +- 20 files changed, 380 insertions(+), 339 deletions(-) diff --git a/_site/templates/column-charts.njk b/_site/templates/column-charts.njk index 0282848..47bf30d 100644 --- a/_site/templates/column-charts.njk +++ b/_site/templates/column-charts.njk @@ -63,8 +63,12 @@ — its background color also depending on its value;
  • - and finally its text value — wrapped in a <span> element — - is positioned at the top of the column using the same trick as in the bar chart. + its text value — wrapped in a <span> element — + is positioned at the top of the column using the same trick as in the bar chart; +
    • +
  • + and finally <colgroup> and <col> elements are used to display + a light background for each column, which becomes more visible on :hover.
    • @@ -146,7 +150,7 @@
  • remember to add colspan="2" on the first row's header cell - to match the new table layout; + to match the new table layout— and a span="2" on <col>s;
  • and finally add an identifier to each header cell @@ -169,7 +173,7 @@
  • but no! Thus, a --span custom property is added on <table>, - and must match the colspan attributes values mentionned earlier: + and must match the colspan attributes values mentioned earlier: it is therefore used to extend the first level headers to the appropriate number of columns.
  • diff --git a/_site/templates/includes/_bar-markup.njk b/_site/templates/includes/_bar-markup.njk index 3394510..c3f46df 100644 --- a/_site/templates/includes/_bar-markup.njk +++ b/_site/templates/includes/_bar-markup.njk @@ -1,18 +1,18 @@ 
    <table class="chaarts bar" style="--scale: 3000">
-  <caption id="caption-1">[…]</caption>
-  <thead class="sr-only">
-    <tr>
-      <td></td>
-      <th scope="col">[…]</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">[…]</th>
-      <td style="--value: 4">
-        <span>[…]</span>
-      </td>
-    </tr>
-    <tr>[…]</tr>
-  </tbody>
+	<caption id="caption-1">[…]</caption>
+	<thead class="sr-only">
+		<tr>
+			<td></td>
+			<th scope="col">[…]</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<th scope="row">[…]</th>
+			<td style="--value: 4">
+				<span>[…]</span>
+			</td>
+		</tr>
+		<tr>[…]</tr>
+	</tbody>
 </table>
    diff --git a/_site/templates/includes/_column-markup.njk b/_site/templates/includes/_column-markup.njk index 052a43c..4254592 100644 --- a/_site/templates/includes/_column-markup.njk +++ b/_site/templates/includes/_column-markup.njk @@ -1,17 +1,26 @@ 
    <table class="chaarts column" id="column" style="--y: 7;">
-  <caption id="caption-7">[…]</caption>
-  <thead>
-    <tr>
-      <th scope="row">[…]</th>
-      <th scope="col" style="--value: 62;">Chrome</th>
-      <th scope="col" style="--value: 15;">Firefox</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">[…]</th>
-      <td style="--value: 62;"><span>62%</span></td>
-      <td style="--value: 15;"><span>15%</span></td>
-    </tr>
-  </tbody>
+	<caption id="caption-7">[…]</caption>
+	<colgroup>
+		<col>
+		<col>
+		<col>
+		<col>
+		<col>
+		<col>
+		<col>
+	</colgroup>
+	<thead>
+		<tr>
+			<th scope="row">[…]</th>
+			<th scope="col" style="--value: 62;">Chrome</th>
+			<th scope="col" style="--value: 15;">Firefox</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<th scope="row">[…]</th>
+			<td style="--value: 62;"><span>62%</span></td>
+			<td style="--value: 15;"><span>15%</span></td>
+		</tr>
+	</tbody>
 </table>
    diff --git a/_site/templates/includes/_columns-markup.njk b/_site/templates/includes/_columns-markup.njk index 08d4ab3..3ae3ad5 100644 --- a/_site/templates/includes/_columns-markup.njk +++ b/_site/templates/includes/_columns-markup.njk @@ -1,21 +1,28 @@ 
    <table class="chaarts column-multiple" id="column-multiple" style="--y: 11; --span: 2;">
-  <caption id="caption-8">[…]</caption>
-  <thead>
-    <tr>
-      <th scope="row" id="browser">[…]</th>
-      <th scope="col" colspan="2" id="chrome">Chrome</th>
-    </tr>
-    <tr>
-      <th scope="row" id="year">[…]</th>
-      <th scope="col" id="chrome-2018">2018</th>
-      <th scope="col" id="chrome-2019">2019</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row" id="parts">[…]</th>
-      <td style="--value: 50;" headers="browser chrome year chrome-2018"><span>49.6%</span></td>
-      <td style="--value: 57;" headers="browser chrome year chrome-2019"><span>57%</span></td>
-    </tr>
-  </tbody>
+	<caption id="caption-8">[…]</caption><colgroup>
+		<col>
+		<col span="2">
+		<col span="2">
+		<col span="2">
+		<col span="2">
+		<col span="2">
+	</colgroup>
+	<thead>
+		<tr>
+			<th scope="row" id="browser">[…]</th>
+			<th scope="col" colspan="2" id="chrome">Chrome</th>
+		</tr>
+		<tr>
+			<th scope="row" id="year">[…]</th>
+			<th scope="col" id="chrome-2018">2018</th>
+			<th scope="col" id="chrome-2019">2019</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<th scope="row" id="parts">[…]</th>
+			<td style="--value: 50;" headers="browser chrome year chrome-2018"><span>49.6%</span></td>
+			<td style="--value: 57;" headers="browser chrome year chrome-2019"><span>57%</span></td>
+		</tr>
+	</tbody>
 </table>
    diff --git a/_site/templates/includes/_inclusive-toggle.njk b/_site/templates/includes/_inclusive-toggle.njk index ce31aae..7d67a29 100644 --- a/_site/templates/includes/_inclusive-toggle.njk +++ b/_site/templates/includes/_inclusive-toggle.njk @@ -1,13 +1,13 @@ 
    document.addEventListener("DOMContentLoaded", function() {
-  var switches = document.querySelectorAll('[role="switch"]');
+	var switches = document.querySelectorAll('[role="switch"]');
 
-  Array.prototype.forEach.call(switches, function(el, i) {
-    el.addEventListener('click', function() {
-      var checked = this.getAttribute('aria-checked') == 'true' || false;
-      this.setAttribute('aria-checked', !checked);
+	Array.prototype.forEach.call(switches, function(el, i) {
+		el.addEventListener('click', function() {
+			var checked = this.getAttribute('aria-checked') == 'true' || false;
+			this.setAttribute('aria-checked', !checked);
 
-      var chart = this.parentNode.nextElementSibling;
-      chart.classList.toggle('table-charts');
-    });
-  });
+			var chart = this.parentNode.nextElementSibling;
+			chart.classList.toggle('table-charts');
+		});
+	});
 });
    diff --git a/_site/templates/includes/_line-markup.njk b/_site/templates/includes/_line-markup.njk index ca88cda..54b13c1 100644 --- a/_site/templates/includes/_line-markup.njk +++ b/_site/templates/includes/_line-markup.njk @@ -1,17 +1,17 @@ 
    <table class="chaarts line" style="--y: 32; --x: 13; --t-1: 'Jan.'; --t-2: 'Feb.'; […]">
-  <caption id="caption-3">[…]</caption>
-  <thead>
-    <tr>
-      <th scope="col">[…]</th>
-      <th scope="col">Jan.</th>
-      <th scope="col">[…]</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr style="--year: '2017'; --1: 8; --2: 6; --3: 9; --4: 12; --5: 15; --6: 21; --7: 24; --8: 25; --9: 22; --10: 19; --11: 14; --12: 9;">
-      <th scope="row">2017</th>
-      <td>8 °C</td>
-      <td>[…]</td>
-    </tr>
-  </tbody>
+	<caption id="caption-3">[…]</caption>
+	<thead>
+		<tr>
+			<th scope="col">[…]</th>
+			<th scope="col">Jan.</th>
+			<th scope="col">[…]</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr style="--year: '2017'; --1: 8; --2: 6; --3: 9; --4: 12; --5: 15; --6: 21; --7: 24; --8: 25; --9: 22; --10: 19; --11: 14; --12: 9;">
+			<th scope="row">2017</th>
+			<td>8 °C</td>
+			<td>[…]</td>
+		</tr>
+	</tbody>
 </table>
    diff --git a/_site/templates/includes/_pie-markup.njk b/_site/templates/includes/_pie-markup.njk index 7d862e9..ff59cae 100644 --- a/_site/templates/includes/_pie-markup.njk +++ b/_site/templates/includes/_pie-markup.njk @@ -1,16 +1,16 @@ 
    <table class="chaarts pie">
-  <caption id="caption-5">[…]</caption>
-  <thead class="sr-only">
-    <tr>
-      <th scope="col">[…]</th>
-      <th scope="col">[…]</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr style="--color: var(--chaarts-purple); --term: 'HTML';">
-      <th scope="row">HTML</th>
-      <td style="--value: 2; --start: 0;">2 %</td>
-    </tr>
-    <tr>[…]</tr>
-  </tbody>
+	<caption id="caption-5">[…]</caption>
+	<thead class="sr-only">
+		<tr>
+			<th scope="col">[…]</th>
+			<th scope="col">[…]</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr style="--color: var(--chaarts-purple); --term: 'HTML';">
+			<th scope="row">HTML</th>
+			<td style="--value: 2; --start: 0;">2 %</td>
+		</tr>
+		<tr>[…]</tr>
+	</tbody>
 </table>
    diff --git a/_site/templates/includes/_pie-styles:44.njk b/_site/templates/includes/_pie-styles:44.njk index 0ff0111..4be5b53 100644 --- a/_site/templates/includes/_pie-styles:44.njk +++ b/_site/templates/includes/_pie-styles:44.njk @@ -1,15 +1,15 @@ 
    td[style*="--value: 44;"]::before {
-  clip-path: polygon(
-    50% 50%,
-    50% 0%,
-    100% 0%,
-    100% 50%,
-    100% 100%,
-    95.2413525% 71.2889645%,
-    50% 50%,
-    50% 50%,
-    50% 50%,
-    50% 50%,
-    50% 50%
-  );
+	clip-path: polygon(
+		50% 50%,
+		50% 0%,
+		100% 0%,
+		100% 50%,
+		100% 100%,
+		95.2413525% 71.2889645%,
+		50% 50%,
+		50% 50%,
+		50% 50%,
+		50% 50%,
+		50% 50%
+	);
 }
    diff --git a/_site/templates/includes/_pie-styles:64.njk b/_site/templates/includes/_pie-styles:64.njk index 81ca46f..660b243 100644 --- a/_site/templates/includes/_pie-styles:64.njk +++ b/_site/templates/includes/_pie-styles:64.njk @@ -1,15 +1,15 @@ 
    td[style*="--value: 64;"]::before {
-  clip-path: polygon(
-    50% 50%,
-    50% 0%,
-    100% 0%,
-    100% 50%,
-    100% 100%,
-    100% 100%,
-    0% 100%,
-    11.474338% 81.8711995%,
-    50% 50%,
-    50% 50%,
-    50% 50%
-  );
+	clip-path: polygon(
+		50% 50%,
+		50% 0%,
+		100% 0%,
+		100% 50%,
+		100% 100%,
+		100% 100%,
+		0% 100%,
+		11.474338% 81.8711995%,
+		50% 50%,
+		50% 50%,
+		50% 50%
+	);
 }
    diff --git a/_site/templates/includes/_pie-styles:88.njk b/_site/templates/includes/_pie-styles:88.njk index 2e25b50..1d909d3 100644 --- a/_site/templates/includes/_pie-styles:88.njk +++ b/_site/templates/includes/_pie-styles:88.njk @@ -1,15 +1,15 @@ 
    td[style*="--value: 88;"]::before {
-  clip-path: polygon(
-    50% 50%,
-    50% 0%,
-    100% 0%,
-    100% 50%,
-    100% 100%,
-    100% 100%,
-    0% 100%,
-    0% 50%,
-    0% 0%,
-    15.7726445% 13.5515685%,
-    50% 50%
-  );
+	clip-path: polygon(
+		50% 50%,
+		50% 0%,
+		100% 0%,
+		100% 50%,
+		100% 100%,
+		100% 100%,
+		0% 100%,
+		0% 50%,
+		0% 0%,
+		15.7726445% 13.5515685%,
+		50% 50%
+	);
 }
    diff --git a/_site/templates/includes/_radar-markup.njk b/_site/templates/includes/_radar-markup.njk index 7785d9e..018ba0b 100644 --- a/_site/templates/includes/_radar-markup.njk +++ b/_site/templates/includes/_radar-markup.njk @@ -1,15 +1,15 @@ 
    <table class="chaarts radar" id="radar" style="--scale: 20; --step: 5; --items: 7; --1: 14; --2: 11; --3: 13; --4: 16; --5: 10; --6: 12; --7: 4; --8: var(--1);">
-  <caption id="caption-9">[…]</caption>
-  <thead>
-    <tr>
-      <th scope="col">[…]</th>
-      <th scope="col">[…]</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><span>14</span></td>
-      <td><span>11</span></td>
-    </tr>
-  </tbody>
+	<caption id="caption-9">[…]</caption>
+	<thead>
+		<tr>
+			<th scope="col">[…]</th>
+			<th scope="col">[…]</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td><span>14</span></td>
+			<td><span>11</span></td>
+		</tr>
+	</tbody>
 </table>
    diff --git a/_site/templates/includes/_radars-markup.njk b/_site/templates/includes/_radars-markup.njk index 64db93d..3f7f1b2 100644 --- a/_site/templates/includes/_radars-markup.njk +++ b/_site/templates/includes/_radars-markup.njk @@ -1,19 +1,19 @@ 
    <table class="chaarts radar-multiple" id="radar-multiple" style="--scale: 20; --step: 5; --items: 7; --areas: 2;">
-  <caption id="caption-9">[…]</caption>
-  <thead>
-    <tr>
-      <th scope="col">[…]</th>
-      <th scope="col">[…]</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr style="--color: var(--chaarts-purple); --1: 14; --2: 11; --3: 13; --4: 16; --5: 14; --6: 10; --7: 4; --8: var(--1);">
-      <th scope="row">Gaël</th>
-      <td><span>14</span></td>
-    </tr>
-    <tr style="-color: var(--chaarts-pink); --1: 18; --2: 10; --3: 11; --4: 16; --5: 10; --6: 12; --7: 11; --8: var(--1);">
-      <th scope="row">Luc</th>
-      <td><span>18</span></td>
-    </tr>
-  </tbody>
+	<caption id="caption-9">[…]</caption>
+	<thead>
+		<tr>
+			<th scope="col">[…]</th>
+			<th scope="col">[…]</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr style="--color: var(--chaarts-purple); --1: 14; --2: 11; --3: 13; --4: 16; --5: 14; --6: 10; --7: 4; --8: var(--1);">
+			<th scope="row">Gaël</th>
+			<td><span>14</span></td>
+		</tr>
+		<tr style="-color: var(--chaarts-pink); --1: 18; --2: 10; --3: 11; --4: 16; --5: 10; --6: 12; --7: 11; --8: var(--1);">
+			<th scope="row">Luc</th>
+			<td><span>18</span></td>
+		</tr>
+	</tbody>
 </table>
    diff --git a/_site/templates/includes/_svg-encoding.njk b/_site/templates/includes/_svg-encoding.njk index 848a264..1728231 100644 --- a/_site/templates/includes/_svg-encoding.njk +++ b/_site/templates/includes/_svg-encoding.njk @@ -1,16 +1,16 @@ 
    .chaarts {
-  --stripes: url("data:image/svg+xml,<svg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'><g fill='%23fff9' fill-rule='evenodd'><path d='M5 0h1L0 6V5zM6 5v1H5z'/></g></svg>");
+	--stripes: url("data:image/svg+xml,<svg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'><g fill='%23fff9' fill-rule='evenodd'><path d='M5 0h1L0 6V5zM6 5v1H5z'/></g></svg>");
 }
 
 .chaarts tr:nth-child(2n + 2) {
-  --background: var(--stripes);
+	--background: var(--stripes);
 }
 
 .chaarts td {
-  --size: calc( var(--scale, 100) * 100% );
-  --position: calc( var(--value, 0) / var(--scale, 100) * 100% );
-  background:
-    linear-gradient( right, Window, ButtonFace, ButtonText, Highlight ) var(--position) 0% / var(--size) 100%,
-    var(--background) center / contain;
-  background-blend-mode: hard-light;
+	--size: calc( var(--scale, 100) * 100% );
+	--position: calc( var(--value, 0) / var(--scale, 100) * 100% );
+	background:
+		linear-gradient( right, Window, ButtonFace, ButtonText, Highlight ) var(--position) 0% / var(--size) 100%,
+		var(--background) center / contain;
+	background-blend-mode: hard-light;
 }
    diff --git a/docs/bar-charts.html b/docs/bar-charts.html index 442bc15..93ba7cc 100644 --- a/docs/bar-charts.html +++ b/docs/bar-charts.html @@ -224,22 +224,22 @@

    Bar charts

    HTML 
    <table class="chaarts bar" style="--scale: 3000">
-  <caption id="caption-1">[…]</caption>
-  <thead class="sr-only">
-    <tr>
-      <td></td>
-      <th scope="col">[…]</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">[…]</th>
-      <td style="--value: 4">
-        <span>[…]</span>
-      </td>
-    </tr>
-    <tr>[…]</tr>
-  </tbody>
+	<caption id="caption-1">[…]</caption>
+	<thead class="sr-only">
+		<tr>
+			<td></td>
+			<th scope="col">[…]</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<th scope="row">[…]</th>
+			<td style="--value: 4">
+				<span>[…]</span>
+			</td>
+		</tr>
+		<tr>[…]</tr>
+	</tbody>
 </table>
    diff --git a/docs/column-charts.html b/docs/column-charts.html index 5fe65a4..320dd17 100644 --- a/docs/column-charts.html +++ b/docs/column-charts.html @@ -97,8 +97,12 @@

    Column charts

    — its background color also depending on its value;
  • - and finally its text value — wrapped in a <span> element — - is positioned at the top of the column using the same trick as in the bar chart. + its text value — wrapped in a <span> element — + is positioned at the top of the column using the same trick as in the bar chart; +
    • +
  • + and finally <colgroup> and <col> elements are used to display + a light background for each column, which becomes more visible on :hover.
    • @@ -155,21 +159,30 @@

    Column charts

    HTML 
    <table class="chaarts column" id="column" style="--y: 7;">
-  <caption id="caption-7">[…]</caption>
-  <thead>
-    <tr>
-      <th scope="row">[…]</th>
-      <th scope="col" style="--value: 62;">Chrome</th>
-      <th scope="col" style="--value: 15;">Firefox</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">[…]</th>
-      <td style="--value: 62;"><span>62%</span></td>
-      <td style="--value: 15;"><span>15%</span></td>
-    </tr>
-  </tbody>
+	<caption id="caption-7">[…]</caption>
+	<colgroup>
+		<col>
+		<col>
+		<col>
+		<col>
+		<col>
+		<col>
+		<col>
+	</colgroup>
+	<thead>
+		<tr>
+			<th scope="row">[…]</th>
+			<th scope="col" style="--value: 62;">Chrome</th>
+			<th scope="col" style="--value: 15;">Firefox</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<th scope="row">[…]</th>
+			<td style="--value: 62;"><span>62%</span></td>
+			<td style="--value: 15;"><span>15%</span></td>
+		</tr>
+	</tbody>
 </table>
    @@ -409,7 +422,7 @@

    Multiple columns

  • remember to add colspan="2" on the first row's header cell - to match the new table layout; + to match the new table layout— and a span="2" on <col>s;
  • and finally add an identifier to each header cell @@ -432,7 +445,7 @@

    Multiple columns

  • but no! Thus, a --span custom property is added on <table>, - and must match the colspan attributes values mentionned earlier: + and must match the colspan attributes values mentioned earlier: it is therefore used to extend the first level headers to the appropriate number of columns.
  • @@ -516,25 +529,32 @@

    Multiple columns

    HTML 
    <table class="chaarts column-multiple" id="column-multiple" style="--y: 11; --span: 2;">
-  <caption id="caption-8">[…]</caption>
-  <thead>
-    <tr>
-      <th scope="row" id="browser">[…]</th>
-      <th scope="col" colspan="2" id="chrome">Chrome</th>
-    </tr>
-    <tr>
-      <th scope="row" id="year">[…]</th>
-      <th scope="col" id="chrome-2018">2018</th>
-      <th scope="col" id="chrome-2019">2019</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row" id="parts">[…]</th>
-      <td style="--value: 50;" headers="browser chrome year chrome-2018"><span>49.6%</span></td>
-      <td style="--value: 57;" headers="browser chrome year chrome-2019"><span>57%</span></td>
-    </tr>
-  </tbody>
+	<caption id="caption-8">[…]</caption><colgroup>
+		<col>
+		<col span="2">
+		<col span="2">
+		<col span="2">
+		<col span="2">
+		<col span="2">
+	</colgroup>
+	<thead>
+		<tr>
+			<th scope="row" id="browser">[…]</th>
+			<th scope="col" colspan="2" id="chrome">Chrome</th>
+		</tr>
+		<tr>
+			<th scope="row" id="year">[…]</th>
+			<th scope="col" id="chrome-2018">2018</th>
+			<th scope="col" id="chrome-2019">2019</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<th scope="row" id="parts">[…]</th>
+			<td style="--value: 50;" headers="browser chrome year chrome-2018"><span>49.6%</span></td>
+			<td style="--value: 57;" headers="browser chrome year chrome-2019"><span>57%</span></td>
+		</tr>
+	</tbody>
 </table>
    diff --git a/docs/index.html b/docs/index.html index 58954b1..cba7332 100644 --- a/docs/index.html +++ b/docs/index.html @@ -161,20 +161,20 @@

    What to encode?

    .chaarts {
-  --stripes: url("data:image/svg+xml,<svg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'><g fill='%23fff9' fill-rule='evenodd'><path d='M5 0h1L0 6V5zM6 5v1H5z'/></g></svg>");
+	--stripes: url("data:image/svg+xml,<svg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'><g fill='%23fff9' fill-rule='evenodd'><path d='M5 0h1L0 6V5zM6 5v1H5z'/></g></svg>");
 }
 
 .chaarts tr:nth-child(2n + 2) {
-  --background: var(--stripes);
+	--background: var(--stripes);
 }
 
 .chaarts td {
-  --size: calc( var(--scale, 100) * 100% );
-  --position: calc( var(--value, 0) / var(--scale, 100) * 100% );
-  background:
-    linear-gradient( right, Window, ButtonFace, ButtonText, Highlight ) var(--position) 0% / var(--size) 100%,
-    var(--background) center / contain;
-  background-blend-mode: hard-light;
+	--size: calc( var(--scale, 100) * 100% );
+	--position: calc( var(--value, 0) / var(--scale, 100) * 100% );
+	background:
+		linear-gradient( right, Window, ButtonFace, ButtonText, Highlight ) var(--position) 0% / var(--size) 100%,
+		var(--background) center / contain;
+	background-blend-mode: hard-light;
 }

    User preferences

    @@ -221,17 +221,17 @@

    display and semantics

    document.addEventListener("DOMContentLoaded", function() {
-  var switches = document.querySelectorAll('[role="switch"]');
+	var switches = document.querySelectorAll('[role="switch"]');
 
-  Array.prototype.forEach.call(switches, function(el, i) {
-    el.addEventListener('click', function() {
-      var checked = this.getAttribute('aria-checked') == 'true' || false;
-      this.setAttribute('aria-checked', !checked);
+	Array.prototype.forEach.call(switches, function(el, i) {
+		el.addEventListener('click', function() {
+			var checked = this.getAttribute('aria-checked') == 'true' || false;
+			this.setAttribute('aria-checked', !checked);
 
-      var chart = this.parentNode.nextElementSibling;
-      chart.classList.toggle('table-charts');
-    });
-  });
+			var chart = this.parentNode.nextElementSibling;
+			chart.classList.toggle('table-charts');
+		});
+	});
 });

    diff --git a/docs/line-charts.html b/docs/line-charts.html index 680b923..0c332a8 100644 --- a/docs/line-charts.html +++ b/docs/line-charts.html @@ -252,21 +252,21 @@

    Area charts

    HTML 
    <table class="chaarts line" style="--y: 32; --x: 13; --t-1: 'Jan.'; --t-2: 'Feb.'; […]">
-  <caption id="caption-3">[…]</caption>
-  <thead>
-    <tr>
-      <th scope="col">[…]</th>
-      <th scope="col">Jan.</th>
-      <th scope="col">[…]</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr style="--year: '2017'; --1: 8; --2: 6; --3: 9; --4: 12; --5: 15; --6: 21; --7: 24; --8: 25; --9: 22; --10: 19; --11: 14; --12: 9;">
-      <th scope="row">2017</th>
-      <td>8 °C</td>
-      <td>[…]</td>
-    </tr>
-  </tbody>
+	<caption id="caption-3">[…]</caption>
+	<thead>
+		<tr>
+			<th scope="col">[…]</th>
+			<th scope="col">Jan.</th>
+			<th scope="col">[…]</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr style="--year: '2017'; --1: 8; --2: 6; --3: 9; --4: 12; --5: 15; --6: 21; --7: 24; --8: 25; --9: 22; --10: 19; --11: 14; --12: 9;">
+			<th scope="row">2017</th>
+			<td>8 °C</td>
+			<td>[…]</td>
+		</tr>
+	</tbody>
 </table>
    diff --git a/docs/pie-charts.html b/docs/pie-charts.html index 98509ec..efa6abf 100644 --- a/docs/pie-charts.html +++ b/docs/pie-charts.html @@ -260,20 +260,20 @@

    Law of sines

    HTML 
    <table class="chaarts pie">
-  <caption id="caption-5">[…]</caption>
-  <thead class="sr-only">
-    <tr>
-      <th scope="col">[…]</th>
-      <th scope="col">[…]</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr style="--color: var(--chaarts-purple); --term: 'HTML';">
-      <th scope="row">HTML</th>
-      <td style="--value: 2; --start: 0;">2 %</td>
-    </tr>
-    <tr>[…]</tr>
-  </tbody>
+	<caption id="caption-5">[…]</caption>
+	<thead class="sr-only">
+		<tr>
+			<th scope="col">[…]</th>
+			<th scope="col">[…]</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr style="--color: var(--chaarts-purple); --term: 'HTML';">
+			<th scope="row">HTML</th>
+			<td style="--value: 2; --start: 0;">2 %</td>
+		</tr>
+		<tr>[…]</tr>
+	</tbody>
 </table>
    @@ -512,19 +512,19 @@

    The positions illustrated

    td[style*="--value: 44;"]::before {
-  clip-path: polygon(
-    50% 50%,
-    50% 0%,
-    100% 0%,
-    100% 50%,
-    100% 100%,
-    95.2413525% 71.2889645%,
-    50% 50%,
-    50% 50%,
-    50% 50%,
-    50% 50%,
-    50% 50%
-  );
+	clip-path: polygon(
+		50% 50%,
+		50% 0%,
+		100% 0%,
+		100% 50%,
+		100% 100%,
+		95.2413525% 71.2889645%,
+		50% 50%,
+		50% 50%,
+		50% 50%,
+		50% 50%,
+		50% 50%
+	);
 }
    Code generated for 44%.
    @@ -542,19 +542,19 @@

    The positions illustrated

    td[style*="--value: 64;"]::before {
-  clip-path: polygon(
-    50% 50%,
-    50% 0%,
-    100% 0%,
-    100% 50%,
-    100% 100%,
-    100% 100%,
-    0% 100%,
-    11.474338% 81.8711995%,
-    50% 50%,
-    50% 50%,
-    50% 50%
-  );
+	clip-path: polygon(
+		50% 50%,
+		50% 0%,
+		100% 0%,
+		100% 50%,
+		100% 100%,
+		100% 100%,
+		0% 100%,
+		11.474338% 81.8711995%,
+		50% 50%,
+		50% 50%,
+		50% 50%
+	);
 }
    Code generated for 64%.
    @@ -572,19 +572,19 @@

    The positions illustrated

    td[style*="--value: 88;"]::before {
-  clip-path: polygon(
-    50% 50%,
-    50% 0%,
-    100% 0%,
-    100% 50%,
-    100% 100%,
-    100% 100%,
-    0% 100%,
-    0% 50%,
-    0% 0%,
-    15.7726445% 13.5515685%,
-    50% 50%
-  );
+	clip-path: polygon(
+		50% 50%,
+		50% 0%,
+		100% 0%,
+		100% 50%,
+		100% 100%,
+		100% 100%,
+		0% 100%,
+		0% 50%,
+		0% 0%,
+		15.7726445% 13.5515685%,
+		50% 50%
+	);
 }
    Code generated for 88%.
    diff --git a/docs/radar-charts.html b/docs/radar-charts.html index eccdff5..68b19c9 100644 --- a/docs/radar-charts.html +++ b/docs/radar-charts.html @@ -202,19 +202,19 @@

    Radar charts

    HTML 
    <table class="chaarts radar" id="radar" style="--scale: 20; --step: 5; --items: 7; --1: 14; --2: 11; --3: 13; --4: 16; --5: 10; --6: 12; --7: 4; --8: var(--1);">
-  <caption id="caption-9">[…]</caption>
-  <thead>
-    <tr>
-      <th scope="col">[…]</th>
-      <th scope="col">[…]</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><span>14</span></td>
-      <td><span>11</span></td>
-    </tr>
-  </tbody>
+	<caption id="caption-9">[…]</caption>
+	<thead>
+		<tr>
+			<th scope="col">[…]</th>
+			<th scope="col">[…]</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td><span>14</span></td>
+			<td><span>11</span></td>
+		</tr>
+	</tbody>
 </table>
    @@ -572,23 +572,23 @@

    Overlapping radars

    HTML 
    <table class="chaarts radar-multiple" id="radar-multiple" style="--scale: 20; --step: 5; --items: 7; --areas: 2;">
-  <caption id="caption-9">[…]</caption>
-  <thead>
-    <tr>
-      <th scope="col">[…]</th>
-      <th scope="col">[…]</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr style="--color: var(--chaarts-purple); --1: 14; --2: 11; --3: 13; --4: 16; --5: 14; --6: 10; --7: 4; --8: var(--1);">
-      <th scope="row">Gaël</th>
-      <td><span>14</span></td>
-    </tr>
-    <tr style="-color: var(--chaarts-pink); --1: 18; --2: 10; --3: 11; --4: 16; --5: 10; --6: 12; --7: 11; --8: var(--1);">
-      <th scope="row">Luc</th>
-      <td><span>18</span></td>
-    </tr>
-  </tbody>
+	<caption id="caption-9">[…]</caption>
+	<thead>
+		<tr>
+			<th scope="col">[…]</th>
+			<th scope="col">[…]</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr style="--color: var(--chaarts-purple); --1: 14; --2: 11; --3: 13; --4: 16; --5: 14; --6: 10; --7: 4; --8: var(--1);">
+			<th scope="row">Gaël</th>
+			<td><span>14</span></td>
+		</tr>
+		<tr style="-color: var(--chaarts-pink); --1: 18; --2: 10; --3: 11; --4: 16; --5: 10; --6: 12; --7: 11; --8: var(--1);">
+			<th scope="row">Luc</th>
+			<td><span>18</span></td>
+		</tr>
+	</tbody>
 </table>
    diff --git a/src/abstracts/_variables.scss b/src/abstracts/_variables.scss index 2fa6887..14b946b 100644 --- a/src/abstracts/_variables.scss +++ b/src/abstracts/_variables.scss @@ -5,7 +5,8 @@ // ==================== $width: math.div(1024em, 16) !default; $gutter: 1rem !default; -// Scale: 0.25, 0.5, 1, 1.5, 2, 2.5, 4, 6, 8, 10, 12 + +// Scale values: 0.25, 0.5, 1, 1.5, 2, 2.5, 4, 6, 8, 10, 12 // ==================== // == Patterns