Carbon

Lissy93 · Jan 7, 2024 · 9ddfee3 · 9ddfee3
1 parent bb62cc7
commit 9ddfee3
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 2 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -143,6 +143,10 @@ module.exports = {
       },
     ],
   ],
-  // Analytics (no tracking, just hit counter, using self-hosted Plausible)
-  scripts: [{src: 'https://no-track.as93.net/js/script.js', defer: true, 'data-domain': 'dashy.to'}],
+  scripts: [
+    // Plausible Analytics (no tracking, just hit counter, using self-hosted Plausible)
+    {src: 'https://no-track.as93.net/js/script.js', defer: true, 'data-domain': 'dashy.to'},
+    // Carbon Ads
+    { src: '//cdn.carbonads.com/carbon.js?serve=CWYIC53L&placement=dashyto', async: true, id: '_carbonads_js' },
+  ],
 };
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import Layout from '@theme/Layout';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Head from '@docusaurus/Head';
 import styles from './index.module.scss';
 
 
@@ -13,6 +14,7 @@ export default function Home() {
     <Layout
       title={siteConfig.title}
       description="Description will go into a meta tag in <head />">
+        <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CWYIC53L&placement=dashyto" id="_carbonads_js"></script>
       <HomePageHeader />
       <HomePageFeatures />
       <main>

diff --git a/src/styles/custom.scss b/src/styles/custom.scss
@@ -154,3 +154,91 @@ html[data-theme='light'] {
     }
   }
 }
+
+/* Carbon */
+#carbonads * {
+  margin: initial;
+  padding: initial;
+  line-height: initial;
+}
+
+#carbonads {
+  --carbon-font-family: -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+    'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --carbon-font-size: 14px;
+  --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%);
+  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 + var(--carbon-max-char) + 8ch
+  );
+  padding: var(--carbon-padding);
+  gap: var(--carbon-padding);
+  background-color: var(--carbon-bg-primary);
+  box-shadow: 0 0 1px hsl(0deg 0% 0% / 0.085),
+    0 0 2px hsl(0deg 0% 0% / 0.085),
+    0 0 4px hsl(0deg 0% 0% / 0.085),
+    0 0 8px hsl(0deg 0% 0% / 0.085);
+}
+
+#carbonads a {
+  color: var(--carbon-text-color);
+  text-decoration: none;
+}
+
+#carbonads a:hover {
+  color: var(--carbon-text-color);
+}
+
+#carbonads .carbon-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5ex;
+}
+
+#carbonads .carbon-img {
+  flex: 0 0 130px;
+}
+
+#carbonads .carbon-img img {
+  display: block;
+}
+
+#carbonads .carbon-text {
+  flex-grow: 1;
+  flex-basis: var(--carbon-max-char);
+  line-height: 1.4;
+  text-align: left;
+}
+
+#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;
+}
+
+@media (prefers-color-scheme: dark) {
+  #carbonads {
+    --carbon-bg-primary: hsl(0, 0%, 12%);
+    --carbon-bg-secondary: hsl(0, 0%, 15%);
+    --carbon-text-color: hsl(0, 0%, 90%);
+  }
+}