Fix tooltips in settings and make strings translatable

docs/_templates/layout.html

@@ -150,38 +150,38 @@
       <span class="close" onclick="settingsModal.close();" title="Close">
         <span class="material-icons">close</span>
       </span>
-      <h1>Settings</h1>
+      <h1>{{ _('Settings') }}</h1>
 
-      <h2>Font</h2>
+      <h2>{{ _('Font') }}</h2>
       <div class="setting">
-        <h3>Use a serif font:
+        <h3>{{ _('Use a serif font:') }}
           <label class="toggle"
-            title="Use a serif font? Your system font will be used, falling back to serif.">
+            title="{{ _('Use a serif font? Your system font will be used, falling back to serif.')}}">
             <input type="checkbox" name="useSerifFont" onclick="updateSetting(this);">
             <span class="toggle-slider"></span>
           </label>
         </h3>
       </div>
 
-      <h2>Theme</h2>
+      <h2>{{ _('Theme') }}</h2>
       <div class="setting">
         <h3>
-          <label class="toggle" title="Set your theme">
+          <label class="toggle" title="{{ _('Set your theme based on your system preferences') }}">
             <input type="radio" name="setTheme" onclick="updateSetting(this);" value="automatic" checked>
           </label>
-          Automatic
+          {{ _('Automatic') }}
         </h3>
         <h3>
-          <label class="toggle" title="Use a serif font? Your system font will be used, falling back to serif.">
+          <label class="toggle" title="{{ _('Set your theme to light theme') }}">
             <input type="radio" name="setTheme" onclick="updateSetting(this);" value="light">
           </label>
-          Light
+          {{ _('Light') }}
         </h3>
         <h3>
-          <label class="toggle" title="Use a serif font? Your system font will be used, falling back to serif.">
+          <label class="toggle" title="{{ _('Set your theme to dark theme') }}">
             <input type="radio" name="setTheme" onclick="updateSetting(this);" value="dark">
           </label>
-          Dark
+          {{ _('Dark') }}
         </h3>
       </div>