Commit 611aac0
committed
Implement the explainer as an html table
1 parent 285b56e commit 611aac0
4 files changed
Lines changed: 85 additions & 1 deletion
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -26,7 +26,48 @@ | |||
| 26 | 26 | <!-- to update, edit index.markdown file in the root folder --> | |
| 27 | 27 | <section> | |
| 28 | 28 | <div class="m-auto w-md-25 mt-2"> | |
| 29 | - <img class="img-fluid" src="{{site.baseurl}}/assets/img/explainer.jpg" alt="RustPython Explainer"> | ||
| 29 | + <table class="w-100"> | ||
| 30 | + <tr> | ||
| 31 | + <td class="valign-center vpad-small"> | ||
| 32 | + <img class="explainer-icon" src="{{site.baseurl}}/assets/img/python-logo.svg" alt="Python Logo"> | ||
| 33 | + Python | ||
| 34 | + </td> | ||
| 35 | + <td></td><td></td> | ||
| 36 | + </tr> | ||
| 37 | + <tr> | ||
| 38 | + <td class="valign-center vpad-small"> | ||
| 39 | + ↓ | ||
| 40 | + </td> | ||
| 41 | + <td></td><td></td> | ||
| 42 | + </tr> | ||
| 43 | + <tr> | ||
| 44 | + <td><div class="padding-small text-center"> | ||
| 45 | + <!-- inline css to get it to look like one word, despite the padding classes --> | ||
| 46 | + <span class="bg-rust rustpy-name text-white" style="padding-right: 1px;">Rust</span | ||
| 47 | + ><span class="color-py rustpy-name" style="padding-left: 0;">Python</span> | ||
| 48 | + </div></td> | ||
| 49 | + <td class="text-center padding-small"> | ||
| 50 | + → | ||
| 51 | + </td> | ||
| 52 | + <td><div class="valign-center padding-small text-center">Python embedded in Rust apps</div></td> | ||
| 53 | + </tr> | ||
| 54 | + <tr> | ||
| 55 | + <td class="valign-center vpad-small"> | ||
| 56 | + ↓ | ||
| 57 | + </td> | ||
| 58 | + <td></td><td></td> | ||
| 59 | + </tr> | ||
| 60 | + <tr> | ||
| 61 | + <td><div class="valign-center vpad-small"> | ||
| 62 | + <img class="explainer-icon" src="{{site.baseurl}}/assets/img/wasm-logo.svg" alt="WebAssembly Logo"> | ||
| 63 | + WebAssembly | ||
| 64 | + </div></td> | ||
| 65 | + <td class="text-center padding-small"> | ||
| 66 | + → | ||
| 67 | + </td> | ||
| 68 | + <td><div class="valign-center padding-small text-center">Python on the Web</div></td> | ||
| 69 | + </tr> | ||
| 70 | + </table> | ||
| 30 | 71 | </div> | |
| 31 | 72 | <div class="mt-md-4 mt-sm-2 w-md-50 m-auto"> | |
| 32 | 73 | <p class="mt-md-4"> | |
LoadingViewer requires iframe.
LoadingViewer requires iframe.
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -112,6 +112,11 @@ code.highlighter-rouge, mark.code { | |||
| 112 | 112 | color: #fff; | |
| 113 | 113 | } | |
| 114 | 114 | ||
| 115 | + .color-py { | ||
| 116 | + background-color: #ffd343; | ||
| 117 | + color: #306998; | ||
| 118 | + } | ||
| 119 | + | ||
| 115 | 120 | /* alignment */ | |
| 116 | 121 | .d-flex-space-between { | |
| 117 | 122 | justify-content: space-between; | |
@@ -129,6 +134,12 @@ code.highlighter-rouge, mark.code { | |||
| 129 | 134 | text-align: center; | |
| 130 | 135 | } | |
| 131 | 136 | ||
| 137 | + .valign-center { | ||
| 138 | + display:flex; | ||
| 139 | + align-items: center; | ||
| 140 | + justify-content: center; | ||
| 141 | + } | ||
| 142 | + | ||
| 132 | 143 | .justify-center { | |
| 133 | 144 | justify-content: center; | |
| 134 | 145 | align-items: center; | |
@@ -144,6 +155,10 @@ code.highlighter-rouge, mark.code { | |||
| 144 | 155 | padding: 5px; | |
| 145 | 156 | } | |
| 146 | 157 | ||
| 158 | + .vpad-small { | ||
| 159 | + padding: 5px 0; | ||
| 160 | + } | ||
| 161 | + | ||
| 147 | 162 | .mb-1 { | |
| 148 | 163 | margin-bottom: 1em; | |
| 149 | 164 | } | |
@@ -251,6 +266,15 @@ ul.list-inline { | |||
| 251 | 266 | height: 80px; | |
| 252 | 267 | } | |
| 253 | 268 | ||
| 269 | + .explainer-icon { | ||
| 270 | + height: 30px; | ||
| 271 | + margin-right: 5px; | ||
| 272 | + } | ||
| 273 | + | ||
| 274 | + .rustpy-name { | ||
| 275 | + padding: 5px 7px; | ||
| 276 | + } | ||
| 277 | + | ||
| 254 | 278 | .goal { | |
| 255 | 279 | line-height: 1.5em; | |
| 256 | 280 | } | |
0 commit comments