diff --git a/build/fragments/darkmode.js b/build/fragments/darkmode.js
index 358732a..b51248b 100644
--- a/build/fragments/darkmode.js
+++ b/build/fragments/darkmode.js
@@ -68,6 +68,12 @@ const style = `
}
`;
+const permanentStyle = `
+ body.widescreen {
+ max-width: 100% !important;
+ }
+`
+
const transitions = `
.body, div.footer, div.content {
transition: background-color 0.2s;
@@ -79,13 +85,27 @@ const transitions = `
transition: background-color 0.2s;
}
a.active {
- transition: background-color 0.2s color 0.2s;
+ transition: background-color 0.2s, color 0.2s;
}
.markdown, .markdown .code, .markdown code, .markdown span.key, .markdown h2, .markdown h3, .body-tabs ul li a, .markdown table td, .markdown table th, .member_line, .member_line a.subject, .highlight {
- transition: background-color 0.2s border 0.2s;
+ transition: background-color 0.2s, border 0.2s;
+ }
+ body {
+ transition: max-width 0.1s;
}
`;
+function addPermanentStyles() {
+ const head = document.getElementsByTagName("head")[0];
+ if (!head) { return; }
+
+ const styleElement = document.createElement("style");
+ styleElement.id = "dark-mode-permanent";
+ styleElement.type = "text/css";
+ styleElement.innerHTML = permanentStyle;
+ head.appendChild(styleElement);
+}
+
function addTransitions() {
const head = document.getElementsByTagName("head")[0];
if (!head) { return; }
@@ -113,37 +133,69 @@ function removeGlobalStyle() {
if (style) style.remove();
}
-function setDarkMode(value) {
- localStorage.setItem("darkMode", value);
+function setSetting(setting, value) {
+ localStorage.setItem(setting, value);
}
-function getDarkMode() {
- return localStorage.getItem("darkMode");
+function getSetting(setting) {
+ return localStorage.getItem(setting) === "true";
}
-let darkModeEnabled = getDarkMode() === "true";
-
function checkDarkMode() {
- if (darkModeEnabled) {
- addGlobalStyle();
- } else {
- removeGlobalStyle();
- }
+ const darkModeEnabled = getSetting("dark-mode");
+ if (darkModeEnabled) {
+ addGlobalStyle();
+ } else {
+ removeGlobalStyle();
+ }
}
function toggleDarkMode() {
- darkModeEnabled = !darkModeEnabled
+ const darkModeEnabled = getSetting("dark-mode");
if (darkModeEnabled) {
- setDarkMode("true");
+ setSetting("dark-mode", "false");
} else {
- setDarkMode("false");
+ setSetting("dark-mode", "true");
+ }
+
+ requestAnimationFrame(checkDarkMode)
+}
+
+function checkWidescreen() {
+ const widescreenEnabled = getSetting("widescreen");
+ if (widescreenEnabled) {
+ document.body.classList.add("widescreen")
+ } else {
+ document.body.classList.remove("widescreen")
}
- checkDarkMode()
+}
+
+function toggleWidescreen() {
+ const widescreenEnabled = getSetting("widescreen");
+ if (widescreenEnabled) {
+ setSetting("widescreen", "false");
+ } else {
+ setSetting("widescreen", "true");
+ }
+
+ requestAnimationFrame(checkWidescreen)
}
window.addEventListener("load", () => {
- addTransitions()
checkDarkMode()
- const button = document.getElementById("toggle-dark-mode")
- button.addEventListener("click", toggleDarkMode)
+ checkWidescreen()
+ addPermanentStyles()
+ setTimeout( addTransitions, 500 );
+
+ const darkModeButton = document.getElementById("toggle-dark-mode")
+ darkModeButton.addEventListener("click", (e) => {
+ toggleDarkMode()
+ e.preventDefault()
+ })
+
+ const widescreenButton = document.getElementById("toggle-widescreen")
+ widescreenButton.addEventListener("click", (e) => {
+ toggleWidescreen()
+ e.preventDefault()
+ })
})
diff --git a/build/setup.ts b/build/setup.ts
index 026dd69..41632bd 100644
--- a/build/setup.ts
+++ b/build/setup.ts
@@ -162,10 +162,16 @@ function removeDeadStyles(content: string) {
return false
}
+ const usesBadStyles = (block: string) => {
+ if (block.startsWith("#sidebar details.level1 > summary")) return true
+ return false
+ }
+
const shouldKeep = (block: string) => {
if (isBadMdi(block)) return false
if (usesDeadClass(block)) return false
if (isEdit(block)) return false
+ if (usesBadStyles(block)) return false
return true
}
@@ -199,6 +205,10 @@ function optimizeCss(content: string) {
content = content.replace(/#sidebar details a {/g, "details[open] a {")
content = content.replace(/#sidebar details\.level1 > ul > li > a {/g, "details[open].level1 > ul > li > a {")
+ // Style fixes
+ content = content.replace(/cursor: hand;/g, "cursor: pointer;")
+ content = content.replace(/\s+-moz-osx-font-smoothing: grayscale;/g, "")
+
return content
}
@@ -242,9 +252,10 @@ ${content}
async function setupDarkMode($: cheerio.CheerioAPI) {
const pagelinks = $("ul[id='pagelinks']")
+ pagelinks.append(``)
pagelinks.append(``)
- $(``).insertAfter("meta[name='viewport']")
+ $(``).insertAfter(".footer[id='pagefooter']")
await fs.copyFile("build/fragments/darkmode.js", "public/darkmode.js")
}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 5065305..5e2f44f 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -5,7 +5,7 @@ const { title, description, views, updated } = Astro.props;
---
-
+
{title}
@@ -51,7 +51,7 @@ const { title, description, views, updated } = Astro.props;
-
+
@@ -63,7 +63,7 @@ const { title, description, views, updated } = Astro.props;
-