profile menu

ui/_/code/shared.css

@@ -0,0 +1,80 @@
+:root {
+    --tan: #E6D7AA;
+    --accent: black;
+    --purple: #251D44;
+    --green: #0B5538;
+    --red: #BC1C02;
+    --brown: #c6a476;
+    --orange: #FE9201;
+    --periwinkle: #655BAF;
+}
+
+@media (prefers-color-scheme: dark) {
+:root {
+    --tan: #251D44;
+    --accent: #AF7323;
+}
+}
+
+@font-face {
+    font-family: 'Canterbury';
+    src: url('/_/fonts/Canterbury/Canterbury.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'BonaNova';
+    src: url('/_/fonts/BonaNova/BonaNova-Regular.woff') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'BonaNova';
+    src: url('/_/fonts/BonaNova/BonaNova-Bold.woff') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+}
+
+body {
+    font-family: 'BonaNova', sans-serif;
+    font-size: 16px;
+    background-color: var(--tan);
+    color: var(--accent);
+}
+
+#title {
+    padding: 5px 10px; 
+    font-size: 1.7rem;
+    position: fixed; top: 4.5vh; left: 6vw;
+    cursor: pointer; z-index: 1;
+}
+
+a {
+    cursor: default;
+    text-decoration: none;
+    text-underline-offset: 5px;
+    transition: background .02s, color .2s;
+    user-select: none;
+    color: var(--accent);
+    display: inline-block;   /* makes background and padding behave */
+    padding: 0.2em 0.5em;    /* adds breathing room */
+}
+
+a:hover {
+    text-decoration: none;
+    background: var(--green);
+    color: var(--tan);
+}
+
+a:active {
+    background: var(--red);   /* background color works now */
+}
+
+button {
+    background-color: var(--green);
+    color: var(--tan);
+    padding: 1em;
+    box-shadow: none;
+}

ui/_/code/util.js

@@ -31,6 +31,37 @@ window.html = function html(elementString) {
     return doc.body.firstChild;
 }
 
+window.util = {}
+window.util.getColor = function(name) {
+    const rootStyles = getComputedStyle(document.documentElement);
+    const color = rootStyles.getPropertyValue(`--${name}`).trim();
+    if(!color) {
+        throw new Error("Color not found")
+    }
+    return color
+}
+
+window.util.observeClassChange = (el, callback) => {
+    if (!el || !(el instanceof Element)) {
+        throw new Error("observeClassChange requires a valid DOM element.");
+    }
+
+    const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+        if (mutation.type === "attributes" && mutation.attributeName === "class") {
+            callback(el.classList);
+        }
+        }
+    });
+
+    observer.observe(el, {
+        attributes: true,
+        attributeFilter: ["class"]
+    });
+
+    return observer; // Optional: return it so you can disconnect later
+}
+
 
 /* JQUERY */