Added min width to ads

elsiehupp · May 11, 2021 · d089020 · d089020
1 parent 1ea09c8
commit d089020
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 19 deletions.
diff --git a/website/macos-big-sur-icons/src/components/Home.vue b/website/macos-big-sur-icons/src/components/Home.vue
@@ -145,25 +145,25 @@
 
           <div class="card-hover relative coral-card">
 
-            <div style="z-index: 2; height: 100%" class="absolute">
+            <div style="z-index: 2; height: 100%" class="relative">
               <script async type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&placement=macosiconscom" id="_carbonads_js"></script>
             </div>
 
             <a
               v-if="isAdOn"
-              class="card-no-ad"
+              class="card-no-ad relative"
               href="https://www.paypal.com/donate/?hosted_button_id=5PMNX4DPW83KN"
               rel="noopener"
               target="_blank"
               style="width: 100%; left: 0;"
               @click="logDonation('support-message')"
             >
               <div class="support-page">
-                <h3 class="coral-Heading--S">
+                <h3 class="coral-Heading--S m-0">
                   Support this page
                 </h3>
-                <p class="coral-Body--S">
-                  Disabling your ad blocker, sharing with others or making a
+                <p class="coral-Body--S m-0">
+                  Please consider disabling your ad blocker or making a
                   <a  
                     rel="noopener"
                     class="coral-Link"
@@ -172,7 +172,7 @@
                   >
                     donation 
                   </a>
-                  are the best ways to support this page.
+                 to support this project.
                 </p>
               </div>
             </a>

diff --git a/website/macos-big-sur-icons/src/components/app.less b/website/macos-big-sur-icons/src/components/app.less
@@ -137,14 +137,17 @@ main{
 }
 
 .support-page{
-    margin: auto;
-    position: relative;
-    padding: 10px;
+    margin: auto !important;
+    position: relative !important;
+    padding: 10px !important;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     display: grid;
-    gap: 10px;
+    gap: 7px;
+    text-align: center;
+    width: calc(100% - 20px ) !important;
+    height: fit-content !important;
 }
 
 .coral--dark .instructions-item{

diff --git a/website/macos-big-sur-icons/src/components/carbon.css b/website/macos-big-sur-icons/src/components/carbon.css
@@ -310,9 +310,9 @@
 }
 
 .icon-list-area #carbonads > span {
-    height: fit-content;
-    /* height: calc(100% - 20px) !important; */
-    padding: 5px 7px 5px 7px;
+    /* height: fit-content; */
+    height: calc(100% - 20px) !important;
+    padding: 10px 7px 10px 7px;
     grid-template-rows: auto 19px;
     gap: 5px;
     margin: auto;

diff --git a/website/macos-big-sur-icons/src/views/Resources.vue b/website/macos-big-sur-icons/src/views/Resources.vue
@@ -20,12 +20,32 @@
 
         <div class="card-hover relative coral-card resources-card-ad">            
             <script async="async" type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&amp;placement=macosiconscom" id="_carbonads_js"></script>
-          <div class="card-no-ad">
-            <p class="coral-Body--M">
-              Support for .icns is on my (long) todo list.
-            </p>
-          </div>
-
+          <a
+              class="card-no-ad relative"
+              href="https://www.paypal.com/donate/?hosted_button_id=5PMNX4DPW83KN"
+              rel="noopener"
+              target="_blank"
+              style="width: 100%; left: 0;"
+              @click="logDonation('support-message')"
+            >
+              <div class="support-page">
+                <h3 class="coral-Heading--S m-0">
+                  Support this page
+                </h3>
+                <p class="coral-Body--S m-0">
+                  Please consider disabling your ad blocker or making a
+                  <a  
+                    rel="noopener"
+                    class="coral-Link"
+                    target="_blank"
+                    href="https://www.paypal.com/donate/?hosted_button_id=5PMNX4DPW83KN"
+                  >
+                    donation 
+                  </a>
+                 to support this project.
+                </p>
+              </div>
+            </a>
         </div>
 
       </div>