improve banner and accessibility (#259)

Author: oraNod

sass/_ansible-banner.scss

@@ -1,12 +1,13 @@
 .ansible-banner {
-  background: $pool;
-  width: 100%;
+  background: $light-pool;
+  margin-top: 1.2rem;
   .ansible-banner-text {
     display: flex;
     justify-content: center;
     text-align: center;
-    color: $white;
+    color: $black;
     padding-top: 1.2rem;
+    line-height: 2.2rem;
     a {
       color: $cyan;
     }

sass/_colors.scss

@@ -1,6 +1,7 @@
 $white: #ffffff;
 $black: #000000;
 $pool: #5cbec1;
+$light-pool: #aedfe0;
 $cyan: #004080;
 $navy: #102441;
 $light-grey: #CCCCCC;

templates/_ansible-banner.html

@@ -1,9 +1,15 @@
-<div class="ansible-banner">
-  <div class="ansible-banner-text">
-    <p>
-      We want to hear from you! Help us gain insights into the state of the
-      Ansible ecosystem by taking the
-      <a href="https://www.surveymonkey.com/r/P9Q2SNG" target="_blank">Ansible Project Survey 2024</a>
-    </p>
+<div class="container">
+  <div class="grid-wrapper">
+    <div class="width-12-12 width-12-12-m">
+      <div class="ansible-banner">
+        <div class="ansible-banner-text">
+          <p>
+            We want to hear from you! Help us gain insights into the state of the
+            Ansible ecosystem.<br>
+            <a href="https://www.surveymonkey.com/r/P9Q2SNG" target="_blank">Take the Ansible Project Survey 2024</a>
+          </p>
+        </div>
+      </div>
+    </div>
   </div>
-</div>
+</div>