webapps: better style

[factor.git] / basis / help / html / html.factor

diff --git a/basis/help/html/html.factor b/basis/help/html/html.factor
index 80b09f882538dc3f308f72780277273c5a19e874..c0d0677ddeb51946d2a5fe771b99f9be2a42c56f 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 ;
@@ -73,34 +73,44 @@ M: pathname url-of
     swap "\n" glue [XML <style><-></style> XML] ;
 
 : help-meta ( -- xml )
-    [XML <meta
+    [XML
+        <meta
             name="viewport"
             content="width=device-width, initial-scale=1"
             charset="utf-8"
-        /> XML] ;
+        />
+        <meta
+            name="theme-color"
+            content="#f5f5f5"
+            media="(prefers-color-scheme: light)"
+        />
+        <meta
+            name="theme-color"
+            content="#373e48"
+            media="(prefers-color-scheme: dark)"
+        />
+    XML] ;
 
-: help-navbar ( -- xml )
+: help-nav ( -- xml )
     "conventions" >link topic>filename
     [XML
-        <div class="navbar">
-            <div class="navrow">
-                <a href="https://factorcode.org">
-                <img src="favicon.ico" width="24" height="24" />
-                </a>
-                <a href="/">Handbook</a>
-                <a href=<->>Glossary</a>
-                <form method="get" action="/search" style="float: right;">
-                    <input placeholder="Search" name="search" type="text"/>
-                    <input type="submit" value="Go"/>
-                </form>
-            </div>
-        </div>
+        <nav>
+            <a href="https://factorcode.org">
+            <img src="favicon.ico" width="24" height="24" />
+            </a>
+            <a href="/">Handbook</a>
+            <a href=<->>Glossary</a>
+            <form method="get" action="/search" style="float: right;">
+                <input placeholder="Search" name="search" type="text"/>
+                <input type="submit" value="Go"/>
+            </form>
+        </nav>
      XML] ;
 
 : help-footer ( -- xml )
     version-info "\n" split1 drop
     [XML
-        <div class="footer">
+        <footer>
         <p>
         This documentation was generated offline from a
         <code>load-all</code> image.  If you want, you can also
@@ -110,7 +120,7 @@ M: pathname url-of
         for more information.
         </p>
         <p><-></p>
-        </div>
+        </footer>
     XML] ;
 
 : bijective-base26 ( n -- name )
@@ -138,16 +148,24 @@ M: pathname url-of
 
     R/ font-family: monospace;/ [
         " white-space: pre-wrap; line-height: 125%;" append
-    ] re-replace-with ;
+    ] re-replace-with
+
+    dup { "font-family: monospace;" "background-color:" } [ subseq-of? ] with all? [
+        " margin: 10px 0px;" append
+    ] when
+
+    dup { "border:" "background-color:" } [ subseq-of? ] with all? [
+        " border-radius: 5px;" append
+    ] when ;
 
 : fix-help-header ( classes -- classes )
     dup [
-        [ ".a" head? ] [ "#f4efd9;" swap subseq? ] bi and
+        [ ".a" head? ] [ "#f4efd9;" subseq-of? ] bi and
     ] find [
         "padding: 10px;" "padding: 0px;" replace
         "background-color: #f4efd9;" "background-color: white;" replace
         "}" ?tail drop
-        " border-bottom: 1px dashed #ccc; width: 100%; padding-top: 15px; padding-bottom: 10px; }"
+        " border-bottom: 1px dashed #d5d5d5 width: 100%; padding-top: 15px; padding-bottom: 10px; }"
         append swap pick set-nth {
             ".a a { color: black; font-size: 24pt; line-height: 100%; }"
             ".a * a { color: #2a5db0; font-size: 12pt; }"
@@ -156,9 +174,9 @@ M: pathname url-of
         } prepend
     ] [ drop ] if* ;
 
-: fix-dark-mode ( classes -- classes )
-    { "/* Dark mode */" "@media (prefers-color-scheme:dark) {" }
-    over [
+: dark-mode-css ( classes -- classes' )
+    { "" "/* Dark mode */" "@media (prefers-color-scheme:dark) {" }
+    swap [
         R/ {[^}]+}/ [
             "{" ?head drop "}" ?tail drop ";" split
             [ [ blank? ] trim ] map harvest [ ";" append ] map
@@ -168,10 +186,10 @@ M: pathname url-of
                     >string H{
                         { "#000000;" "#bdc1c6;" }
                         { "#2a5db0;" "#8ab4f8;" }
-                        { "#333333;" "#cccccc;" }
+                        { "#333333;" "#d5d5d5;" }
                         { "#373e48;" "#ffffff;" }
                         { "#8b4500;" "orange;" }
-                        { "#e3e2db;" "#666666;" }
+                        { "#e3e2db;" "#444444;" }
                         { "white;" "#202124;" }
                         { "black;" "white;" }
                     } ?at [
@@ -180,13 +198,13 @@ M: pathname url-of
                 ] re-replace-with
             ] map " " join "{ " " }" surround
         ] re-replace-with "    " prepend
-        "{  }" over subseq? [ drop f ] when
-    ] map harvest 3append "}" suffix ;
+        dup "{  }" subseq-of? [ drop f ] when
+    ] map 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 dark-mode-css append join-lines ;
 
 :: css-styles-to-classes ( body -- stylesheet body )
     H{ } clone :> classes
@@ -207,7 +225,7 @@ M: pathname url-of
     ] each classes sort-values css-classes body ;
 
 : retina-image ( path -- path' )
-    "@2x" over subseq? [ "." split1-last "@2x." glue ] unless ;
+    dup "@2x" subseq-of? [ "." split1-last "@2x." glue ] unless ;
 
 : ?copy-file ( from to -- )
     dup file-exists? [ 2drop ] [ copy-file ] if ;
@@ -232,7 +250,7 @@ M: pathname url-of
         [ print-topic ] with-html-writer
         css-styles-to-classes cache-images
         "resource:extra/websites/factorcode/favicon.ico" dup file-name ?copy-file
-        [ help-stylesheet help-meta prepend help-navbar ] dip help-footer
+        [ help-stylesheet help-meta prepend help-nav ] dip help-footer
         [XML <-><div class="page"><-><-></div> XML]
     ] bi simple-page ;