Add Carbon (#211)

color-js · Aug 27, 2022 · 74da04a · 74da04a
1 parent e9e9d62
commit 74da04a
Show file tree

Hide file tree

Showing 5 changed files with 222 additions and 1 deletion.
diff --git 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>
+</html>
diff --git a/assets/css/carbon.css b/assets/css/carbon.css
@@ -0,0 +1,106 @@
+aside.carbon {
+	position: relative;
+	flex: 1;
+	width: var(--page-width);
+	max-width: calc(100vw - 2em);
+	margin: 1em auto 0;
+	padding: 1em;
+}
+
+#carbonads * {
+	margin: initial;
+	padding: initial;
+}
+
+#carbonads {
+	display: flex;
+	z-index: 2;
+	position: fixed;
+	bottom: 3rem;
+	right: 2rem;
+	max-width: 130px;
+	overflow: hidden;
+	border-radius: 4px;
+	background-color: hsl(240, 10%, 98%);
+	box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.15);
+
+	font-size: 0.675em;
+}
+
+#carbonads a {
+	color: #111;
+	text-decoration: none;
+}
+
+#carbonads a:hover {
+	color: #111;
+}
+
+#carbonads .carbon-img {
+	display: block;
+	max-width: 130px;
+	line-height: 1;
+}
+
+#carbonads .carbon-img img {
+	display: block;
+	width: 130px;
+	height: 100px;
+	margin: 0 auto;
+}
+
+#carbonads .carbon-text {
+	display: block;
+	padding: 8px 10px;
+	line-height: 1.35;
+	text-align: left;
+}
+
+#carbonads .carbon-poweredby {
+	display: block;
+	padding: 10px;
+	background-color: hsl(240, 10%, 95%);
+	font-weight: 600;
+
+	font-size: 0.5rem;
+	line-height: 0;
+	letter-spacing: 0.02ch;
+	text-transform: uppercase;
+}
+
+@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;
+		margin-bottom: 2em;
+		padding: 0.75rem 0.75rem 0 0.75rem;
+		font-size: 0.75rem;
+	}
+
+	#carbonads .carbon-poweredby {
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		border-radius: 0;
+		border-top-left-radius: 3px;
+
+		text-align: center;
+	}
+}
diff --git a/assets/css/carbon.postcss b/assets/css/carbon.postcss
@@ -0,0 +1,106 @@
+aside.carbon {
+	position: relative;
+	flex: 1;
+	width: var(--page-width);
+	max-width: calc(100vw - 2em);
+	margin: 1em auto 0;
+	padding: 1em;
+}
+
+#carbonads * {
+	margin: initial;
+	padding: initial;
+}
+
+#carbonads {
+	display: flex;
+	z-index: 2;
+	position: fixed;
+	bottom: 3rem;
+	right: 2rem;
+	max-width: 130px;
+	overflow: hidden;
+	border-radius: 4px;
+	background-color: hsl(240, 10%, 98%);
+	box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.15);
+
+	font-size: 0.675em;
+}
+
+#carbonads a {
+	color: #111;
+	text-decoration: none;
+}
+
+#carbonads a:hover {
+	color: #111;
+}
+
+#carbonads .carbon-img {
+	display: block;
+	max-width: 130px;
+	line-height: 1;
+}
+
+#carbonads .carbon-img img {
+	display: block;
+	width: 130px;
+	height: 100px;
+	margin: 0 auto;
+}
+
+#carbonads .carbon-text {
+	display: block;
+	padding: 8px 10px;
+	line-height: 1.35;
+	text-align: left;
+}
+
+#carbonads .carbon-poweredby {
+	display: block;
+	padding: 10px;
+	background-color: hsl(240, 10%, 95%);
+	font-weight: 600;
+
+	font-size: 0.5rem;
+	line-height: 0;
+	letter-spacing: 0.02ch;
+	text-transform: uppercase;
+}
+
+@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;
+		margin-bottom: 2em;
+		padding: 0.75rem 0.75rem 0 0.75rem;
+		font-size: 0.75rem;
+	}
+
+	#carbonads .carbon-poweredby {
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		border-radius: 0;
+		border-top-left-radius: 3px;
+
+		text-align: center;
+	}
+}
diff --git 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
@@ -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: "👉🏼";
 }
+