From 04e1c1b0b1eddd0446577a353fceed566083d8ca Mon Sep 17 00:00:00 2001
From: Tony Garnock-Jones <tonyg@leastfixedpoint.com>
Date: Tue, 17 Oct 2023 02:01:23 +0200
Subject: [PATCH] Fix cheatsheet style on small screens

---
 _includes/cheatsheet-text.md | 12 ++++++------
 preserves.css                | 17 +++++++++++------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/_includes/cheatsheet-text.md b/_includes/cheatsheet-text.md
index b3136cf..f206a39 100644
--- a/_includes/cheatsheet-text.md
+++ b/_includes/cheatsheet-text.md
@@ -1,17 +1,17 @@
-{:.postcard-grammar}
+{:.postcard-grammar.textsyntax}
 | *Document* | := | *Value* **ws** |
 | *Value* | := | **ws** (*Record* &#124; *Collection* &#124; *Atom* &#124; *Embedded* &#124; *Annotated*) |
 | *Collection* | := | *Sequence* &#124; *Dictionary* &#124; *Set* |
 | *Atom* | := | *Boolean* &#124; *ByteString* &#124; *String* &#124; *QuotedSymbol* &#124; *Symbol* &#124; *Number* |
 | **ws** | := | (**space** &#124; **tab** &#124; **cr** &#124; **lf** &#124;`,`)<sup>⋆</sup> |
 
-{:.postcard-grammar}
+{:.postcard-grammar.textsyntax}
 | *Record* | := | `<`*Value*<sup>+</sup> **ws**`>` |
 | *Sequence* | := | `[`*Value*<sup>⋆</sup> **ws**`]` |
 | *Dictionary* | := | `{` (*Value* **ws**`:`*Value*)<sup>⋆</sup> **ws**`}` |
 | *Set* | := | `#{`*Value*<sup>⋆</sup> **ws**`}` |
 
-{:.postcard-grammar}
+{:.postcard-grammar.textsyntax}
 | *Boolean* | := | `#t`&#124;`#f` |
 | *ByteString* | := | `#"`*binchar*<sup>⋆</sup> `"`&#124;`#x"` (**ws** *hex* *hex*)<sup>⋆</sup> **ws**`"`&#124;`#[` (**ws** &#124; *base64char*)<sup>⋆</sup> **ws**`]` |
 | *String* | := | `"` (« any unicode scalar value except `\` or `"` » &#124; *escaped* &#124;`\"`)<sup>⋆</sup> `"` |
@@ -22,12 +22,12 @@
 | *Double* | := | *flt* &#124;`#xd"` (**ws** *hex* *hex*)<sup>8</sup> **ws**`"` |
 | *SignedInteger* | := | *int* |
 
-{:.postcard-grammar}
+{:.postcard-grammar.textsyntax}
 | *Embedded* | := | `#!`*Value* |
 | *Annotated* | := | *Annotation* *Value* |
 | *Annotation* | := | `@`*Value* &#124;`;`« any unicode scalar value except **cr** or **lf** »<sup>⋆</sup> (**cr** &#124; **lf**) |
 
-{:.postcard-grammar}
+{:.postcard-grammar.textsyntax}
 | *escaped* | := | `\\`&#124;`\/`&#124;`\b`&#124;`\f`&#124;`\n`&#124;`\r`&#124;`\t`&#124;`\u`*hex* *hex* *hex* *hex* |
 | *binchar* | := | *binunescaped* &#124; (*escaped* &#124;`\"`&#124;`\x`*hex* *hex*) |
 | *binunescaped* | := | « any unicode scalar value ≥32 and ≤126, except `\` or `"` » |
@@ -35,7 +35,7 @@
 | *sympunct* | := | `~`&#124;`!`&#124;`$`&#124;`%`&#124;`^`&#124;`&`&#124;`*`&#124;`?`&#124;`_`&#124;`=`&#124;`+`&#124;`-`&#124;`/`&#124;`.` |
 | *symuchar* | := | « any scalar value ≥128 whose Unicode category is Lu, Ll, Lt, Lm, Lo, Mn, Mc, Me, Nd, Nl, No, Pc, Pd, Po, Sc, Sm, Sk, So, or Co » |
 
-{:.postcard-grammar}
+{:.postcard-grammar.textsyntax}
 | *flt* | := | *int* ( *frac* *exp* &#124; *frac* &#124; *exp* ) |
 | *int* | := | (`-`&#124;`+`) (`0`..`9`)<sup>+</sup> |
 | *frac* | := | `.` (`0`..`9`)<sup>+</sup> |
diff --git a/preserves.css b/preserves.css
index 8bd89bf..aec65ba 100644
--- a/preserves.css
+++ b/preserves.css
@@ -184,19 +184,24 @@ td {
     font-family: var(--sans-font);
     font-size: 1rem;
     color: #888;
-    line-height: 1.414rem;
+    line-height: 141.4%;
 }
 table.postcard-grammar { background: #e9f0f9; }
+@media screen and (max-width: 768px) { table.postcard-grammar { font-size: 0.75rem; } }
 .postcard-grammar.binarysyntax { color: black; }
-.postcard-grammar tr > *:nth-child(1) { width: 7em; text-align: right; }
-.postcard-grammar.binarysyntax tr > *:nth-child(1) { width: 13em; text-align: right; }
+.postcard-grammar tr > *:nth-child(1) { text-align: right; }
+.postcard-grammar.textsyntax tr > *:nth-child(1) { width: 7em; }
+.postcard-grammar.binarysyntax tr > *:nth-child(1) { width: 13em; }
+@media screen and (max-width: 580px) {
+    .postcard-grammar.binarysyntax tr > *:nth-child(1) { width: auto; }
+}
 .postcard-grammar tr > *:nth-child(2) { width: 1em; text-align: center; }
 .postcard-grammar sup {
     color: #040;
-    font-size: 0.9rem;
+    font-size: 90%;
 }
 .postcard-grammar em { color: black; }
-.postcard-grammar .roman { font-family: var(--serif-font); font-size: 1.05rem; }
+.postcard-grammar .roman { font-family: var(--serif-font); font-size: 105%; }
 .postcard-grammar strong { color: #400; font-weight: normal; }
 .postcard-grammar td {
     vertical-align: top;
@@ -204,7 +209,7 @@ table.postcard-grammar { background: #e9f0f9; }
 .postcard-grammar pre, .postcard-grammar code {
     color: black;
     display: inline-block;
-    font-size: 1rem;
+    font-size: 100%;
     padding: 0 0.33rem;
 }
 .postcard-grammar .outputish { background: #eee; color: black; }