CSS modules ➡️ Stitches 🧵 (#799)

components/Heading/Heading.module.css

@@ -1,48 +0,0 @@
-.heading {
-  margin-top: 1em;
-  margin-bottom: 0.5em;
-  line-height: 1.5;
-
-  /**
-   * offset (approximately) with sticky header so jumped-to content isn't hiding behind it.
-   * note: use rem so it isn't based on the heading's font size.
-   */
-  scroll-margin-top: 5.5rem;
-}
-
-/* special bottom border for <h2>s */
-.h2 {
-  padding-bottom: 0.25em;
-  border-bottom: 1px solid var(--kinda-light);
-}
-
-/* sub-heading anchor styles */
-.anchor {
-  margin: 0 0.25em;
-  padding: 0 0.25em;
-  color: var(--medium-light);
-  font-weight: 300;
-  text-decoration: none;
-  opacity: 0; /* overridden on hover below (except on small screens) */
-}
-.anchor::before {
-  content: "\0023"; /* pound sign `#`, done here to keep content DOM cleaner */
-}
-.anchor:hover {
-  color: var(--link);
-}
-/* make anchor link show up on hover over its corresponding heading */
-.heading:hover .anchor {
-  opacity: 1;
-}
-
-@media screen and (max-width: 768px) {
-  .heading {
-    scroll-margin-top: 6.5rem;
-  }
-
-  /* don't require hover to show anchor link on small (likely touch) screens */
-  .anchor {
-    opacity: 1;
-  }
-}