tweak image behavior on small screens

diff --git a/personal/_sass/_layout.scss b/personal/_sass/_layout.scss
index 8859ce17d1e4d4f9c8898562320e3314fe0b1ce5..90cc5795b9e735720786febac0667d86b0b43410 100644 (file)
--- 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 b20242f9b4236a03a3f1abe028caf49b4dc64d44..6a1628820adef6a1ecdc7ba6b3b772f02391ae0b 100644 (file)
--- 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>.