Better mobile styling for top banner (#24)

components/layout.js

@@ -6,9 +6,11 @@ import Footer from './footer';
 
 function Banner({ data }) {
   return (
-    <Link href={data.link}>
-      <a target="_blank" className="banner">{data.text}</a>
-    </Link>
+    <div className="banner">
+      <Link href={data.link}>
+        <a target="_blank" className="wrap">{data.text}</a>
+      </Link>
+    </div>
   );
 }
 

data/site.yml

@@ -11,10 +11,10 @@ latest:
       - Sign up <a href="https://jambonz.us/register" target="_blank">here</a> for your free development account,
       - and <a href="https://www.telecomsxchange.com/jambonz" target="_blank">visit our partner TelecomXChange</a> for $20 free credit!
   -
-      active: false
-      label: econnect
-      headline: jambonz will be at Enterprise Connect 2021
-      subtext: Ping us at <a href="mailto:sales@jambonz.org" target="_blank">sales@jambonz.org</a> to set up a meeting!
+    active: false
+    label: econnect
+    headline: jambonz will be at Enterprise Connect 2021
+    subtext: Ping us at <a href="mailto:sales@jambonz.org" target="_blank">sales@jambonz.org</a> to set up a meeting!
   -
     active: true
     label: aws

styles/_layout.scss

@@ -36,19 +36,26 @@
 *******************************************************************************/
 .banner {
   @include flex-cols();
-  @include ms();
   justify-content: center;
   width: 100%;
   height: 32px;
-  color: $white;
   background: $jambonz;
-  font-family: $font-medium;
   position: sticky;
   top: 0;
   z-index: $navi-index + 1;
+  text-align: center;
 
-  @media (max-width: $width-mobile) {
-    @include mxs();
+  a {
+    @include ms();
+    color: $white;
+    font-family: $font-medium;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    @media (max-width: $width-mobile) {
+      @include mxs();
+    }
   }
 
   // Effects .navi @see _navi.scss