[docs] Fix table scaling for languages and frameworks

Fixes #495 Update src/docs/languages/bash.md Co-authored-by: Nisar Hassan Naqvi <[email protected]> Update src/styles/normalize.ts Co-authored-by: Nisar Hassan Naqvi <[email protected]> Update src/docs/languages/cpp.md Co-authored-by: Nisar Hassan Naqvi <[email protected]>
gitpod-io · May 20, 2020 · 8ff6afb · 8ff6afb
1 parent dbc1d39
commit 8ff6afb
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 36 deletions.
diff --git a/src/docs/languages/bash.md b/src/docs/languages/bash.md
@@ -6,7 +6,7 @@ Bash is the default shell for Gitpod. However, if you're developing a Bash scrip
 
 Here are a few Bash example projects that are already automated with Gitpod:
 
-<div class="table-container">
+<div class="table-container language-examples">
 
 | Repository | Description | Try It |
 |------------|--------------|--------|

diff --git a/src/docs/languages/cpp.md b/src/docs/languages/cpp.md
@@ -6,7 +6,7 @@ Gitpod supports C++ right out of the box, but there are still ways to enhance yo
 
 Here are a few C++ example projects that are already automated with Gitpod:
 
-<div class="table-container">
+<div class="table-container language-examples">
 
 | Repository | Description | Try it |
 |------|----------------|-----------|

diff --git a/src/docs/languages/dotnet.md b/src/docs/languages/dotnet.md
@@ -3,7 +3,7 @@
 ## Example Repositories
 
 
-<div class="table-container">
+<div class="language-examples table-container">
 
 | Repository | Description | Try it |
 |------|----------------|-----------|

diff --git a/src/docs/languages/go.md b/src/docs/languages/go.md
@@ -6,7 +6,7 @@ Gitpod supports Go right out of the box, but there are still ways to optimize yo
 
 Here are a few Go example projects that are already automated with Gitpod:
 
-<div class="table-container">
+<div class="language-examples table-container">
 
 | Repository                                                              |                                                                 Description                         |               Try It |
 | ----------------------------------------------------------------- | ------------------------------|-------------------------------------------------------------------------------------------------: |

diff --git a/src/docs/languages/html.md b/src/docs/languages/html.md
@@ -6,10 +6,15 @@
 
 Here are a few HTML/CSS example projects that are already automated with Gitpod:
 
-Repository | Description | Try it
----|---|---
-[Front-End-Checklist](https://github.com/thedaviddias/Front-End-Checklist) | The perfect Front-End Checklist for modern websites and meticulous developers | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/thedaviddias/Front-End-Checklist)
-[Devhints](https://github.com/rstacruz/cheatsheets) | TL;DR for developer documentation - a ridiculous collection of cheatsheets | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/rstacruz/cheatsheets)
+
+<div class="language-examples table-container">
+
+|Repository | Description | Try it|
+|---|---|---|
+|[Front-End-Checklist](https://github.com/thedaviddias/Front-End-Checklist) | The perfect Front-End Checklist for modern websites and meticulous developers | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/thedaviddias/Front-End-Checklist)|
+|[Devhints](https://github.com/rstacruz/cheatsheets) | for developer documentation - a ridiculous collection of cheatsheets | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/rstacruz/cheatsheets)|
+
+</div>
 
 ## [emmet](http://emmet.io/) Support
 

diff --git a/src/docs/languages/php.md b/src/docs/languages/php.md
@@ -4,7 +4,7 @@ Gitpod supports PHP right out of the box, but more advanced features such as deb
 
 ## Example Repositories
 
-<div class="table-container">
+<div class="language-examples table-container">
 
 | Repository | Description | Try it |
 |------------|-------------|--------|

diff --git a/src/docs/languages/python.md b/src/docs/languages/python.md
@@ -6,14 +6,14 @@ Gitpod comes with great support for Python built-in. Still, depending on your pr
 
 Before we get started, here are some examples of already-[gitpodified](https://www.gitpod.io/blog/gitpodify/) repositories!
 
-<div class="table-container">
+<div class="language-examples table-container">
 
-| Repository                                                                                                |                                                                                                              Description |                                        Try it |
------------|-----------------------------------------------------------|----------------------------------------------------
-| [gitpod-io/django-locallibrary-tutorial](https://github.com/gitpod-io/django-locallibrary-tutorial) | An example website written in Django by MDN |        [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/gitpod-io/django-locallibrary-tutorial) |
-| [gitpod-io/Gitpod-PyQt](https://github.com/gitpod-io/Gitpod-PyQt)                               |    A PyQt example for Gitpod | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/gitpod-io/Gitpod-PyQt) |
-| [gitpod-io/wxPython-example](https://github.com/gitpod-io/wxPython-example)                      | A wxPython example for Gitpod    | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/gitpod-io/wxPython-example) |
-| [techwithtim/Hangman](https://github.com/techwithtim/Hangman)                                       |   A wxPython example for Gitpod  |     [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/techwithtim/Hangman) |
+| Repository                                                                                          | Description                                 | Try it                                                                                                                                         |
+| --------------------------------------------------------------------------------------------------- | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| [gitpod-io/django-locallibrary-tutorial](https://github.com/gitpod-io/django-locallibrary-tutorial) | An example website written in Django by MDN | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/gitpod-io/django-locallibrary-tutorial) |
+| [gitpod-io/Gitpod-PyQt](https://github.com/gitpod-io/Gitpod-PyQt)                                   | A PyQt example for Gitpod                   | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/gitpod-io/Gitpod-PyQt)                  |
+| [gitpod-io/wxPython-example](https://github.com/gitpod-io/wxPython-example)                         | A wxPython example for Gitpod               | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/gitpod-io/wxPython-example)             |
+| [techwithtim/Hangman](https://github.com/techwithtim/Hangman)                                       | A wxPython example for Gitpod               | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/techwithtim/Hangman)                    |
 
 </div>
 
@@ -28,28 +28,35 @@ You can switch between Python versions using `pyenv local <VERSION>`. For exampl
 ## [Start tasks](https://www.gitpod.io/docs/config-start-tasks/)
 
 You can start building your project when, or even [before](https://www.gitpod.io/docs/prebuilds/) you start your Gitpod workspace. Are you using a `requirements.txt` file to manage dependencies? If so, add this to your [.gitpod.yml](https://www.gitpod.io/docs/config-gitpod-file/) to automatically pre-install all dependencies when starting a workspace:
+
 ```yaml
 tasks:
   - init: pip3 install -r requirements.txt
     command: python3 main.py
 ```
 
 ## VSCode Extensions
+
 While the most popular Python VSCode extensions are built into Gitpod, here are a few "nice to have" extensions that you can use as well.
 
 ### ARepl for Python
+
 ![ARepl extension example](../images/AReplExample.gif)
 ARepl for Python is helpful for constantly checking your code and debugging.
 To install this extension for your repository, add the following to your [.gitpod.yml](https://www.gitpod.io/docs/config-gitpod-file/):
+
 ```yaml
 vscode:
   extensions:
     - [email protected]:Uu7lIOwyLgmNWpTwCl/iqQ==
 ```
+
 ### Python Test Explorer
+
 ![Python test explorer example](../images/python_Test_In_Gitpod.png)
 Easily test your python extensions with the Python Test Explorer.
 To add this to your repository add the following to your [.gitpod.yml](https://www.gitpod.io/docs/config-gitpod-file/)
+
 ```yaml
 vscode:
   extensions:
@@ -95,29 +102,32 @@ ports:
 tasks:
   - command: python3 app.py
 ```
+
 <br>
 We also support other GUI frameworks such as `Kivy` and `PyQt`
 <br>
 Here are some other examples of Python GUI applications in Gitpod:
 
-<div class="table-container">
+<div class="language-examples table-container">
 
-| Name             | Framework | Try it |
-|------------------|----------------|-----------|
-| [Tic-Tac-Toe-GUI](https://github.com/JesterOrNot/Tic-Tac-Toe-GUI)  | Kivy | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/JesterOrNot/Tic-Tac-Toe-GUI) |
-| [Pong](https://github.com/JesterOrNot/Pong) | Kivy | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/JesterOrNot/Pong) |
-| [Gitpod-PyQt](https://github.com/gitpod-io/Gitpod-PyQt) | PyQt | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/gitpod-io/Gitpod-PyQt) |
+| Name                                                              | Framework | Try it                                                                                                                              |
+| ----------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| [Tic-Tac-Toe-GUI](https://github.com/JesterOrNot/Tic-Tac-Toe-GUI) | Kivy      | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/JesterOrNot/Tic-Tac-Toe-GUI) |
+| [Pong](https://github.com/JesterOrNot/Pong)                       | Kivy      | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/JesterOrNot/Pong)            |
+| [Gitpod-PyQt](https://github.com/gitpod-io/Gitpod-PyQt)           | PyQt      | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/gitpod-io/Gitpod-PyQt)       |
 
 </div>
 
 <br>
 
 ## Debugging
+
 Here is a quick clip on how to automatically configure debugging for Python!
 
 ![Python debugging example](../images/PythonDebug.gif)
 
 So, basically in this video we:
+
 1. First, open the Python file that we want to debug
 2. Then, go to the debug menu and select "Add Configuration..."
 3. Next, in the dropdown choose "Python"
@@ -127,25 +137,26 @@ So, basically in this video we:
 You can also create the Python debug configuration file manually
 
 To start debugging your Python application in Gitpod, please create a new directory called `.theia/`, and inside add a file called `launch.json`, finally, add the following to it:
+
 ```json
 {
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "name": "Python: Current File",
-            "type": "python",
-            "request": "launch",
-            "program": "${file}",
-            "console": "internalConsole"
-        }
-    ]
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Python: Current File",
+      "type": "python",
+      "request": "launch",
+      "program": "${file}",
+      "console": "internalConsole"
+    }
+  ]
 }
 ```
+
 Then, simply open the Python file you want to debug, open the Debug panel (in the left vertical toolbar, click the icon with the crossed-out-spider), and click the green "Run" button.
 
 <br>
 
-
 To see a basic repository with Python debugging enabled, please check out [gitpod-io/Gitpod-Python-Debug](https://github.com/gitpod-io/Gitpod-Python-Debug):
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/gitpod-io/Gitpod-Python-Debug)

diff --git a/src/docs/languages/ruby.md b/src/docs/languages/ruby.md
@@ -11,7 +11,7 @@ To change the default Ruby version, you can simply run `rvm use 2.5 --default` i
 
 Here are a few Ruby example projects that are already automated with Gitpod:
 
-<div class="table-container">
+<div class="language-examples table-container">
 
 Repository | Description | Try it
 ---------|----------|---------

diff --git a/src/docs/languages/rust.md b/src/docs/languages/rust.md
@@ -32,7 +32,7 @@ which will set the required Rust version and if you commit the file into source
 
 Here are a few Rust example projects that are already automated with Gitpod:
 
-<div class="table-container">
+<div class="language-examples table-container">
 
 | Repository  | Description  | Try it    |
 |---------|------------|-----|

diff --git a/src/docs/languages/vue.md b/src/docs/languages/vue.md
@@ -6,7 +6,7 @@ To work with Vue.js in Gitpod, you will need to properly configure your reposito
 
 Here are a few Vue.js example projects that are already automated with Gitpod:
 
-<div class="table-container">
+<div class="language-examples table-container">
 
 | Repository | Description | Try it |
 |------------|-------------|--------|

diff --git a/src/styles/normalize.ts b/src/styles/normalize.ts
@@ -432,6 +432,11 @@ export default `
         }
     }
 
+    .language-examples td,
+    .language-examples tr {
+        font-size: 0.915rem;
+    }
+
     /* --------------------------------------------- */
     /* ----- Utils ----- */
     /* --------------------------------------------- */