[matrix] Add sans-serif font toggle to settings modal

* Add sans serif font toggle

* remove unnecessary boolean comparison from setFont

Co-authored-by: slice <[email protected]>

* Update checkbox title

Co-authored-by: slice <[email protected]>

* General cleanup of settings system

* Apply overflow hidden to modal

Co-authored-by: slice <[email protected]>

1 files changed, 14 insertions, 5 deletions

diff --git a/docs/_templates/layout.html b/docs/_templates/layout.html
index 8020a1b6..85a055aa 100644
--- a/docs/_templates/layout.html
+++ b/docs/_templates/layout.html
@@ -13,7 +13,7 @@
 {%- block rootrellink %}
   {# Perhaps override the relbar() macro to place this on the right side of the link list? #}
   <li class="right"{% if not rellinks %} style="margin-right: 10px"{% endif %}>
-    <a href="javascript:;" title="settings" accesskey="S" onclick="openModal(settings);">settings</a>{{ reldelim2 }}</li>
+    <a title="settings" accesskey="S" onclick="openModal(settingsModal);">settings</a>{{ reldelim2 }}</li>
   {{ super() }}
 {% endblock %}
 
@@ -25,11 +25,20 @@
 {% endblock %}
 
 {%- block content %}
-  <div id="settings" class="modal" style="display: none;" onclick="if (event.target == this){ closeModal(settings); }">
+  <div id="settings" class="modal" style="display: none;" onclick="if (event.target == this){ closeModal(settingsModal); }">
     <div class="modal-content">
-      <span class="close" onclick="closeModal(settings);" title="Close">&times;</span>
+      <span class="close" onclick="closeModal(settingsModal);" title="Close">&times;</span>
       <h1>Settings</h1>
-      <!-- TODO: ADD OPTIONS HERE -->
+
+      <div class='setting'>
+        <h3>Use a sans-serif font:
+          <label class="toggle" title="Use a sans serif font? Your system font will be used, falling back to `sans-serif`.">
+            <input type="checkbox" name="useSansFont" onclick="updateSetting(this);">
+            <span class="toggle-slider"></span>
+          </label>
+        </h3>
+      </div>
+
     </div>
   </div>
   {{ super() }}
@@ -55,4 +64,4 @@
       }
     </script>
   {%- endif %}
-{%- endblock %}
\ No newline at end of file
+{%- endblock %}