Create settings icon for mobile

docs/_static/style.css

@@ -225,8 +225,13 @@ aside h3 {
   font-weight: normal;
 }
 
-.fa-bars, .fa-times {
+#settings-toggle {
+  float: right;
+}
+
+.fa-bars, .fa-times, .fa-cog {
   font-size: 2em;
+  cursor: pointer;
 }
 
 .sidebar-toggle {
@@ -321,9 +326,7 @@ div.modal-content {
 div.modal-content > span.close {
   color: #888;
   float: right;
-  font-size: 24px;
   font-weight: bold;
-  cursor: pointer;
   -moz-user-select: none;
   -webkit-user-select: none;
 }
@@ -813,8 +816,9 @@ div.code-block-caption {
     color: var(--nav-hover-text);
   }
 
-  #hamburger-toggle {
+  #hamburger-toggle, #settings-toggle {
     display: none;
+
   }
 }
 

docs/_templates/layout.html

@@ -56,19 +56,22 @@
     {#- The relative links component #}
     <header class="grid-item">
       <nav>
-        {%- for rellink in rellinks | reverse %}
+        <!--{%- for rellink in rellinks | reverse %}
         <a href="{{ pathto(rellink[0])|e }}" title="{{ rellink[1]|striptags|e }}"
            {{ accesskey(rellink[2]) }}>{{ rellink[3] }}</a> |
-        {%- endfor %}
-        <a title="settings" accesskey="S" onclick="openModal(settingsModal);">settings</a>
+        {%- endfor %}-->
+        <a title="settings" accesskey="S" onclick="openModal(settingsModal);"><i class='fas fa-cog'></i></a>
         {#- No breadcrumbs. But if they're gonna appear they'll be here #}
       </nav>
     </header>
     {#- The sidebar component #}
     <aside class="grid-item">
-      <div id="hamburger-toggle">
+      <span id="hamburger-toggle">
         <i class="fa fa-bars"></i>
-      </div>
+      </span>
+      <span id="settings-toggle" onclick="openModal(settingsModal);">
+        <i class='fas fa-cog'></i>
+      </span>
       <div id="sidebar">
         {#- This is manually unrolled from the original layout #}
         <div id="searchbox" role="search">
@@ -125,7 +128,7 @@
 
   <div id="settings" class="modal" onclick="if (event.target == this){ closeModal(settingsModal); }" hidden>
     <div class="modal-content">
-      <span class="close" onclick="closeModal(settingsModal);" title="Close">&times;</span>
+      <span class="close" onclick="closeModal(settingsModal);" title="Close"><i class='fas fa-times'></i></span>
       <h1>Settings</h1>
 
       <div class='setting'>