Deploying to gh-pages from @ ebabdee 🚀

glue-viz · Oct 22, 2024 · 63dbb0d · 63dbb0d
1 parent 5bb6b50
commit 63dbb0d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 16 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -246,7 +246,7 @@
 		}
 
 		.container {
-			width: 100% !important;
+			width: 90% !important;
 		}
 
 	}
@@ -2783,12 +2783,6 @@
 				width: 20%;
 			}
 
-		/* Header */
-
-			#header {
-				display: none;
-			}
-
 		/* Banner */
 
 			#banner {
@@ -3123,7 +3117,8 @@
 		/* Box */
 
 			.box.highlight {
-				padding-left: calc(4em + 30px);
+				/*padding-left: calc(4em + 30px);*/
+                padding-left: 0;
 			}
 
 			.box.post .inner {
@@ -3182,6 +3177,9 @@
   border: solid 2px black;
   transition: all 0s;
   box-sizing: border-box;
+  min-width: 100px;
+  width: 100%;
+  margin: auto;
 }
 
 .qr-code:hover {
@@ -3198,6 +3196,25 @@
   width: 80%;
 }
 
+.example-img {
+    width: 75%;
+    min-width: 200px;
+}
+
+@media screen and (max-width: 840px) {
+    #nav {
+        display: none;
+    }
+
+    .flex-row {
+        display: block;
+    }
+
+    .qr-code {
+        width: 75%;
+    }
+}
+
 
 /*
 .img-link img {

diff --git a/index.html b/index.html
@@ -171,7 +171,7 @@ <h2>Examples</h2>
       <div class="row flex-row">
         <section class="9u 12u(narrower)">
           <div class="box highlight">
-            <img width="75%" class="image" src="assets/img/edenhofer_voxel.png"/>
+            <img width="75%" 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>
@@ -180,7 +180,6 @@ <h2>Examples</h2>
             <a class="image img-link" href="/examples/edenhofer-voxel-350.html">
               <img
                 class="qr-code"
-                width="100%"
                 href="/examples/edenhofer-voxel-350.html"
                 src="/examples/edenhofer_voxel_qr_black.png"
                 onmouseover="this.src='/examples/edenhofer_voxel_qr_red.png'"
@@ -196,7 +195,7 @@ <h2>Examples</h2>
       <div class="row flex-row">
         <section class="9u 12u(narrower)">
           <div class="box highlight">
-            <img width="75%" class="image" src="assets/img/edenhofer_isosurface.png"/>
+            <img width="75%" class="example-img image" src="assets/img/edenhofer_isosurface.png"/>
             <p>An isosurface rendering of the same dustmap</p>
           </div>
         </section>
@@ -205,7 +204,6 @@ <h2>Examples</h2>
             <a class="image img-link" href="/examples/edenhofer-isosurface-256-nocomp.html">
               <img
                 class="qr-code"
-                width="100%"
                 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'"
@@ -220,7 +218,7 @@ <h2>Examples</h2>
       <div class="row flex-row">
         <section class="9u 12u(narrower)">
           <div class="box highlight">
-            <img width="75%" class="image" src="assets/img/pertau_voxel.png"/>
+            <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>
           </div>
         </section>
@@ -229,7 +227,6 @@ <h2>Examples</h2>
             <a class="image img-link" href="/examples/pertau_voxel.html">
               <img
                 class="qr-code"
-                width="100%"
                 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'"
@@ -244,7 +241,7 @@ <h2>Examples</h2>
       <div class="row flex-row">
         <section class="9u 12u(narrower)">
           <div class="box highlight">
-            <img width="75%" class="image" src="assets/img/pertau_isosurface.png"/>
+            <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>
           </div>
         </section>
@@ -253,7 +250,6 @@ <h2>Examples</h2>
             <a class="image img-link" href="/examples/pertau.html">
               <img
                 class="qr-code"
-                width="100%"
                 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'"