Use link images rather than iframes on small screens for HTML exporte…

…r examples.

docs/index.html

@@ -129,8 +129,8 @@ <h3>Supported viewers</h3>
       </ul>
 
       <h3>Examples</h3>
-      <p>The examples below are all interactive Plotly graphs that were exported directly from glue! Each graph is labeled with the glue viewer that it was exported from.</p>
       <div id="example-export-graphs" class="flex-row 200%">
+        <p>The examples below are all interactive Plotly graphs that were exported directly from glue! Each graph is labeled with the glue viewer that it was exported from.</p>
         <div class="box highlight">
           <h3>2D Scatter</h3>
           <div class="example-container">
@@ -168,13 +168,45 @@ <h3>Dendrogram</h3>
           </div>
         </div>
       </div>
+
       <div id="example-export-links">
-        <p><a href="airplanes.html">2D Scatter</a></p>
-        <p><a href="airplanes_histogram.html">Histogram</a></p>
-        <p><a href="w5_image.html">Image</a></p>
-        <p><a href="airplanes_3d.html">3D Scatter</a></p>
-        <p><a href="profile.html">Profile</a></p>
-        <p><a href="w5_dendro.html">Dendrogram</a></p>
+        <p>To see examples of interactive Plotly graphs that were exported from glue, click on the images below! Each graph is labeled with the glue viewer that it was exported from.</p>
+        <div class="box highlight 6u 12u(narrower)">
+          <p>2D Scatter</p>
+          <a class="img-link" href="airplanes.html">
+            <img class="example-image" src="assets/img/airplanes.png">
+          </a>
+        </div>
+        <div class="box highlight 6u 12u(narrower)">
+          <p>Histogram</p>
+          <a class="img-link" href="airplanes_histogram.html">
+            <img class="example-image" src="assets/img/airplanes_histogram.png">
+          </a>
+        </div>
+        <div class="box highlight 6u 12u(narrower)">
+          <p>Image</p>
+          <a class="img-link" href="w5_image.html">
+            <img class="example-image" src="assets/img/w5_image.png">
+          </a>
+        </div>
+        <div class="box highlight 6u 12u(narrower)">
+          <p>3D Scatter</p>
+          <a class="img-link" href="airplanes_3d.html">
+            <img class="example-image" src="assets/img/airplanes_3d.png">
+          </a>
+        </div>
+        <div class="box highlight 6u 12u(narrower)">
+          <p>Profile</p>
+          <a class="img-link" href="profile.html">
+            <img class="example-image" src="assets/img/profile.png">
+          </a>
+        </div>
+        <div class="box highlight 6u 12u(narrower)">
+          <p>Dendrogram</p>
+          <a class="img-link" href="w5_dendro.html">
+            <img class="example-image" src="assets/img/w5_dendro.png">
+          </a>
+        </div>
       </div>
     </section>