add ablative and fix header links issue

src/App.css

@@ -87,6 +87,14 @@
 
 }
 
+a.heading-link::before {
+    content: '';
+    display: block;
+    height: 75px;
+    margin-top: -75px;
+    visibility: hidden;
+}
+
 @media (max-width: 820px) {
     .main-row {
         height: calc(100vh - 62px);

src/content/index.ts

@@ -107,6 +107,8 @@ import * as inflectionIntro from "./inflection/inflection-intro.mdx";
 import * as inflectionPatterns from "./inflection/inflection-patterns.mdx";
 // @ts-ignore
 import * as vocative from "./inflection/vocative.mdx";
+// @ts-ignore
+import * as ablative from "./inflection/ablative.mdx";
 
 // @ts-ignore
 import * as sandwiches from "./sandwiches/sandwiches.mdx";
@@ -197,6 +199,10 @@ export const contentTree: (ChapterSection | ChaptersSection)[] =
         {
           "import": vocative,
           "slug": "vocative"
+        },
+        {
+          "import": ablative,
+          "slug": "ablative"
         }
       ]
     },

src/content/inflection/ablative.mdx

@@ -0,0 +1,112 @@
+---
+title: Ablative / Mayonnaise
+---
+
+import Link from "../../components/Link";
+import {
+  defaultTextOptions as opts,
+  InlinePs,
+  Examples,
+} from "@lingdocs/ps-react";
+import mayoImage from "../../images/mayonnaise-a.jpg";
+import psmd from "../../lib/psmd";
+
+In the earlier chapters we learned that words inside <Link to="/sandwiches/sandwiches">sandwiches</Link> inflect. There is also a certain type of sandwiches that adds a little something extra to the inflection. Linguists would call this the "ablative" case, but we will call this **mayonnaise**.
+
+<div className="text-center mb-3">
+  <img
+    alt="picture of mayonnaise with 'a' ending beside it"
+    src={mayoImage}
+    style={{ maxWidth: "250px" }}
+  />
+</div>
+
+**The sandwiches meaning "from" add mayonnaise**.
+
+<Examples opts={opts}>
+  {[
+    { p: "له ...", f: "la ...", e: "from / than" },
+    { p: "له ... نه", f: "la ... na", e: "from / than" },
+    { p: "له ... څخه", f: "la ... tsúkha", e: "from / than" },
+  ]}
+</Examples>
+
+When we put <Link to="/inflection/inflection-patterns/#1-basic">Pattern #1</Link> masculine, singular words in these sandwiches, we add a little <InlinePs opts={opts} ps={{ p: "ـه", f: "-a" }} /> on the end of these words. Anything else just inflects normally.
+
+For example, the word <InlinePs opts={opts} ps={{ p: "کور", f: "kor", e: "house - n. m." }} /> is a <Link to="/inflection/inflection-patterns/#1-basic">Pattern #1</Link> masculine, singular noun. Normally if we put it in a sandwich, it wouldn't change, but in these sandwiches, it gets a bit of mayonnaise by adding <InlinePs opts={opts} ps={{ p: "ـه", f: "-a" }} /> on the end.
+
+<Examples opts={opts}>
+  {psmd([
+    {
+      p: "زه **له کوره** ووتم",
+      f: "zu **la kóra** óowatum",
+      e: "I went out from the house",
+    },
+    {
+      p: "دا ځای **له کوره څخه** لرې دی",
+      f: "daa dzaay **la kóra tsukha** lúre day",
+      e: "That place is far from home",
+    },
+  ])}
+</Examples>
+
+But when the noun is plural, it just inflects normally.
+
+<Examples opts={opts}>
+  {psmd([
+    {
+      p: "مونږ **له کورونو** ووتو",
+      f: "moonG **la koróono** óowatoo",
+      e: "We went out from the houses",
+    },
+    {
+      p: "دا ځای **له کورونو څخه** لرې دی",
+      f: "daa dzaay **la koróono tsukha** lúre day",
+      e: "That place is far from the houses",
+    },
+  ])}
+</Examples>
+
+Other words like <InlinePs opts={opts} ps={{ p: "کوټه", f: "koTá", e: "room - n. f." }} /> that would inflect, also inflect normally. Mayonnaise only gets added to <Link to="/inflection/inflection-patterns/#1-basic">Pattern #1</Link> masculine, singular words.
+
+<Examples opts={opts}>
+  {psmd([
+    {
+      p: "زه **له کوټې** ووتم",
+      f: "zu **la koTé** óowatum",
+      e: "I went out from the room",
+    },
+    {
+      p: "دا ځای **له کوټې څخه** لرې دی",
+      f: "daa dzaay **la kóTe tsukha** lúre day",
+      e: "That place is far from the room",
+    },
+  ])}
+</Examples>
+
+For the sandwich with just <InlinePs opts={opts} ps={{ p: "له", f: "la" }} /> on the front, mayonnaise is _required_. It is _optional_ for sandwiches with an ending part.
+
+<Examples opts={opts}>
+  {[
+    {
+      p: "له ...",
+      f: "la ...",
+      e: "from / than",
+      sub: <strong>Required</strong>,
+    },
+    {
+      p: "له ... نه",
+      f: "la ... na",
+      e: "from / than",
+      sub: <strong>Optional</strong>,
+    },
+    {
+      p: "له ... څخه",
+      f: "la ... tsúkha",
+      e: "from / than",
+      sub: <strong>Optional</strong>,
+    },
+  ]}
+</Examples>
+
+... more soon. 🚧

src/content/inflection/inflection-intro.mdx

@@ -5,6 +5,7 @@ title: Intro to Inflection
 import { defaultTextOptions as opts, InlinePs } from "@lingdocs/ps-react";
 import Table from "../../components/Table";
 import InlineInflectionButton from "../../components/InlineInflectionButton";
+import Link from "../../components/Link";
 import catInflectionGif from "../../images/cat-inflection.gif";
 import VideoPlayer from "../../components/VideoPlayer";
 
@@ -31,7 +32,7 @@ In this chapter we will explain **why** inflection happens (in what situations w
 
 ## 3 reasons to inflect:
 
-There are 3 reasons to inflect a word:
+There are 3 basic reasons to inflect a word:
 
 1. It's plural
 2. It's in a sandwich (adpositional phrase)
@@ -39,7 +40,9 @@ There are 3 reasons to inflect a word:
 
 For any of these three reasons, you do the same thing to the word: inflect it!
 
-If we think of a word as a little button <InlineInflectionButton />, then we can think of inflection as pressing down the button <InlineInflectionButton inflection={1} /> and modifying the word slightly.
+_We could call this the **basic inflection**. There are a couple of other special cases of inflection (<Link to="/inflection/vocative">vocative</Link> and <Link to="/inflection/ablative">ablative</Link>), but we will look at those later._
+
+If we think of a word as a little button <InlineInflectionButton />, then we can think of this **basic inflection** as pressing down the button <InlineInflectionButton inflection={1} /> and modifying the word slightly.
 
 <div className="text-center mb-3">
   <img