miki

commit a52fdddf680aeaa4fc21180a749db10aedc85d7b
parent 1ee1f7f01c8e02af9d0fee31176df1008644b2f0
Author: weetat <wtenison@protonmail.com>
Date:   Sun,  6 Apr 2025 15:39:05 +0000

Share editor header and scripts across all pages

Move the editor's header into header.tmpl.html and its collapsible and
theme toggle code into the global script. Fold the per-page stylesheets
into the global one and remove the duplicate wasm_exec.js.

Diffstat:
M
web/edit/index.html
 | 
53
+++--------------------------------------------------
M
web/edit/script.js
 | 
20
--------------------
D
web/edit/styles.css
 | 
438
-------------------------------------------------------------------------------
D
web/edit/wasm_exec.js
 | 
541
-------------------------------------------------------------------------------
M
web/global/scripts/script.js
 | 
44
++++++++++++++++----------------------------
M
web/global/styles/styles.css
 | 
546
+++++++++++++++++++++++++++++++++++++++++++++----------------------------------
M
web/global/templates/header.tmpl.html
 | 
45
++++++++++++++++++++++++++++++---------------
M
web/home/index.html
 | 
37
+++++++++++--------------------------
D
web/home/styles.css
 | 
51
---------------------------------------------------
M
web/subject/index.html
 | 
22
++++++++++++----------

10 files changed, 381 insertions(+), 1416 deletions(-)
diff --git a/web/edit/index.html b/web/edit/index.html
@@ -4,9 +4,8 @@
 <head>
 
     <title>Miki/Edit</title>
-    <meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" type="text/css" href="/web/edit/styles.css">
-    <script src="/web/edit/wasm_exec.js" defer></script>
+    {{template "fmd"}}
+    {{template "meta"}}
     <script src="/web/edit/script.js" defer></script>
 
 </head>
@@ -24,45 +23,7 @@
 
 <body>
 
-    <header class="--center-on-body">
-
-        <div id="header-title" class="_content_ --bold_font --center_font --set-size_font-to-screen">- FMD Editor Example -<br>
-            <span class="--set-size_3-4-font">Work-in-progress</span>
-        </div>
-
-        <nav id="header-nav-view" class="__view __mcol">
-
-            <div id="main-menu-set" class="__collapsible">
-                <button type="button" class="_collapsible-toggle_">MENU</button>
-                <div class="_collapsible-content-view_">
-                    <div class="__mlist">
-                        <a class="_content_ __border --bg_theme" href="https://miki.wtenison.com/home">Home</a>
-                        <a class="_content_ __border --bg_theme" href="https://wtenison.com">Portal
-                            <span class="__descriptor --set-size_half-font">(<b>WTENISON.COM</b>)
-                            </span>
-                        </a>
-                        <div class="_content_ __border --bg_theme">
-                            <s><b>SEARCH</b></s>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div id="options-set" class="__collapsible">
-                <button type="button" class="_collapsible-toggle_">OPTIONS</button>
-                <div class="_collapsible-content-view_">
-                    <div class="__mlist">
-                        <button type="button" id="swap-theme-bttn"><b>SWAP THEME</b></button>
-                    </div>
-                </div>
-            </div>
-            </div>
-        </nav>
-
-        <hr>
-
-    </header>
-
+    {{template "header" "FMD Editor Showcase"}}
 
     <aside id="left-sidebar-view">
 
@@ -105,14 +66,6 @@
 
     </aside>
 
-
-
-    </section>
-
-    <section id="right-margin">
-    </section>
-
-
 </body>
 
 </html>
 \ No newline at end of file
diff --git a/web/edit/script.js b/web/edit/script.js
@@ -107,20 +107,6 @@ function GotoFrame(nextActiveFrame) {
 window.onload = function () {
     loadFMDFileRaw("https://test.wtenison.com/web/edit/default.fmd", fmdViewPanelSet["text-editor"].content)
     loadFMDFileHTML("https://test.wtenison.com/web/edit/legend.fmd", fmdViewPanelSet["guide-text"].content)
-
-    _collapsibleToggles = document.getElementsByClassName("_collapsible-toggle_")
-    for (let i = 0; i < _collapsibleToggles.length; i++) {
-        _collapsibleToggles[i].addEventListener("click", function () {
-            _collapsibleToggles[i].classList.toggle("--open")
-            _collapsibleContent = _collapsibleToggles[i].nextElementSibling
-
-            if (_collapsibleToggles[i].classList.contains("--open")) {
-                _collapsibleContent.style.height = _collapsibleContent.scrollHeight + "px"
-            } else {
-                _collapsibleContent.style.height = "0px"
-            }
-        })
-    }
 }
 
 function loadFMDFileRaw(url, container) {
@@ -176,10 +162,4 @@ document.getElementById("render-fmd-bttn").onclick = (event) => {
     } else {
         GotoFrame("text-editor")
     }
-}
-
-document.getElementById("swap-theme-bttn").onclick = (event) => {
-    document.body.style.colorScheme = 
-        (document.body.style.colorScheme == "light" ||
-        document.body.style.colorScheme == "") ? "dark" : "light"
 }
 \ No newline at end of file
diff --git a/web/edit/styles.css b/web/edit/styles.css
@@ -1,437 +0,0 @@
-@layer base, primative, modifier, entity;
-
-@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
-
-
-/*
-    STYLE GUIDE ::
-    class: __attribute - ( __ ) signifies global attribute
-    class: _attribute_ - ( _*_ ) signifies local attribute
-    class: --attribute - ( -- ) signifies modifier
-
-    variable: --fmd_attribute-id__opt-property--opt-modifier -- standard variable format
-*/
-
-@layer base {
-
-    *,
-    *::before,
-    *::after {
-        box-sizing: border-box;
-    }
-
-    :root {
-
-        /* CONTANTS */
-
-        --fmd_gold: 1.618;
-
-        /* LAYOUT */
-
-        --fmd_page__max-width: 900px;
-        --fmd-page__header-height: 3rem;
-
-        --fmd_padding--half: calc(var(--fmd_padding) * 0.5);
-        --fmd_padding: 0.5rem;
-        --fmd_padding--double: calc(var(--fmd_padding) * 2.0);
-
-        --fmd_margin--half: calc(var(--fmd_margin) * 0.5);
-        --fmd_margin: 0.5rem;
-        --fmd_margin--double: calc(var(--fmd_margin) * 2);
-
-        --fmd_border__width--half: calc(var(--fmd_border__width) / 2);
-        --fmd_border__width: 0.25rem;
-        --fmd_border__width--double: 0.5rem;
-        --fmd_border__radius: 1.0rem;
-        --fmd_border__radius--half: calc(var(--fmd_border__radius) * 0.5);
-
-        /* COLORS */
-
-        --fmd_color__theme: light-dark(#fdfdfd, #010101);
-        --fmd_color__theme-inverse: light-dark(#010101, #fdfdfd);
-
-        /* Light color theme */
-
-        --fmd_color__font-l: light-dark(#fdfdfd, #010101);
-        --fmd_color__bg-l: light-dark(#b2bec3, #2d3436);
-        --fmd_color__fg-l: light-dark(#dfe6e9, #636e72);
-
-        --fmd_color__pink-l: light-dark(#fd79a8, #e84393);
-        --fmd_color__red-l: light-dark(#ff7675, #d63031);
-        --fmd_color__orange-l: light-dark(#fab1a0, #e17055);
-        --fmd_color__yellow-l: light-dark(#ffeaa7, #fdcb6e);
-        --fmd_color__mint-l: light-dark(#55efc4, #00b894);
-        --fmd_color__aqua-l: light-dark(#81ecec, #00cec9);
-        --fmd_color__blue-l: light-dark(#74b9ff, #0984e3);
-        --fmd_color__purple-l: light-dark(#a29bfe, #6c5ce7);
-
-        /* Dark color theme */
-
-        --fmd_color__font-d: light-dark(#010101, #fdfdfd);
-        --fmd_color__bg-d: light-dark(#2d3436, #b2bec3);
-        --fmd_color__fg-d: light-dark(#636e72, #dfe6e9);
-
-        --fmd_color__pink-d: light-dark(#e84393, #fd79a8);
-        --fmd_color__red-d: light-dark(#d63031, #ff7675);
-        --fmd_color__orange-d: light-dark(#e17055, #fab1a0);
-        --fmd_color__yellow-d: light-dark(#fdcb6e, #ffeaa7);
-        --fmd_color__mint-d: light-dark(#00b894, #55efc4);
-        --fmd_color__aqua-d: light-dark(#00cec9, #81ecec);
-        --fmd_color__blue-d: light-dark(#0984e3, #74b9ff);
-        --fmd_color__purple-d: light-dark(#6c5ce7, #a29bfe);
-    }
-
-    a {
-        color: var(--fmd_color__blue-d);
-        text-decoration: none;
-    }
-
-    body {
-        position: relative;
-        margin: var(--fmd_margin);
-
-        color-scheme: light;
-        color: var(--fmd_color__font-d);
-        background-color: var(--fmd_color__bg-l);
-
-        font-family: 'Comfortaa';
-
-        display: grid;
-        grid-template-columns: 1fr;
-
-        @media screen and (min-width: 900px) {
-            grid-template-columns: auto max(var(--fmd_page__max-width)) auto;
-        }
-    }
-
-    button {
-        padding: var(--fmd_padding);
-
-        display: grid;
-        justify-items: center;
-        align-items: center;
-
-        font-family: 'Comfortaa';
-
-        background-color: var(--fmd_color__theme);
-        border: 1px solid var(--fmd_color__fg-d);
-        border-radius: var(--fmd_border__radius--half);
-
-        cursor: pointer;
-
-        transition: linear 0.15s;
-
-        @media screen and (min-width: 900px) {
-            &:hover {
-                color: var(--fmd_color__theme);
-                background-color: var(--fmd_color__theme-inverse);
-            }
-        }
-
-        @media screen and (max-width: 900px) {
-            &:active {
-                transition: none;
-                color: var(--fmd_color__theme);
-                background-color: var(--fmd_color__theme-inverse);
-            }
-        }
-
-    }
-
-    code {
-        padding: calc(var(--fmd_padding--half) / 2) var(--fmd_padding);
-        margin: 0;
-
-        display: inline-grid;
-        justify-items: center;
-        align-items: center;
-
-        background-color: var(--fmd_color__bg-l);
-        border-radius: var(--fmd_border__radius--half);
-
-        font-style: italic;
-
-        >* {
-            display: inline-grid;
-        }
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        padding: var(--fmd_padding--half) var(--fmd_padding) var(--fmd_padding--half) var(--fmd_padding);
-        margin: var(--fmd_margin--double) var(--fmd_margin) var(--fmd_margin--half) var(--fmd_margin);
-
-        display: grid;
-        justify-items: center;
-        border-bottom: 1px solid var(--fmd_color__fg-d);
-
-        font-weight: bold;
-    }
-
-    header {
-        z-index: 10;
-        width: 100%;
-        top: 0;
-
-        display: grid;
-        overflow: visible;
-
-        button {
-            height: 2.5rem;
-            border-radius: 0;
-        }
-    }
-
-    hr {
-        width: 100%;
-        border: none;
-        border-top: 1px solid var(--fmd_color__theme-inverse);
-    }
-
-    img {
-        width: 75%;
-        padding: var(--fmd_padding);
-        margin: var(--fmd_margin);
-
-        justify-self: center;
-    }
-}
-
-@layer primative {
-
-    /* LAYOUT  */
-
-    .__view {
-        position: relative;
-
-        >:not(_panel_) {
-            width: 100%;
-            height: 100%;
-            margin: 0;
-        }
-
-        >._panel_ {
-            position: absolute;
-            top: 0;
-            left: 0;
-        }
-    }
-
-    ._content_ {
-        padding: var(--fmd_padding--half);
-    }
-
-    .__border {
-        border: 1px solid var(--fmd_color__fg-d);
-    }
-
-    .__collapsible {
-        position: relative;
-
-        display: grid;
-        justify-items: center;
-
-        >._collapsible-toggle_ {
-            display: inline-block;
-            width: 100%;
-            padding: var(--fmd_padding--half);
-
-            font-weight: bold;
-
-            &::before {
-                color: var(--fmd_color__blue-d);
-                content: '+\a0';
-            }
-
-            &.--open::before {
-                color: var(--fmd_color__red-d);
-                content: '-\a0';
-            }
-        }
-
-        >._collapsible-content-view_ {
-            position: absolute;
-            top: calc(100%);
-            width: 98%;
-            height: 0;
-
-            overflow: hidden;
-
-            background-color: var(--fmd_color__fg-l);
-
-            transition: linear 0.15s;
-
-            >* {
-                padding: var(--fmd_padding--half);
-                background-color: var(--fmd_color__fg-l);
-                border: 1px solid var(--fmd_color__fg-d);
-                border-top: none;
-            }
-
-        }
-    }
-
-    /* Column container */
-    .__mcol {
-        width: 100%;
-        display: flex;
-        flex-direction: row;
-        gap: var(--fmd_padding);
-    }
-
-    .__mlist {
-        display: grid;
-        gap: var(--fmd_padding--half);
-    }
-
-    /* FONTS */
-
-    /* Font descriptor */
-    .__descriptor {
-        margin-top: 0.25rem;
-        font-size: 0.75em;
-    }
-}
-
-@layer modifier {
-
-    /* LAYOUT */
-
-    /* Center element */
-    .--center-on-body {
-        @media screen and (min-width: 900px) {
-            grid-column: 2;
-        }
-    }
-
-    /* Hide element */
-    .--hide {
-        display: none;
-    }
-
-    /* COLOR */
-
-    /* Clear background */
-    .--clear_bg {
-        background-color: inherit;
-        border: none;
-    }
-
-    .--bg_theme {
-        background-color: var(--fmd_color__theme);
-    }
-
-    /* FONT */
-
-    /* Center text */
-    .--center_font {
-        text-align: center;
-    }
-
-    .--set-size_half-font {
-        font-size: .5rem;
-    }
-
-    .--set-size_3-4-font {
-        font-size: .75rem;
-    }
-
-    .--set-size_5-4-font {
-        font-size: 1.25rem;
-    }
-
-    .--set-size_6-4-font {
-        font-size: 1.5rem;
-    }
-
-    .--set-size_double-font {
-        font-size: 2rem;
-    }
-
-    .--set-size_font-to-screen {
-        font-size: max(min(1.25rem), 3vmin);
-    }
-
-    .--bold_font {
-        font-weight: bold;
-    }
-
-    /* UX */
-
-    .--clickable {
-        cursor: pointer;
-    }
-
-    .--transition {
-        transition: linear 0.25s;
-    }
-}
-
-@layer entity {
-
-    @scope(#fmd-view) {
-        & {
-            height: max(50vh);
-            margin-top: var(--fmd_margin);
-            position: relative;
-            border: 1px solid var(--fmd_color__fg-d);
-            overflow: hidden;
-        }
-
-        >#text-editor-panel>._content_ {
-            z-index: 0;
-            width: 100%;
-            height: 100%;
-            background-color: var(--fmd_color__fg-l);
-            resize: none;
-            overflow-y: auto;
-            outline: none;
-            border: none;
-        }
-
-        >#html-output-panel {
-            position: absolute;
-            top: 0;
-            left: 100%;
-
-            background-color: var(--fmd_color__fg-l);
-
-            overflow-y: auto;
-
-            &.--open {
-                left: 0;
-            }
-        }
-
-        >#guide-text-panel {
-            position: absolute;
-            top: 0;
-            left: -100%;
-
-            background-color: var(--fmd_color__fg-l);
-
-            overflow-y: auto;
-
-            &.--open {
-                left: 0;
-            }
-        }
-
-        >#error-output-panel {
-            position: absolute;
-            height: 50%;
-            top: 100%;
-
-            color: var(--fmd_color__font-l);
-            background-color: var(--fmd_color__bg-d);
-
-            &.--open {
-                top: 50%;
-            }
-        }
-    }
-}
-\ No newline at end of file
diff --git a/web/edit/wasm_exec.js b/web/edit/wasm_exec.js
@@ -1,541 +0,0 @@
-// Copyright 2018 The Go Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-//
-// This file has been modified for use by the TinyGo compiler.
-
-(() => {
-	// Map multiple JavaScript environments to a single common API,
-	// preferring web standards over Node.js API.
-	//
-	// Environments considered:
-	// - Browsers
-	// - Node.js
-	// - Electron
-	// - Parcel
-
-	if (typeof global !== "undefined") {
-		// global already exists
-	} else if (typeof window !== "undefined") {
-		window.global = window;
-	} else if (typeof self !== "undefined") {
-		self.global = self;
-	} else {
-		throw new Error("cannot export Go (neither global, window nor self is defined)");
-	}
-
-	if (!global.require && typeof require !== "undefined") {
-		global.require = require;
-	}
-
-	if (!global.fs && global.require) {
-		global.fs = require("node:fs");
-	}
-
-	const enosys = () => {
-		const err = new Error("not implemented");
-		err.code = "ENOSYS";
-		return err;
-	};
-
-	if (!global.fs) {
-		let outputBuf = "";
-		global.fs = {
-			constants: { O_WRONLY: -1, O_RDWR: -1, O_CREAT: -1, O_TRUNC: -1, O_APPEND: -1, O_EXCL: -1 }, // unused
-			writeSync(fd, buf) {
-				outputBuf += decoder.decode(buf);
-				const nl = outputBuf.lastIndexOf("\n");
-				if (nl != -1) {
-					console.log(outputBuf.substr(0, nl));
-					outputBuf = outputBuf.substr(nl + 1);
-				}
-				return buf.length;
-			},
-			write(fd, buf, offset, length, position, callback) {
-				if (offset !== 0 || length !== buf.length || position !== null) {
-					callback(enosys());
-					return;
-				}
-				const n = this.writeSync(fd, buf);
-				callback(null, n);
-			},
-			chmod(path, mode, callback) { callback(enosys()); },
-			chown(path, uid, gid, callback) { callback(enosys()); },
-			close(fd, callback) { callback(enosys()); },
-			fchmod(fd, mode, callback) { callback(enosys()); },
-			fchown(fd, uid, gid, callback) { callback(enosys()); },
-			fstat(fd, callback) { callback(enosys()); },
-			fsync(fd, callback) { callback(null); },
-			ftruncate(fd, length, callback) { callback(enosys()); },
-			lchown(path, uid, gid, callback) { callback(enosys()); },
-			link(path, link, callback) { callback(enosys()); },
-			lstat(path, callback) { callback(enosys()); },
-			mkdir(path, perm, callback) { callback(enosys()); },
-			open(path, flags, mode, callback) { callback(enosys()); },
-			read(fd, buffer, offset, length, position, callback) { callback(enosys()); },
-			readdir(path, callback) { callback(enosys()); },
-			readlink(path, callback) { callback(enosys()); },
-			rename(from, to, callback) { callback(enosys()); },
-			rmdir(path, callback) { callback(enosys()); },
-			stat(path, callback) { callback(enosys()); },
-			symlink(path, link, callback) { callback(enosys()); },
-			truncate(path, length, callback) { callback(enosys()); },
-			unlink(path, callback) { callback(enosys()); },
-			utimes(path, atime, mtime, callback) { callback(enosys()); },
-		};
-	}
-
-	if (!global.process) {
-		global.process = {
-			getuid() { return -1; },
-			getgid() { return -1; },
-			geteuid() { return -1; },
-			getegid() { return -1; },
-			getgroups() { throw enosys(); },
-			pid: -1,
-			ppid: -1,
-			umask() { throw enosys(); },
-			cwd() { throw enosys(); },
-			chdir() { throw enosys(); },
-		}
-	}
-
-	if (!global.crypto) {
-		const nodeCrypto = require("node:crypto");
-		global.crypto = {
-			getRandomValues(b) {
-				nodeCrypto.randomFillSync(b);
-			},
-		};
-	}
-
-	if (!global.performance) {
-		global.performance = {
-			now() {
-				const [sec, nsec] = process.hrtime();
-				return sec * 1000 + nsec / 1000000;
-			},
-		};
-	}
-
-	if (!global.TextEncoder) {
-		global.TextEncoder = require("node:util").TextEncoder;
-	}
-
-	if (!global.TextDecoder) {
-		global.TextDecoder = require("node:util").TextDecoder;
-	}
-
-	// End of polyfills for common API.
-
-	const encoder = new TextEncoder("utf-8");
-	const decoder = new TextDecoder("utf-8");
-	let reinterpretBuf = new DataView(new ArrayBuffer(8));
-	var logLine = [];
-	const wasmExit = {}; // thrown to exit via proc_exit (not an error)
-
-	global.Go = class {
-		constructor() {
-			this._callbackTimeouts = new Map();
-			this._nextCallbackTimeoutID = 1;
-
-			const mem = () => {
-				// The buffer may change when requesting more memory.
-				return new DataView(this._inst.exports.memory.buffer);
-			}
-
-			const unboxValue = (v_ref) => {
-				reinterpretBuf.setBigInt64(0, v_ref, true);
-				const f = reinterpretBuf.getFloat64(0, true);
-				if (f === 0) {
-					return undefined;
-				}
-				if (!isNaN(f)) {
-					return f;
-				}
-
-				const id = v_ref & 0xffffffffn;
-				return this._values[id];
-			}
-
-
-			const loadValue = (addr) => {
-				let v_ref = mem().getBigUint64(addr, true);
-				return unboxValue(v_ref);
-			}
-
-			const boxValue = (v) => {
-				const nanHead = 0x7FF80000n;
-
-				if (typeof v === "number") {
-					if (isNaN(v)) {
-						return nanHead << 32n;
-					}
-					if (v === 0) {
-						return (nanHead << 32n) | 1n;
-					}
-					reinterpretBuf.setFloat64(0, v, true);
-					return reinterpretBuf.getBigInt64(0, true);
-				}
-
-				switch (v) {
-					case undefined:
-						return 0n;
-					case null:
-						return (nanHead << 32n) | 2n;
-					case true:
-						return (nanHead << 32n) | 3n;
-					case false:
-						return (nanHead << 32n) | 4n;
-				}
-
-				let id = this._ids.get(v);
-				if (id === undefined) {
-					id = this._idPool.pop();
-					if (id === undefined) {
-						id = BigInt(this._values.length);
-					}
-					this._values[id] = v;
-					this._goRefCounts[id] = 0;
-					this._ids.set(v, id);
-				}
-				this._goRefCounts[id]++;
-				let typeFlag = 1n;
-				switch (typeof v) {
-					case "string":
-						typeFlag = 2n;
-						break;
-					case "symbol":
-						typeFlag = 3n;
-						break;
-					case "function":
-						typeFlag = 4n;
-						break;
-				}
-				return id | ((nanHead | typeFlag) << 32n);
-			}
-
-			const storeValue = (addr, v) => {
-				let v_ref = boxValue(v);
-				mem().setBigUint64(addr, v_ref, true);
-			}
-
-			const loadSlice = (array, len, cap) => {
-				return new Uint8Array(this._inst.exports.memory.buffer, array, len);
-			}
-
-			const loadSliceOfValues = (array, len, cap) => {
-				const a = new Array(len);
-				for (let i = 0; i < len; i++) {
-					a[i] = loadValue(array + i * 8);
-				}
-				return a;
-			}
-
-			const loadString = (ptr, len) => {
-				return decoder.decode(new DataView(this._inst.exports.memory.buffer, ptr, len));
-			}
-
-			const timeOrigin = Date.now() - performance.now();
-			this.importObject = {
-				wasi_snapshot_preview1: {
-					// https://github.com/WebAssembly/WASI/blob/main/phases/snapshot/docs.md#fd_write
-					fd_write: function(fd, iovs_ptr, iovs_len, nwritten_ptr) {
-						let nwritten = 0;
-						if (fd == 1) {
-							for (let iovs_i=0; iovs_i<iovs_len;iovs_i++) {
-								let iov_ptr = iovs_ptr+iovs_i*8; // assuming wasm32
-								let ptr = mem().getUint32(iov_ptr + 0, true);
-								let len = mem().getUint32(iov_ptr + 4, true);
-								nwritten += len;
-								for (let i=0; i<len; i++) {
-									let c = mem().getUint8(ptr+i);
-									if (c == 13) { // CR
-										// ignore
-									} else if (c == 10) { // LF
-										// write line
-										let line = decoder.decode(new Uint8Array(logLine));
-										logLine = [];
-										console.log(line);
-									} else {
-										logLine.push(c);
-									}
-								}
-							}
-						} else {
-							console.error('invalid file descriptor:', fd);
-						}
-						mem().setUint32(nwritten_ptr, nwritten, true);
-						return 0;
-					},
-					fd_close: () => 0,      // dummy
-					fd_fdstat_get: () => 0, // dummy
-					fd_seek: () => 0,       // dummy
-					proc_exit: (code) => {
-						this.exited = true;
-						this.exitCode = code;
-						this._resolveExitPromise();
-						throw wasmExit;
-					},
-					random_get: (bufPtr, bufLen) => {
-						crypto.getRandomValues(loadSlice(bufPtr, bufLen));
-						return 0;
-					},
-				},
-				gojs: {
-					// func ticks() float64
-					"runtime.ticks": () => {
-						return timeOrigin + performance.now();
-					},
-
-					// func sleepTicks(timeout float64)
-					"runtime.sleepTicks": (timeout) => {
-						// Do not sleep, only reactivate scheduler after the given timeout.
-						setTimeout(() => {
-							if (this.exited) return;
-							try {
-								this._inst.exports.go_scheduler();
-							} catch (e) {
-								if (e !== wasmExit) throw e;
-							}
-						}, timeout);
-					},
-
-					// func finalizeRef(v ref)
-					"syscall/js.finalizeRef": (v_ref) => {
-						// Note: TinyGo does not support finalizers so this should never be
-						// called.
-						// console.error('syscall/js.finalizeRef not implemented');
-					},
-
-					// func stringVal(value string) ref
-					"syscall/js.stringVal": (value_ptr, value_len) => {
-						const s = loadString(value_ptr, value_len);
-						return boxValue(s);
-					},
-
-					// func valueGet(v ref, p string) ref
-					"syscall/js.valueGet": (v_ref, p_ptr, p_len) => {
-						let prop = loadString(p_ptr, p_len);
-						let v = unboxValue(v_ref);
-						let result = Reflect.get(v, prop);
-						return boxValue(result);
-					},
-
-					// func valueSet(v ref, p string, x ref)
-					"syscall/js.valueSet": (v_ref, p_ptr, p_len, x_ref) => {
-						const v = unboxValue(v_ref);
-						const p = loadString(p_ptr, p_len);
-						const x = unboxValue(x_ref);
-						Reflect.set(v, p, x);
-					},
-
-					// func valueDelete(v ref, p string)
-					"syscall/js.valueDelete": (v_ref, p_ptr, p_len) => {
-						const v = unboxValue(v_ref);
-						const p = loadString(p_ptr, p_len);
-						Reflect.deleteProperty(v, p);
-					},
-
-					// func valueIndex(v ref, i int) ref
-					"syscall/js.valueIndex": (v_ref, i) => {
-						return boxValue(Reflect.get(unboxValue(v_ref), i));
-					},
-
-					// valueSetIndex(v ref, i int, x ref)
-					"syscall/js.valueSetIndex": (v_ref, i, x_ref) => {
-						Reflect.set(unboxValue(v_ref), i, unboxValue(x_ref));
-					},
-
-					// func valueCall(v ref, m string, args []ref) (ref, bool)
-					"syscall/js.valueCall": (ret_addr, v_ref, m_ptr, m_len, args_ptr, args_len, args_cap) => {
-						const v = unboxValue(v_ref);
-						const name = loadString(m_ptr, m_len);
-						const args = loadSliceOfValues(args_ptr, args_len, args_cap);
-						try {
-							const m = Reflect.get(v, name);
-							storeValue(ret_addr, Reflect.apply(m, v, args));
-							mem().setUint8(ret_addr + 8, 1);
-						} catch (err) {
-							storeValue(ret_addr, err);
-							mem().setUint8(ret_addr + 8, 0);
-						}
-					},
-
-					// func valueInvoke(v ref, args []ref) (ref, bool)
-					"syscall/js.valueInvoke": (ret_addr, v_ref, args_ptr, args_len, args_cap) => {
-						try {
-							const v = unboxValue(v_ref);
-							const args = loadSliceOfValues(args_ptr, args_len, args_cap);
-							storeValue(ret_addr, Reflect.apply(v, undefined, args));
-							mem().setUint8(ret_addr + 8, 1);
-						} catch (err) {
-							storeValue(ret_addr, err);
-							mem().setUint8(ret_addr + 8, 0);
-						}
-					},
-
-					// func valueNew(v ref, args []ref) (ref, bool)
-					"syscall/js.valueNew": (ret_addr, v_ref, args_ptr, args_len, args_cap) => {
-						const v = unboxValue(v_ref);
-						const args = loadSliceOfValues(args_ptr, args_len, args_cap);
-						try {
-							storeValue(ret_addr, Reflect.construct(v, args));
-							mem().setUint8(ret_addr + 8, 1);
-						} catch (err) {
-							storeValue(ret_addr, err);
-							mem().setUint8(ret_addr+ 8, 0);
-						}
-					},
-
-					// func valueLength(v ref) int
-					"syscall/js.valueLength": (v_ref) => {
-						return unboxValue(v_ref).length;
-					},
-
-					// valuePrepareString(v ref) (ref, int)
-					"syscall/js.valuePrepareString": (ret_addr, v_ref) => {
-						const s = String(unboxValue(v_ref));
-						const str = encoder.encode(s);
-						storeValue(ret_addr, str);
-						mem().setInt32(ret_addr + 8, str.length, true);
-					},
-
-					// valueLoadString(v ref, b []byte)
-					"syscall/js.valueLoadString": (v_ref, slice_ptr, slice_len, slice_cap) => {
-						const str = unboxValue(v_ref);
-						loadSlice(slice_ptr, slice_len, slice_cap).set(str);
-					},
-
-					// func valueInstanceOf(v ref, t ref) bool
-					"syscall/js.valueInstanceOf": (v_ref, t_ref) => {
- 						return unboxValue(v_ref) instanceof unboxValue(t_ref);
-					},
-
-					// func copyBytesToGo(dst []byte, src ref) (int, bool)
-					"syscall/js.copyBytesToGo": (ret_addr, dest_addr, dest_len, dest_cap, src_ref) => {
-						let num_bytes_copied_addr = ret_addr;
-						let returned_status_addr = ret_addr + 4; // Address of returned boolean status variable
-
-						const dst = loadSlice(dest_addr, dest_len);
-						const src = unboxValue(src_ref);
-						if (!(src instanceof Uint8Array || src instanceof Uint8ClampedArray)) {
-							mem().setUint8(returned_status_addr, 0); // Return "not ok" status
-							return;
-						}
-						const toCopy = src.subarray(0, dst.length);
-						dst.set(toCopy);
-						mem().setUint32(num_bytes_copied_addr, toCopy.length, true);
-						mem().setUint8(returned_status_addr, 1); // Return "ok" status
-					},
-
-					// copyBytesToJS(dst ref, src []byte) (int, bool)
-					// Originally copied from upstream Go project, then modified:
-					//   https://github.com/golang/go/blob/3f995c3f3b43033013013e6c7ccc93a9b1411ca9/misc/wasm/wasm_exec.js#L404-L416
-					"syscall/js.copyBytesToJS": (ret_addr, dst_ref, src_addr, src_len, src_cap) => {
-						let num_bytes_copied_addr = ret_addr;
-						let returned_status_addr = ret_addr + 4; // Address of returned boolean status variable
-
-						const dst = unboxValue(dst_ref);
-						const src = loadSlice(src_addr, src_len);
-						if (!(dst instanceof Uint8Array || dst instanceof Uint8ClampedArray)) {
-							mem().setUint8(returned_status_addr, 0); // Return "not ok" status
-							return;
-						}
-						const toCopy = src.subarray(0, dst.length);
-						dst.set(toCopy);
-						mem().setUint32(num_bytes_copied_addr, toCopy.length, true);
-						mem().setUint8(returned_status_addr, 1); // Return "ok" status
-					},
-				}
-			};
-
-			// Go 1.20 uses 'env'. Go 1.21 uses 'gojs'.
-			// For compatibility, we use both as long as Go 1.20 is supported.
-			this.importObject.env = this.importObject.gojs;
-		}
-
-		async run(instance) {
-			this._inst = instance;
-			this._values = [ // JS values that Go currently has references to, indexed by reference id
-				NaN,
-				0,
-				null,
-				true,
-				false,
-				global,
-				this,
-			];
-			this._goRefCounts = []; // number of references that Go has to a JS value, indexed by reference id
-			this._ids = new Map();  // mapping from JS values to reference ids
-			this._idPool = [];      // unused ids that have been garbage collected
-			this.exited = false;    // whether the Go program has exited
-			this.exitCode = 0;
-
-			if (this._inst.exports._start) {
-				let exitPromise = new Promise((resolve, reject) => {
-					this._resolveExitPromise = resolve;
-				});
-
-				// Run program, but catch the wasmExit exception that's thrown
-				// to return back here.
-				try {
-					this._inst.exports._start();
-				} catch (e) {
-					if (e !== wasmExit) throw e;
-				}
-
-				await exitPromise;
-				return this.exitCode;
-			} else {
-				this._inst.exports._initialize();
-			}
-		}
-
-		_resume() {
-			if (this.exited) {
-				throw new Error("Go program has already exited");
-			}
-			try {
-				this._inst.exports.resume();
-			} catch (e) {
-				if (e !== wasmExit) throw e;
-			}
-			if (this.exited) {
-				this._resolveExitPromise();
-			}
-		}
-
-		_makeFuncWrapper(id) {
-			const go = this;
-			return function () {
-				const event = { id: id, this: this, args: arguments };
-				go._pendingEvent = event;
-				go._resume();
-				return event.result;
-			};
-		}
-	}
-
-	if (
-		global.require &&
-		global.require.main === module &&
-		global.process &&
-		global.process.versions &&
-		!global.process.versions.electron
-	) {
-		if (process.argv.length != 3) {
-			console.error("usage: go_js_wasm_exec [wasm binary] [arguments]");
-			process.exit(1);
-		}
-
-		const go = new Go();
-		WebAssembly.instantiate(fs.readFileSync(process.argv[2]), go.importObject).then(async (result) => {
-			let exitCode = await go.run(result.instance);
-			process.exit(exitCode);
-		}).catch((err) => {
-			console.error(err);
-			process.exit(1);
-		});
-	}
-})();
diff --git a/web/global/scripts/script.js b/web/global/scripts/script.js
@@ -1,35 +1,23 @@
+// COLLAPSIBLE //
 
-//// COLLAPSIBLE LOGIC
+_collapsibleToggles = document.getElementsByClassName("_collapsible-toggle_")
+for (let i = 0; i < _collapsibleToggles.length; i++) {
+    _collapsibleToggles[i].addEventListener("click", function () {
+        _collapsibleToggles[i].classList.toggle("--open")
+        _collapsibleContent = _collapsibleToggles[i].nextElementSibling
 
-let collapsables = document.getElementsByClassName("collapsible_");
-for (var i = 0; i < collapsables.length; i++) {
-
-    let children = collapsables[i].children;
-    let header = children[0];
-    let content = children[1];
-
-    // Runtime event
-    header.addEventListener("click", function () {
-        let _node = this.closest(".collapsible_");
-        let _header = _node.children[0];
-        let _content = _node.children[1];
-
-        let _heightMod = _content.scrollHeight;
-        if (_header.classList.toggle("active")) {
-            _content.style.height = _content.scrollHeight + "px";
+        if (_collapsibleToggles[i].classList.contains("--open")) {
+            _collapsibleContent.style.height = _collapsibleContent.scrollHeight + "px"
         } else {
-            _content.style.height = "0px";
-            _heightMod = -(_heightMod);
+            _collapsibleContent.style.height = "0px"
         }
+    })
+}
 
-        let _parentCollapsible = _node.parentElement.closest(".collapsible_");
-        while (_parentCollapsible) {
-            let _parentContent = _parentCollapsible.children[1];
-            let _contentHeight = parseFloat(_parentContent.style.height);
+// SWAP THEME //
 
-           _parentContent.style.height = _contentHeight + _heightMod + "px";
-
-            _parentCollapsible = _parentCollapsible.parentElement.closest(".collapsible_");
-        }
-    });
+document.getElementById("swap-theme-bttn").onclick = (event) => {
+    document.body.style.colorScheme = 
+        (document.body.style.colorScheme == "light" ||
+        document.body.style.colorScheme == "") ? "dark" : "light"
 }
 \ No newline at end of file
diff --git a/web/global/styles/styles.css b/web/global/styles/styles.css
@@ -2,6 +2,16 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
 
+
+/*
+    STYLE GUIDE ::
+    class: __attribute - ( __ ) signifies global attribute
+    class: _attribute_ - ( _*_ ) signifies local attribute
+    class: --attribute - ( -- ) signifies modifier
+
+    variable: --fmd_attribute-id__opt-property--opt-modifier -- standard variable format
+*/
+
 @layer base {
 
     *,
@@ -11,153 +21,139 @@
     }
 
     :root {
-        --miki_gold: 1.618;
-
-        --miki_header__height: 5rem;
-        --miki_header__font-size: calc(var(--miki_header__height) * .33);
-
-        --miki_page__max-width: 900px;
-
-        --miki_padding--half: calc(var(--miki_padding) * 0.5);
-        --miki_padding: 0.5rem;
-        --miki_padding--double: calc(var(--miki_padding) * 2.0);
-
-        --miki_margin--half: calc(var(--miki_margin) * 0.5);
-        --miki_margin: 0.5rem;
-        --miki_margin--double: calc(var(--miki_margin) * 2);
-
-        --miki_border__width--half: calc(var(--miki_border__width) / 2);
-        --miki_border__width: 0.25rem;
-        --miki_border__width--double: 0.5rem;
-        --miki_border__radius: 1.0rem;
-        --miki_border__radius--half: calc(var(--miki_border__radius) * 0.5);
-
-        --color__ff: #fdfdfd;
-        --color__f0: #dfe6e9;
-        --color__f0f1: color-mix(in srgb, var(--color__f0) 50%, var(--color__f1));
-        --color__f1: #b2bec3;
-        --color__f1b1: color-mix(in srgb, var(--color__f1) 50%, var(--color__b1));
-        --color__b1: #636e72;
-        --color__b1b0: color-mix(in srgb, var(--color__b1) 50%, var(--color__b0));
-        --color__b0a: color-mix(in srgb, var(--color__b1) 10%, var(--color__b0));
-        --color__b0: #2d3436;
-        --color__bf: #010101;
-
-        --color__theme: light-dark(var(--color__ff), var(--color__bf));
-
-        --color__font-light: light-dark(#fdfdfd, #010101);
-        --color__font-dark: light-dark(#010101, #fdfdfd);
-
-        --color__fg-light: light-dark(#636e72, #dfe6e9);
-        --color__fg-dark: light-dark(#2d3436, #b2bec3);
-
-        --color__bg-light: light-dark(#dfe6e9, #636e72);
-        --color__bg-dark: light-dark(#b2bec3, #2d3436);
-
-        --color__pink-light: light-dark(#fd79a8, #e84393);
-        --color__pink-dark: light-dark(#e84393, #fd79a8);
-        --color__red-light: light-dark(#ff7675, #d63031);
-        --color__red-dark: light-dark(#d63031, #ff7675);
-        --color__orange-light: light-dark(#fab1a0, #e17055);
-        --color__orange-dark: light-dark(#e17055, #fab1a0);
-        --color__yellow-light: light-dark(#ffeaa7, #fdcb6e);
-        --color__yellow-dark: light-dark(#fdcb6e, #ffeaa7);
-        --color__mint-light: light-dark(#55efc4, #00b894);
-        --color__mint-dark: light-dark(#00b894, #55efc4);
-        --color__aqua-light: light-dark(#81ecec, #00cec9);
-        --color__aqua-dark: light-dark(#00cec9, #81ecec);
-        --color__blue-light: light-dark(#74b9ff, #0984e3);
-        --color__blue-dark: light-dark(#0984e3, #74b9ff);
-        --color__purple-light: light-dark(#a29bfe, #6c5ce7);
-        --color__purple-dark: light-dark(#6c5ce7, #a29bfe);
-    }
-
-    @scope(header) {
-        :scope {
-            position: fixed;
-            width: 100%;
-            height: var(--miki_header__height);
-            z-index: 1;
-            top: 0;
-            left: 0;
 
-            display: grid;
-            justify-content: center;
+        /* CONTANTS */
 
-            color: var(--color__ff);
-            background-color: var(--color__bf);
-        }
+        --fmd_gold: 1.618;
 
-        >._content {
-            width: min(100vw, var(--miki_page__max-width)); 
-            padding: var(--miki_padding--half);
+        /* LAYOUT */
 
-            display: inline-grid;
-            grid-auto-flow: column;
-            justify-content: space-between;
-            align-items: center;
+        --fmd_page__max-width: 900px;
+        --fmd-page__header-height: 3rem;
 
-        }
+        --fmd_padding--half: calc(var(--fmd_padding) * 0.5);
+        --fmd_padding: 0.5rem;
+        --fmd_padding--double: calc(var(--fmd_padding) * 2.0);
 
-        a {
-            color: var(--color__bf);
-            text-decoration: none;
-        }
+        --fmd_margin--half: calc(var(--fmd_margin) * 0.5);
+        --fmd_margin: 0.5rem;
+        --fmd_margin--double: calc(var(--fmd_margin) * 2);
 
-        #title {
-            position: absolute;
-            justify-self: anchor-center;
-            font-size: var(--miki_header__font-size);
-        }
+        --fmd_border__width--half: calc(var(--fmd_border__width) / 2);
+        --fmd_border__width: 0.25rem;
+        --fmd_border__width--double: 0.5rem;
+        --fmd_border__radius: 1.0rem;
+        --fmd_border__radius--half: calc(var(--fmd_border__radius) * 0.5);
 
-        .collapsible_ {
-            >._button {
-                padding: var(--miki_padding);
-                margin: 0;
-            }
+        /* COLORS */
 
-            >._content {
-                position: fixed;
-                width: 100vw;
-                z-index: 1;
-                top: calc(var(--miki_header__height));
-                left: 0;
+        --fmd_color__theme: light-dark(#fdfdfd, #010101);
+        --fmd_color__theme-inverse: light-dark(#010101, #fdfdfd);
 
-                display: grid;
-                justify-content: center;
-                text-align: center;
+        /* Light color theme */
 
-                color: var(--color__bf);
-                background-color: var(--color__ff);
+        --fmd_color__font-l: light-dark(#fdfdfd, #010101);
+        --fmd_color__bg-l: light-dark(#b2bec3, #2d3436);
+        --fmd_color__fg-l: light-dark(#dfe6e9, #636e72);
 
-                >* {
-                    padding: var(--miki_padding);
-                }
+        --fmd_color__pink-l: light-dark(#fd79a8, #e84393);
+        --fmd_color__red-l: light-dark(#ff7675, #d63031);
+        --fmd_color__orange-l: light-dark(#fab1a0, #e17055);
+        --fmd_color__yellow-l: light-dark(#ffeaa7, #fdcb6e);
+        --fmd_color__mint-l: light-dark(#55efc4, #00b894);
+        --fmd_color__aqua-l: light-dark(#81ecec, #00cec9);
+        --fmd_color__blue-l: light-dark(#74b9ff, #0984e3);
+        --fmd_color__purple-l: light-dark(#a29bfe, #6c5ce7);
 
-                @media screen and (min-width: 900px) {
-                    width: calc(100vw / 7);
-                    left: inherit;
-                }
-            }
-        }
+        /* Dark color theme */
+
+        --fmd_color__font-d: light-dark(#010101, #fdfdfd);
+        --fmd_color__bg-d: light-dark(#2d3436, #b2bec3);
+        --fmd_color__fg-d: light-dark(#636e72, #dfe6e9);
+
+        --fmd_color__pink-d: light-dark(#e84393, #fd79a8);
+        --fmd_color__red-d: light-dark(#d63031, #ff7675);
+        --fmd_color__orange-d: light-dark(#e17055, #fab1a0);
+        --fmd_color__yellow-d: light-dark(#fdcb6e, #ffeaa7);
+        --fmd_color__mint-d: light-dark(#00b894, #55efc4);
+        --fmd_color__aqua-d: light-dark(#00cec9, #81ecec);
+        --fmd_color__blue-d: light-dark(#0984e3, #74b9ff);
+        --fmd_color__purple-d: light-dark(#6c5ce7, #a29bfe);
+    }
+
+    a {
+        color: var(--fmd_color__blue-d);
+        text-decoration: none;
     }
 
     body {
-        margin: calc(var(--miki_header__height) + var(--miki_padding)) var(--miki_margin--double) var(--miki_margin--double);
+        position: relative;
+        margin: var(--fmd_margin);
 
-        color-scheme: dark;
-        color: var(--color__font-dark);
-        background-color: var(--color__bg-light);
+        color-scheme: light;
+        color: var(--fmd_color__font-d);
+        background-color: var(--fmd_color__bg-l);
 
         font-family: 'Comfortaa';
 
-        >._content {
-            display: grid;
+        display: grid;
+        grid-template-columns: 1fr;
 
-            @media screen and (min-width: 900px) {
-                grid-template-columns: auto max(var(--miki_page__max-width)) auto;
+        @media screen and (min-width: 900px) {
+            grid-template-columns: auto max(var(--fmd_page__max-width)) auto;
+        }
+    }
+
+    button {
+        padding: var(--fmd_padding);
+
+        display: grid;
+        justify-items: center;
+        align-items: center;
+
+        font-family: 'Comfortaa';
+
+        background-color: var(--fmd_color__theme);
+        border: 1px solid var(--fmd_color__fg-d);
+        border-radius: var(--fmd_border__radius--half);
+
+        cursor: pointer;
+
+        transition: linear 0.15s;
+
+        @media screen and (min-width: 900px) {
+            &:hover {
+                color: var(--fmd_color__theme);
+                background-color: var(--fmd_color__theme-inverse);
+            }
+        }
+
+        @media screen and (max-width: 900px) {
+            &:active {
+                transition: none;
+                color: var(--fmd_color__theme);
+                background-color: var(--fmd_color__theme-inverse);
             }
         }
+
+    }
+
+    code {
+        padding: calc(var(--fmd_padding--half) / 2) var(--fmd_padding);
+        margin: 0;
+
+        display: inline-grid;
+        justify-items: center;
+        align-items: center;
+
+        background-color: var(--fmd_color__bg-l);
+        border-radius: var(--fmd_border__radius--half);
+
+        font-style: italic;
+
+        >* {
+            display: inline-grid;
+        }
     }
 
     h1,
@@ -166,205 +162,280 @@
     h4,
     h5,
     h6 {
-        padding: var(--miki_padding--half) var(--miki_padding) var(--miki_padding--half) var(--miki_padding);
-        margin: var(--miki_margin--double) var(--miki_margin) var(--miki_margin--double) var(--miki_margin);
+        padding: var(--fmd_padding--half) var(--fmd_padding) var(--fmd_padding--half) var(--fmd_padding);
+        margin: var(--fmd_margin--double) var(--fmd_margin) var(--fmd_margin--half) var(--fmd_margin);
 
         display: grid;
         justify-items: center;
-        border-bottom: 2px solid var(--color__fg-light);
+        border-bottom: 1px solid var(--fmd_color__fg-d);
 
         font-weight: bold;
     }
 
-    img {
-        width: 75%;
-        padding: var(--miki_padding);
-        margin: var(--miki_margin);
+    header {
+        z-index: 10;
+        width: 100%;
+        top: 0;
 
-        justify-self: center;
+        display: grid;
+        overflow: visible;
+
+        button {
+            height: 2.5rem;
+            border-radius: 0;
+        }
     }
 
     hr {
-        border-bottom: 1px solid var(--color__fg-light);
+        width: 100%;
+        border: none;
+        border-top: 1px solid var(--fmd_color__theme-inverse);
     }
-}
 
-@layer primative {
+    img {
+        width: 75%;
+        padding: var(--fmd_padding);
+        margin: var(--fmd_margin);
 
-    @scope (.collapsible_) {
-        :scope {
-            display: grid;
-            grid-template-rows: max-content max-content;
-            justify-items: center;
-        }
+        justify-self: center;
+    }
+}
 
-        /* Collapsible 'header'*/
-        > :first-child {
-            width: 100%;
-            margin: var(--miki_margin--half);
-            padding: var(--miki_padding--half);
+@layer primative {
 
-            cursor: pointer;
+    /* LAYOUT  */
 
-            &::before {
-                color: var(--color__blue-dark);
-                content: "+\a0";
-            }
+    .__view {
+        position: relative;
 
-            &.active::before {
-                color: var(--color__yellow-dark);
-                content: "-\a0";
-            }
+        >:not(_panel_) {
+            width: 100%;
+            height: 100%;
+            margin: 0;
         }
 
-        /* Collapsible container */
-        > :nth-child(2) {
-            /* width: 98%; */
-            height: 0;
-            overflow: hidden;
-            transition: 0.33s;
+        >._panel_ {
+            position: absolute;
+            top: 0;
+            left: 0;
         }
+    }
 
-
+    ._content_ {
+        padding: var(--fmd_padding--half);
     }
 
-    .__container>* {
-        width: 100%;
-        height: fit-content;
-        padding: var(--miki_padding);
-        margin: 0;
+    .__border {
+        border: 1px solid var(--fmd_color__fg-d);
     }
 
-    .__container_bg-1 {
-        padding: var(--miki_padding);
-        background-color: var(--color__bg-dark);
-        border: 3px solid var(--color__fg-light);
-        border-radius: var(--miki_border__radius--half);
+    .__collapsible {
+        position: relative;
 
-        &>* {
-            padding: var(--miki_padding);
-            background-color: var(--color__bg-light);
-            border: 2px solid var(--color__fg-light);
-            border-radius: var(--miki_border__radius--half);
-        }
-    }
+        display: grid;
+        justify-items: center;
 
-    .__container_collapse {
-        padding: var(--miki_padding);
-        border-bottom-left-radius: var(--miki_border__radius);
-        border-bottom-right-radius: var(--miki_border__radius);
-        background-color: var(--color__bg-dark);
+        >._collapsible-toggle_ {
+            display: inline-block;
+            width: 100%;
+            padding: var(--fmd_padding--half);
 
-        &>* {
-            border: 2px solid var(--color__fg-light);
-            border-radius: var(--miki_border__radius--half);
-            background-color: var(--color__bg-light);
-        }
-    }
+            font-weight: bold;
 
-    .__container_collapse--small {
-        padding: var(--miki_padding--half);
-        border-bottom-left-radius: var(--miki_border__radius);
-        border-bottom-right-radius: var(--miki_border__radius);
-        background-color: var(--color__bg-dark);
+            &::before {
+                color: var(--fmd_color__blue-d);
+                content: '+\a0';
+            }
 
-        &>* {
-            margin-top: var(--miki_margin);
-            margin-bottom: var(--miki_margin);
-            border: 2px solid var(--color__fg-light);
-            border-radius: var(--miki_border__radius--half);
-            background-color: var(--color__bg-light);
+            &.--open::before {
+                color: var(--fmd_color__red-d);
+                content: '-\a0';
+            }
         }
-    }
 
-    ul.__list_delim {
-        padding: var(--miki_padding);
-        margin: 0;
+        >._collapsible-content-view_ {
+            position: absolute;
+            top: calc(100%);
+            width: 98%;
+            height: 0;
 
-        > :first-child {
-            border-top: none;
-        }
+            overflow: hidden;
 
-        .li_header {
-            padding-bottom: var(--miki_padding);
-            font-weight: bold;
-        }
+            background-color: var(--fmd_color__fg-l);
+
+            transition: linear 0.15s;
+
+            >* {
+                padding: var(--fmd_padding--half);
+                background-color: var(--fmd_color__fg-l);
+                border: 1px solid var(--fmd_color__fg-d);
+                border-top: none;
+            }
 
-        >li {
-            padding: var(--miki_padding--double) 0 var(--miki_padding--double);
-            border-top: 2px solid var(--color__fg-light);
-            list-style-type: none;
         }
     }
 
-    .__table_2-col>* {
-        display: grid;
-        grid-template-columns: 1fr auto;
+    /* Column container */
+    .__mcol {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        gap: var(--fmd_padding);
     }
 
-    .__table_2-col--lrg>* {
+    .__mlist {
         display: grid;
-        grid-template-columns: minmax(100px, .25fr) 1fr;
+        gap: var(--fmd_padding--half);
     }
 
+    /* FONTS */
+
+    /* Font descriptor */
     .__descriptor {
         margin-top: 0.25rem;
         font-size: 0.75em;
     }
-
-    .__mcol {
-        display: flex;
-        flex-direction: row;
-    }
-
 }
 
 @layer modifier {
 
+    /* LAYOUT */
+
+    /* Center element */
+    .--center-on-body {
+        @media screen and (min-width: 900px) {
+            grid-column: 2;
+        }
+    }
+
+    /* Hide element */
     .--hide {
         display: none;
     }
 
-    /*//////// BACKGROUND ////////*/
+    /* COLOR */
 
+    /* Clear background */
     .--clear_bg {
         background-color: inherit;
         border: none;
     }
 
-    /*//////// BORDER ////////*/
-
-    .--circle_border {
-        border-radius: 100%;
+    .--bg_theme {
+        background-color: var(--fmd_color__theme);
     }
 
-    /*//////// FONT ////////*/
+    /* FONT */
 
+    /* Center text */
     .--center_font {
         text-align: center;
     }
 
-    .--size-half_font {
+    .--set-size_half-font {
         font-size: .5rem;
     }
 
-    .--size-3-4_font {
+    .--set-size_3-4-font {
         font-size: .75rem;
     }
 
-    .--size-4-3_font {
+    .--set-size_5-4-font {
         font-size: 1.25rem;
     }
 
-    .--size-double_font {
+    .--set-size_6-4-font {
+        font-size: 1.5rem;
+    }
+
+    .--set-size_double-font {
         font-size: 2rem;
     }
 
+    .--set-size_font-to-screen {
+        font-size: max(min(1.25rem), 3vmin);
+    }
+
     .--bold_font {
         font-weight: bold;
     }
 
+    /* UX */
+
     .--clickable {
         cursor: pointer;
     }
+
+    .--transition {
+        transition: linear 0.25s;
+    }
 }
+
+@layer entity {
+
+    #header-title {
+        display: grid;
+    }
+
+    @scope(#fmd-view) {
+        & {
+            height: max(50vh);
+            margin-top: var(--fmd_margin);
+            position: relative;
+            border: 1px solid var(--fmd_color__fg-d);
+            overflow: hidden;
+        }
+
+        >#text-editor-panel>._content_ {
+            z-index: 0;
+            width: 100%;
+            height: 100%;
+            background-color: var(--fmd_color__fg-l);
+            resize: none;
+            overflow-y: auto;
+            outline: none;
+            border: none;
+        }
+
+        >#html-output-panel {
+            position: absolute;
+            top: 0;
+            left: 100%;
+
+            background-color: var(--fmd_color__fg-l);
+
+            overflow-y: auto;
+
+            &.--open {
+                left: 0;
+            }
+        }
+
+        >#guide-text-panel {
+            position: absolute;
+            top: 0;
+            left: -100%;
+
+            background-color: var(--fmd_color__fg-l);
+
+            overflow-y: auto;
+
+            &.--open {
+                left: 0;
+            }
+        }
+
+        >#error-output-panel {
+            position: absolute;
+            height: 50%;
+            top: 100%;
+
+            color: var(--fmd_color__font-l);
+            background-color: var(--fmd_color__bg-d);
+
+            &.--open {
+                top: 50%;
+            }
+        }
+    }
+}
+\ No newline at end of file
diff --git a/web/global/templates/header.tmpl.html b/web/global/templates/header.tmpl.html
@@ -1,25 +1,40 @@
 {{define "header"}}
-<header>
-    <section class="_content">
+<header class="--center-on-body">
 
-        <div id="left" class="collapsible_">
-            <div class="_button">MENU</div>
-            <div class="_content">
-                <a href="https://wtenison.com"><b>PORTAL</b></a>
-                <a href="/home"><b>HOME</b></a>
-                <div><s>Search</s></div>
+    <div id="header-title" class="_content_"><span id="site-name"><i>miki.wtenison</i> :</span>
+        <span class="--set-size_font-to-screen">{{.}}</span>
+    </div>
+
+    <nav id="header-nav-view" class="__view __mcol">
+
+        <div id="main-menu-set" class="__collapsible">
+            <button type="button" class="_collapsible-toggle_">MENU</button>
+            <div class="_collapsible-content-view_">
+                <div class="__mlist">
+                    <a class="_content_ __border --bg_theme" href="https://miki.wtenison.com/home">Home</a>
+                    <a class="_content_ __border --bg_theme" href="https://wtenison.com">Portal
+                        <span class="__descriptor --set-size_half-font">(<b>WTENISON.COM</b>)
+                        </span>
+                    </a>
+                    <div class="_content_ __border --bg_theme">
+                        <s><b>SEARCH</b></s>
+                    </div>
+                </div>
             </div>
         </div>
 
-        <div id="title">{{.}}</div>
-
-        <div id="right" class="collapsible_">
-            <div class="_button">OPTIONS</div>
-            <div class="_content">
-                <p>COMING SOON</p>
+        <div id="options-set" class="__collapsible">
+            <button type="button" class="_collapsible-toggle_">OPTIONS</button>
+            <div class="_collapsible-content-view_">
+                <div class="__mlist">
+                    <button type="button" id="swap-theme-bttn"><b>SWAP THEME</b></button>
+                </div>
             </div>
         </div>
+        </div>
+    </nav>
+
+    <hr>
 
-    </section>
 </header>
 {{end}}
 \ No newline at end of file
diff --git a/web/home/index.html b/web/home/index.html
@@ -2,46 +2,31 @@
 <html>
 
 <head>
-    <title>Miki/Home</title>
+    <title>Miki / Home</title>
     {{template "meta"}}
     {{template "fmd"}}
-    <link rel="stylesheet" type="text/css" href="/web/home/styles.css">
-    <script src="/web/home/script.js" defer></script>
 </head>
 
 <body>
 
-    {{template "header" "Home"}}
+    {{template "header" "HOME"}}
 
-    <section class="_content">
+    <aside id="left-sidebar-view">
 
-        <section id="_left"></section>
+    </aside>
 
-        <section id="home_">
+    <main class="--center-on-body">
 
-            <div>
-                {{.FileText}}
-            </div>
+        <div id="home-page-view" class="__view">
+            <div class="_content_"></div>
+        </div>
 
-            <div id="fmd_status">
-                <div id="_left">
-                    <div id="text_status"></div>
-                </div>
-                <div id="_right">
-                    <div id="swap_bttn" class="--hide">Preview ></div>
-                </div>
-            </div>
-            <div id="fmd_view" class="__mcol __container">
-                <textarea id="text_view"></textarea>
-                <div id="render_view"></div>
-            </div>
+    </main>
 
-        </section>
+    <aside id="right-sidebar-view">
 
+    </aside>
 
-        <section id="_right"></section>
-
-    </section>
 </body>
 
 </html>
 \ No newline at end of file
diff --git a/web/home/styles.css b/web/home/styles.css
@@ -1,50 +0,0 @@
-#fmd_status {
-    width: 100%;
-    padding: var(--miki_padding);
-
-    display: inline-grid;
-    grid-auto-flow: column;
-    justify-content: space-between;
-    align-items: center;
-
-    color: var(--color__font-light);
-    background-color: var(--color__fg-dark);
-
-    #swap_bttn {
-        padding: var(--miki_padding--half);
-
-        background-color: var(--color__fg-light);
-        border-radius: var(--miki_border__radius--half);
-    }
-    
-    #text_status{
-        padding: var(--miki_padding--half);
-        border-radius: var(--miki_border__radius--half);
-    }
-}
-
-#fmd_view {
-
-    background-color: var(--color__bg-dark);
-    border: 2px solid var(--color__fg-dark);
-
-    overflow: hidden;
-
-    >#text_view {
-        height: 50vh;
-        resize: none;
-        outline: none;
-
-        background: color-mix(in srgb, var(--color__blue-dark) 50%, var(--color__font-light));
-        border: none;
-
-        transition: linear 0.25s;
-    }
-
-    >#render_view {
-        width: 100%;
-        height: 100%;
-
-        transition: linear 0.25s;
-    }
-}
-\ No newline at end of file
diff --git a/web/subject/index.html b/web/subject/index.html
@@ -2,29 +2,31 @@
 <html>
 
 <head>
-
-    <title>Miki/Edit/{{.FileName}}</title>
+    <title>Miki / Subject</title>
     {{template "meta"}}
-
+    {{template "fmd"}}
 </head>
 
 <body>
 
     {{template "header" .FileName}}
 
-    <section class="_content">
+    <aside id="left-sidebar-view">
+
+    </aside>
 
-        <section id="left"></section>
+    <main class="--center-on-body">
 
-        <section id="subject_">
+        <div id="home-page-view" class="__view">
+            <div class="_content_">{{.FileText}}</div>
+        </div>
 
-            {{.FileText}}
+    </main>
 
-        </section>
+    <aside id="right-sidebar-view">
 
-        <section id="right"></section>
+    </aside>
 
-    </section>
 </body>
 
 </html>
 \ No newline at end of file