doc(plugins/skyline): update

source/plugins/skyline/README.md

@@ -1,19 +1,31 @@
-### 🌇 GitHub Skyline 3D calendar
-
-> ⚠️ This plugin significantly increase file size, prefer using it as standalone.
-
-The *skyline* plugin lets you display your 3D commits calendar from [skyline.github.com](https://skyline.github.com/).
-
+<!--header-->
 <table>
-  <td align="center">
-    <img src="https://github.com/lowlighter/metrics/blob/examples/metrics.plugin.skyline.svg">
-    <img width="900" height="1" alt="">
-  </td>
+  <tr><th colspan="2"><h3>🌇 GitHub Skyline 3D calendar</h3></th></tr>
+  <tr><td colspan="2" align="center"><p>This plugins lets you display your 3D commits calendar from <a href="https://skyline.github.com/">skyline.github.com</a>.</p>
+<blockquote>
+<p>⚠️ This plugin significantly increase file size, consider using it as standalone.</p>
+</blockquote>
+</td></tr>
+  <tr>
+    <th rowspan="3">Supported features<br><sub><a href="metadata.yml">→ Full specification</a></sub></th>
+    <td><a href="/source/templates/classic"><code>📗 Classic template</code></a></td>
+  </tr>
+  <tr>
+    <td><code>👤 Users</code></td>
+  </tr>
+  <tr>
+    <td><i>No tokens are required for this plugin</i></td>
+  </tr>
+  <tr>
+    <td colspan="2" align="center">
+      <img src="https://github.com/lowlighter/metrics/blob/examples/metrics.plugin.skyline.svg" alt=""></img>
+      <img width="900" height="1" alt="">
+    </td>
+  </tr>
 </table>
+<!--/header-->
 
-This uses puppeteer to generate collect image frames, and use CSS animations to create an animated rendering (GIF images are not animated in GitHub flavored markdown rendering which is why this design choice was made).
-
-#### ➡️ Available options
+## ➡️ Available options
 
 <!--options-->
 <table>
@@ -22,7 +34,7 @@ This uses puppeteer to generate collect image frames, and use CSS animations to
   </tr>
   <tr>
     <td nowrap="nowrap"><code>plugin_skyline</code></td>
-    <td rowspan="2"><p>Display GitHub Skyline 3D calendar</p>
+    <td rowspan="2"><p>Enable skyline plugin</p>
 <img width="900" height="1" alt=""></td>
   </tr>
   <tr>
@@ -44,7 +56,9 @@ This uses puppeteer to generate collect image frames, and use CSS animations to
   </tr>
   <tr>
     <td nowrap="nowrap"><code>plugin_skyline_frames</code></td>
-    <td rowspan="2"><p>Number of frames</p>
+    <td rowspan="2"><p>Frames count</p>
+<p>Use 120 for a full-loop and 60 for a half-loop.
+A higher number of frames will increase file size.</p>
 <img width="900" height="1" alt=""></td>
   </tr>
   <tr>
@@ -58,6 +72,7 @@ This uses puppeteer to generate collect image frames, and use CSS animations to
   <tr>
     <td nowrap="nowrap"><code>plugin_skyline_quality</code></td>
     <td rowspan="2"><p>Image quality</p>
+<p>A higher image quality will increase file size.</p>
 <img width="900" height="1" alt=""></td>
   </tr>
   <tr>
@@ -71,6 +86,8 @@ This uses puppeteer to generate collect image frames, and use CSS animations to
   <tr>
     <td nowrap="nowrap"><code>plugin_skyline_compatibility</code></td>
     <td rowspan="2"><p>Compatibility mode</p>
+<p>This uses CSS animations rather than embedded GIF to support a widerr range of browser, like Firefox and Safari.
+Using this mode significantly increase file size as each frame is encoded separately</p>
 <img width="900" height="1" alt=""></td>
   </tr>
   <tr>
@@ -81,9 +98,7 @@ This uses puppeteer to generate collect image frames, and use CSS animations to
 </table>
 <!--/options-->
 
-*[→ Full specification](metadata.yml)*
-
-#### ℹ️ Examples workflows
+## ℹ️ Examples workflows
 
 <!--examples-->
 ```yaml
@@ -99,4 +114,4 @@ with:
   plugin_skyline_quality: 1
 
 ```
-<!--/examples-->
+<!--/examples-->