Add a Git cheat sheet

Author: jvns

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,117 @@
+@import "variables";
+
+.cheat-sheet {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+  .item {
+    background: #f0efe7;
+    padding: 10px;
+    border-radius: 10px;
+    border: 1px solid #e0ddd0;
+    display: flex;
+    font-size: 1rem;
+    flex-direction: column;
+    gap: 5px;
+
+    p {
+      font-size: 1rem;
+      margin: 0 8px;
+    }
+
+    svg {
+      height: auto;
+      width: 100%;
+    }
+
+    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: #e8e6db;
+      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-color: 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;
+      }
+    }
+  }
+}