rework front page to have shuffle and lazy infinite scroll

dlibrary/templates/categorization.html

@@ -4,7 +4,7 @@
 {% from 'utils.html' import urlcat, index, root with context %}
 <h1 id="title"><a href="{{ root() }}/{{ index() }}">DLibrary</a> &gt; {{ categorization.capitalize() }}</h1>
 {% include 'nav.html' %}
-<div class="card-listing">
+<div id="card-listing">
   {% for cat in categories %}
   <div class="card {% if not work_style_cards %}category{% endif %}">
     <a href="{{ urlcat(cat) }}/{{ index() }}">

dlibrary/templates/index.html

@@ -0,0 +1,25 @@
+{% extends 'base.html' %}
+{% from 'utils.html' import index, root with context %}
+{% block head %}
+<script>
+  const ROOT = "{{ root() }}";
+  const INDEX = "{{ index() }}";
+  const WORKS = {{ works | tojson }};
+</script>
+<script src="{{ root() }}/static/index.js"></script>
+{% endblock %}
+{% block body %}
+<div id="top">
+  <div id="top-padding"></div>
+  <div id="header">
+    <h1 id="title"><a href="{{ root() }}/{{ index() }}">DLibrary</a></h1>
+    {% include 'nav.html' %}
+  </div>
+  <div id="controls">
+    <button id="shuffle" name="Shuffle"><img src="{{ root() }}/static/icons/shuffle.svg"/></button>
+    <button id="sort" name="Sort"><img src="{{ root() }}/static/icons/sort.svg"/></button>
+  </div>
+</div>
+<div id="card-listing">
+</div>
+{% endblock %}

dlibrary/templates/list.html

@@ -3,12 +3,12 @@
 {% from 'utils.html' import index, root with context %}
 <h1 id="title"><a href="{{ root() }}/{{ index() }}">DLibrary</a>{% if categorization %} &gt; <a href="{{ root() }}/{{ categorization }}/{{ index() }}">{{ categorization.capitalize() }}</a>{% endif %}{% if title %} &gt; {{ title }}{% endif %}</h1>
 {% include 'nav.html' %}
-<div class="card-listing">
+<div id="card-listing">
   {% for work in works %}
   <div class="card">
     <a href="{{ root() }}/works/{{ work['id'] }}/{{ index() }}">
       <img src="{{ root() }}/thumbnails/{{ work['id'] }}.jpg">
-      <div class="card-authors">
+      <div class="card-creators">
         [{% if work['circle'] %}{{ work['circle'] }}{% endif %}{% if work['circle'] and work['authors'] %} ({% endif %}{{ ', '.join(work['authors']) }}{% if work['circle'] and work['authors'] %}){% endif %}]
       </div>
       <div class="card-title">