refactor: upgrade deps and drop Gulp

.github/workflows/css.yml

@@ -8,7 +8,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 14
+  NODE: 18
 
 jobs:
   css:
@@ -39,4 +39,4 @@ jobs:
         run: npm ci
 
       - name: Build CSS
-        run: npm run gulp compile
+        run: npm run build

.github/workflows/docs.yml

@@ -8,7 +8,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 14
+  NODE: 18
 
 jobs:
   docs:

.github/workflows/lint.yml

@@ -8,7 +8,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 14
+  NODE: 18
 
 jobs:
   lint:
@@ -39,4 +39,4 @@ jobs:
         run: npm ci
 
       - name: Lint
-        run: npm run gulp lint
+        run: npm run lint

.htmlvalidate.json

@@ -0,0 +1,10 @@
+{
+	"extends": [
+		"html-validate:recommended"
+	],
+	"rules": {
+		"aria-label-misuse": "off",
+		"no-redundant-role": "off",
+		"no-inline-style": "off"
+	}
+}

.nvmrc

@@ -0,0 +1 @@
+18

.pa11yci.json

@@ -0,0 +1,28 @@
+{
+	"standard": "WCAG2AA",
+	"level": "warning",
+	"concurrency": 1,
+	"defaults": {
+		"reporters": [
+			[
+				"pa11y-ci-reporter-html",
+				{
+					"destination": "./reports"
+				}
+			]
+		],
+		"wait": 3000,
+		"runners": [
+			"axe"
+		],
+		"timeout": 100000,
+		"hideElements": "",
+		"ignore": [
+		],
+		"defaults": {
+			"chromeLaunchConfig": {
+				"executablePath": "/snap/bin/chromium"
+			}
+		}
+	}
+}

.stylelintrc.json

@@ -0,0 +1,10 @@
+{
+	"extends": "stylelint-config-recommended-scss",
+	"plugins": [
+		"stylelint-scss"
+	],
+	"rules": {
+		"no-descending-specificity": null,
+		"scss/comment-no-empty": null
+	}
+}

_site/js/script.js

@@ -0,0 +1,32 @@
+(function () {
+	"use strict";
+
+	// Toggle switch component
+	var switches = document.querySelectorAll('[role="switch"]');
+
+	switches.forEach(function (el) {
+		el.addEventListener('click', function () {
+			var checked = this.getAttribute('aria-checked') === 'true' || false;
+			this.setAttribute('aria-checked', !checked);
+
+			if (this.classList.contains('disable-css')) {
+				var chart = this.parentNode.nextElementSibling;
+				chart.classList.toggle('chaarts');
+			}
+		});
+	});
+
+	// Scrollable tables
+	var regions = document.querySelectorAll('.table-container');
+
+	if (window.matchMedia('(min-width: 30em)').matches) {
+		regions.forEach(function (el) {
+			var width = el.offsetWidth;
+			var table = el.querySelector('table');
+
+			if (table.offsetWidth > width) {
+				el.setAttribute('tabindex', '0');
+			}
+		});
+	}
+})(document);

_site/scss/print.scss

@@ -0,0 +1,63 @@
+@media print {
+	body > :not(main),
+	main > :not(.deck),
+	*:not(.card)::after,
+	*:not(.card)::before, {
+		display: none !important;
+	}
+
+	html,
+	body,
+	body > * {
+		background: none !important;
+	}
+
+	/**
+		* 1. No orphans
+		* 2. No widows
+		*/
+	p,
+	blockquote,
+	.deck .card {
+		orphans: 3; /* 1 */
+		widows: 3; /* 2 */
+	}
+
+	/* @note Avoid random page break */
+	ul,
+	ol,
+	blockquote,
+	.deck .card {
+		page-break-inside: avoid;
+		break-inside: avoid;
+	}
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	caption {
+		page-break-after: avoid;
+	}
+
+	/**
+		* @note Display links' target, except for images
+		*/
+	a::after {
+		content: " (" attr(href) ") ";
+		display: inline-block !important;
+	}
+
+	/* Hide anchors' target */
+	a::after img,
+	a[href^="#"]::after,
+	a[href^="javascript"]::after {
+		content: "";
+	}
+
+	abbr::after {
+		content: " (" attr(title) ") ";
+	}
+}

_site/scss/styles.scss

@@ -0,0 +1,19 @@
+@charset "UTF-8";
+
+/* ==================== */
+/* == Vendors
+/* ==================== */
+@use "sseeeedd/src/scss/styles";
+@use "vendors/prism";
+
+.mb-0 {
+	margin-bottom: 0 !important;
+}
+
+.pb-0 {
+	padding-bottom: 0 !important;
+}
+
+.fly-out [rel]::before {
+	content: "\1F30D\A0";
+}

src/scss/vendors/_prism.scss → _site/scss/vendors/_prism.scss

@@ -13,7 +13,7 @@ pre[data-line] {
 	padding: .25em;
 	margin-top: 3.15em;
 	background: white;
-  mix-blend-mode: soft-light;
+	mix-blend-mode: soft-light;
 	pointer-events: none;
 	line-height: inherit;
 	white-space: pre;
@@ -26,5 +26,5 @@ pre[data-line] {
 	left: .5em;
 	min-width: 1ch;
 	color: black;
-  font-weight: 700;
+	font-weight: 700;
 }