[BEAM-14428] I/O, community, and contribute pages improvements

website/www/site/assets/scss/_connectors.sass

@@ -26,3 +26,9 @@ tr .present a
 
 .table-container-wrapper
   overflow-x: auto
+
+.table-connectors
+  th,
+  td
+    &:not(:first-child)
+      text-align: center

website/www/site/assets/scss/_contribute.sass

@@ -14,6 +14,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
+$padding: 24px
 
 .list-text-size-md
   position: relative
@@ -39,3 +40,54 @@
 
 .no-bullet
   list-style-type: none
+
+.text--active
+  color: $color-brand
+
+.table-contribute
+  th
+    text-align: center
+
+  th
+    padding: 14px 14px 17px 14px !important
+    border: none !important
+    border-bottom: 1px solid #ff6d05 !important
+    letter-spacing: 2px
+    line-height: normal !important
+    text-transform: uppercase
+
+  td
+    padding: $padding !important
+    border-bottom: 1px solid rgba(255, 109, 5, 0.24)
+    @media (max-width: $mobile)
+      padding: $padding/4 !important
+
+    p
+      margin-left: 67px
+      font-size: 14px
+      line-height: 1.57
+      @media (max-width: $mobile)
+        margin: 0
+
+  td:nth-child(2)
+    padding: $padding/3 !important
+    padding-left: $padding !important
+    @media (max-width: $mobile)
+      padding: $padding/3 !important
+      padding-left: $padding/2 !important
+
+    a
+      line-height: 2
+      letter-spacing: 0.43px
+      color: $color-brand
+      text-decoration: none
+      &:hover,
+      &focus
+        text-decoration: underline
+
+  td:nth-child(1)
+    background-color: rgba(255, 109, 0, 0.04)
+    padding-left: $padding/2 !important
+    padding-right: 0 !important
+    line-height: 1.57
+    letter-spacing: 0.43px

website/www/site/content/en/contribute/_index.md

@@ -40,27 +40,28 @@ Everyone is welcome to join and contribute to the project in multiple ways, not
 
 Here’s a list of things you can do to get started contributing:
 
-<table class="table table-bordered">
+<div class="table-container-wrapper">
+  <table class="table-contribute">
   <tr>
     <th>Contribution</th>
     <th>How to do it</th>
   </tr>
   <tr>
     <td>Participate and share ideas</td>
     <td class="list-text-size-md">
-      <ol>
+      <ul>
         <li>Start by <a href="https://beam.apache.org/contribute/#accounts-and-permissions">getting an Apache Beam Jira account</a>.</li>
         <li>Subscribe to our <a href="https://beam.apache.org/community/contact-us/">mailing lists</a> (<a href="mailto:[email protected]">[email protected]</a> and <a href="mailto:[email protected]">[email protected]</a>).</li>
         <li>Stay in the loop of our <a href="https://issues.apache.org/jira/projects/BEAM/issues">Jira product backlog</a>, participate in discussions to brainstorm solutions, and help the community solve their mailing list questions.</li>
-      </ol>
+      </ul>
     </td>
   </tr>
   <tr>
     <td>File a bug</td>
     <td class="list-text-size-md">
       <ol class="no-bullet">
         <li>Create a Jira ticket and mark it as a bug</li>
-        <br><span>OR</span><br><br>
+        <br><span class="text--active">OR</span><br><br>
         <li>Send an email to <a href="mailto:[email protected]">[email protected]</a> with subject: [Bug] &lt;bug summary&gt; and include as much detail as possible.</li>
       </ol>
     </td>
@@ -70,7 +71,7 @@ Here’s a list of things you can do to get started contributing:
     <td class="list-text-size-md">
       <ol class="no-bullet">
         <li>Create a Jira ticket and mark it as a feature request</li>
-        <br><span>OR</span><br><br>
+        <br><span class="text--active">OR</span><br><br>
         <li>Send an email to <a href="mailto:[email protected]">[email protected]</a> with subject: [Feature Proposal] &lt;your idea&gt;.</li>
       </ol>
     </td>
@@ -127,11 +128,11 @@ Here’s a list of things you can do to get started contributing:
   <tr>
     <td>Share a code sample or template</td>
     <td class="list-text-size-md">
-      <ol>
+      <ul>
         <li>Read our <a href="https://beam.apache.org/contribute/get-started-contributing/">Code Contribution Guide</a>.</li>
         <li>Create your code sample or template. </li>
         <li><a href="https://beam.apache.org/contribute/get-started-contributing/#make-your-change">Make a Pull Request</a> to add it to the Beam example folder.</li>
-      </ol>
+      </ul>
     </td>
   </tr>
   <tr>
@@ -147,7 +148,7 @@ Here’s a list of things you can do to get started contributing:
     </td>
   </tr>
 </table>
-
+</div>
 
 ## Become a Committer
 

website/www/site/content/en/documentation/io/connectors.md

@@ -23,7 +23,7 @@ Apache Beam I/O connectors provide read and write transforms for the most popula
 
 This table provides a consolidated, at-a-glance overview of the available built-in I/O connectors.
 <div class="table-container-wrapper">
-  <table class="table table-bordered">
+  <table class="table table-bordered table-connectors">
   <tr>
     <th>Connector Name</th>
     <th>Source Supported</th>
@@ -775,7 +775,7 @@ This table provides a consolidated, at-a-glance overview of the available built-
 ## Other I/O Connectors for Apache Beam
 
 <div class="table-container-wrapper">
-  <table class="table table-bordered">
+  <table class="table table-bordered table-connectors">
   <tr>
     <th>Connector Name</th>
     <th>Source Supported</th>

website/www/site/layouts/partials/section-menu/en/community.html

@@ -10,14 +10,14 @@
  limitations under the License. See accompanying LICENSE file.
 */}}
 <li><span class="section-nav-list-main-title">Community</span></li>
-<li><a href="/community/join-beam">Join Beam Communnity</a></li>
+<li><a href="/community/join-beam">Join Beam community</a></li>
 <li><a href="/community/integrations">Integrations</a></li>
-<li><a href="/community/contact-us">Contact Us</a></li>
+<li><a href="/community/contact-us">Contact us</a></li>
 <li><a href="/community/policies">Policies</a></li>
 <li><a href="/community/youtube-channel">YouTube channel</a></li>
-<li><a href="/community/twitter-handle">Twitter Handle</a></li>
-<li><a href="/community/in-person">In Person</a></li>
-<li><a href="/community/case-study">Case Study</a></li>
+<li><a href="/community/twitter-handle">Twitter</a></li>
+<li><a href="/community/in-person">In person</a></li>
+<li><a href="/community/case-study">Case study</a></li>
 <li>
   <span class="section-nav-list-title">Promotion</span>
 

website/www/site/layouts/partials/section-menu/en/contribute.html

@@ -11,15 +11,15 @@
 */}}
 
 <li><span class="section-nav-list-main-title">Contribute</span></li>
-<li><a href="/contribute/get-started-contributing">Get started contributing</a></li>
-<li><a href="/contribute/get-help/">Get Help</a></li>
+<li><a href="/contribute/get-started-contributing">Code contribution guide</a></li>
+<li><a href="/contribute/get-help/">Get help</a></li>
 <li><a href="/contribute/attributes/">Attributes of a Beam community member</a></li>
 <li>
   <span class="section-nav-list-title">Technical Docs</span>
 
   <ul class="section-nav-list">
     <li><a href="https://cwiki.apache.org/confluence/display/BEAM/Contribution+Testing+Guide">Testing guide</a></li>
-    <li><a href="/contribute/precommit-triage-guide/">Pre-commit Slowness Triage</a></li>
+    <li><a href="/contribute/precommit-triage-guide/">Pre-commit slowness triage</a></li>
     <li><a href="/contribute/ptransform-style-guide/">PTransform style guide</a></li>
     <li><a href="/contribute/runner-guide/">Runner authoring guide</a></li>
     <li><a href="https://cwiki.apache.org/confluence/display/BEAM/Design+Documents">Design documents</a></li>