diff --git a/examples/heroweb_example_base/css/heroweb.css b/examples/heroweb_example_base/css/heroweb.css
index fe1a924..d3701f7 100644
--- a/examples/heroweb_example_base/css/heroweb.css
+++ b/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,164 @@ 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: 0; /* 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);
+}
+
+.theme-icon:hover {
+ background-color: var(--theme-icon-hover);
+}
+
+mynav {
+ flex: 1;
+ min-width: 200px;
+ max-width: 250px;
+ overflow-y: auto;
+ color: var(--nav-text);
+ padding-top: 1.3rem;
}
-mynav,
docnav {
flex: 1;
min-width: 200px;
max-width: 250px;
- overflow-y: auto; /* Enable scrolling for nav and docnav */
+ overflow-y: auto;
+ color: var(--nav-text);
}
+
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;
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 md {
line-height: 1.2;
}
+
docnav {
flex: 1;
min-width: 200px;
font-size: 0.9rem;
}
+
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 +207,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;
+ align-items: stretch; /* Changed from flex-start to stretch */
margin-left: 0;
+ 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;
-} */
diff --git a/examples/heroweb_example_base/js/heroweb.js b/examples/heroweb_example_base/js/heroweb.js
index 64c0bc8..131b49a 100644
--- a/examples/heroweb_example_base/js/heroweb.js
+++ b/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 = `
+
+
+ ${getLightIconSVG()}
+
+
+ `;
+
+ 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 ``;
+}
+
+function getDarkIconSVG() {
+ return ``;
+}
// Check for saved theme preference or use system theme
const savedTheme = localStorage.getItem("theme");
@@ -123,37 +159,4 @@ if (savedTheme) {
// Listen for system theme changes
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
setTheme(e.matches ? "dark" : "light");
-});
-
-function createThemeIcons() {
- const themeIconsHTML = `
-
- `;
-
- 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);
- });
- });
-}
+});
\ No newline at end of file