help.html: larger fonts

diff --git a/basis/help/html/html.factor b/basis/help/html/html.factor
index 80b09f882538dc3f308f72780277273c5a19e874..9e550c5b4f7e605bd57a6cf8a3ad0fa2b2117a71 100644 (file)
--- a/basis/help/html/html.factor
+++ b/basis/help/html/html.factor
@@ -5,8 +5,8 @@ combinators.short-circuit debugger formatting help help.home
 help.topics help.vocabs html html.streams io.directories
 io.encodings.ascii io.encodings.binary io.encodings.utf8
 io.files io.files.temp io.pathnames kernel make math math.parser
-namespaces regexp sequences sequences.deep serialize sorting
-splitting strings system tools.completion vocabs
+namespaces regexp sequences sequences.deep serialize sets
+sorting splitting strings system tools.completion vocabs
 vocabs.hierarchy words xml.data xml.syntax xml.traversal
 xml.writer ;
 FROM: io.encodings.ascii => ascii ;
@@ -122,7 +122,7 @@ M: pathname url-of
 : fix-css-style ( style -- style' )
     R/ font-size: \d+pt;/ [
         "font-size: " ?head drop "pt;" ?tail drop
-        string>number 2 -
+        string>number
         "font-size: %dpt;" sprintf
     ] re-replace-with
 
@@ -136,8 +136,12 @@ M: pathname url-of
        drop ""
     ] re-replace-with
 
+    R/ background-color: #f3f2ea;/ [
+        drop "background-color: #f5f5f5;"
+    ] re-replace-with
+
     R/ font-family: monospace;/ [
-        " white-space: pre-wrap; line-height: 125%;" append
+        " border: 1px solid #ccc; border-radius: 5px; white-space: pre-wrap; line-height: 125%; margin: 15px; width: calc(100% - 30px);" append
     ] re-replace-with ;
 
 : fix-help-header ( classes -- classes )
@@ -156,9 +160,9 @@ M: pathname url-of
         } prepend
     ] [ drop ] if* ;
 
-: fix-dark-mode ( classes -- classes )
+: dark-mode-css ( classes -- classes' )
     { "/* Dark mode */" "@media (prefers-color-scheme:dark) {" }
-    over [
+    swap [
         R/ {[^}]+}/ [
             "{" ?head drop "}" ?tail drop ";" split
             [ [ blank? ] trim ] map harvest [ ";" append ] map
@@ -174,6 +178,7 @@ M: pathname url-of
                         { "#e3e2db;" "#666666;" }
                         { "white;" "#202124;" }
                         { "black;" "white;" }
+                        { "#ccc;" "#666;" }
                     } ?at [
                         but-last parse-color inverse-color color>hex ";" append
                     ] unless
@@ -181,12 +186,27 @@ M: pathname url-of
             ] map " " join "{ " " }" surround
         ] re-replace-with "    " prepend
         "{  }" over subseq? [ drop f ] when
-    ] map harvest 3append "}" suffix ;
+    ] map harvest append "}" suffix ;
+
+: mobile-css ( classes -- classes' )
+    { "/* Mobile */" "@media screen and (max-width: 600px) {" }
+    swap [
+        R/ {[^}]+}/ [
+            "{" ?head drop "}" ?tail drop ";" split
+            [ [ blank? ] trim ] map harvest [ ";" append ] map
+            { "margin: 15px;" "width: calc(100% - 30px);" } intersect
+            { "margin: 15px;" } { "margin: 15px 0px;" } replace
+            { "width: calc(100% - 30px);" } { "width: 100%;" } replace
+            " " join "{ " " }" surround
+        ] re-replace-with "    " prepend
+        "{  }" over subseq? [ drop f ] when
+    ] map B harvest append "}" suffix ;
 
 : css-classes ( classes -- stylesheet )
     [
         [ fix-css-style " { " "}" surround ] [ "." prepend ] bi* prepend
-    ] { } assoc>map fix-help-header fix-dark-mode join-lines ;
+    ] { } assoc>map fix-help-header dup
+    B [ dark-mode-css ] [ mobile-css ] bi 3append join-lines ;
 
 :: css-styles-to-classes ( body -- stylesheet body )
     H{ } clone :> classes

diff --git a/basis/help/html/stylesheet.css b/basis/help/html/stylesheet.css
index 832d3a3291f19e82bf9ec8fbf37da61d87534a27..8b899060e0d29ad52d807e8c810d21642088a43c 100644 (file)
--- a/basis/help/html/stylesheet.css
+++ b/basis/help/html/stylesheet.css
@@ -1,4 +1,4 @@
-html {
+99html {
     box-sizing: border-box;
 }
 
@@ -13,6 +13,7 @@ a:hover, .link:hover { text-decoration: underline; }
 body {
     margin: 0;
     font-family: sans-serif;
+    font-size: 14pt;
     line-height: 150%;
 }
 
@@ -46,9 +47,9 @@ tr:hover {
 }
 
 .navrow {
-    max-width: 800px;
+    max-width: 900px;
     position: relative;
-    left: calc(max(-400px,-50%) + 50%);
+    left: calc(max(-450px,-50%) + 50%);
     margin: 0;
     padding: 10px 15px 10px 15px;
 }
@@ -58,9 +59,9 @@ tr:hover {
 }
 
 .page {
-    max-width: 800px;
+    max-width: 900px;
     position: relative;
-    left: calc(max(-400px,-50%) + 50%);
+    left: calc(max(-450px,-50%) + 50%);
     padding: 15px;
 }
 
@@ -73,7 +74,7 @@ tr:hover {
     margin-top: 15px;
     border-top: 1px dashed #ccc;
     color: #666;
-    font-size: 10pt;
+    font-size: 12pt;
 }
 
 @media screen and (max-width: 480px) {