[GitHub] [airflow] VBhojawala edited a comment on pull request #12227: CSS changes to make current theme responsive

[GitBox <gi...@apache.org>]

VBhojawala edited a comment on pull request #12227:
URL: https://github.com/apache/airflow/pull/12227#issuecomment-724817967


   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
   ![Current](https://user-images.githubusercontent.com/11897651/98701694-94e8f780-239f-11eb-95a1-fde0ce006a2f.png)
   
   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
   ![1400Px](https://user-images.githubusercontent.com/11897651/98699971-b0eb9980-239d-11eb-8046-e9ffe0c31100.png)
   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
   ![fontscaling2](https://user-images.githubusercontent.com/11897651/98702562-84854c80-23a0-11eb-9e2b-349212eb53bb.png)
   
   
   
   
   Following is demo CSS for proposal, optimal font size for larger screens can be discussed and set.
   
   ``` css
   /* 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;   
     } 
   }
   ```
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org