new update!

README.md

@@ -1,35 +1,22 @@
 <p align="center"><img width="80%" src="public/logo-example1.png" /></p>
 
 <a href="https://skuqre.github.io/nikke-font-generator"><h2 align="center">Barely Accurate NIKKE Font Generator</h2></a>
+<p align="center">
+<a href="https://skuqre.github.io/nikke-font-generator/usage/">Usage Guidelines</a> -
+<a href="https://skuqre.github.io/nikke-font-generator/credits/">Site Credits</a> - 
+<a href="https://skuqre.github.io/nikke-font-generator/update-log/">Site Updates</a>
+</p>
 
 It's a barely accurate NIKKE Font generator!
 
 With a canvas and a dream, you can create anything you'd like!
 
----
-
 ## Building
-You know the drill.
-
 ```
 npm i
 npm run dev
 ```
 
-The "meat" of the site is in `src\scripts`. `.astro` files are HTML files I *really* need to rewrite to be better. Styles are a mess.
-
-## Usage
-
-[Usage guidelines](https://skuqre.github.io/nikke-font-generator/usage/)
-
-It's been moved to the site for ease-of-access.
-
-## Credits
-
-[Up-to-date site credits](https://skuqre.github.io/nikke-font-generator/credits/)
-
-Example art:
-- Top left ([onedoo on PIXIV](https://www.pixiv.net/en/users/3474388)): <https://www.pixiv.net/en/artworks/97149647>
-- Bottom right ([lunacle on PIXIV](https://www.pixiv.net/en/users/15657814)): <https://www.pixiv.net/en/artworks/102024795>
+The "meat" of the site is in `src\scripts`. `.astro` files are HTML files. I've rewrote the UI and it's much more consistent now!
 
 Made with [Astro](https://astro.build).

package.json

@@ -15,6 +15,7 @@
     "buffer": "^6.0.3",
     "fuzzysort": "^2.0.4",
     "gifencoder": "^2.0.1",
-    "h264-mp4-encoder": "^1.0.12"
+    "h264-mp4-encoder": "^1.0.12",
+    "marked": "^14.0.0"
   }
 }

src/components/BlablaDisplay.astro

@@ -8,11 +8,32 @@
         width: 100%;
         margin: 0;
         touch-action: none;
+
+        position: sticky;
+        z-index: 1000;
+
+        background-color: rgba(0, 0, 0, 0);
+        transition: background-color 0.2s ease-in-out;
     }
 
     canvas#blabla-canvas {
         max-width: 90%;
         max-height: 540px;
         margin: auto;
+
+        transition: max-height 0.2s ease-in-out;
     }
-</style>
+</style>
+
+<script>
+    document.addEventListener("scroll", () => {
+        if (location.href.includes("#start-tutorial")) return;
+        if (window.scrollY > document.getElementById("blabla-canvas").parentElement.getBoundingClientRect().y) {
+            document.getElementById("blabla-canvas").style.maxHeight = window.innerHeight * 0.4 + "px";
+            document.getElementById("blabla-canvas").parentElement.classList.add("blurred-bg");
+        } else {
+            document.getElementById("blabla-canvas").style.maxHeight = "540px";
+            document.getElementById("blabla-canvas").parentElement.classList.remove("blurred-bg");
+        }
+    });
+</script>