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 15cf6612680086b2d990335b0a282cd832664b74..c0d0677ddeb51946d2a5fe771b99f9be2a42c56f 100644 (file)
--- a/basis/help/html/html.factor
+++ b/basis/help/html/html.factor
@@ -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 )
@@ -122,7 +132,7 @@ M: pathname url-of
 : fix-css-style ( style -- style' )
     R/ font-size: \d+pt;/ [
         "font-size: " ?head drop "pt;" ?tail drop
-        string>number
+        string>number 2 -
         "font-size: %dpt;" sprintf
     ] re-replace-with
 
@@ -136,26 +146,26 @@ M: pathname url-of
        drop ""
     ] re-replace-with
 
-    R/ background-color: #f3f2ea;/ [
-        drop "background-color: #f7f7f7;"
-    ] re-replace-with
-
     R/ font-family: monospace;/ [
         " white-space: pre-wrap; line-height: 125%;" append
     ] re-replace-with
 
-    { "font-family: monospace;" "background-color:" } [ over subseq? ] all? [
-        " border: 1px solid #dbdbdb; border-radius: 5px; margin: 15px; width: calc(100% - 30px);" append
+    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; }"
@@ -176,11 +186,10 @@ M: pathname url-of
                     >string H{
                         { "#000000;" "#bdc1c6;" }
                         { "#2a5db0;" "#8ab4f8;" }
-                        { "#333333;" "#cccccc;" }
+                        { "#333333;" "#d5d5d5;" }
                         { "#373e48;" "#ffffff;" }
                         { "#8b4500;" "orange;" }
-                        { "#dbdbdb;" "#444444;" }
-                        { "#e3e2db;" "#666666;" }
+                        { "#e3e2db;" "#444444;" }
                         { "white;" "#202124;" }
                         { "black;" "white;" }
                     } ?at [
@@ -189,28 +198,13 @@ M: pathname url-of
                 ] re-replace-with
             ] map " " join "{ " " }" surround
         ] re-replace-with "    " prepend
-        "{  }" over subseq? [ drop f ] when
-    ] 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
+        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 dup
-    [ dark-mode-css ] [ mobile-css ] bi 3append join-lines ;
+    ] { } assoc>map fix-help-header dup dark-mode-css append join-lines ;
 
 :: css-styles-to-classes ( body -- stylesheet body )
     H{ } clone :> classes
@@ -231,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 ;
@@ -256,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 ;