next-mdx-remote v4 (#737)

components/Footer/Footer.module.css

@@ -0,0 +1,83 @@
+.footer {
+  width: 100%;
+  padding: 1.25em 1.5em;
+  border-top: 1px solid var(--kinda-light);
+  color: var(--medium-dark);
+}
+
+.footer a {
+  color: var(--medium-dark);
+  background: none;
+  padding-bottom: 0;
+}
+
+.row {
+  display: flex;
+  width: 100%;
+  max-width: 865px;
+  margin: 0 auto;
+  justify-content: space-between;
+  font-size: 0.85em;
+  line-height: 2.3;
+}
+
+.view_source {
+  padding-bottom: 2px !important;
+  border-bottom: 1px solid;
+  border-color: var(--light);
+}
+
+.view_source:hover {
+  border-color: var(--kinda-light);
+}
+
+.beat {
+  display: inline-block;
+  animation: beat 10s infinite; /* 6 bpm, call 911 if you see this please. */
+  animation-delay: 7.5s; /* offset from wave animation */
+  will-change: transform;
+}
+
+@media screen and (max-width: 768px) {
+  .footer {
+    padding: 1em 1.25em 0;
+
+    /*
+     * Safari iOS menu bar reappears below 44px:
+     * https://www.eventbrite.com/engineering/mobile-safari-why/
+     */
+    padding-bottom: 45px !important;
+
+    /* Allows you to scroll below the viewport; default value is visible */
+    overflow-y: scroll;
+  }
+
+  /* stack columns on left instead of flexboxing across */
+  .row {
+    font-size: 0.8em;
+    display: block;
+  }
+}
+
+@keyframes beat {
+  0% {
+    transform: scale(1);
+  }
+  2% {
+    transform: scale(1.25);
+  }
+  4% {
+    transform: scale(1);
+  }
+  6% {
+    transform: scale(1.2);
+  }
+  8% {
+    transform: scale(1);
+  }
+
+  /* pause for ~9 out of 10 seconds */
+  100% {
+    transform: scale(1);
+  }
+}