layout improvements

Author: dvicini

docs/index.html

@@ -191,7 +191,7 @@ <h1>Method</h1>
             </p>
             <div class="row">
 
-                <figure style="width: 49%;">
+                <figure style="flex: 0.48;">
                     <img src="resources/images/st_intro.png" alt="Stochastic transparency introduction"
                         style="width: 100%; display: block;" />
                     <figcaption class="subcaption-container">
@@ -204,7 +204,7 @@ <h1>Method</h1>
                     </figcaption>
                 </figure>
 
-                <figure style="width: 49%;">
+                <figure style="flex: 0.48;">
                     <img src="resources/images/pseudocode.png" alt="Stochastic transparency pseudocode"
                         style="width: 100%; display: block;" />
                     <figcaption> <b>Pseudocode for stochastic transparency</b> - We denote \(\alpha_i\) the opacity,
@@ -243,7 +243,7 @@ <h1>Method</h1>
                 showcase both the plane-approximation and full intermixing in the following figures:
             </p>
             <div class="row">
-                <figure style="width: 49%;">
+                <figure style="flex: 0.48;">
                     <img src="resources/images/popfree.png" alt="popfree rendering by plane approximation"
                         style="width: 100%; display: block;" />
                     <figcaption class="subcaption-container">
@@ -261,7 +261,7 @@ <h1>Method</h1>
                     </figcaption>
                 </figure>
 
-                <figure style="width: 49%;">
+                <figure style="flex: 0.48;">
                     <img src="resources/images/intermixing.png"
                         alt="Comparison of sorting, pop-free rendering and 3D intermixing"
                         style="width: 100%; display: block;" />

docs/resources/css/index.css

@@ -355,4 +355,15 @@ img.copy-icon {
 img.copy-icon:hover {
   transform: scale(1.05);
   transition: all ease 150ms;
-}
+}
+
+.row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.row figure {
+  flex: 1;
+}
+