Updated docs to include small screen details

doc/styling.rst

@@ -112,6 +112,52 @@ Full example:
       <ul>
     </nav>
 
+Small devices
+-------------
+
+On small devices the navigation layout changes and moves the navigation to the top of the screen. Only the current
+navigation entry is shown by default. To see the other items, the user must click on the menu icon. The basic structure
+is as follows:
+
+.. code-block:: html
+
+    <nav>
+      <div class="menu-toggle">
+        <svg viewBox="0 0 24 24">
+          <path d="..."/>
+        </svg>
+      </div>
+      <div class="menu-container">
+        <ul>
+          <!-- Just the current navigation entry as described above -->
+        </ul>
+      </div>
+    </nav>
+
+After the user clicks on the menu icon, the HTML structure is updated to the following:
+
+.. code-block:: html
+
+    <nav>
+      <div class="menu-toggle">
+        <svg viewBox="0 0 24 24">
+          <path d="..."/>
+        </svg>
+      </div>
+      <div class="menu-container">
+        <ul>
+          <!-- Just the current navigation entry as described above -->
+        </ul>
+        <div class="menu-overlay">
+          <div class="full-menu">
+            <ul>
+              <-- Full list of navigation entries as above -->
+            </ul>
+          </div>
+        </div>
+      </div>
+    </nav>
+
 Annotations
 ===========
 
@@ -134,7 +180,7 @@ Each annotation is structured as follows:
       <div class="action">
         <a>
           <svg viewBox="0 0 24 24">
-            <path d="..."></path>
+            <path d="..."/>
           </svg>
         </a>
       </div>
@@ -157,7 +203,7 @@ Full example:
           <div class="action">
             <a>
               <svg viewBox="0 0 24 24">
-                <path d="..."></path>
+                <path d="..."/>
               </svg>
             </a>
           </div>
@@ -165,3 +211,10 @@ Full example:
         <dd>This is what an example annotation can look like.</dd>
       </dl>
     </aside>
+
+Small devices
+-------------
+
+There is no difference in the generated HTML structure between large and small device sizes. However, for small
+devices, annotations are shown at the bottom of the display, only one annotation is visible at any time, and the
+annotation HTML is only generated when an annotation has been selected by the user.