would you look at that, it was backdrop-filter: blur(5px)! for some reason it made it black asf. not sure why but ok. also, i simply don’t get it but whatever. anyways, will commit soon so you can see the style’s true glory!

HELP SASS IS FIGHTING ME OVER VARIABLES 😭😭😭 CHATGPT FAILED ME SO HARD :heavysob:

so many issues!
did some ux improvements, don’t feel like listing them here rn.

no devlogmaxxing!
here’s what changed:

• i got windows 1.01, windows 2.03, windows 3.0 and windows 3.1 working in the browser. 95 will just not work because of protected mode limitations or sum shit. i’ll have to either switch to qemu compiled for wasm (it exists lmfao) or make a custom version of windows 95 that doesn’t use protected mode calls or anything
• i embedded system 1.0-7.0, mac os 8.0 and mac os 9 in the website too. it was surprisingly easy
• i made an index page for the demos (WIP)

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.

so apparently the real problem was a bad structure and it automatically worked when i pasted the structure from the example page. so it went from:
<div class="screen"><canvas></canvas></div>
to:

  <div style="white-space: pre; font: 14px monospace; line-height: 14px"></div>
  <canvas style="display: none; width: 100%; height: 100%"></canvas>
</div>

welp, that wasn’t nice. looks like i’ll make a template.html and point the V86 README point to it. also, it’s running now!

40th devlog!

i keep doing other stuff for some reason!

here’s what changed:

• there’s now an improvement to the contents sidebar where subheadings are indented to clearly indicate that they are second-level headings (see screenshot)
• i made the text in aside.tree (the thing with the links to all the pages) white

not much of course, but making detailed devlogs like this feels good :yay:

wtf?

so i’ve started with what i promised–themes! atm i’m just trying to finish up this dark mode.

do y’all think this is good ui? almost done with the redesign!

save me

now srsly, is this fine? cuz i dont think it is. also i dont think ive actually refactored anything but whatever, i added sass variables.

w chatgpt it told me how to fix that clipping problem! i wasnt gonna figure it out myself

getting somwhere… follow for updates :)

help i think i have to rewrite the styling from scratch

lotta styling. also removed all the details tags and changed all the summary tags to h2 tags. i also worked on this quick links thing.

help i cant even remember what i did pls follow to save me

started revamping the ui. i had a really good idea last night. i want to do something like the mdn docs! once its finished, you will see :). so far:

• i figured out why the js i wrote to get the inner height of the browser window wasn’t applying, it was because it only applied whenever the browser would resize (how did i not catch that?).
• i’ve added max-width: 70ch; to the main element
• i’m switching to a mobile-first stylesheet so that i don’t need a bunch of rules just to set display: none;
  it’s gonna take a while. pls follow and star my repo and project : )

so my plan was just to modify the pagefind ui styling so that it doesn’t go off the damn phone screen and become a minor constituent of the air and i decided i’d do some homepage improvements too, and now… i think the screenshot tells it all

Just added a blur behind the OS logos lol. It took like 5 minutes but the time logged is 5^2 because I couldn’t figure out why tf my overlay styles weren’t working. It was because I was using > instead of <space>. The difference is that <space> means anywhere within an element, and > means a direct descendant of the element. Rookie mistake on my part I thought the Eleventy watch server was tripping lmfao : ).

nearly 10h! (???)
i don’t know why 10h but i’ll take it! i’ve begun finally implementing SCSS on my website. my files aren’t linked to it yet because it’s not complete and i’m planning to do that soon. meanwhile, during the gap between Summer or Making and joining Flavortown:

• i implemented a unified eleventy template for ALL my website files
• i also added a convenient table management system for my release history tables that uses JSON to generate a table. i’m thinking about going back though because it’s super unoptimized. like, using the JSON to build a table and then pasting the output into the file.
• i’ve changed the landing page a little
• did i mention a search bar?
  go check out everything on the website!