From f13bb2156e9812f79a380abcb7b7e8b0a8c988b2 Mon Sep 17 00:00:00 2001
From: Sayz Lim <github@sayzlim.net>
Date: Sat, 27 Aug 2022 00:54:31 +0700
Subject: [PATCH 1/3] Add Carbon

---
 _includes/plain.njk       |   7 ++-
 assets/css/carbon.css     | 110 ++++++++++++++++++++++++++++++++++++++
 assets/css/carbon.postcss | 110 ++++++++++++++++++++++++++++++++++++++
 assets/css/style.css      |   2 +
 assets/css/style.postcss  |   2 +
 5 files changed, 230 insertions(+), 1 deletion(-)
 create mode 100644 assets/css/carbon.css
 create mode 100644 assets/css/carbon.postcss

diff --git a/_includes/plain.njk b/_includes/plain.njk
index d3f70c994..26e8ddb69 100644
--- a/_includes/plain.njk
+++ b/_includes/plain.njk
@@ -20,6 +20,11 @@
 
 {{ content | safe }}
 
+
+<aside class="carbon">
+	<script async src="//cdn.carbonads.com/carbon.js?serve=CEAIPK7J&placement=colorjsio" id="_carbonads_js"></script>
+</aside>
+
 <footer>
 	From <a href="http://lea.verou.me">Lea Verou</a> (co-editor of CSS Color 4 and 5)
 	and <a href="https://svgees.us">Chris Lilley</a> (co-editor of CSS Color 3, 4, and 5; W3C representative to ICC)
@@ -35,4 +40,4 @@
 <script src="{{ page | relative }}/assets/js/index.js" type="module"></script>
 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/assets/css/carbon.css b/assets/css/carbon.css
new file mode 100644
index 000000000..c8c7ca3a7
--- /dev/null
+++ b/assets/css/carbon.css
@@ -0,0 +1,110 @@
+aside.carbon {
+	flex: 1;
+	width: var(--page-width);
+	max-width: calc(100vw - 2em);
+	margin: 1em auto 0;
+	padding: 1em;
+	position: relative;
+}
+
+#carbonads * {
+	margin: initial;
+	padding: initial;
+}
+
+#carbonads {
+	display: flex;
+	position: fixed;
+	left: 50%;
+	transform: translateX(calc(var(--page-width) / 2 + 1.5rem));
+	bottom: 3rem;
+
+	font-size: .675em;
+	overflow: hidden;
+	max-width: 130px;
+	border-radius: 4px;
+	z-index: 2;
+	background-color: hsl(240, 10%, 98%);
+	box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.15);
+}
+
+#carbonads a {
+	text-decoration: none;
+	color: #111;
+}
+
+#carbonads a:hover {
+	color: #111;
+}
+
+#carbonads .carbon-img {
+	display: block;
+
+	line-height: 1;
+	max-width: 130px;
+}
+
+#carbonads .carbon-img img {
+	display: block;
+	margin: 0 auto;
+
+	width: 130px;
+	height: 100px;
+}
+
+#carbonads .carbon-text {
+	display: block;
+	padding: 8px 10px;
+
+	line-height: 1.35;
+	text-align: left;
+}
+
+#carbonads .carbon-poweredby {
+	display: block;
+	padding: 10px;
+
+	font-size: .5rem;
+	font-weight: 600;
+	line-height: 0;
+	letter-spacing: .02ch;
+	text-transform: uppercase;
+	background-color: hsl(240, 10%, 95%);
+}
+
+@media only screen and (max-width: 1279px) {
+	#carbonads {
+		position: relative;
+		max-width: 360px;
+		inset: initial;
+		transform: initial;
+		background-color: hsl(240, 10%, 98%);
+	}
+
+	#carbonads .carbon-wrap {
+		display: flex;
+
+		flex-direction: row;
+	}
+
+	#carbonads .carbon-img {
+		margin: 0;
+	}
+
+	#carbonads .carbon-text {
+		display: block;
+		font-size: .75rem;
+		padding: .75rem .75rem 0 .75rem;
+		margin-bottom: 2em;
+	}
+
+	#carbonads .carbon-poweredby {
+		position: absolute;
+		right: 0;
+		bottom: 0;
+
+		text-align: center;
+		border-radius: 0;
+		border-top-left-radius: 3px;
+	}
+}
diff --git a/assets/css/carbon.postcss b/assets/css/carbon.postcss
new file mode 100644
index 000000000..c8c7ca3a7
--- /dev/null
+++ b/assets/css/carbon.postcss
@@ -0,0 +1,110 @@
+aside.carbon {
+	flex: 1;
+	width: var(--page-width);
+	max-width: calc(100vw - 2em);
+	margin: 1em auto 0;
+	padding: 1em;
+	position: relative;
+}
+
+#carbonads * {
+	margin: initial;
+	padding: initial;
+}
+
+#carbonads {
+	display: flex;
+	position: fixed;
+	left: 50%;
+	transform: translateX(calc(var(--page-width) / 2 + 1.5rem));
+	bottom: 3rem;
+
+	font-size: .675em;
+	overflow: hidden;
+	max-width: 130px;
+	border-radius: 4px;
+	z-index: 2;
+	background-color: hsl(240, 10%, 98%);
+	box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.15);
+}
+
+#carbonads a {
+	text-decoration: none;
+	color: #111;
+}
+
+#carbonads a:hover {
+	color: #111;
+}
+
+#carbonads .carbon-img {
+	display: block;
+
+	line-height: 1;
+	max-width: 130px;
+}
+
+#carbonads .carbon-img img {
+	display: block;
+	margin: 0 auto;
+
+	width: 130px;
+	height: 100px;
+}
+
+#carbonads .carbon-text {
+	display: block;
+	padding: 8px 10px;
+
+	line-height: 1.35;
+	text-align: left;
+}
+
+#carbonads .carbon-poweredby {
+	display: block;
+	padding: 10px;
+
+	font-size: .5rem;
+	font-weight: 600;
+	line-height: 0;
+	letter-spacing: .02ch;
+	text-transform: uppercase;
+	background-color: hsl(240, 10%, 95%);
+}
+
+@media only screen and (max-width: 1279px) {
+	#carbonads {
+		position: relative;
+		max-width: 360px;
+		inset: initial;
+		transform: initial;
+		background-color: hsl(240, 10%, 98%);
+	}
+
+	#carbonads .carbon-wrap {
+		display: flex;
+
+		flex-direction: row;
+	}
+
+	#carbonads .carbon-img {
+		margin: 0;
+	}
+
+	#carbonads .carbon-text {
+		display: block;
+		font-size: .75rem;
+		padding: .75rem .75rem 0 .75rem;
+		margin-bottom: 2em;
+	}
+
+	#carbonads .carbon-poweredby {
+		position: absolute;
+		right: 0;
+		bottom: 0;
+
+		text-align: center;
+		border-radius: 0;
+		border-top-left-radius: 3px;
+	}
+}
diff --git a/assets/css/style.css b/assets/css/style.css
index 5fa938a22..caace5b9f 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,6 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@100..900&display=swap');
 @import url('prism.css');
+@import url('carbon.css');
 @import url('../../notebook/color-notebook.css');
 
 :root {
@@ -469,3 +470,4 @@ pre[class*="language-"] {
 	--label: "Note";
 	--emoji: "👉🏼";
 }
+
diff --git a/assets/css/style.postcss b/assets/css/style.postcss
index b6dd3cf6e..897964c02 100644
--- a/assets/css/style.postcss
+++ b/assets/css/style.postcss
@@ -1,6 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@100..900&display=swap');
 @import url('prism.css');
+@import url('carbon.css');
 @import url('../../notebook/color-notebook.css');
 
 :root {
@@ -459,3 +460,4 @@ pre[class*="language-"] {
 	--label: "Note";
 	--emoji: "👉🏼";
 }
+

From 864340be6d88c07ae6d290cc8dacdebb40d4fb36 Mon Sep 17 00:00:00 2001
From: Sayz Lim <github@sayzlim.net>
Date: Sat, 27 Aug 2022 01:36:14 +0700
Subject: [PATCH 2/3] Sort with Prettier

---
 assets/css/carbon.postcss | 41 +++++++++++++++++++--------------------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/assets/css/carbon.postcss b/assets/css/carbon.postcss
index c8c7ca3a7..fa56356e6 100644
--- a/assets/css/carbon.postcss
+++ b/assets/css/carbon.postcss
@@ -1,10 +1,10 @@
 aside.carbon {
+	position: relative;
 	flex: 1;
 	width: var(--page-width);
 	max-width: calc(100vw - 2em);
 	margin: 1em auto 0;
 	padding: 1em;
-	position: relative;
 }
 
 #carbonads * {
@@ -14,23 +14,25 @@ aside.carbon {
 
 #carbonads {
 	display: flex;
+	z-index: 2;
 	position: fixed;
-	left: 50%;
-	transform: translateX(calc(var(--page-width) / 2 + 1.5rem));
 	bottom: 3rem;
-
-	font-size: .675em;
-	overflow: hidden;
+	left: 50%;
 	max-width: 130px;
+	overflow: hidden;
+	transform: translateX(
+		calc(var(--page-width) / 2 + 1.5rem)
+	);
 	border-radius: 4px;
-	z-index: 2;
 	background-color: hsl(240, 10%, 98%);
 	box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.15);
+
+	font-size: 0.675em;
 }
 
 #carbonads a {
-	text-decoration: none;
 	color: #111;
+	text-decoration: none;
 }
 
 #carbonads a:hover {
@@ -39,23 +41,20 @@ aside.carbon {
 
 #carbonads .carbon-img {
 	display: block;
-
-	line-height: 1;
 	max-width: 130px;
+	line-height: 1;
 }
 
 #carbonads .carbon-img img {
 	display: block;
-	margin: 0 auto;
-
 	width: 130px;
 	height: 100px;
+	margin: 0 auto;
 }
 
 #carbonads .carbon-text {
 	display: block;
 	padding: 8px 10px;
-
 	line-height: 1.35;
 	text-align: left;
 }
@@ -63,13 +62,13 @@ aside.carbon {
 #carbonads .carbon-poweredby {
 	display: block;
 	padding: 10px;
-
-	font-size: .5rem;
+	background-color: hsl(240, 10%, 95%);
 	font-weight: 600;
+
+	font-size: 0.5rem;
 	line-height: 0;
-	letter-spacing: .02ch;
+	letter-spacing: 0.02ch;
 	text-transform: uppercase;
-	background-color: hsl(240, 10%, 95%);
 }
 
 @media only screen and (max-width: 1279px) {
@@ -93,18 +92,18 @@ aside.carbon {
 
 	#carbonads .carbon-text {
 		display: block;
-		font-size: .75rem;
-		padding: .75rem .75rem 0 .75rem;
 		margin-bottom: 2em;
+		padding: 0.75rem 0.75rem 0 0.75rem;
+		font-size: 0.75rem;
 	}
 
 	#carbonads .carbon-poweredby {
 		position: absolute;
 		right: 0;
 		bottom: 0;
-
-		text-align: center;
 		border-radius: 0;
 		border-top-left-radius: 3px;
+
+		text-align: center;
 	}
 }

From dff5a3515050d72a08ef4f5fca9b148576ed8f57 Mon Sep 17 00:00:00 2001
From: Sayz Lim <github@sayzlim.net>
Date: Sat, 27 Aug 2022 01:37:42 +0700
Subject: [PATCH 3/3] Update Carbon placement

Move it to the right edge of the viewport.
---
 assets/css/carbon.css     | 38 +++++++++++++++++---------------------
 assets/css/carbon.postcss |  5 +----
 2 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/assets/css/carbon.css b/assets/css/carbon.css
index c8c7ca3a7..5341866e6 100644
--- a/assets/css/carbon.css
+++ b/assets/css/carbon.css
@@ -1,10 +1,10 @@
 aside.carbon {
+	position: relative;
 	flex: 1;
 	width: var(--page-width);
 	max-width: calc(100vw - 2em);
 	margin: 1em auto 0;
 	padding: 1em;
-	position: relative;
 }
 
 #carbonads * {
@@ -14,23 +14,22 @@ aside.carbon {
 
 #carbonads {
 	display: flex;
+	z-index: 2;
 	position: fixed;
-	left: 50%;
-	transform: translateX(calc(var(--page-width) / 2 + 1.5rem));
 	bottom: 3rem;
-
-	font-size: .675em;
-	overflow: hidden;
+	right: 2rem;
 	max-width: 130px;
+	overflow: hidden;
 	border-radius: 4px;
-	z-index: 2;
 	background-color: hsl(240, 10%, 98%);
 	box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.15);
+
+	font-size: 0.675em;
 }
 
 #carbonads a {
-	text-decoration: none;
 	color: #111;
+	text-decoration: none;
 }
 
 #carbonads a:hover {
@@ -39,23 +38,20 @@ aside.carbon {
 
 #carbonads .carbon-img {
 	display: block;
-
-	line-height: 1;
 	max-width: 130px;
+	line-height: 1;
 }
 
 #carbonads .carbon-img img {
 	display: block;
-	margin: 0 auto;
-
 	width: 130px;
 	height: 100px;
+	margin: 0 auto;
 }
 
 #carbonads .carbon-text {
 	display: block;
 	padding: 8px 10px;
-
 	line-height: 1.35;
 	text-align: left;
 }
@@ -63,13 +59,13 @@ aside.carbon {
 #carbonads .carbon-poweredby {
 	display: block;
 	padding: 10px;
-
-	font-size: .5rem;
+	background-color: hsl(240, 10%, 95%);
 	font-weight: 600;
+
+	font-size: 0.5rem;
 	line-height: 0;
-	letter-spacing: .02ch;
+	letter-spacing: 0.02ch;
 	text-transform: uppercase;
-	background-color: hsl(240, 10%, 95%);
 }
 
 @media only screen and (max-width: 1279px) {
@@ -93,18 +89,18 @@ aside.carbon {
 
 	#carbonads .carbon-text {
 		display: block;
-		font-size: .75rem;
-		padding: .75rem .75rem 0 .75rem;
 		margin-bottom: 2em;
+		padding: 0.75rem 0.75rem 0 0.75rem;
+		font-size: 0.75rem;
 	}
 
 	#carbonads .carbon-poweredby {
 		position: absolute;
 		right: 0;
 		bottom: 0;
-
-		text-align: center;
 		border-radius: 0;
 		border-top-left-radius: 3px;
+
+		text-align: center;
 	}
 }
diff --git a/assets/css/carbon.postcss b/assets/css/carbon.postcss
index fa56356e6..5341866e6 100644
--- a/assets/css/carbon.postcss
+++ b/assets/css/carbon.postcss
@@ -17,12 +17,9 @@ aside.carbon {
 	z-index: 2;
 	position: fixed;
 	bottom: 3rem;
-	left: 50%;
+	right: 2rem;
 	max-width: 130px;
 	overflow: hidden;
-	transform: translateX(
-		calc(var(--page-width) / 2 + 1.5rem)
-	);
 	border-radius: 4px;
 	background-color: hsl(240, 10%, 98%);
 	box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.15);