chore: fixing banner flex

Signed-off-by: blam <ben@blam.sh>

microsite/pages/en/index.js

@@ -19,14 +19,16 @@ class Index extends React.Component {
     const { baseUrl } = siteConfig;
 
     return (
-      <main className="MainContent">
+      <main className="MainContent MainContent--gradient">
         <Banner.Container>
           <Banner.Dismissable storageKey="2022-03-16-newsletter-cta">
-            🗞️ Want to stay up to date with Backstage? Sign up for our{' '}
-            <a href="https://mailchi.mp/spotify/backstage-community">
-              Newsletter
-            </a>
-            !
+            <div>
+              🗞️ Want to stay up to date with Backstage? Sign up for our{' '}
+              <a href="https://mailchi.mp/spotify/backstage-community">
+                Newsletter
+              </a>
+              !
+            </div>
           </Banner.Dismissable>
         </Banner.Container>
 

microsite/static/css/custom.css

@@ -87,6 +87,10 @@ td {
   background-color: #121212;
 }
 
+.MainContent--gradient {
+  background: linear-gradient(90.49deg, #121212 15.36%, #282828 70.44%);
+}
+
 /* marketing page */
 
 .blockContent h2 {
@@ -1074,12 +1078,12 @@ code {
   position: relative;
   padding: 14px;
   padding-right: 50px; /* space for the dismiss button */
-  margin: 14px 20px;
+  margin: 36px 20px;
   border-radius: 4px;
   background-color: $primaryColor;
   font-family: Helvetica Neue, sans-serif;
   color: #000;
-  display: inline-block;
+  display: flex;
 }
 
 .Banner--hidden {