[IMP] extras: improve landing page

extras/index.html

@@ -22,22 +22,26 @@
         </div>
     </div>
 
-    <div class="section benchmarks">
+    <div class="section">
         <h2>Benchmarks</h2>
 
+        <div class="benchmarks">
             <ul>
-            <li><a href="benchmarks/odoo-widgets-12.0">Odoo Widgets (12.0)</a></li>
-            <li><a href="benchmarks/odoo-widgets-12.3">Odoo Widgets (12.3)</a></li>
                 <li><a href="benchmarks/owl-0.7.0">OWL 0.7.0</a></li>
                 <li><a href="benchmarks/owl-0.8.0">OWL 0.8.0</a></li>
                 <li><a href="benchmarks/owl-0.9.0">OWL 0.9.0</a></li>
                 <li><a href="benchmarks/owl-0.10.0">OWL 0.10.0</a></li>
                 <li><a href="benchmarks/owl-0.11.0">OWL 0.11.0</a></li>
                 <li><a href="benchmarks/owl-master">OWL Master</a></li>
+            </ul>
+            <ul>
+                <li><a href="benchmarks/odoo-widgets-12.0">Odoo Widgets (12.0)</a></li>
+                <li><a href="benchmarks/odoo-widgets-12.3">Odoo Widgets (12.3)</a></li>
                 <li><a href="benchmarks/vue">Vue</a></li>
                 <li><a href="benchmarks/react">React</a></li>
             </ul>
         </div>
+    </div>
 
 </body>
 </html>

extras/main.css

@@ -2,7 +2,8 @@ body {
   font-family: sans-serif;
 }
 
-.title, .section {
+.title,
+.section {
   width: 768px;
   margin: auto;
 }
@@ -11,6 +12,7 @@ body {
   color: #333333;
   font-style: italic;
 }
+
 .section {
   background-color: #d5d5d5;
   padding: 16px;
@@ -21,3 +23,8 @@ body {
 .links a {
   margin: 10px 5px;
 }
+
+.benchmarks {
+  display: grid;
+  grid-template-columns: auto auto;
+}