Change font-size in docs from 18px to 16px (#814)

The purpose of this change is to increase the amount of content that fits on the screen.

The lack of horizontal space makes it hard to read table content on documentation pages.

Discussion: apache/pulsar#22155

Global LandingPage CSS class is introduced to keep the 18px font size on the "promotional" pages according to the original design. Maybe not the fully correct class name, but easy to understand and grep.

src/components/pages/BooksPage/BooksPage.tsx

@@ -10,6 +10,7 @@ const CaseStudiesPage: React.FC = () => {
     <Layout
       title={`Books`}
       description="Learn about the basics of using Apache Pulsar"
+      wrapperClassName="LandingPage"
     >
       <Page>
         <section className={s.Header}>

src/components/pages/CaseStudiesPage/CaseStudiesPage.tsx

@@ -19,6 +19,7 @@ const CaseStudiesPage: React.FC = () => {
     <Layout
       title={`Case studies`}
       description="Learn about the basics of using Apache Pulsar"
+      wrapperClassName="LandingPage"
     >
       <Page>
         <section className={s.Header}>

src/components/pages/CommunityPage/CommunityPage.tsx

@@ -18,6 +18,7 @@ export default function CommunityPage(): JSX.Element {
     <Layout
       title={"Community"}
       description={"Learn about the basics of using Apache Pulsar"}
+      wrapperClassName="LandingPage"
     >
       <Page>
         <section id="section-welcome">

src/components/pages/EcosystemPage/EcosystemPage.tsx

@@ -19,6 +19,7 @@ const EcosystemPage: React.FC = () => {
     <Layout
       title={`Ecosystem`}
       description="Learn about the basics of using Apache Pulsar"
+      wrapperClassName="LandingPage"
     >
       <Page>
         <section className={s.Header}>

src/components/pages/EventsPage/EventsPage.tsx

@@ -17,6 +17,7 @@ const CaseStudiesPage: React.FC = () => {
     <Layout
       title={`Events`}
       description="Apache Pulsar Events"
+      wrapperClassName="LandingPage"
     >
       <Page>
         <div className={s.TopBlock}>

src/components/pages/HomePage/HomePage.tsx

@@ -14,6 +14,7 @@ const HomePage = () => {
     <Layout
       title={"Apache Pulsar"}
       description={"Apache Pulsar is an open-source, distributed messaging and streaming platform built for the cloud."}
+      wrapperClassName="LandingPage"
     >
       <div className={s.Page}>
         <div className={s.Background}></div>

src/components/pages/PoweredByPage/PoweredByPage.tsx

@@ -10,7 +10,7 @@ import ContributeDataDrivenPage from "../../ui/ContributeDataDrivenPage/Contribu
 
 const PoweredByPage = () => {
   return (
-    <Layout>
+    <Layout wrapperClassName="LandingPage">
       <div className="tailwind">
         <div className="my-12 container">
           <header>

src/components/pages/ResourcesPage/ResourcesPage.tsx

@@ -18,6 +18,7 @@ const CaseStudiesPage: React.FC = () => {
     <Layout
       title={`Resources`}
       description="Learn about the basics of using Apache Pulsar"
+      wrapperClassName="LandingPage"
     >
       <Page>
         <div className={s.TopBlock}>

src/css/typography.css

@@ -27,7 +27,7 @@
   font-weight: 400;
 }
 
-body {
+.LandingPage {
   font-size: 18px;
 }
 
@@ -54,4 +54,4 @@ h6 {
 
 blockquote {
   border-color: var(--border-color) !important;
-}
+}