Scribe: Fix the font size to not depend on page height

The height of the game board is already fixed based on the viewport
width, (to mtain a square asepct ratio). The use of 'vmin' in the font
size led to a weird result where shrinking the page height left the
board size untouched but the text-based game-play components would
shrink, which was undesirable.

The fix for that here is to simply switch from 'vmin' to 'vw' so the
font size depends only on the page width, not the height.

While exploring the issue described above, I found that making the
page _extremely_ wide also caused the fonts to grow excessively and
make the board spill out over the page margin. To avoid that, we cap
the font size with a calculation based on the maximum page width. This
takes advantage of a variable introduced in the previous commit.

diff --git a/scribe/scribe.css b/scribe/scribe.css
index 116bcbc3228a8c807867f1dc7a9b43788880353e..74beee91b471e5a0d7ae8f868b6cd94017e19925 100644 (file)
--- a/scribe/scribe.css
+++ b/scribe/scribe.css
@@ -57,7 +57,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 8vmin;
+    font-size: calc(min(8vw, .08 * var(--page-max-width)));
     line-height: 0;
     font-weight: bold;
     border-bottom: 1px solid #999;