diff --git a/docusaurus.config.js b/docusaurus.config.js index 61102b0c..6f810ff8 100644 --- 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 index d35fdb85..ec715938 100644 --- 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() { +
diff --git a/src/styles/custom.scss b/src/styles/custom.scss index d743c19e..67f54344 100644 --- 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%); + } +}