Finally had some time to make this site more responsive - it has always looked bad on mobile browsers, despite being just text and a few images.
Mostly the process involved correctly using CSS:
diff --git a/_includes/style.css b/_includes/style.css
index bf6e064..cf8f76f 100644
--- a/_includes/style.css
+++ b/_includes/style.css
@@ -1,12 +1,15 @@
-img.center {
+@media only screen and (min-width: 800px) {
+ body {
+ max-width: 800px;
+ }
+}
+
+img {
display: block;
margin-left: auto;
margin-right: auto;
-}
-
-div.f1 {
- width: 100%;
- max-width: 800px;
+ max-width: 100%;
+ height: auto;
}
The div.f1 specification of width: 100% and max-width: 800px meant
that things appeared very small on mobile browsers. As far as I know,
the correct way to scale is to use the @media qualifier.
Adding
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
to every <head> block was required for the style.css changes to work.
I also had to edit each post and remove explicit <img class="center" ...
in favour of the Markdown image syntax.