[css-fonts-5] update changes

svgeesus · svgeesus · commit 7b9c559382ea · 2021-07-26T17:51:53.000+03:00
diff --git a/css-color-4/workings/hsl-tables-for-color-3-errata.zip b/css-color-4/workings/hsl-tables-for-color-3-errata.zip
diff --git a/css-color-4/workings/hsl-tables-for-color-3-errata/hsl-table-maker.html b/css-color-4/workings/hsl-tables-for-color-3-errata/hsl-table-maker.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - HSL tables for Color 3 errata</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/blissfuljs/1.0.6/bliss.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/css-color-4/workings/hsl-tables-for-color-3-errata/script.js b/css-color-4/workings/hsl-tables-for-color-3-errata/script.js
@@ -0,0 +1,69 @@
+$.ready().then(() => {
+
+let steps = {
+	h: 30,
+	s: 20,
+	l: 10
+};
+	
+let hues = {
+	"0": "Reds",
+	"30": "Reds-Yellows (=Oranges)",
+	"60": "Yellows",
+	"90": "Yellow-Greens",
+	"120": "Greens",
+	"150": "Green-Cyans",
+	"180": "Cyans",
+	"210": "Cyan-Blues",
+	"240": "blues",
+	"270": "Blue-Magentas",
+	"300": "Magentas",
+	"330": "Magenta-Reds",
+};
+	
+let container = $.create("div");
+
+for (let h = 0; h < 360; h += steps.h ) {
+	let table = $.create("table", {
+		innerHTML: `<thead>
+			<tr>
+				<th colspan="10">${h}° ${hues[h]}</th>
+			</tr>
+			<tr>
+				<th></th>
+			</tr>
+		</thead>`,
+		inside: container
+	});
+	let satHeader = $("thead tr:last-of-type", table);
+	
+	for (let s = 100; s >= 0; s -= steps.s) {
+		$.create("th", {
+			textContent: `${s}%`,
+			inside: satHeader
+		});
+	}
+	
+	for (let l = 100; l >= 0; l -= steps.l) {
+		// One row
+		let tr = $.create("tr", {
+			innerHTML: `<th>${l}%</th>`
+		});
+		
+		// 
+		for (let s = 100; s >= 0; s -= steps.s) {
+			let td = $.create("td", {
+				style: {
+					"background-color": `hsl(${h} ${s}% ${l}%)` 
+				},
+				inside: tr
+			});
+		}
+		
+		table.append(tr);
+	}
+}
+	
+document.body.append(container);
+	
+});
diff --git a/css-color-4/workings/hsl-tables-for-color-3-errata/style.css b/css-color-4/workings/hsl-tables-for-color-3-errata/style.css
@@ -0,0 +1,18 @@
+body {
+	background: rgb(46.63% 46.63% 46.63%);
+}
+
+div {
+	display: flex;
+	flex-flow: row wrap;
+	justify-content: space-around;
+	gap: 2em;
+}
+
+table {
+	table-layout: fixed;
+}
+
+td {
+	padding: .75em;
+}
diff --git a/css-fonts-5/Overview.bs b/css-fonts-5/Overview.bs
@@ -713,5 +713,5 @@ Changes
 
 <ul>
 	<li>Removed scary warning notice</li>
-	<li></li>
+	<li>Added incremental font technology to supports</li>
 </ul>
