additional screenshots

docs/table.html

@@ -50,13 +50,13 @@
       <p class="subtitle is-6">Sortable and searchable.</p>
     </div>
    </div>
-   <table class="table is-narrow is-hoverable"></table>
+   <table class="table is-narrow is-hoverable is-size-6"></table>
   </div>
   <script>
     fetch("data/entries.json").then(response => response.json()).then(data => {
       let table = new simpleDatatables.DataTable(".table", {
-        perPage: 50,
-        perPageSelect: [30, 50, 100],
+        perPage: 30,
+        perPageSelect: [10, 30, 50],
         footer: true,
         data: {
           headings: data["headings"],
@@ -65,7 +65,12 @@
       });
 
       table.on('datatable.init', function(args) {
+        // sort by first column
         table.columns().sort(0);
+        // use the urls search part for the search input field of the table
+        if (window.location.search) {
+          document.getElementsByClassName("dataTable-input").item(0).value = window.location.search.substring(1).replace("+", " ");
+        }
       });
     })
   </script>
@@ -76,7 +81,7 @@
   <p>The content (games descriptions) is licensed <a href="https://github.com/Trilarion/opensourcegames/blob/master/LICENSE">CC-0</a>.
   Used icons are licensed under CC BY-SA 3.0 (<a href="https://github.com/somerandomdude/Iconic">Iconic</a> or <a href="http://designmodo.com/linecons-free/">Linecons</a>), CC0 1.0 (<a href="https://simpleicons.org/">Simple Icons</a>),
   CC BY 4.0 (<a href="https://github.com/FortAwesome/Font-Awesome">Font Awesome</a> or <a href="https://icomoon.io/#icons-icomoon">IcoMoon Free</a>), CC BY-SA 4.0 (<a href="http://www.entypo.com/">Entypo+</a>) or Apache License 2.0 (<a href="https://material.io/resources/icons">Material Icons</a>).
-  This website is built using Python, Lark, Jinja2 and Bulma. Last updated: 2021-10-15 21:32</p>
+  This website is built using Python, Lark, Jinja2 and Bulma. Last updated: 2021-10-26 19:43</p>
 </footer>
 </body>
 </html>