diff --git a/assets/universal-access.svg b/assets/universal-access.svg
new file mode 100644
index 00000000..a99f5712
--- /dev/null
+++ b/assets/universal-access.svg
@@ -0,0 +1,78 @@
+
+
diff --git a/docs/guides/misc/autoretirement.mdx b/docs/guides/misc/autoretirement.mdx
index 471b84bc..1d5b1532 100644
--- a/docs/guides/misc/autoretirement.mdx
+++ b/docs/guides/misc/autoretirement.mdx
@@ -8,6 +8,8 @@ Documentation for hackmud's automatic inactive account retirement.
In order to preserve performance of the Multi-User Domain over time, it is necessary to remove users and records from the database. Users that belong to accounts which have gone inactive for 60 days will automatically retire.
+To avoid auto-retirement, it is sufficent to log into the account, once you do so the timer will be reset for all users associated with that account.
+
## Email Reminders
Players who wish to be notified of retirement can sign up for reminder emails by linking your steam account to the [hackmud forums](https://hackmud.com/forums).
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 8d547fb0..1e4b19c7 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -75,7 +75,7 @@ const config = {
// Supported and default color modes
colorMode: {
defaultMode: "dark",
- disableSwitch: true,
+ disableSwitch: false,
respectPrefersColorScheme: false,
},
// Theme configuration specific to the docs plugin
@@ -175,6 +175,10 @@ const config = {
},
],
},
+ {
+ type: "custom-AccessibilityOptions",
+ position: "right",
+ },
],
},
footer: {
diff --git a/src/components/NavbarItem/AccessibilityOptions.js b/src/components/NavbarItem/AccessibilityOptions.js
new file mode 100644
index 00000000..dd68fb2b
--- /dev/null
+++ b/src/components/NavbarItem/AccessibilityOptions.js
@@ -0,0 +1,41 @@
+import React from "react";
+
+export default function AccessibilityOptions({ mobile }) {
+ if (mobile) {
+ return null;
+ }
+
+ let accessibilityMode = null;
+
+ if (typeof window !== "undefined") {
+ const storedMode = window.localStorage.getItem("accessibilityMode");
+ setAccessibilityMode(storedMode === "true" ? "true" : "false");
+ }
+
+ function setAccessibilityMode(value) {
+ accessibilityMode = value;
+ window.localStorage.setItem("accessibilityMode", accessibilityMode);
+
+ document.documentElement.setAttribute("data-accessible", accessibilityMode);
+ for (let elem of document.getElementsByClassName("main-wrapper")) {
+ elem.setAttribute("data-accessible", accessibilityMode);
+ }
+ }
+
+ const toggleAccessibilityMode = () => {
+ setAccessibilityMode(accessibilityMode === "true" ? "false" : "true");
+ };
+
+ function handleClick() {
+ toggleAccessibilityMode();
+ }
+
+ return (
+
+ );
+}
diff --git a/src/css/custom.css b/src/css/custom.css
index a09e1453..6aa1e08a 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -16,11 +16,16 @@ html[data-theme="dark"] {
--ifm-color-primary-lightest: #dfedfc;
--ifm-background-color: #101215;
+ --scan-line-1: #0e0e0e;
+ --scan-line-2: #101215;
+
+ --ifm-a11y-button-color: var(--ifm-color-primary-dark);
+ --ifm-a11y-button-hover-color: var(--ifm-color-primary-darkest);
+
--ifm-color-info-contrast-background: rgb(25 60 71 / 50%);
--ifm-color-warning-contrast-background: rgb(77 56 0 / 50%);
--ifm-color-danger-contrast-background: rgb(75 17 19 / 50%);
- --ifm-font-family-base: "whiterabbit-webfont";
--ifm-navbar-background-color: var(--ifm-background-color);
--ifm-footer-background-color: var(--ifm-background-color);
--ifm-dropdown-background-color: var(--ifm-background-color);
@@ -29,6 +34,80 @@ html[data-theme="dark"] {
--ifm-heading-color: var(--ifm-color-primary-lighter);
--ifm-color-content: var(--ifm-color-primary);
--ifm-link-color: var(--ifm-color-primary-lightest);
+ --ifm-navbar-link-hover-color: var(--ifm-color-primary-darker);
+ --ifm-menu-color: var(--ifm-color-primary);
+ --ifm-toc-link-color: var(--ifm-color-primary);
+
+ --ifm-breadcrumb-border-radius: 0;
+ --ifm-global-radius: 0;
+}
+
+/* covers both accessibility states */
+html[data-theme="light"] {
+ --ifm-color-primary: #161616;
+ --ifm-color-primary-dark: #5796e4;
+ --ifm-color-primary-darker: #060f18;
+ --ifm-color-primary-darkest: #0d59c4;
+ --ifm-color-primary-light: #56585a;
+ --ifm-color-primary-lighter: #323335;
+ --ifm-color-primary-lightest: #1a1818;
+ --ifm-background-color: #c6c8cc;
+
+ --scan-line-1: #c6c8cc;
+ --scan-line-2: #c6c8cc;
+
+ --ifm-a11y-button-color: var(--ifm-color-primary-light);
+ --ifm-a11y-button-hover-color: var(--ifm-color-primary-lightest);
+
+ --ifm-color-info-contrast-background: rgba(78, 193, 228, 0.5);
+ --ifm-color-warning-contrast-background: rgba(206, 151, 0, 0.5);
+ --ifm-color-danger-contrast-background: rgba(204, 47, 52, 0.5);
+
+ --ifm-navbar-background-color: var(--ifm-background-color);
+ --ifm-footer-background-color: var(--ifm-background-color);
+ --ifm-dropdown-background-color: var(--ifm-background-color);
+ --ifm-card-background-color: var(--ifm-background-color);
+
+ --ifm-link-color: var(--ifm-color-primary);
+
+ --ifm-heading-color: var(--ifm-color-primary-darker);
+ --ifm-color-content: var(--ifm-color-primary);
+ --ifm-link-color: var(--ifm-color-primary-darkest);
+ --ifm-navbar-link-hover-color: var(--ifm-color-primary-darker);
+ --ifm-menu-color: var(--ifm-color-primary);
+ --ifm-toc-link-color: var(--ifm-color-primary);
+
+ --ifm-breadcrumb-border-radius: 0;
+ --ifm-global-radius: 0;
+}
+
+html:not([data-accessible="true"]) {
+ --ifm-font-family-base: "whiterabbit-webfont";
+}
+
+html[data-theme="dark"][data-accessible="true"] {
+ --ifm-color-primary: #dce0e6;
+ --ifm-color-primary-dark: #589ef1;
+ --ifm-color-primary-darker: #4795f0;
+ --ifm-color-primary-darkest: #1b7bec;
+ --ifm-color-primary-light: #b6d2f1;
+ --ifm-color-primary-lighter: #89b6ec;
+ --ifm-color-primary-lightest: #e8ebee;
+ --ifm-background-color: #101215;
+
+ --ifm-color-info-contrast-background: rgb(25 60 71 / 50%);
+ --ifm-color-warning-contrast-background: rgb(77 56 0 / 50%);
+ --ifm-color-danger-contrast-background: rgb(75 17 19 / 50%);
+
+ --ifm-navbar-background-color: var(--ifm-background-color);
+ --ifm-footer-background-color: var(--ifm-background-color);
+ --ifm-dropdown-background-color: var(--ifm-background-color);
+ --ifm-card-background-color: var(--ifm-background-color);
+
+ --ifm-heading-color: var(--ifm-color-primary-lighter);
+ --ifm-color-content: var(--ifm-color-primary);
+ --ifm-link-color: var(--ifm-color-primary-darkest);
+ --ifm-navbar-link-hover-color: var(--ifm-color-primary-darker);
--ifm-menu-color: var(--ifm-color-primary);
--ifm-toc-link-color: var(--ifm-color-primary);
@@ -54,12 +133,30 @@ a.wikilink-new {
color: var(--ifm-color-danger);
}
-.main-wrapper {
+.navbar-a11y::before {
+ content: "";
+ width: 36px;
+ height: 36px;
+ display: flex;
+ background-color: var(--ifm-a11y-button-color);
+ border: none;
+ margin-right: 10px;
+ mask-image: url("../../assets/universal-access.svg");
+ mask-size: 100% auto;
+ transition: background-color var(--ifm-transition-fast)
+ var(--ifm-transition-timing-default);
+}
+
+.navbar-a11y:hover::before {
+ background-color: var(--ifm-a11y-button-hover-color);
+}
+
+.main-wrapper:not([data-accessible="true"]) {
background-image: repeating-linear-gradient(
- #0e0e0e,
- #0e0e0e 2px,
- #101215 2px,
- #101215 4px
+ var(--scan-line-1),
+ var(--scan-line-1) 2px,
+ var(--scan-line-2) 2px,
+ var(--scan-line-2) 4px
);
background-size: 100% 4px;
}
diff --git a/src/theme/NavbarItem/ComponentTypes.js b/src/theme/NavbarItem/ComponentTypes.js
new file mode 100644
index 00000000..f00afbb0
--- /dev/null
+++ b/src/theme/NavbarItem/ComponentTypes.js
@@ -0,0 +1,26 @@
+import DefaultNavbarItem from "@theme/NavbarItem/DefaultNavbarItem";
+import DropdownNavbarItem from "@theme/NavbarItem/DropdownNavbarItem";
+import LocaleDropdownNavbarItem from "@theme/NavbarItem/LocaleDropdownNavbarItem";
+import SearchNavbarItem from "@theme/NavbarItem/SearchNavbarItem";
+import HtmlNavbarItem from "@theme/NavbarItem/HtmlNavbarItem";
+import DocNavbarItem from "@theme/NavbarItem/DocNavbarItem";
+import DocSidebarNavbarItem from "@theme/NavbarItem/DocSidebarNavbarItem";
+import DocsVersionNavbarItem from "@theme/NavbarItem/DocsVersionNavbarItem";
+import DocsVersionDropdownNavbarItem from "@theme/NavbarItem/DocsVersionDropdownNavbarItem";
+import AccessibilityOptions from "@site/src/components/NavbarItem/AccessibilityOptions";
+
+const ComponentTypes = {
+ default: DefaultNavbarItem,
+ localeDropdown: LocaleDropdownNavbarItem,
+ search: SearchNavbarItem,
+ dropdown: DropdownNavbarItem,
+ html: HtmlNavbarItem,
+ doc: DocNavbarItem,
+ docSidebar: DocSidebarNavbarItem,
+ docsVersion: DocsVersionNavbarItem,
+ docsVersionDropdown: DocsVersionDropdownNavbarItem,
+};
+export default {
+ ...ComponentTypes,
+ "custom-AccessibilityOptions": AccessibilityOptions,
+};