fonts

* development_article_color:
  added options to change background for article in css
  set navbarright at rightmost position
  changed nav bar color to differentiate with body
  put light and dark icons into one, made sure the top bar follows the theme

examples/heroweb_example_base/css/heroweb.css

@@ -1,3 +1,24 @@
+/* Custom properties for theming */
+:root {
+    --nav-background: #f1f3f5;
+    --nav-text: #495057;
+    --nav-hover: #1971c2;
+    --nav-input-border: #ced4da;
+    --nav-input-background: #f8f9fa;
+    --theme-icon-hover: #e9ecef;
+    --background-color-article: #fffffff8;
+}
+
+[data-theme="dark"] {
+    --nav-background: #3c4149b9;
+    --nav-text: #e0e0e0;
+    --nav-hover: #4dabf7;
+    --nav-input-border: #495057;
+    --nav-input-background: #2a2e33;
+    --theme-icon-hover: #2a2e33;
+    --background-color-article: #242527;
+}
+
 /* Custom styles to enhance the nav bar */
 body > main {
     display: flex;
@@ -6,10 +27,13 @@ body > main {
     height: 100vh;
     overflow: hidden;
 }
+
 nav {
-    background-color: #f1f3f5;
+    background-color: var(--nav-background);
     padding: 0rem 1rem;
+    width: 100%; /* Ensure nav takes full width */
 }
+
 nav ul {
     margin: 0;
     padding: 0;
@@ -17,129 +41,192 @@ nav ul {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    width: 100%; /* Ensure ul takes full width */
 }
+
 nav ul li {
     margin: 0 0.5rem;
 }
+
 nav ul li a {
     text-decoration: none;
-    color: #495057;
+    color: var(--nav-text);
     font-weight: 500;
     transition: color 0.3s ease;
 }
+
 nav ul li a:hover {
-    color: #1971c2;
+    color: var(--nav-hover);
 }
+
 .brand {
     font-size: 1rem;
     font-weight: bold;
 }
+
 navbar-right {
     display: flex;
     align-items: center;
-    margin-left: 30%;
+    margin-left: auto; /* Push to the right */
+    margin-right: 2px; /* Ensure no right margin */
 }
+
 navbar-right a {
     margin-left: 1rem;
 }
+
 navbar-right input[type="search"] {
     padding: 0.2rem 0.5rem;
-    border: 1px solid #ced4da;
+    border: 1px solid var(--nav-input-border);
     border-radius: 1rem;
-    background-color: #f8f9fa;
+    background-color: var(--nav-input-background);
+    color: var(--nav-text);
     font-size: 0.8rem;
     line-height: 1;
     height: 2rem;
     width: 300px;
     margin: 0;
 }
-/* New styles for theme icons */
+
+/* Styles for theme icons */
 .theme-icons {
     display: flex;
     align-items: center;
 }
+
 .theme-icon {
     cursor: pointer;
     padding: 5px;
     border-radius: 50%;
     margin-left: 0.5rem;
 }
+
 .theme-icon svg {
     width: 20px;
     height: 20px;
-    fill: currentColor;
-}
-.theme-icon:hover {
-    background-color: #e9ecef;
+    fill: var(--nav-text);
 }
 
-mynav,
-docnav {
+.theme-icon:hover {
+    background-color: var(--theme-icon-hover);
+}
+
+mynav {
     flex: 1;
     min-width: 200px;
     max-width: 250px;
-    overflow-y: auto; /* Enable scrolling for nav and docnav */
+    overflow-y: auto;
+    color: var(--nav-text);
+    padding-top: 1.3rem;
+    font-size: 0.8rem;
 }
+
 mynav ul {
     list-style-type: none;
     padding-left: 0;
 }
+
 mynav ul ul {
-    list-style-type: none; /* Remove bullets */
+    list-style-type: none;
     padding-left: 0;
     margin-left: 0.2rem;
-    display: none; /* Hide nested lists by default */
+    display: none;
 }
+
 mynav ul li {
     margin-left: 0.5rem;
     padding-left: 0.3rem;
-    cursor: pointer; /* Indicate that items are clickable */
-    list-style-type: none; /* Remove bullets */
+    cursor: pointer;
+    list-style-type: none;
 }
+
 mynav ul li a {
     text-decoration: none;
     color: inherit;
 }
+
 mynav ul li.open > ul {
-    display: block; /* Show nested lists when parent is open */
+    display: block;
 }
+
 .arrow {
-    font-size: 0.8rem; /* Reduce the font size of the arrows */
-    margin-right: 0.2rem; /* Adjust the space between the arrow and the text */
+    font-size: 0.8rem;
+    margin-right: 0.2rem;
 }
 
 article {
-    flex: 4;
+    flex: 6;
     min-width: 200px;
     max-width: 1200px;
-    overflow-y: auto; /* Enable scrolling for article */
+    overflow-y: auto;
     height: 100%;
     scrollbar-width: none;
     -ms-overflow-style: none;
+    background-color: var(--background-color-article);
 }
-article textarea {
-    line-height: 1.2;
+
+article p,
+article li,
+article blockquote,
+article table {
+    font-size: 0.8rem;
+    line-height: 1.2; /* Reduce line height to decrease space between lines */
+    margin-bottom: 0.6rem; /* Reduce margin to decrease space between paragraphs */
 }
-article md {
-    line-height: 1.2;
+
+article table {
+    line-height: 0.9;
 }
+
+article ul li {
+    line-height: 1;
+    margin-bottom: 0.1rem; /* Reduce margin to decrease space between list items */
+}
+
+article h1 h2 h3 h4 h5 {
+    margin-top: 0rem;
+}
+
+article h1 {
+    font-size: 1.6rem;
+    margin-bottom: 0.5rem; /* Reduce space after header */
+}
+
+article h2 {
+    font-size: 1.2rem;
+    margin-bottom: 0.4rem; /* Reduce space after header */
+}
+article h3 {
+    font-size: 1rem;
+    margin-bottom: 0.3rem; /* Reduce space after header */
+}
+article h4 {
+    font-size: 0.8rem;
+    margin-bottom: 0.2rem; /* Reduce space after header */
+}
+
 docnav {
     flex: 1;
     min-width: 200px;
-    font-size: 0.9rem;
+    max-width: 250px;
+    overflow-y: auto;
+    color: var(--nav-text);
+    font-size: 0.6rem;
 }
+
 docnav ul {
     list-style-type: none;
     padding-left: 0;
 }
+
 docnav ul li {
     margin-left: 0.4rem;
     padding-left: 0rem;
-    cursor: pointer; /* Indicate that items are clickable */
-    white-space: nowrap; /* Prevent text from wrapping */
-    overflow: hidden; /* Hide overflow text */
-    text-overflow: ellipsis; /* Add ellipses for overflow text */
-    max-width: 40ch; /* Limit length of item to 40 characters */
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 40ch;
 }
 
 @media (max-width: 768px) {
@@ -148,45 +235,27 @@ docnav ul li {
     }
     nav ul {
         flex-direction: column;
-        align-items: flex-start;
+        align-items: stretch; /* Changed from flex-start to stretch */
     }
     nav ul li {
-        margin: 0 rem 0;
+        margin: 0.5rem 0; /* Added vertical margin */
     }
     navbar-right {
         flex-direction: column;
-        align-items: flex-start;
-        margin-left: 0;
+        align-items: stretch; /* Changed from flex-start to stretch */
+        margin-left: 2px;
+        width: 100%; /* Ensure full width on mobile */
     }
     navbar-right a {
         margin-left: 0;
+        margin-top: 0.5rem; /* Add some vertical spacing */
     }
     navbar-right input[type="search"] {
         width: 100%;
-        margin: 0;
+        margin: 0.5rem 0; /* Add some vertical spacing */
     }
     .theme-icons {
         margin-top: 0.5rem;
+        justify-content: flex-end; /* Align icons to the right on mobile */
     }
 }
-
-/* [data-theme="dark"] {
-    --background-color: #333;
-    --text-color: #fff;
-}
-[data-theme="dark"] body {
-    background-color: var(--background-color);
-    color: var(--text-color);
-}
-[data-theme="dark"] nav {
-    background-color: #444;
-}
-[data-theme="dark"] nav ul li a {
-    color: #ddd;
-}
-[data-theme="dark"] nav ul li a:hover {
-    color: #fff;
-}
-[data-theme="dark"] .theme-icon:hover {
-    background-color: #555;
-} */

examples/heroweb_example_base/js/heroweb.js

@@ -79,38 +79,74 @@ function addNavEventListeners() {
   });
 }
 
-// function settypes() {
-//   const navInputs = document.querySelectorAll("search-inpu");
-//   navInputs.forEach((input) => {
-//     input.setAttribute("type", "text");
-//   });
-// }
-
 // Call the initialization function when the DOM is loaded
 document.addEventListener("DOMContentLoaded", () => {
   createThemeIcons();
   initializeMarkdownConverter("markdown-input", "markdown-output", "content-pointers");
   initializeMarkdownConverter("markdown-nav", "mynav");
   addNavEventListeners();
-  //settypes();
 });
 
 function setTheme(theme) {
   document.documentElement.setAttribute("data-theme", theme);
   localStorage.setItem("theme", theme);
   console.log(`Theme set to: ${theme}`);
+  updateThemeIcon(theme);
 }
 
 function getSystemTheme() {
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
 
-document.querySelectorAll(".theme-icon").forEach((icon) => {
-  icon.addEventListener("click", () => {
-    const theme = icon.getAttribute("data-theme-switcher");
-    setTheme(theme);
-  });
-});
+function toggleTheme() {
+  const currentTheme = document.documentElement.getAttribute("data-theme") || "light";
+  const newTheme = currentTheme === "light" ? "dark" : "light";
+  setTheme(newTheme);
+}
+
+function updateThemeIcon(theme) {
+  const themeIcon = document.querySelector(".theme-icon");
+  if (themeIcon) {
+    themeIcon.innerHTML = theme === "light" ? getLightIconSVG() : getDarkIconSVG();
+    themeIcon.setAttribute("title", `Switch to ${theme === "light" ? "dark" : "light"} theme`);
+  }
+}
+
+function createThemeIcons() {
+  const themeIconsHTML = `
+    <div class="theme-icons">
+      <span class="theme-icon" title="Toggle theme">
+        ${getLightIconSVG()}
+      </span>
+    </div>
+  `;
+
+  const placeholder = document.getElementById("theme-switcher-icons");
+  if (placeholder) {
+    placeholder.innerHTML = themeIconsHTML;
+  }
+
+  // Add event listener for theme switching
+  const themeIcon = document.querySelector(".theme-icon");
+  if (themeIcon) {
+    themeIcon.addEventListener("click", toggleTheme);
+  }
+
+  // Set initial icon based on current theme
+  updateThemeIcon(document.documentElement.getAttribute("data-theme") || "light");
+}
+
+function getLightIconSVG() {
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z" />
+  </svg>`;
+}
+
+function getDarkIconSVG() {
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z" />
+  </svg>`;
+}
 
 // Check for saved theme preference or use system theme
 const savedTheme = localStorage.getItem("theme");
@@ -124,36 +160,3 @@ if (savedTheme) {
 window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
   setTheme(e.matches ? "dark" : "light");
 });
-
-function createThemeIcons() {
-  const themeIconsHTML = `
-        <div class="theme-icons">
-            <span class="theme-icon" data-theme-switcher="light" title="Light theme">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                    <path
-                        d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"
-                    />
-                </svg>
-            </span>
-            <span class="theme-icon" data-theme-switcher="dark" title="Dark theme">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                    <path
-                        d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"
-                    />
-                </svg>
-            </span>
-        </div>
-    `;
-
-  const placeholder = document.getElementById("theme-switcher-icons");
-  if (placeholder) {
-    placeholder.innerHTML = themeIconsHTML;
-  }
-  // Add event listeners for theme switching
-  document.querySelectorAll(".theme-icon").forEach((icon) => {
-    icon.addEventListener("click", () => {
-      const theme = icon.getAttribute("data-theme-switcher");
-      setTheme(theme);
-    });
-  });
-}