More content, none of which related to Hindi. And css

src/content/docs/grammar/intro.mdx

@@ -1,15 +0,0 @@
----
-title: Grammar Introduction
-sidebar:
-  order: 1
----
-
-Yo yo.
-
-## Here's an h2.
-
-Stuff.
-
-### Here's an h3.
-
-More shit.

src/content/docs/how-i-built-this/roadmap.mdx

@@ -1,5 +1,6 @@
 ---
 title: "Roadmap"
+next: false
 ---
 
 Ultimately, creating a knowledge base of the vocab I've learned and writing down the grammar rules in my own voice is _kind of_ cool, but the reason I was motivated to do "something with Hindi and programming" in the first place was because Anki wasn't quite dynamic enough for the flashcard practicing I wanted to do.

src/content/docs/index.mdx

@@ -6,7 +6,7 @@ head:
   - tag: title
     content: Hindki | हिंदकी
 hero:
-  tagline: Welcome to Hindki!
+  tagline: A Hindi learning resource for English speakers, by <a href="/about-me">Ryan Pandya</a>.
   actions:
     - text: Grammar Reference
       link: /grammar
@@ -25,14 +25,18 @@ hero:
 
 ## हिंदकी के बारे में / _About Hindki_
 
-Hindki is a collection of my personal notes on learning Hindi, and an evolving knowledge base that (maybe, hopefully) I can one day use as the backend of an AI-powered language tutor. If it helps you too, बढ़िया!
+_Hindki_ is a collection of my personal notes on learning Hindi, and an evolving knowledge base that (maybe, hopefully) I can one day use as the backend of an AI-powered language tutor. If it helps you too, बढ़िया!
 
 It includes a dictionary, grammar notes, and other resources I've found helpful in my studies.
 
-As I learn more Hindi, I'll convert this and the rest of the interface to Hindi as well.
+As I learn more Hindi, I'll convert this and the rest of the interface to Hindi as well. Maybe. We'll see.
 
 ### इसका नाम क्यों "हिंदकी"? / _Why the name 'Hindki'?_
 
 The name "Hindki" is a play on the words "Hindi" and "Anki", because I was initially building this as a personal flashcard system similar to [Anki](https://apps.ankiweb.net/), but for Hindi. It also kind of works as a Hindi adjective meaning "related to Hindi" (in fact, [this word exists in Persian](https://translate.google.com/?sl=fa&tl=en&text=%D9%87%DB%8C%D9%86%D8%AF%D9%82%DB%8C%20&op=translate)), and it is also a sort of "wiki", since it's a knowledge base. Finally, if you needed yet another pun, it's the "key" to my Hindi education. All very satisfying.
 
 As for whether it's actually a good name, I'll let you be the judge.
+
+### यह कैसा बना गया था? / _How was this made?_
+
+While I doubt many people are curious, I wrote it down (if for no other reason than to help myself next time I want to make a similar site). [Here it is](/how-i-built-this).

src/content/docs/vocabulary/index.mdx

@@ -1,5 +1,6 @@
 ---
 title: Vocabulary
+prev: false
 ---
 
 This is the dictionary I've cultivated with all the words I've learned in Hindi.

src/pages/edit/index.astro

@@ -1,9 +1,29 @@
 ---
-import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
+import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro"
+import YAMLEditor from "astro-code-editor/YAMLEditor.astro";
+const mySchema = "/schemas/my-schema.yaml";
 
+import fs from "fs";
+
+const initialValue = fs.readFileSync("src/vocab_list.yaml", "utf8");
 
 ---
 
-<StarlightPage frontmatter={{ title: "Edit Hindki" }}>
-  <h2>Edit Hindki</h2>
-</StarlightPage>
+<StarlightPage frontmatter={{ title: 'Edit Vocabulary YAML', tableOfContents: false, prev: false }}>
+    <YAMLEditor
+      yaml-editor
+      schemaUrlRef={mySchema}
+      value={initialValue}
+      extractMarkdownFrontmatter
+    />
+</StarlightPage>
+
+<style>
+    :global(div.sl-container) {
+        margin-inline: 0 !important;
+    }
+
+    :global([yaml-editor]) {
+        width: calc(100vw - var(--sl-sidebar-width) - 2 * var(--sl-content-pad-x));
+    }
+</style>

src/styles/custom.css

@@ -156,9 +156,10 @@
   --sl-color-bg-sidebar: #16140f;
   --sl-color-bg-inline-code: #2a2620;
 
-  --sl-color-accent: #336699;
-  --sl-color-accent-low: #336699;
-  --sl-color-accent-high: #336699;
+  --sl-color-accent: #5ba3c4; /* Warmer blue-teal for dark theme */
+  --sl-color-accent-low: #5ba3c4;
+  --sl-color-accent-high: #6bb4d5;
+  --sl-color-text-invert: #fff; /* Light text on dark background */
 }
 
 /* =================================================================
@@ -233,19 +234,49 @@ h6,
   top: -0.1em;
 }
 
-/* .word-examples > p {
-  font-size: 0.9em;
-} */
-
-.word-entry a {
+.sl-markdown-content a,
+.tagline a {
   text-decoration: none;
   color: var(--sl-color-accent);
 }
+.sl-markdown-content a:hover,
+.tagline a:hover {
+  text-decoration: underline;
+}
+
+.tagline {
+  max-width: max-content;
+}
 
 mark {
   background-color: rgba(255, 255, 0, 0.2);
 }
 
+/* Override the exact Starlight rule that's causing issues */
+.sl-markdown-content
+  [yaml-editor]
+  :not(a, strong, em, del, span, input, code, br)
+  + :not(a, strong, em, del, span, input, code, br, :where(.not-content *)) {
+  margin-top: 0 !important;
+}
+
+/* Also target if the YAMLEditor itself is within sl-markdown-content */
+.sl-markdown-content
+  :not(a, strong, em, del, span, input, code, br)
+  + [yaml-editor]:not(
+    a,
+    strong,
+    em,
+    del,
+    span,
+    input,
+    code,
+    br,
+    :where(.not-content *)
+  ) {
+  margin-top: 0 !important;
+}
+
 /* =================================================================
    LANGUAGE-SPECIFIC STYLES
    ================================================================= */