style: increase line-height on announcements page for better readability (#1349)

* fix: increase line-height for announcements

* style: fix mobile responsiveness and improve text readability

* style: add word-break for mobile responsiveness

* style: increased padding-top of top element for mobile screen

* style: isolate announcements mobile responsiveness and improve readability

* style: isolate announcements styling and fix linting newline

Author: navjotmaan

landing-pages/site/assets/scss/_base-layout.scss

@@ -145,7 +145,9 @@
 
   @media (max-width: $mobile) {
     & > * {
-      max-width: 306px;
+      max-width: 100%;
+      padding-left: 15px;
+      padding-right: 15px;
     }
   }
 }

landing-pages/site/assets/scss/_home-page.scss

@@ -24,7 +24,7 @@
     padding-top: 110px; // TEMP - accommodate Airflow Summit banner (70 + 40)
 
     @media (max-width: $mobile) {
-      padding-top: 16px;
+      padding-top: 80px;
     }
   }
 }

landing-pages/site/assets/scss/_typography.scss

@@ -107,3 +107,15 @@ $bodytext-styles: (
 .text-break-all {
     word-break: break-all
 }
+
+/* Fix for Announcements Page line-height */
+body.td-section {
+  .home-page-layout.base-layout {
+    main.td-main.container {
+      p {
+        line-height: 1.7;
+        overflow-wrap: anywhere;
+      }
+    }
+  }
+}