From 8be099d0a3e60330682168f872abe496d5058a49 Mon Sep 17 00:00:00 2001
From: Sayz Lim <login@sayzlim.net>
Date: Mon, 13 Mar 2023 23:46:49 +0700
Subject: [PATCH] Update Carbon placement (#782)

---
 theme/scripts/carbon.js |   7 ++-
 theme/styles/carbon.css | 104 +++++++++++++++++++++++-----------------
 2 files changed, 65 insertions(+), 46 deletions(-)

diff --git a/theme/scripts/carbon.js b/theme/scripts/carbon.js
index 3c6652f8..46a9e53f 100644
--- a/theme/scripts/carbon.js
+++ b/theme/scripts/carbon.js
@@ -1,9 +1,12 @@
 // data-md-component="toc"
 document.addEventListener("DOMContentLoaded", function(event) {
-	var toc_inner = document.querySelectorAll('[data-md-component=toc]')[0];
+	var toc_inner = document.querySelectorAll('.md-sidebar__inner')[1];
 	var script = document.createElement("script");
 	script.src = '//cdn.carbonads.com/carbon.js?serve=CK7DT2QW&placement=vaporcodes';
 	script.type = 'text/javascript';
 	script.id = '_carbonads_js';
-	toc_inner.appendChild(script);
+
+	if(typeof toc_inner !== undefined && window.innerWidth > 960) {
+		toc_inner.appendChild(script);
+	}
 });
diff --git a/theme/styles/carbon.css b/theme/styles/carbon.css
index e1af32c4..bf2dba36 100644
--- a/theme/styles/carbon.css
+++ b/theme/styles/carbon.css
@@ -1,61 +1,77 @@
+#carbonads * {
+	margin: initial;
+	padding: initial;
+	line-height: initial;
+}
+
 #carbonads {
-  margin-left: 10px;
-  margin-top: 12px;
-  display: block;
-  overflow: hidden;
-  max-width: 160px;
-  border: solid 1px hsla(0, 0%, 0%, .1);
-  border-radius: 4px;
-  background-color: hsl(0, 0%, 98%);
-  text-align: center;
-  font-size: 12px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
-    Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
-  line-height: 1.5;
+	--carbon-font-size: 12px;
+	--carbon-padding: 1.5ch;
+	--carbon-max-char: 20ch;
+	--carbon-bg-primary: hsl(0, 0%, 98%);
+	--carbon-bg-secondary: hsl(0, 0%, 92%);
+	--carbon-text-color: hsl(0, 0%, 20%);
+}
+
+#carbonads {
+	z-index: 10;
+	font-size: var(--carbon-font-size);
+	font-family: var(--carbon-font-family);
+}
+
+#carbonads > span {
+	display: flex;
+	flex-direction: column;
+	min-inline-size: 130px;
+	max-inline-size: calc(
+		130px + calc(var(--carbon-padding) * 2)
+	);
+	margin-inline: 0.6rem;
+	margin-block-start: 0.6rem;
+	padding: var(--carbon-padding);
+	gap: var(--carbon-padding);
+	background-color: var(--carbon-bg-primary);
+	box-shadow: 0 0 0 1px var(--carbon-bg-secondary);
 }
 
 #carbonads a {
-  color: inherit;
-  text-decoration: none;
+	color: var(--carbon-text-color);
+	text-decoration: none;
 }
 
 #carbonads a:hover {
-  color: inherit;
+	color: var(--carbon-text-color);
 }
 
-#carbonads span {
-  position: relative;
-  display: block;
-  overflow: hidden;
+#carbonads .carbon-wrap {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1.5ex;
 }
 
-.carbon-img {
-  display: block;
-  margin-bottom: 8px;
-  max-width: 160px;
-  line-height: 1;
+#carbonads .carbon-img {
+	flex: 0 0 130px;
 }
 
-.carbon-img img {
-  display: block;
-  margin: 0 auto;
-  max-width: 160px !important;
-  width: 160px;
-  height: auto;
+#carbonads .carbon-img img {
+	display: block;
 }
 
-.carbon-text {
-  display: block;
-  padding: 0 1em 8px;
+#carbonads .carbon-text {
+	flex-grow: 1;
+	flex-basis: var(--carbon-max-char);
+	line-height: 1.4;
+	text-align: left;
 }
 
-.carbon-poweredby {
-  display: block;
-  padding: 10px 12px;
-  background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4);
-  text-transform: uppercase;
-  letter-spacing: .5px;
-  font-weight: 600;
-  font-size: 9px;
-  line-height: 0;
-}
+#carbonads .carbon-poweredby {
+	padding: 6px 8px;
+	background: var(--carbon-bg-secondary);
+	color: var(--carbon-text-color);
+	font-weight: 600;
+	font-size: 0.6em;
+	line-height: 1.4;
+	letter-spacing: 0.2ch;
+	text-align: center;
+	text-transform: uppercase;
+}
\ No newline at end of file