Can now add scoped rcss files

assets/main.rml

@@ -7,8 +7,8 @@
     <div id="navbar">
         <h1>RmlUi App Template</h1>
         <div class="nav-buttons">
+            <button id="nav-home">Home</button>
             <button id="nav-test">Test Page</button>
-            <button id="nav-about">About</button>
             <button id="nav-lua-test" onclick="NavigateTo('lua-test')">Lua Test</button>
         </div>
     </div>

assets/pages/about.rml

@@ -1,4 +0,0 @@
-<div id="page-root" class="page">
-    <h1>About</h1>
-    <p>This is a static page</p>
-</div>

assets/pages/home.rml

@@ -0,0 +1,14 @@
+<div id="page-root" class="page">
+    <h1>Home</h1>
+    <p>This is an RmlUi template project with some nice built in features such as:</p>
+    <ul>
+        <li>- Lua and SVG plugins enabled</li>
+        <li>- A shell + page loading system with scoped stylesheets and lua functionality</li>
+        <li>- Hot reload when pressing F5</li>
+        <li>- Basic application state management</li>
+        <li>- A basic stylesheet for common elements</li>
+        <li>- Easy custom controls system</li>
+        <li>- Optional Raylib context</li>
+        <li>- Nix flake for easy development/building</li>
+    </ul>
+</div>

assets/pages/lua-test.rml

@@ -1,8 +1,10 @@
 <div id="page-root">
     <h1>Lua test page</h1>
-    <p>This button uses <code>NavigateTo('about')</code> lua code instead of a registered C++ event</p>
+    <p>This button uses <code>NavigateTo('about')</code> lua code instead of being harcoded in a C++ PageBase class:</p>
     <button onclick="NavigateTo('about')">Go to About Page</button>
 
+    <p>If you have a .lua file with the same name as the page in the pages directory, it will be loaded at runtime so you can add functionality to a page like this:</p>
+
     <p>This button calls <code>LuaTest.Test()</code> from the scoped `lua-test.lua` file</p>
     <button onclick="LuaTest.Test(event)">Click me!</button>
     <p id="lua-counter"></p>

assets/pages/test-page.rcss

@@ -0,0 +1,3 @@
+#page-root h1 {
+    color: red;
+}

assets/pages/test-page.rml

@@ -0,0 +1,7 @@
+<div id="page-root" data-model="test-page" class="page">
+    <h1>Test page</h1>
+    <p>{{greeting}}</p>
+    <button id="test-btn">Button clicked: {{counter}} times</button>
+
+    <p>If you have a .rcss file with the same name as the page in the pages directory, it will be loaded at runtime so you can add custom styling to a page, which is why the header is red on this page only.</p>
+</div>

assets/pages/testPage.rml

@@ -1,5 +0,0 @@
-<div id="page-root" data-model="testPage" class="page">
-    <h1>Test page</h1>
-    <p>{{greeting}}</p>
-    <button id="test-btn">Button clicked: {{counter}} times</button>
-</div>