From 088115d823c6e4c7d82dc6563647ab1573fb6006 Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Sun, 6 Mar 2022 15:28:23 -0600
Subject: [PATCH] Test out Carbon Ads

---
 assets/css/carbon.css   | 62 +++++++++++++++++++++++++++++++++++++++++
 assets/css/tailwind.css | 15 +++++++---
 nuxt.config.js          | 13 +++++++++
 3 files changed, 86 insertions(+), 4 deletions(-)
 create mode 100644 assets/css/carbon.css

diff --git a/assets/css/carbon.css b/assets/css/carbon.css
new file mode 100644
index 0000000..b1af60c
--- /dev/null
+++ b/assets/css/carbon.css
@@ -0,0 +1,62 @@
+/* Hidden on mobile for now */
+#carbonads {
+    @apply hidden;
+
+    /* avoid layout shift on mobile */
+    /* min-height: 105.38px;  */
+}
+
+
+/* Immediate wrapper */
+#carbonads > span {
+    @apply flex;
+    @apply flex-col;
+
+    @apply justify-center;
+
+    @apply gap-2;
+}
+
+#carbonads .carbon-wrap {
+    @apply flex;
+    @apply flex-col;
+
+    @apply justify-center;
+
+    @apply gap-2;
+}
+
+
+@media only screen and (min-width: 1350px) {
+    #carbonads {
+        @apply block;
+
+        @apply text-gray-300;
+        font-size: 0.65rem;
+
+        @apply bg-black-1;
+        @apply rounded;
+
+        @apply fixed;
+        right: 15px;
+        bottom: 15px;
+
+        z-index: 100;
+
+        max-width: 160px;
+
+        @apply p-3
+    }
+}
+
+#carbonads .carbon-text {
+    @apply opacity-50;
+}
+
+#carbonads .carbon-poweredby {
+    @apply uppercase;
+    @apply text-center;
+    @apply opacity-25;
+
+    font-size: 0.5rem;
+}
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 0e111a6..8f8391a 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -1,3 +1,4 @@
+
 /**
  * This injects Tailwind's base styles, which is a combination of
  * Normalize.css and some additional base styles.
@@ -9,7 +10,8 @@
  *
  * @import "tailwindcss/base";
  */
-@tailwind base;
+/* @tailwind base; */
+@import "tailwindcss/base";
 
 /**
  * This injects any component classes registered by plugins.
@@ -18,7 +20,8 @@
  *
  * @import "tailwindcss/components";
  */
-@tailwind components;
+/* @tailwind components; */
+@import "tailwindcss/components";
 
 /**
  * Here you would add any of your custom component classes; stuff that you'd
@@ -44,7 +47,11 @@
  *
  * @import "tailwindcss/utilities";
  */
-@tailwind utilities;
+/* @tailwind utilities; */
+@import "tailwindcss/utilities";
+
+/* Carbon ads */
+@import "./carbon.css";
 
 
 
@@ -89,7 +96,7 @@ html {
  */
 
  .container {
-    max-width: 1140px;
+    max-width: 1040px;
  }
 
 .ease {
diff --git a/nuxt.config.js b/nuxt.config.js
index 1333ed7..52956c2 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -113,6 +113,19 @@ export default {
                 href: 'https://www.googletagmanager.com'
             },
         ],
+
+        script: [
+            // Carbon Ads
+            // https://sell.buysellads.com/zones/1294/ad-tags#z=js
+            {
+                // <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7DVK3M&placement=doesitarmcom" id="_carbonads_js"></script>
+                src: 'https://cdn.carbonads.com/carbon.js?serve=CK7DVK3M&placement=doesitarmcom',
+                async: true,
+                type: 'text/javascript',
+                id: '_carbonads_js',
+                body: true
+            }
+        ]
     },
 
     /*