homepage: scale the main text better as the display shrinks

diff --git a/style.css b/style.css
index 3113baf5b1c942e137a53204785a4b42f333e45c..b6f28bc760ab0cb534f0bf6c6e86a22956483d9b 100644 (file)
--- a/style.css
+++ b/style.css
@@ -142,10 +142,6 @@ blockquote {
        margin: 1em 0 1em 0;
 }
 
-table#homepage {
-       font-size: x-small;
-}
-
 table#top td,
 div#bottom .indented {
        padding-left: 0.5ch;
@@ -187,3 +183,20 @@ div#bottom span.menuitem {
        line-height: 1.5em;
 }
 }
+
+/* These breaks depend on the current font-size which is 16px by default. */
+@media only screen and (max-width: 600px) {
+table#homepage {
+    font-size: x-small;
+}
+}
+@media only screen and (max-width: 500px) {
+table#homepage {
+    font-size: xx-small;
+}
+}
+@media only screen and (max-width: 400px) {
+table#homepage {
+    font-size: 60%;
+}
+}