CSS changes to make current theme responsive

[VBhojawala]

CSS Changes to adjust content width as per screen size and responsive table with multi line .
closes: #11967

---

^ Add meaningful description above

Read the Pull Request Guidelines for more information.
In case of fundamental code change, Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in UPDATING.md.

[boring-cyborg]

Awesome work, congrats on your first merged pull request!

[potiuk]

Thanks. I've always found it annoying!

[mik-laj]

This doesn't look like code related to the exampleinclude directive.

[VBhojawala]

Kindly suggest file name where this code can be placed.

[mik-laj]

I don't think that is a good solution. The lack of text width on all pages makes some pages very difficult to read on some screens. I would prefer to turn these tables into lists to make the whole content narrower. I currently have these tasks in my queue, but I want to do it cleverly and automatically, and then use this information to update the website - https://github.com/apache/airflow-site/blob/master/landing-pages/site/static/integrations.json

According to several sources designers should strive for 45 to 85 characters per line since the ideal width for a paragraph is supposedly 65 characters.

https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939

[VBhojawala]

Hello @potiuk

I would like to suggest some changes to current document theme's CSS structure which can improve readability of docs:
Following is current view

1. In addition to above changes, For screen larger than 720p fix max width to 1400px so that paragraphs reading travel distance can be minimize.
   Following is the screen shoot of fix 1400px width for larger screen
   
2. Based on screen size set responsive font size for each html element. Which will allow user on larger screen to view and read document very easily by increasing font size for larger screen.
   Following is with larger font size of paragraph and code for large screen
   

Following is demo CSS for proposal, optimal font size for larger screens can be discussed and set.

/* override table width restrictions */
@media screen and (min-width: 720px) {
   .wy-table-responsive table td {
      white-space: normal !important;
   }
  .wy-nav-content {
   max-width: 1400px;
  }
  p{
    font-size:18px  
  }  
  .rst-content .linenodiv pre, .rst-content div[class^="highlight"] pre, .rst-content pre.literal-block{
    font-size:16px;   
  } 
}

[mik-laj]

What do you think about having all these integrations as a list?

Google Cloud

Bigquery

Hooks: airlfow.providers....
Operators: airlfow.providers....
Guide: How-to guide
References: Product documentation

Dataflow

Hooks: airlfow.providers....
Operators: airlfow.providers....
Guide: How-to guide
References: Product documentation

I would like to know why we are changing global styles and why before we do. If it is just a matter of improving the readability of one subpage, then we can think about doing much better. Especially when this page probably needs to be removed soon. See: #11423 (comment)
Github also has similar content width restrictions, but there it won't be possible to add extra styles to enlarge the text width.