Fix layout background color for dark mode

pilafmon · pilafmon · commit b5e60e23b9f8 · 2025-08-22T03:12:17.000-07:00
diff --git a/package.json b/package.json
@@ -62,15 +62,15 @@
       "interactive": "browser-sync . --startPath website-target/1-dev --files website-target"
    },
    "devDependencies": {
-      "@fortawesome/fontawesome-free": "~6.7",
+      "@fortawesome/fontawesome-free": "~7.0",
       "add-dist-header": "~1.5",
       "browser-sync": "~3.0",
       "copy-file-util": "~1.3",
       "copy-folder-util": "~1.1",
-      "dna-engine": "~3.2",
+      "dna-engine": "~3.3",
       "hamburger-menu": "~0.6",
       "jshint": "~2.13",
-      "less": "~4.3",
+      "less": "~4.4",
       "replacer-util": "~1.4",
       "rev-web-assets": "~1.4",
       "rimraf": "~6.0",
diff --git a/src/resources/graphics/application/splash.html b/src/resources/graphics/application/splash.html
@@ -1,9 +1,9 @@
 <!doctype html>
+<html lang=en>
 <!-- - - - - - - - -->
 <!-- Snap Backup   -->
 <!-- Splash Screen -->
 <!-- - - - - - - - -->
-<html lang=en>
 <head>
    <meta charset=utf-8>
    <title>Snap Backup &bull; Splash Screen</title>
diff --git a/src/resources/snap-backup-user-guide.html b/src/resources/snap-backup-user-guide.html
@@ -1,8 +1,8 @@
 <!doctype html>
+<html lang=en>
 <!-- - - - - - - - - - - - - -->
 <!-- Snap Backup User Guide  -->
 <!-- - - - - - - - - - - - - -->
-<html lang=en>
 <head>
    <meta charset=utf-8>
    <meta name=viewport    content="width=device-width, initial-scale=1">
diff --git a/website/snap-backup.less b/website/snap-backup.less
@@ -1,6 +1,8 @@
 /* Live in Style -- Snap Backup */
 /* Colors: teal, darkcyan, palegreen, yellow */
 
+@import "node_modules/web-ignition/dist/utility-box";
+
 // Layout
 body {
    margin: 0px;
@@ -27,7 +29,7 @@ body >header .arch {
    }
 body >header .arch >div {
    height: 200px;
-   background-color: white;
+   background-color: white;  .DarkMode({ background-color: @colorCharcoal; });
    border: 4px solid teal;
    border-right: none;
    border-bottom: none;
@@ -69,7 +71,6 @@ main >section >nav a:not(:last-child)::after {
    content: "|";
    font-size: 1.0rem;
    color: silver;
-   background-color: white;
    padding: 0px 5px 0px 8px;
    }
 main >section .language-flags img {
diff --git a/website/templates/page-begin.html b/website/templates/page-begin.html
@@ -1,9 +1,9 @@
 <!doctype html>
+<html lang=en>
 <!-- - - - - - - - - -->
 <!-- Snap Backup     -->
 <!-- snapbackup.org  -->
 <!-- - - - - - - - - -->
-<html lang=en>
 <head>
    <meta charset=utf-8>
    <meta name=viewport                   content="width=device-width, initial-scale=1">
@@ -39,6 +39,7 @@
 <nav class=hamburger-menu>
    <a class=hamburger href=#>&#9776;</a>
    <aside>
+      <!-- menu -->
       <ul>
          <li data-menu=gateway>  <a href={{webRoot}}>Home</a></li>
          <li data-menu=preview>  <a href={{webRoot}}/screen>Preview</a></li>
