Add a Git cheat sheet (#2049)

Someone [on Mastodon](https://mastodon.online/@blami/115140353050908406)
suggested it would be nice to have a cheat sheet on the Git website, so
I thought I'd put together a prototype to see if it's of interest,
perhaps for a future "Learn" section of the site. You can see it in
action here: [Git cheat
sheet](https://jvns.github.io/git-scm.com/cheat-sheet)

There are definitely lots of Git cheat sheets out there already (for
example [from
github](https://training.github.com/downloads/github-git-cheat-sheet.pdf)
and [from
ndpsoftware](http://ndpsoftware.com/git-cheatsheet.html#loc=remote_repo;)),
but it feels like it would be nice to have one that's lower tech and not
GitHub branded.

The content and styling both definitely need work -- right now it's
basically an import of [this cheat
sheet](https://wizardzines.com/git-cheat-sheet.pdf), which has some of
my personal Git idiosyncracies in it (like insisting on using
`HEAD^^^^^^` instead of `HEAD~5` 🙈).

I got a bit carried away writing handwritten SVG Git graphs, and I'm not
sure they'll display in all browsers as is. Here's what they're meant to
look like. I think I'll figure out a better solution than the
handwritten SVGs, maybe graphviz.

<img width="300" alt="image"
src="https://github.com/user-attachments/assets/d2f5175d-2a7f-4fbd-8ce1-8f300bf5d49f"
/>

Author: dscho

assets/sass/application.scss

@@ -27,6 +27,7 @@ $baseurl: "{{ .Site.BaseURL }}{{ if (and (ne .Site.BaseURL "/") (ne .Site.BaseUR
 @import 'book2';
 @import 'lists';
 @import 'about';
+@import 'cheat-sheet';
 @import 'dark-mode';
 @import 'git-turns-20';
 

assets/sass/cheat-sheet.scss

@@ -0,0 +1,112 @@
+@import "variables";
+
+.cheat-sheet {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+  .item {
+    background: var(--bg-color);
+    padding: 10px;
+    border-radius: 10px;
+    border: 1px solid var(--callout-color);
+    display: flex;
+    font-size: 1rem;
+    flex-direction: column;
+    gap: 5px;
+
+    p {
+      font-size: 1rem;
+      margin: 0 8px;
+    }
+
+    h3 {
+      color: var(--font-color);
+      line-height: 1em;
+      font-size: 1.1rem;
+      margin-bottom: 8px;
+      font-weight: 500;
+    }
+
+    label {
+      display: block;
+      margin-top: 10px;
+    }
+
+    code {
+      background: var(--callout-color);
+      color: var(--font-color);
+      border-radius: 3px;
+      padding: 4px 8px;
+      font-family: Courier, monospace;
+      margin-bottom: 0;
+    }
+
+    h3 code {
+      padding: 0;
+      background: transparent;
+    }
+
+    .or {
+      font-weight: 700;
+      font-size: 0.8em;
+      display: block;
+      margin-left: 30px;
+      font-family: sans-serif;
+    }
+  }
+
+  section {
+    margin-bottom: 20px;
+    display: grid;
+    gap: 10px;
+    grid-template-columns: 1fr 1fr;
+
+    @media (max-width: $mobile-m) {
+      & {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+
+    h2 {
+      grid-column: 1/3;
+
+      margin-top: 0;
+      font-size: 1.2rem;
+      font-weight: 700;
+      line-height: 1.2;
+      color: var(--orange);
+    }
+  }
+
+  .commit-reference {
+    background: var(--callout-color);
+    border-left: 4px solid var(--orange);
+    display: block;
+    padding: 10px;
+    border-radius: 10px;
+
+    .intro {
+      margin: 16px 0;
+    }
+
+    dl {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: 8px 16px;
+      margin: 0;
+
+      dt {
+        &::before {
+          content: "★ ";
+          font-size: 18px;
+          color: #666;
+        }
+      }
+
+      dd {
+        font-family: monospace;
+        padding: 4px 8px;
+      }
+    }
+  }
+}

assets/sass/dark-mode.css

@@ -152,6 +152,10 @@
             #l10n-versions-dropdown footer a {
                 color: #6969dd;
             }
+
+            .cheat-sheet img {
+                filter: invert(60%);
+            }
         }
     }