style adjustment: open sans -> junction/inter

12 files changed, 110 insertions, 62 deletions

diff --git a/asset-sources/theme.scss b/asset-sources/theme.scss
index 35a3df1..12eff78 100644
--- a/asset-sources/theme.scss
+++ b/asset-sources/theme.scss
@@ -3,7 +3,7 @@ html {
 }
 
 body {
-  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Junction", sans-serif;
   font-weight: 300;
   color: #101010;
   background: #efefef;
@@ -34,10 +34,24 @@ strong {
   }
 }
 
+.navbar {
+  font-family: "Inter", sans-serif;
+  font-weight: 400;
+  margin-bottom: 1em;
+}
+
+.ui-element {
+  font-family: "Inter", sans-serif;
+}
+
 .brand-link {
   text-decoration: none;
 }
 
+#homeOverview {
+  margin-bottom: 1em;
+}
+
 .badge-container {
   width: 50px;
   height: 50px;
@@ -111,6 +125,11 @@ strong {
     max-width: 100%;
 }
 
+.track-badges {
+  justify-content: center;
+  margin-bottom: 1em;
+}
+
 .summary-toggler {
   cursor: pointer;
 }
@@ -156,6 +175,7 @@ strong {
   width: 50px;
   display: inline-block;
   text-align: right;
+  font-variant: lining-nums;
 }
 
 .calendar-title {
@@ -234,6 +254,10 @@ strong {
   }
 }
 
+.browse-summary {
+  font-variant: lining-nums;
+}
+
 /* Ensure a consistent width of the cells in the browse view. */
 .browse-summary th, .browse-summary td {
   width: 25%;
diff --git a/fietsboek/static/theme.css b/fietsboek/static/theme.css
index 755a986..a04e374 100644
--- a/fietsboek/static/theme.css
+++ b/fietsboek/static/theme.css
@@ -3,7 +3,7 @@ html {
 }
 
 body {
-  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Junction", sans-serif;
   font-weight: 300;
   color: #101010;
   background: #efefef;
@@ -33,10 +33,24 @@ strong {
   text-decoration: none;
 }
 
+.navbar {
+  font-family: "Inter", sans-serif;
+  font-weight: 400;
+  margin-bottom: 1em;
+}
+
+.ui-element {
+  font-family: "Inter", sans-serif;
+}
+
 .brand-link {
   text-decoration: none;
 }
 
+#homeOverview {
+  margin-bottom: 1em;
+}
+
 .badge-container {
   width: 50px;
   height: 50px;
@@ -106,6 +120,11 @@ strong {
   max-width: 100%;
 }
 
+.track-badges {
+  justify-content: center;
+  margin-bottom: 1em;
+}
+
 .summary-toggler {
   cursor: pointer;
 }
@@ -149,6 +168,7 @@ strong {
   width: 50px;
   display: inline-block;
   text-align: right;
+  font-variant: lining-nums;
 }
 
 .calendar-title {
@@ -222,6 +242,10 @@ strong {
   color: inherit;
 }
 
+.browse-summary {
+  font-variant: lining-nums;
+}
+
 /* Ensure a consistent width of the cells in the browse view. */
 .browse-summary th, .browse-summary td {
   width: 25%;
diff --git a/fietsboek/static/theme.css.map b/fietsboek/static/theme.css.map
index 8593cd3..8112079 100644
--- a/fietsboek/static/theme.css.map
+++ b/fietsboek/static/theme.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../asset-sources/theme.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EAqCE;EACA;EACA;EACA;EACA;EACA;;AAzCA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAWJ;EACI;;;AAGJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAEF;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;EACA;;AACA;EACE;;AAIJ;EACE;EACA;;;AAIJ;AACA;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"theme.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../asset-sources/theme.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EAqCE;EACA;EACA;EACA;EACA;EACA;;AAzCA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAWJ;EACI;;;AAGJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAEF;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;EACA;;AACA;EACE;;AAIJ;EACE;EACA;;;AAIJ;EACE;;;AAGF;AACA;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"theme.css"}
\ No newline at end of file
diff --git a/fietsboek/templates/browse.jinja2 b/fietsboek/templates/browse.jinja2
index 308e89d..8877229 100644
--- a/fietsboek/templates/browse.jinja2
+++ b/fietsboek/templates/browse.jinja2
@@ -8,7 +8,7 @@
         <div class="col-12">
           <div class="input-group">
             <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button>
-            <input name="search-terms" type="text" class="form-control" placeholder="{{ _("page.browse.filter.search_terms") }}" value="{{ request.params.get('search-terms', '') }}">
+            <input name="search-terms" type="text" class="form-control ui-element" placeholder="{{ _("page.browse.filter.search_terms") }}" value="{{ request.params.get('search-terms', '') }}">
           </div>
         </div>
       </div>
@@ -17,59 +17,59 @@
         <div class="col-md-6">
           <div class="input-group">
             <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button>
-            <input name="tags" type="text" class="form-control" placeholder="{{ _("page.browse.filter.tags") }}" value="{{ request.params.get('tags', '') }}">
+            <input name="tags" type="text" class="form-control ui-element" placeholder="{{ _("page.browse.filter.tags") }}" value="{{ request.params.get('tags', '') }}">
           </div>
         </div>
 
         <div class="col-md-6">
           <div class="input-group">
             <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button>
-            <input name="tagged-person" type="text" class="form-control" placeholder="{{ _("page.browse.filter.tagged_person") }}" value="{{ request.params.get('tagged-person', '') }}">
+            <input name="tagged-person" type="text" class="form-control ui-element" placeholder="{{ _("page.browse.filter.tagged_person") }}" value="{{ request.params.get('tagged-person', '') }}">
           </div>
         </div>
 
         <div class="col-md-4">
           <div class="input-group">
             <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button>
-            <input name="min-length" type="number" class="form-control" placeholder="{{ _("page.browse.filter.length_minimum") }}" value="{{ request.params.get('min-length', '') }}">
-            <span class="input-group-text">km</span>
+            <input name="min-length" type="number" class="form-control ui-element" placeholder="{{ _("page.browse.filter.length_minimum") }}" value="{{ request.params.get('min-length', '') }}">
+            <span class="input-group-text ui-element">km</span>
           </div>
         </div>
 
-        <div class="col-md-4 fs-5 d-flex align-items-center justify-content-center">
+        <div class="col-md-4 fs-5 d-flex align-items-center justify-content-center ui-element">
             {{ _("page.browse.filter.length_boundaries") }}
         </div>
 
         <div class="col-md-4">
           <div class="input-group">
             <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button>
-            <input name="max-length" type="number" class="form-control" placeholder="{{ _("page.browse.filter.length_maximum") }}" value="{{ request.params.get('max-length', '') }}">
-            <span class="input-group-text">km</span>
+            <input name="max-length" type="number" class="form-control ui-element" placeholder="{{ _("page.browse.filter.length_maximum") }}" value="{{ request.params.get('max-length', '') }}">
+            <span class="input-group-text ui-element">km</span>
           </div>
         </div>
 
         <div class="col-md-4">
           <div class="input-group">
             <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button>
-            <input name="min-date" type="date" class="form-control" value="{{ request.params.get('min-date', '') }}">
+            <input name="min-date" type="date" class="form-control ui-element" value="{{ request.params.get('min-date', '') }}">
           </div>
         </div>
 
-        <div class="col-md-4 fs-5 d-flex align-items-center justify-content-center">
+        <div class="col-md-4 fs-5 d-flex align-items-center justify-content-center ui-element">
           {{ _("page.browse.filter.date_boundaries") }}
         </div>
 
         <div class="col-md-4">
           <div class="input-group">
             <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button>
-            <input name="max-date" type="date" class="form-control" value="{{ request.params.get('max-date', '') }}">
+            <input name="max-date" type="date" class="form-control ui-element" value="{{ request.params.get('max-date', '') }}">
           </div>
         </div>
 
       <div class="col-md-6">
         <div class="input-group">
           <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button>
-          <select class="form-select" size="2" name="type[]" multiple>
+          <select class="form-select ui-element" size="2" name="type[]" multiple>
             <option value="ORGANIC"{% if "ORGANIC" in request.params.getall("type[]") %} selected{% endif %}>{{ _("page.browse.filter.type.organic") }}</option>
             <option value="SYNTHETIC"{% if "SYNTHETIC" in request.params.getall("type[]") %} selected{% endif %}>{{ _("page.browse.filter.type.synthetic") }}</option>
           </select>
@@ -77,7 +77,7 @@
 
         {% if request.identity %}
         <div class="input-group mt-2">
-          <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button>
+          <button type="button" class="btn btn-outline-secondary button-clear-input ui-element"><i class="bi bi-eraser-fill"></i></button>
           <select class="form-select" name="favourite">
             <option value="">{{ _("page.browse.filter.favourite.all") }}</option>
             <option value="true"{% if request.params.get("favourite") == "true" %} selected{% endif %}>{{ _("page.browse.filter.favourite.yes") }}</option>
@@ -89,7 +89,7 @@
       <div class="col-md-6">
         {% if request.identity %}
         {% macro render_switch(id, name, value, text) %}
-        <div class="form-check form-switch">
+        <div class="form-check form-switch ui-element">
           <input class="form-check-input" type="checkbox" role="switch" id="{{ id }}" name="{{ name }}" value="{{ value }}" {% if value in request.params.getall(name) %}checked{% endif %}>
           <label class="form-check-label" for="{{ id }}">{{ text }}</label>
         </div>
@@ -104,20 +104,20 @@
 
       <div class="row g-3 mb-3">
         <div class="col">
-          <button type="submit" class="btn btn-primary">
+          <button type="submit" class="btn btn-primary ui-element">
             <i class="bi bi-funnel-fill"></i>
             {{ _("page.browse.filters.apply") }}
           </button>
-          <a class="btn btn-info" href="{{ request.route_path('browse') }}">
+          <a class="btn btn-info ui-element" href="{{ request.route_path('browse') }}">
             <i class="bi bi-x-octagon"></i>
             {{ _("page.browse.filters.clear_all") }}
           </a>
-          <button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#advancedSearch" aria-expanded="false" aria-controls="advancedSearch">
+          <button class="btn btn-secondary ui-element" type="button" data-bs-toggle="collapse" data-bs-target="#advancedSearch" aria-expanded="false" aria-controls="advancedSearch">
             {{ _("page.browse.filters.expand_advanced") }}
           </button>
         </div>
         <div class="col">
-          <select class="form-select" name="sort">
+          <select class="form-select ui-element" name="sort">
             <option value="DATE_DESC" {% if request.params.get("sort") == "DATE_DESC" %}selected{% endif %}>{{ _("page.browse.sort.date") }} &ShortDownArrow;</option>
             <option value="DATE_ASC" {% if request.params.get("sort") == "DATE_ASC" %}selected{% endif %}>{{ _("page.browse.sort.date") }} &ShortUpArrow;</option>
             <option value="LENGTH_DESC" {% if request.params.get("sort") == "LENGTH_DESC" %}selected{% endif %}>{{ _("page.browse.sort.length") }} &ShortDownArrow;</option>
@@ -208,7 +208,7 @@
     </div>
   </div>
   {% endfor %}
-  <button type="button" class="btn btn-primary" id="archiveDownloadButton" disabled><i class="bi bi-file-earmark-zip"></i> {{ _("page.browse.download_multiple") }}</button>
+  <button type="button" class="btn btn-primary ui-element" id="archiveDownloadButton" disabled><i class="bi bi-file-earmark-zip"></i> {{ _("page.browse.download_multiple") }}</button>
   {% elif used_filters %}
   <p>{{ _("page.browse.no_results") }}</p>
   {% else %}
diff --git a/fietsboek/templates/details.jinja2 b/fietsboek/templates/details.jinja2
index 7307270..d8c9250 100644
--- a/fietsboek/templates/details.jinja2
+++ b/fietsboek/templates/details.jinja2
@@ -17,9 +17,9 @@
   </h1>
   {% if show_edit_link %}
   <div class="btn-group" role="group">
-    <a class="btn btn-success" href="{{ request.route_path('edit', track_id=track.id) }}"><i class="bi-pencil-square"></i> {{ _("page.details.edit") }}</a>
-    <button type="button" class="btn btn-info" id="showShareLink" data-bs-toggle="modal" data-bs-target="#shareLinkModal"><i class="bi-share"></i> {{ _("page.details.share") }}</button>
-    <button type="button" class="btn btn-danger" id="deleteLink" data-bs-toggle="modal" data-bs-target="#deleteModal"><i class="bi bi-trash"></i> {{ _("page.details.delete") }}</button>
+    <a class="btn btn-success ui-element" href="{{ request.route_path('edit', track_id=track.id) }}"><i class="bi-pencil-square"></i> {{ _("page.details.edit") }}</a>
+    <button type="button" class="btn btn-info ui-element" id="showShareLink" data-bs-toggle="modal" data-bs-target="#shareLinkModal"><i class="bi-share"></i> {{ _("page.details.share") }}</button>
+    <button type="button" class="btn btn-danger ui-element" id="deleteLink" data-bs-toggle="modal" data-bs-target="#deleteModal"><i class="bi bi-trash"></i> {{ _("page.details.delete") }}</button>
   </div>
   <div class="modal fade" id="shareLinkModal" tabindex="-1" aria-hidden="true">
     <div class="modal-dialog">
@@ -36,9 +36,9 @@
         <div class="modal-footer">
           <form method="POST" action="{{ request.route_url('invalidate-share', track_id=track.id) }}">
             {{ util.hidden_csrf_input() }}
-            <button type="submit" class="btn btn-warning">{{ _("page.details.sharelink.invalidate") }}</button>
+            <button type="submit" class="btn btn-warning ui-element">{{ _("page.details.sharelink.invalidate") }}</button>
           </form>
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _("page.details.sharelink.close") }}</button>
+          <button type="button" class="btn btn-secondary ui-element" data-bs-dismiss="modal">{{ _("page.details.sharelink.close") }}</button>
         </div>
       </div>
     </div>
@@ -57,9 +57,9 @@
         <div class="modal-footer">
           <form method="POST" action="{{ request.route_url('delete-track', track_id=track.id) }}">
             {{ util.hidden_csrf_input() }}
-            <button type="submit" class="btn btn-danger">{{ _("page.details.delete.delete") }}</button>
+            <button type="submit" class="btn btn-danger ui-element">{{ _("page.details.delete.delete") }}</button>
           </form>
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _("page.details.delete.close") }}</button>
+          <button type="button" class="btn btn-secondary ui-element" data-bs-dismiss="modal">{{ _("page.details.delete.close") }}</button>
         </div>
       </div>
     </div>
@@ -94,7 +94,7 @@
   </div>
 
   <div class="mb-3">
-    <a class="btn btn-primary" href="{{ gpx_url }}"><i class="bi bi-download"></i> {{ _("page.details.download") }}</a>
+    <a class="btn btn-primary ui-element" href="{{ gpx_url }}"><i class="bi bi-download"></i> {{ _("page.details.download") }}</a>
   </div>
 
   <table class="table table-hover table-sm">
@@ -146,7 +146,7 @@
     </tbody>
   </table>
   {% if track.badges %}
-  <div class="d-flex">
+  <div class="d-flex track-badges">
     {% for badge in track.badges %}
     {{ util.render_badge(badge) }}
     {% endfor %}
@@ -212,7 +212,7 @@
               <textarea name="comment" class="form-control" rows="5" placeholder="{{ _('page.details.comments.new.input_comment') }}"></textarea>
           </div>
           <div class="card-footer text-muted">
-              <button type="submit" class="btn btn-success"><i class="bi bi-pen"></i> {{ _("page.details.comments.new.submit") }}</button>
+              <button type="submit" class="btn btn-success ui-element"><i class="bi bi-pen"></i> {{ _("page.details.comments.new.submit") }}</button>
           </div>
           {{ util.hidden_csrf_input() }}
       </form>
diff --git a/fietsboek/templates/edit.jinja2 b/fietsboek/templates/edit.jinja2
index a9a4221..6347ae6 100644
--- a/fietsboek/templates/edit.jinja2
+++ b/fietsboek/templates/edit.jinja2
@@ -13,8 +13,8 @@
     {{ edit_form.edit_track(track.title, track.date_raw, track.date_tz or 0, track.visibility, track.type, track.description, track.text_tags(), badges, track.tagged_people, images) }}
     {{ util.hidden_csrf_input() }}
     <div class="btn-group" role="group">
-        <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> {{ _("page.edit.form.submit") }}</button>
-        <a href="{{ request.route_url('details', track_id=track.id) }}" class="btn btn-secondary"><i class="bi bi-x-circle"></i> {{ _("page.edit.form.cancel") }}</a>
+        <button type="submit" class="btn btn-primary ui-element"><i class="bi bi-save"></i> {{ _("page.edit.form.submit") }}</button>
+        <a href="{{ request.route_url('details', track_id=track.id) }}" class="btn btn-secondary ui-element"><i class="bi bi-x-circle"></i> {{ _("page.edit.form.cancel") }}</a>
     </div>
   </form>
 </div>
diff --git a/fietsboek/templates/edit_form.jinja2 b/fietsboek/templates/edit_form.jinja2
index aa09c9e..e515c3b 100644
--- a/fietsboek/templates/edit_form.jinja2
+++ b/fietsboek/templates/edit_form.jinja2
@@ -1,16 +1,16 @@
 {% macro edit_track(title, date, date_tz, visibility, type, description, tags, badges, friends, images) %}
 <div class="mb-3">
   <label for="formTitle" class="form-label">{{ _("page.track.form.title") }}</label>
-  <input class="form-control" type="text" id="formTitle" name="title" value="{{ title | default("", true) }}">
+  <input class="form-control ui-element" type="text" id="formTitle" name="title" value="{{ title | default("", true) }}">
 </div>
 <div class="mb-3">
   <label for="formDate" class="form-label">{{ _("page.track.form.date") }}</label>
-  <input class="form-control" type="datetime-local" id="formDate" name="date" value="{{ date.strftime('%Y-%m-%dT%H:%M') }}">
+  <input class="form-control ui-element" type="datetime-local" id="formDate" name="date" value="{{ date.strftime('%Y-%m-%dT%H:%M') }}">
   <input type="hidden" name="date-tz" value="{{ date_tz }}">
 </div>
 <div class="mb-3">
   <label for="formVisibility" class="form-label">{{ _("page.track.form.visibility") }}</label>
-  <select class="form-select" id="formVisibility" name="visibility">
+  <select class="form-select ui-element" id="formVisibility" name="visibility">
       <option value="PRIVATE"{% if visibility.name == "PRIVATE" %} selected{% endif %}>{{ _("page.track.form.visibility.private") }}</option>
       <option value="FRIENDS"{% if visibility.name == "FRIENDS" %} selected{% endif %}>{{ _("page.track.form.visibility.friends") }}</option>
       <option value="FRIENDS_TAGGED"{% if visibility.name == "FRIENDS_TAGGED" %} selected{% endif %}>{{ _("page.track.form.visibility.friends_tagged") }}</option>
@@ -23,7 +23,7 @@
 </div>
 <div class="mb-3">
   <label for="formType" class="form-label">{{ _("page.track.form.type") }}</label>
-  <select class="form-select" id="formType" name="type">
+  <select class="form-select ui-element" id="formType" name="type">
     <option value="ORGANIC"{% if type.name == "ORGANIC" %} selected{% endif%}>{{ _("page.track.form.type.organic") }}</option>
     <option value="SYNTHETIC"{% if type.name == "SYNTHETIC" %} selected{% endif%}>{{ _("page.track.form.type.synthetic") }}</option>
   </select>
@@ -37,7 +37,7 @@
   </div>
   <div class="row">
     <div class="col-lg-3">
-      <input type="text" id="new-tag" class="form-control" list="user-tags">
+      <input type="text" id="new-tag" class="form-control ui-element" list="user-tags">
       <datalist id="user-tags">
         {% if request.identity %}
         {% for tag in request.identity.autocomplete_tags() | sort %}
@@ -47,7 +47,7 @@
       </datalist>
     </div>
     <div class="col-lg-3">
-      <button type="button" class="btn btn-primary" id="add-tag-btn">{{ _("page.track.form.add_tag") }}</buttton>
+      <button type="button" class="btn btn-primary ui-element" id="add-tag-btn">{{ _("page.track.form.add_tag") }}</buttton>
     </div>
   </div>
 </div>
@@ -64,10 +64,10 @@
   </ul>
   <div class="row my-2">
     <div class="col-lg-3">
-      <input type="text" id="friendSearchQuery" class="form-control">
+      <input type="text" id="friendSearchQuery" class="form-control ui-element">
     </div>
     <div class="col-lg-3">
-      <button type="button" class="btn btn-primary" id="add-friend-btn"><i class="bi bi-search"></i> {{ _("page.track.form.add_friend") }}</buttton>
+      <button type="button" class="btn btn-primary ui-element" id="add-friend-btn"><i class="bi bi-search"></i> {{ _("page.track.form.add_friend") }}</buttton>
     </div>
   </div>
   <!-- Hidden templates for Javascript to use -->
@@ -101,7 +101,7 @@
 </div>
 <div class="mb-3">
   <label for="formDesc" class="form-label">{{ _("page.track.form.description") }}</label>
-  <textarea class="form-control" id="formDesc" name="description" rows="5">{{ description | default("", true) }}</textarea>
+  <textarea class="form-control ui-element" id="formDesc" name="description" rows="5">{{ description | default("", true) }}</textarea>
 </div>
 <div class="mb-3">
   <div id="trackImageList">
@@ -115,8 +115,8 @@
     </div>
     {% endfor %}
   </div>
-  <input type="file" name="image[]" id="imageSelector" class="form-control" accept="image/*" style="display:none;" multiple>
-  <button type="button" onclick="document.querySelector('#imageSelector').click()" class="btn btn-primary" id="selectImagesButton" {% if not request.config.enable_image_uploads %}disabled{% endif %}>
+  <input type="file" name="image[]" id="imageSelector" class="form-control ui-element" accept="image/*" style="display:none;" multiple>
+  <button type="button" onclick="document.querySelector('#imageSelector').click()" class="btn btn-primary ui-element" id="selectImagesButton" {% if not request.config.enable_image_uploads %}disabled{% endif %}>
       <i class="bi bi-images"></i> {{ _("page.track.form.select_images") }}
   </button>
   {% if not request.config.enable_image_uploads %}
@@ -146,7 +146,7 @@
         <textarea class="form-control"></textarea>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-success">{{ _("page.track.form.image_description_modal.save") }}</button>
+        <button type="button" class="btn btn-success ui-element">{{ _("page.track.form.image_description_modal.save") }}</button>
       </div>
     </div>
   </div>
diff --git a/fietsboek/templates/finish_upload.jinja2 b/fietsboek/templates/finish_upload.jinja2
index 9ee4576..34d4aac 100644
--- a/fietsboek/templates/finish_upload.jinja2
+++ b/fietsboek/templates/finish_upload.jinja2
@@ -13,8 +13,8 @@
     {{ edit_form.edit_track(upload_title, upload_date, upload_date_tz, upload_visibility, upload_type, upload_description, upload_tags, badges, upload_tagged_people, []) }}
     {{ util.hidden_csrf_input() }}
     <div class="btn-group" role="group">
-      <button type="submit" class="btn btn-primary">{{ _("page.upload.form.submit") }}</button>
-      <button type="submit" class="btn btn-danger" form="cancelForm">{{ _("page.upload.form.cancel") }}</button>
+      <button type="submit" class="btn btn-primary ui-element">{{ _("page.upload.form.submit") }}</button>
+      <button type="submit" class="btn btn-danger ui-element" form="cancelForm">{{ _("page.upload.form.cancel") }}</button>
     </div>
   </form>
   <form id="cancelForm" method="POST" action="{{ request.route_url('cancel-upload', upload_id=preview_id) }}">
diff --git a/fietsboek/templates/home.jinja2 b/fietsboek/templates/home.jinja2
index 6092669..e9e1d42 100644
--- a/fietsboek/templates/home.jinja2
+++ b/fietsboek/templates/home.jinja2
@@ -23,7 +23,7 @@
   </div>
   {% endif %}
   {% if summary %}
-  <div class="list-group list-group-root">
+  <div class="list-group list-group-root" id="homeOverview">
     {% for year in summary %}
     <a class="list-group-item list-group-item-primary">
       <i class="bi bi-chevron-down summary-toggler"></i>
diff --git a/fietsboek/templates/layout.jinja2 b/fietsboek/templates/layout.jinja2
index eae8cb4..bb3cc18 100644
--- a/fietsboek/templates/layout.jinja2
+++ b/fietsboek/templates/layout.jinja2
@@ -122,7 +122,7 @@ const Legende = false;
         <hr>
         <div id="languageChooser">
           {% for lang_code, display_name in list_languages(request) %}
-          <a href="#" class="language-choice" data-langcode="{{ lang_code }}">{{ display_name }}</a>
+          <a href="#" class="language-choice ui-element" data-langcode="{{ lang_code }}">{{ display_name }}</a>
           {% endfor %}
         </div>
       </div>
diff --git a/fietsboek/templates/upload.jinja2 b/fietsboek/templates/upload.jinja2
index 6406e91..b065a96 100644
--- a/fietsboek/templates/upload.jinja2
+++ b/fietsboek/templates/upload.jinja2
@@ -6,11 +6,11 @@
   <h1>{{ _("page.upload.title") }}</h1>
   <form method="POST" enctype="multipart/form-data">
     <div class="mb-3">
-      <label for="uploadFile" class="form-label">{{ _("page.upload.form.gpx") }}</label>
-      <input class="form-control" type="file" id="uploadFile" name="gpx">
+      <label for="uploadFile" class="form-label ui-element">{{ _("page.upload.form.gpx") }}</label>
+      <input class="form-control ui-element" type="file" id="uploadFile" name="gpx">
     </div>
     {{ util.hidden_csrf_input() }}
-    <button type="submit" class="btn btn-primary"><i class="bi bi-upload"></i> {{ _("page.upload.form.submit") }}</button>
+    <button type="submit" class="btn btn-primary ui-element"><i class="bi bi-upload"></i> {{ _("page.upload.form.submit") }}</button>
   </form>
 </div>
 {% endblock %}
diff --git a/fietsboek/templates/user_data.jinja2 b/fietsboek/templates/user_data.jinja2
index 59124ea..eada958 100644
--- a/fietsboek/templates/user_data.jinja2
+++ b/fietsboek/templates/user_data.jinja2
@@ -12,25 +12,25 @@
 
   <form method="POST" action="{{ request.route_path('user-data') }}" class="needs-validation" novalidate>
     <div class="form-floating mb-3 col-lg-5">
-      <input type="text" class="form-control" id="inputName" name="name" value="{{ user.name }}" placeholder="x">
+      <input type="text" class="form-control ui-element" id="inputName" name="name" value="{{ user.name }}" placeholder="x">
       <label for="inputName">{{ _("page.my_profile.personal_data.name") }}</label>
     </div>
     <div class="form-floating mb-3 col-lg-5">
-      <input type="password" class="form-control" id="inputPassword" name="password" onchange="checkPasswordValidity('#inputPassword', '#repeatPassword')" placeholder="x">
+      <input type="password" class="form-control ui-element" id="inputPassword" name="password" onchange="checkPasswordValidity('#inputPassword', '#repeatPassword')" placeholder="x">
       <div class="invalid-feedback">
           {{ _("page.my_profile.personal_data.password_invalid") }}
       </div>
       <label for="inputPassword">{{ _("page.my_profile.personal_data.password") }}</label>
     </div>
     <div class="form-floating mb-3 col-lg-5">
-      <input type="password" class="form-control" id="repeatPassword" name="repeat-password" onchange="checkPasswordValidity('#inputPassword', '#repeatPassword')" placeholder="x">
+      <input type="password" class="form-control ui-element" id="repeatPassword" name="repeat-password" onchange="checkPasswordValidity('#inputPassword', '#repeatPassword')" placeholder="x">
       <div class="invalid-feedback">
           {{ _("page.my_profile.personal_data.password_must_match") }}
       </div>
       <label for="repeatPassword">{{ _("page.my_profile.personal_data.repeat_password") }}</label>
     </div>
     {{ util.hidden_csrf_input() }}
-    <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> {{ _("page.my_profile.personal_data.save") }}</button>
+    <button type="submit" class="btn btn-primary ui-element"><i class="bi bi-save"></i> {{ _("page.my_profile.personal_data.save") }}</button>
   </form>
 
   <hr>
@@ -41,7 +41,7 @@
 
   <form method="POST" action="{{ request.route_path('force-logout') }}">
     {{ util.hidden_csrf_input() }}
-    <button type="submit" class="btn btn-danger"><i class="bi bi-shield-lock-fill"></i> {{ _("page.my_profile.session_logout.button") }}</button>
+    <button type="submit" class="btn btn-danger ui-element"><i class="bi bi-shield-lock-fill"></i> {{ _("page.my_profile.session_logout.button") }}</button>
   </form>
 
   <hr>
@@ -54,7 +54,7 @@
       <form action="{{ request.route_url('delete-friend') }}" method="POST">
         <input type="hidden" name="friend-id" value="{{ friend.id }}">
         {{ util.hidden_csrf_input() }}
-        <button type="submit" class="btn btn-danger"><i class="bi bi-person-dash"></i> {{ _("page.my_profile.unfriend") }}</button>
+        <button type="submit" class="btn btn-danger ui-element"><i class="bi bi-person-dash"></i> {{ _("page.my_profile.unfriend") }}</button>
       </form>
       <span class="ms-3">{{ friend.name }} ({{ friend.email }})</span>
     </li>
@@ -64,7 +64,7 @@
       <form action="{{ request.route_url('accept-friend') }}" method="POST">
         <input type="hidden" name="request-id" value="{{ friend_request.id }}">
         {{ util.hidden_csrf_input() }}
-        <button type="submit" class="btn btn-success"><i class="bi bi-person-check"></i> {{ _("page.my_profile.accept_friend") }}</button>
+        <button type="submit" class="btn btn-success ui-element"><i class="bi bi-person-check"></i> {{ _("page.my_profile.accept_friend") }}</button>
       </form>
       <span class="ms-3">{{ friend_request.sender.name }} ({{ friend_request.sender.email }})</span>
     </li>
@@ -80,12 +80,12 @@
       <div class="row align-items-center">
         <div class="col-lg-5">
           <div class="form-floating">
-            <input type="email" id="friendRequestEmail" name="friend-email" class="form-control" placeholder="x">
+            <input type="email" id="friendRequestEmail" name="friend-email" class="form-control ui-element" placeholder="x">
             <label for="friendRequestEmail">{{ _("page.my_profile.friend_request_email") }}</label>
           </div>
         </div>
         <div class="col-lg-3">
-          <button class="btn btn-primary"><i class="bi bi-person-plus"></i> {{ _("page.my_profile.send_friend_request") }}</button>
+          <button class="btn btn-primary ui-element"><i class="bi bi-person-plus"></i> {{ _("page.my_profile.send_friend_request") }}</button>
         </div>
       </div>
     </form>