help.html: using standard tags, adding theme-color

diff --git a/basis/help/html/html.factor b/basis/help/html/html.factor
index 47ada7afd6171e988437c4febdc6fc9f45942d1a..03de5a4eb88d030e41bccf05e8da85e2792a4666 100644 (file)
--- a/basis/help/html/html.factor
+++ b/basis/help/html/html.factor
@@ -73,16 +73,28 @@ 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">
+        <nav>
             <div class="navrow">
                 <a href="https://factorcode.org">
                 <img src="favicon.ico" width="24" height="24" />
@@ -94,13 +106,13 @@ M: pathname url-of
                     <input type="submit" value="Go"/>
                 </form>
             </div>
-        </div>
+        </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 +122,7 @@ M: pathname url-of
         for more information.
         </p>
         <p><-></p>
-        </div>
+        </footer>
     XML] ;
 
 : bijective-base26 ( n -- name )
@@ -240,7 +252,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 ;
 

diff --git a/basis/help/html/stylesheet.css b/basis/help/html/stylesheet.css
index bbe1af4cc819cdb23c62f65ca9f8e1d48ed6e331..6a828819419acb9c75e047b53cfdedbfe31deff6 100644 (file)
--- a/basis/help/html/stylesheet.css
+++ b/basis/help/html/stylesheet.css
@@ -41,7 +41,7 @@ tr:hover {
     background-color: #f5f5f5;
 }
 
-.navbar {
+nav {
     border-bottom: 1px solid #ccc;
     background-color: #f5f5f5;
 }
@@ -70,7 +70,7 @@ tr:hover {
     height: 16px;
 }
 
-.footer {
+footer {
     margin-top: 15px;
     border-top: 1px dashed #ccc;
     color: #666;
@@ -87,7 +87,7 @@ tr:hover {
         width: 100px;
     }
 
-    .navbar img {
+    nav img {
         display: none;
     }
 }
@@ -107,12 +107,12 @@ tr:hover {
         color: #8ab4f8;
     }
 
-    .navbar {
+    nav {
         background-color: #373e48;
         border-bottom: 1px solid #666;
     }
 
-    .footer {
+    footer {
         border-top: 1px dashed #666;
         color: #999;
     }