From: Ralf Jung <post@ralfj.de>
Date: Fri, 29 Sep 2023 16:01:18 +0000 (+0200)
Subject: tweak image behavior on small screens
X-Git-Url: https://git.ralfj.de/web.git/commitdiff_plain/7ff1b70ad9e1b46795a9502a520286c12af132e4?hp=6e3a8d2dc573df71f82a58b1dfc3a1bb78c2d8af

tweak image behavior on small screens
---

diff --git a/personal/_sass/_layout.scss b/personal/_sass/_layout.scss
index 8859ce1..90cc579 100644
--- a/personal/_sass/_layout.scss
+++ b/personal/_sass/_layout.scss
@@ -192,3 +192,17 @@ body { /* This centers us in the page, and handles the "too wide" case */
         margin-top: 0.8em;
     }
 }
+
+/* Images (~350px wide) floating to the right but only if there is enough space */
+.float-right-350 {
+  float: right;
+  margin-left: 0.8em;
+  margin-bottom: 0.3em;
+}
+@media screen and (max-width:550px) {
+    .float-right-350 {
+        text-align: center;
+        float: none;
+        margin: 0;
+    }
+}
diff --git a/research/index.html b/research/index.html
index b20242f..6a16288 100644
--- a/research/index.html
+++ b/research/index.html
@@ -2,7 +2,7 @@
 title: Ralf Jung
 ---
 
-<div style="float:right; margin-left:0.8em; margin-bottom: 0.3em"><img src="me.jpg" srcset="me.jpg, me-2x.jpg 2x"></div>
+<div class="float-right-350"><img style="max-width: 350px; width: 100%;" src="me.jpg" srcset="me.jpg, me-2x.jpg 2x"></div>
 
 <p>I am assistant professor at <a href='https://ethz.ch' target="_blank">ETH Zürich</a> as part of the <a href='https://pls.inf.ethz.ch/' target="_blank">Institute for Programming Languages and Systems</a>.</br>
 Previously, I completed my <a href="thesis.html">PhD</a> at <a href="https://www.mpi-sws.org/">MPI-SWS</a> and <a href="https://www.uni-saarland.de/" target="_blank">Saarland University</a> in Saarbrücken, Germany; my advisor was <a href="https://people.mpi-sws.org/~dreyer/">Derek Dreyer</a>.