Add carbon ads

components/custom-ad.tsx

@@ -1,6 +1,8 @@
+import { Box } from '@chakra-ui/react';
+
 export const CustomAd = () => {
   return (
-    <div id='carbonads'>
+    <Box className='custom-ad' d={['none !important', 'flex !important']}>
       <span>
         <span className='carbon-wrap'>
           <a
@@ -32,6 +34,6 @@ export const CustomAd = () => {
           Sponsored by
         </a>
       </span>
-    </div>
+    </Box>
   );
 };

components/footer.tsx

@@ -66,7 +66,7 @@ export function Footer() {
       </Container>
 
       <CustomAd />
-      {process.env.GA_SECRET && false && (
+      {process.env.GA_SECRET && (
         <script
           async
           type='text/javascript'

styles/carbon.css

@@ -1,4 +1,4 @@
-#carbonads {
+#carbonads, .custom-ad {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
   Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
   position: fixed;
@@ -6,29 +6,34 @@
   right: 20px;
 }
 
-#carbonads {
+.custom-ad {
+  left: 20px !important;
+  right: auto !important;
+}
+
+#carbonads, .custom-ad {
   display: flex;
   max-width: 330px;
   background-color: hsl(0, 0%, 98%);
   box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, .1);
 }
 
-#carbonads a {
+#carbonads a, .custom-ad a {
   color: inherit;
   text-decoration: none;
 }
 
-#carbonads a:hover {
+#carbonads a:hover, .custom-ad a:hover {
   color: inherit;
 }
 
-#carbonads span {
+#carbonads span, .custom-ad span {
   position: relative;
   display: block;
   overflow: hidden;
 }
 
-#carbonads .carbon-wrap {
+#carbonads .carbon-wrap, .custom-ad .carbon-wrap  {
   display: flex;
 }