Merge pull request #94 from Carifio24/update-examples

Update examples on docs page
glue-viz · Dec 6, 2024 · 85a9d60 · 85a9d60
2 parents 1e8e3cd + 82f16d3
commit 85a9d60
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 67 deletions.
diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css
@@ -2378,22 +2378,22 @@
 			}
 
 	#nav {
-        position: sticky;
-        top: 0;
-		cursor: default;
-        margin: 0;
-		padding: 0;
-        width: 100%;
-        display: block;
-        background-color: #EB1C24;
-        margin-bottom: 1.5em;
-        z-index: 10000;
-    }
+    position: sticky;
+    top: 0;
+    cursor: default;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    display: block;
+    background-color: #EB1C24;
+    margin-bottom: 1.5em;
+    z-index: 10000;
+  }
 
 		#nav > ul {
 			margin: 0;
-            display: flex;
-            justify-content: center;
+      display: flex;
+      justify-content: space-around;
 		}
 
 			#nav > ul > li {
@@ -3185,8 +3185,9 @@
   transition: all 0s;
   box-sizing: border-box;
   min-width: 100px;
-  width: 100%;
-  margin: auto;
+  width: 150px;
+  height: 150px;
+  display: inline;
 }
 
 .qr-code:hover {
@@ -3203,9 +3204,54 @@
   width: 80%;
 }
 
+/* Grid borders adapted from https://geary.co/internal-borders-css-grid/ */
+#examples-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  overflow: hidden;
+  gap: var(--gap);
+
+  --gap: 2em;
+  --line-offset: calc(var(--gap) / 2);
+  --line-thickness: 1px;
+  --line-color: rgba(71, 71, 71, 0.25);
+  --edge-cutoff: 20px;
+}
+
 .example-img {
-    width: 75%;
-    min-width: 200px;
+  min-height: 150px;
+  max-height: 200px;
+  min-width: 200px;
+  max-width: calc(100% - 170px);
+  object-fit: contain;
+}
+
+.example-section {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  position: relative;
+}
+
+.example-section::before,
+.example-section::after {
+  content: '';
+  position: absolute;
+  background-color: var(--line-color);
+  z-index: 1;
+}
+
+.example-section::after {
+  inline-size: calc(100% - calc(var(--edge-cutoff) * 2));
+  block-size: var(--line-thickness);
+  inset-inline-start: var(--edge-cutoff);
+  inset-block-start: calc(var(--line-offset) * -1);
+}
+
+.example-section::before {
+  inline-size: var(--line-thickness);
+  block-size: calc(100% - calc(var(--edge-cutoff) * 2));
+  inset-block-start: var(--edge-cutoff);
+  inset-inline-start: calc(var(--line-offset) * -1);
 }
 
 @media screen and (max-width: 840px) {
@@ -3217,8 +3263,17 @@
         display: block;
     }
 
+    .qr-highlight {
+      margin: auto;
+    }
+
     .qr-code {
         width: 75%;
+        height: 75%;
+    }
+
+    #examples-container {
+      grid-template-columns: 1fr;
     }
 }
 

diff --git a/docs/assets/img/gum_nebula.png b/docs/assets/img/gum_nebula.png
diff --git a/docs/assets/img/m83.png b/docs/assets/img/m83.png
diff --git a/docs/examples/gum_nebula_qr_black.png b/docs/examples/gum_nebula_qr_black.png
diff --git a/docs/examples/gum_nebula_qr_red.png b/docs/examples/gum_nebula_qr_red.png
diff --git a/docs/examples/m83_qr_black.png b/docs/examples/m83_qr_black.png
diff --git a/docs/examples/m83_qr_red.png b/docs/examples/m83_qr_red.png
diff --git a/docs/index.html b/docs/index.html
@@ -120,7 +120,7 @@ <h3>Supported viewers</h3>
       <p>glue-ar supports exporting from the following viewers:</p>
       <ul>
         <li>Volume and scatter viewers from the <a href="https://docs.glueviz.org/en/stable/gui_guide/3d_viewers.html">glue-vispy-viewers</a> package (available in both Qt and Jupyter)</li>
-        <li>Volume and scatter viewered powered by ipyvolume from the <a href="https://glue-jupyter.readthedocs.io/en/latest/">glue-jupyter</a> package (Jupyter only)</li>
+        <li>Volume and scatter viewers powered by ipyvolume from the <a href="https://glue-jupyter.readthedocs.io/en/latest/">glue-jupyter</a> package (Jupyter only)</li>
       </ul>
     </section>
 
@@ -168,18 +168,17 @@ <h2>Examples</h2>
         `glue_ar.common.qr.create_qr`
       -->
 
-      <div class="row flex-row">
-        <section class="9u 12u(narrower)">
+      <div id="examples-container">
+        <section class="example-section">
           <div class="box highlight">
-            <img width="75%" class="example-img image" src="assets/img/edenhofer_voxel.png"/>
+            <img class="example-img image" src="assets/img/edenhofer_voxel.png"/>
             <p>A voxelized rendering of a parsec-scale galactic 3D dustmap from <a href="https://arxiv.org/abs/2308.01295">Edenhofer et. al.</a></p>
           </div>
-        </section>
-        <section class="3u 12u(narrower)">
-          <div class="box highlight">
+          <div class="box highlight qr-highlight">
             <a class="image img-link" href="examples/edenhofer-voxel-350.html">
               <img
                 class="qr-code"
+                width="25%"
                 href="examples/edenhofer-voxel-350.html"
                 src="examples/edenhofer_voxel_qr_black.png"
                 onmouseover="this.src='examples/edenhofer_voxel_qr_red.png'"
@@ -188,75 +187,58 @@ <h2>Examples</h2>
             </a>
           </div>
         </section>
-      </div>
-
-      <hr>
-
-      <div class="row flex-row">
-        <section class="9u 12u(narrower)">
+
+        <section class="example-section">
           <div class="box highlight">
-            <img width="75%" class="example-img image" src="assets/img/edenhofer_isosurface.png"/>
-            <p>An isosurface rendering of the same dustmap</p>
+            <img class="example-img image" src="assets/img/pertau_isosurface.png"/>
+            <p>A rendering of the <a href="https://iopscience.iop.org/article/10.3847/2041-8213/ac1f95">Per-Tau Shell</a>, using isosurfaces for dust clouds</a></p>
           </div>
-        </section>
-        <section class="3u 12u(narrower)">
-          <div class="box highlight">
-            <a class="image img-link" href="examples/edenhofer-isosurface-256-nocomp.html">
+          <div class="box highlight qr-highlight">
+            <a class="image img-link" href="examples/pertau.html">
               <img
                 class="qr-code"
-                src="examples/edenhofer_isosurface_qr_black.png"
-                onmouseover="this.src='examples/edenhofer_isosurface_qr_red.png'"
-                onmouseout="this.src='examples/edenhofer_isosurface_qr_black.png'"
+                src="examples/pertau_isosurface_qr_black.png"
+                onmouseover="this.src='examples/pertau_isosurface_qr_red.png'"
+                onmouseout="this.src='examples/pertau_isosurface_qr_black.png'"
               />
             </a>
           </div>
         </section>
-      </div>
 
-      <hr>
-
-      <div class="row flex-row">
-        <section class="9u 12u(narrower)">
+        <section class="example-section">
           <div class="box highlight">
-            <img width="75%" class="example-img image" src="assets/img/pertau_voxel.png"/>
-            <p>A rendering of the <a href="https://iopscience.iop.org/article/10.3847/2041-8213/ac1f95">Per-Tau Shell</a>, using a voxelized method for dust clouds</a></p>
+            <img class="example-img image" src="assets/img/gum_nebula.png"/>
+            <p>An isosurface rendering of the Gum Nebula, with scatter points representing the IRAS Vela Shell. The shell is colored by the density of hydrogen. Thanks to Annie Gao for providing this dataset.</p>
           </div>
-        </section>
-        <section class="3u 12u(narrower)">
-          <div class="box highlight">
-            <a class="image img-link" href="examples/pertau_voxel.html">
+          <div class="box highlight qr-highlight">
+            <a class="image img-link" href="examples/gum-nebula-both-isosurface.html">
               <img
                 class="qr-code"
-                src="examples/pertau_voxel_qr_black.png"
-                onmouseover="this.src='examples/pertau_voxel_qr_red.png'"
-                onmouseout="this.src='examples/pertau_voxel_qr_black.png'"
+                src="examples/gum_nebula_qr_black.png"
+                onmouseover="this.src='examples/gum_nebula_qr_red.png'"
+                onmouseout="this.src='examples/gum_nebula_qr_black.png'"
               />
             </a>
           </div>
         </section>
-      </div>
-
-      <hr>
 
-      <div class="row flex-row">
-        <section class="9u 12u(narrower)">
+        <section class="example-section">
           <div class="box highlight">
-            <img width="75%" class="example-img image" src="assets/img/pertau_isosurface.png"/>
-            <p>Another rendering of the Per-Tau shell, using isosurfaces for the dust clouds</p>
+            <img class="example-img image" src="assets/img/m83.png"/>
+            <p>A voxelized rendering of a position-position-velocity data cube for the M83 galaxy. Thanks to Eric Koch for providing this dataset.</p>
           </div>
-        </section>
-        <section class="3u 12u(narrower)">
-          <div class="box highlight">
-            <a class="image img-link" href="examples/pertau.html">
+          <div class="box highlight qr-highlight">
+            <a class="image img-link" href="examples/m83_voxel_stretch.html">
               <img
                 class="qr-code"
-                src="examples/pertau_isosurface_qr_black.png"
-                onmouseover="this.src='examples/pertau_isosurface_qr_red.png'"
-                onmouseout="this.src='examples/pertau_isosurface_qr_black.png'"
+                src="examples/m83_qr_black.png"
+                onmouseover="this.src='examples/m83_qr_red.png'"
+                onmouseout="this.src='examples/m83_qr_black.png'"
               />
             </a>
           </div>
         </section>
+
       </div>
 
     </section>