From 4020295740989b3a3b717fac9ebfc807ce07d47a Mon Sep 17 00:00:00 2001
From: Shah <24467345+shahx95@users.noreply.github.com>
Date: Wed, 12 Oct 2022 14:54:29 +0500
Subject: [PATCH] Make blog intro / CTA  visually distinguishable (#748)

* Add class to paragraph containing CTA

Add class to the paragraph containing CTA elements. The class is used to target the container paragraph element to create a box to distinguish CTA section from the content.

* Add css properties for paragraphy containing CTA

Added css properties for paragraph element to create a box around the CTA, centering the text and providing padding.

* Add media query for CTA box

Add media query for CTA box for small screens to prevent individual CTA from breaking. Each CTA appears on an individual line and look clean. CTA dividers are not shown on small screens.
---
 web/blog/components/InBlogCta.js |  2 +-
 web/src/css/custom.css           | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/web/blog/components/InBlogCta.js b/web/blog/components/InBlogCta.js
index 3081bb23d..bfd38b85d 100644
--- a/web/blog/components/InBlogCta.js
+++ b/web/blog/components/InBlogCta.js
@@ -8,7 +8,7 @@ const Divider = () => (
 )
 
 const InBlogCta = () => (
-    <p>
+    <p className='in-blog-cta-link-container'>
         <Link className='in-blog-cta--link' 
             to='https://e44cy1h4s0q.typeform.com/to/ycUzQa5A'>
             We are in Alpha (try it out)!
diff --git a/web/src/css/custom.css b/web/src/css/custom.css
index 67624cd2a..bdf19a17e 100644
--- a/web/src/css/custom.css
+++ b/web/src/css/custom.css
@@ -51,6 +51,13 @@
 
 /* NOTE(matija): this is used within a blog post (e.g. seed round 
  * announcement). */
+
+.in-blog-cta-link-container {
+  border: solid var(--ifm-link-color);
+  padding: 2px;
+  text-align: center;
+}
+
 .in-blog-cta--link {
   color: var(--ifm-color-primary);
   font-weight: bold;
@@ -128,6 +135,12 @@
   font-size: 0.9rem;
 }
 
+@media only screen and (max-width: 600px) {
+  .in-blog-cta--link {display: block;}
+  .in-blog-cta--divider{display: none;}
+}
+
+
 @media screen and (max-width: 996px) {
   .row .col {
     padding-top: var(--ifm-col-spacing-vertical);