docs: tweak ads position

kazupon · Mar 26, 2023 · f7ed979 · f7ed979
1 parent 50abaf2
commit f7ed979
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 15 deletions.
diff --git a/vuepress/.vuepress/theme/Layout.vue b/vuepress/.vuepress/theme/Layout.vue
@@ -35,8 +35,8 @@ export default {
     display: block;
     /* top: 87px; */
     /* right: -12px; */
-    float: right;
-    height: 221px;
+    /* float: right; */
+    /* height: 221px; */
     /* width: 0; */
     padding: 0 0 20px 30px;
     margin-top: 20px;

diff --git a/vuepress/.vuepress/theme/components/CarbonAds.vue b/vuepress/.vuepress/theme/components/CarbonAds.vue
@@ -28,28 +28,38 @@ export default {
 <style>
 .carbon-ads {
   min-height: 102px;
-  padding: 1.5rem 1.5rem 0;
-  margin-bottom: -0.5rem;
+  /* padding: 1.5rem 1.5rem 0; */
+  /* margin-bottom: -0.5rem; */
+  margin-bottom: 1.5rem;
   font-size: 0.75rem;
 
-  width: 125px;
-  position: fixed;
+  /* width: 125px; */
+  /* position: fixed; */
+  position: relative;
   z-index: 1;
-  bottom: 22px;
-  right: 14px;
-  padding: 10px;
-  /* background-color: #fff; */
-  /* border-radius: 3px; */
-  /* font-size: 13px; */
+  /* bottom: 22px; *
+  /* right: 14px; */
+  top: 87px;
+  right: 0;
+  max-width: 740px;
+  margin: 0 auto;
+  padding: 2rem 2.5rem !important;
+  background-color: #fff;
+  border-radius: 3px;
+  font-size: 13px;
 }
 
 @media screen and (max-width: 1300px) {
   .carbon-ads {
     position: relative;
+    /* float: right; */
     top: 87px;
-    right: 12px;
-    float: right;
-    padding: 0 0 20px 30px;
+    right: 0;
+    /* padding: 0 0 20px 30px; */
+    padding: 2rem 2.5rem !important;
+    max-width: 740px;
+    margin: 0 auto;
+    padding: 2rem 2.5rem;
   }
 }
 
@@ -81,4 +91,11 @@ export default {
     height: 77px;
   }
 }
+
+@media (min-width: 320px) and (max-width: 759px) {
+  .carbon-ads {
+    left: 1.5rem !important;
+    padding: 0.5rem !important;
+  }
+}
 </style>