feat: add new installation guide, move to docs/

docs/style.css

@@ -0,0 +1,63 @@
+html {
+  scroll-behavior: smooth;
+}
+
+#js-producthunt {
+  margin-top: 1rem;
+}
+
+#installation header > h3 {
+  margin: 1rem 2.5rem 1rem 0;
+}
+/* Make the ✔ / ❌ Emoji appear next to the button */
+#installation header button {
+  position: relative;
+  margin-left: auto;
+  overflow: visible;
+}
+#installation header button span {
+  position: absolute;
+  left: -2rem;
+  display: inline-block;
+  transform: scale(1.3);
+}
+/* Fixed layout so columns don't jump when content changes */
+#installation table {
+  table-layout: fixed;
+}
+#installation table th {
+  border: none;
+  vertical-align: top;
+  width: 35%;
+}
+
+/* Used for (Links / ProductHunt) and (Installation / Copy-Button) rows */
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* Use proper Emoji instead of plain Unicode chars */
+.emoji {
+  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', system-ui, -apple-system,
+    BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
+    Helvetica Neue, sans-serif;
+}
+
+/* For the bounce transitions of code snippet and copy success Emoji */
+.v-enter,
+.v-leave-to {
+  transform: scale(0);
+}
+.v-enter-active,
+.v-leave-active {
+  transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+[v-cloak] > * {
+  display: none;
+}
+[v-cloak]::before {
+  content: 'Version picker is loading...';
+}