added some styles for the demo pages!
of course, this is barely any modification. and the only visible change is that div.contents (aka the table of contents) is not there and the page isnβt centered vertically but thatβs because i couldnβt figure out what i should doβspontaneously thinking of the design while implementing it isnβt ideal for efficiencyβand also i was modifying the layout in base.njk. hereβs what i added:
<main>
{{ content | safe }}
<div id="screen_container">
<div style="white-space: pre; font: 14px monospace; line-height: 14px"></div>
<canvas style="display: none; width: 100%; height: 100%"></canvas>
</div>
<script src="./libv86.js"></script>
<script>
var emulator = new V86({
screen_container: document.querySelector("#screen_container"),
bios: {
url: "./seabios.bin",
},
vga_bios: {
url: "./vgabios.bin",
},
{{disk}}: {
url: "{{ url }}",
},
wasm_path: "./v86.wasm",
autostart: true,
});
document.querySelector("#screen_container").addEventListener("click", () => {
document.querySelector("#screen_container").requestPointerLock();
});
</script>
</main>
{% else %}
<!-- other stuff... -->
remember, i use eleventy to manage all my pages. also, it may seem strange that the h1 is white in light mode, but iβll fix that tomorrow. i have to go sleep now (11:00 PM in GMT +3:00)
tl;dr
just modified some styles and changed layout for demo pages only, took a while because i didnβt plan layout beforehand.