diff --git a/_generated/css/style.css b/_generated/css/style.css
index 27f1040..00d8fab 100644
--- a/_generated/css/style.css
+++ b/_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; }
}
diff --git a/header.html b/header.html
index 18008c1..fc5c99c 100644
--- a/header.html
+++ b/header.html
@@ -1,7 +1,9 @@
-
+
+
+
pyoomph - A finite element framework in Python, based on oomph-lib and GiNaC