Revert decorateButtons function, apply callout cta styling (#226)

scripts/lib-franklin.js

@@ -619,25 +619,11 @@ export function decorateButtons(element) {
     a.title = a.title || a.textContent;
     if (a.href !== a.textContent) {
       const up = a.parentElement;
-      const down = a.firstElementChild;
       const twoup = a.parentElement.parentElement;
       if (!a.querySelector('img')) {
-        if (up.childNodes.length === 1 && (up.tagName === 'P' || up.tagName === 'DIV') && twoup.parentElement.className !== 'mega-nav' && twoup.parentElement.parentElement.className !== 'login') {
-          a.className = 'button'; // default
-          up.classList.add('button-container');
-          if (a.childElementCount === 1 && down.tagName === 'STRONG') {
-            a.classList.add('cta');
-            a.innerHTML = down.innerHTML;
-          } else if (a.childElementCount === 1 && down.tagName === 'EM') {
-            a.classList.add('secondary');
-            a.innerHTML = down.innerHTML;
-          } else {
-            a.classList.add('primary');
-          }
-        }
         if (up.childNodes.length === 1 && up.tagName === 'STRONG'
           && twoup.childNodes.length === 1 && twoup.tagName === 'P') {
-          a.className = 'button cta';
+          a.className = 'button primary';
           twoup.classList.add('button-container');
         }
         if (up.childNodes.length === 1 && up.tagName === 'EM'
@@ -648,12 +634,6 @@ export function decorateButtons(element) {
       }
     }
   });
-  // If we have several primary buttons after one other
-  // then just add them to the same container
-  document.querySelectorAll('.button-container + .button-container').forEach((c) => {
-    c.previousElementSibling.append(c.firstElementChild);
-    c.remove();
-  });
 }
 
 /**

templates/paid-blog-page/paid-blog-page.css

@@ -112,6 +112,30 @@
     line-height: 1.5;
     color: #333;
   }
+
+  h2 + p {
+    margin: 0;
+  }
+
+  a {
+    font-family: var(--body-font-family);
+    display: block;
+    box-sizing: border-box;
+    text-decoration: none;
+    border: 2px solid transparent;
+    padding: .875rem 1.625rem;
+    text-align: center;
+    font-style: normal;
+    font-weight: 600;
+    cursor: pointer;
+    color: var(--background-color);
+    background-color: var(--button-primary-color);
+    margin: 16px 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border-radius: .625rem;
+  }
 }
 
 @media (min-width: 768px) {
@@ -156,12 +180,8 @@
       text-align: left;
     }
 
-    .button-container {
+    a {
       margin: 0 0 0 auto;
-    }
-
-    a.button {
-      margin: 0;
       width: auto;
     }
   }