Make the pages responsive on phones

_generated/css/style.css

@@ -1,7 +1,10 @@
 body, html { padding:0; margin:0; }
-body{ background-color:#FFF;}
+body{ background-color:#FFF; -webkit-text-size-adjust:100%; }
 h1 {font-size:26px;color:#202020;}
-img {border-style:none;}
+img {border-style:none; max-width:100%;}
+
+/* never let media or preformatted text push the page wider than the viewport */
+pre {overflow-x:auto;}
 
 a {text-decoration:underline; color:#000000;}
 
@@ -22,7 +25,8 @@ a {text-decoration:underline; color:#000000;}
  background-color: #DDD;
  border-radius: 12px;
   border: 2px solid #000;
-  padding: 0px; 
+  padding: 0px;
+  box-sizing: border-box;
 }
 
 
@@ -36,7 +40,8 @@ a {text-decoration:underline; color:#000000;}
 
 
 #content {position:static; padding:25px; font-family:'lucida grande',verdana,helvetica,arial,sans-serif;font-size:16px; line-height:1.6; margin-left: auto; margin-right:auto; background-color:#FFF;}
-#content {max-width: 950px;min-height:800px} 
+#content {max-width: 950px;min-height:800px}
+#content {overflow-wrap: break-word;}
 #content {background-color:#FFF;}
 
 
@@ -60,7 +65,9 @@ a {text-decoration:underline; color:#000000;}
 }
 
 .flex-column {
-  min-width: 470px;
+  /* 470px keeps the two-column layout on wide screens, but the column must never
+     be wider than its container, otherwise narrow viewports scroll horizontally */
+  min-width: min(470px, 100%);
 }
 
 .flex-column ul {
@@ -150,35 +157,96 @@ text-decoration:none;
 
   overflow-x: auto;
   overscroll-behavior-inline: contain;
+}
+
+/* These used to be nested inside the rule above with `&`. Written out flat, so
+   that they also apply in browsers without CSS nesting - there the thumbnails
+   would otherwise fall back to their intrinsic size and show list bullets. */
+
+.horizontal-media-scroller > li {
+  display: inline-block; /* removes the list-item bullet */
+}
+
+.horizontal-media-scroller picture {
+  inline-size: var(--size);
+  block-size: var(--size);
+}
+
+.horizontal-media-scroller img {
+  /* smash into whatever box it's in */
+  inline-size: 100%;
+  block-size: 100%;
+  width: 200px;
+  height: 150px;
+  max-width: none; /* thumbnails keep their fixed size, the strip scrolls instead */
+
+  /* don't squish but do cover the space */
+  object-fit: contain;
+
+  /* soften the edges */
+  border-radius: 1ex;
+  overflow: hidden;
+}
+
+.horizontal-media-scroller figcaption {
+  text-align: center;
+}
 
-
-  & > li {
-    display: inline-block; /* removes the list-item bullet */
-  }
 
-  & picture {
-    inline-size: var(--size);
-    block-size: var(--size);
+/* ---------------------------------------------------------------------------
+   Small screens (tablets in portrait and phones).
+   Same content and same design, only tightened up so that nothing overflows
+   the viewport and the touch targets stay usable.
+   --------------------------------------------------------------------------- */
+
+@media screen and (max-width: 800px) {
+  #content { padding: 18px; }
+
+  /* below this width the entries no longer fit on one line, so lay them out as
+     a wrapping flex row - inline items would wrap into ragged, uneven rows */
+  #menu ul { font-size: 18px; display: flex; flex-wrap: wrap; justify-content: center; }
+  #menu li { margin-left: 10px; margin-right: 10px; display: inline-block; }
+}
+
+@media screen and (max-width: 600px) {
+  #content { padding: 14px; }
+
+  h1 { font-size: 22px; }
+
+  /* wrap the menu onto as many rows as needed, with room to tap each entry */
+  #menu { line-height: 1.4; padding: 6px 4px; }
+  #menu ul { font-size: 17px; row-gap: 4px; }
+  #menu li { margin-left: 8px; margin-right: 8px; padding-bottom: 0; }
+  #menu a { display: inline-block; padding: 6px 4px; }
+
+  /* the feature lists lose the browser's default list indentation */
+  .flex-column ul { padding-left: 0; }
+
+  /* the GPL notice is fixed-width plain text: wrap it instead of scrolling it */
+  #gpl { white-space: pre-wrap; overflow-wrap: break-word; font-size: 13px; }
+
+  /* command lines can be longer than a phone is wide */
+  .code-box codebox { text-indent: 0; overflow-wrap: anywhere; }
+
+  /* publication list: reclaim the wide default indentation of the numbers */
+  #content ol { padding-left: 1.6em; }
+
+  /* one thumbnail at a time, captions wrapping under it */
+  .horizontal-media-scroller { gap: 12px; }
+  .horizontal-media-scroller > li { max-width: 200px; }
+}
+
+@media screen and (max-width: 480px) {
+  /* show the whole logo instead of cropping its sides */
+  #page-top {
+    height: 150px;
+    background-size: contain;
   }
-
-	  & img {
-	  /* smash into whatever box it's in */
-	  inline-size: 100%;
-	  block-size: 100%;
-	  width: 200px;
-	  height: 150px;
-
-	  /* don't squish but do cover the space */
-	  object-fit: contain;
-
-	  /* soften the edges */
-	  border-radius: 1ex;
-	  overflow: hidden;
-
-	}
-
-	& figcaption
-	{
-	   text-align: center; 
-	}
+}
+
+@media screen and (max-width: 380px) {
+  #content { padding: 10px; }
+  #menu ul { font-size: 16px; }
+  #menu li { margin-left: 6px; margin-right: 6px; }
+  #page-top { height: 120px; }
 }

header.html

@@ -1,7 +1,9 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 
 <head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>pyoomph - A finite element framework in Python, based on oomph-lib and GiNaC</title>
 
 <link href="media/favicon.ico" rel="icon" type="image/x-icon">