Switch to Nuxt

assets/styles/components.scss

@@ -0,0 +1,46 @@
+// Here lies 𝖄𝖊 𝕸𝖆𝖗𝖌𝖎𝖓 𝕸𝖆𝖌𝖎𝖈
+// which allows to have just one wrapper div
+.iconified-input {
+  align-items: center;
+  display: inline-flex;
+  flex-direction: row-reverse;
+
+  input {
+    padding-left: 2.5rem;
+
+    &:hover {
+      &+svg {
+        color: var(--color-grey-6);
+      }
+    }
+
+    &:focus {
+      &+svg {
+        color: var(--color-text);
+      }
+    }
+  }
+
+  svg {
+    color: var(--color-grey-5);
+    margin-right: -2rem;
+  }
+}
+
+.badge {
+  border-radius: 1rem;
+  font-size: 0.8rem;
+  font-weight: bold;
+  letter-spacing: 0.02rem;
+  padding: 0.25rem 0.5rem;
+
+  &.red {
+    background-color: #fed7d7;
+    color: #9b2c2c;
+  }
+
+  &.green {
+    background-color: #c6f6d5;
+    color: #276749;
+  }
+}

assets/styles/global.scss

@@ -0,0 +1,92 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
+
+:root {
+  /**
+    * Colors
+   */
+  --color-text: #1a202c;
+  --color-bg: #ffffff;
+
+  --color-text-inverted: var(--color-bg);
+  --color-bg-inverted: var(--color-text);
+
+  --color-brand: #4d9227;
+
+  --color-grey-0: #f7fafc;
+  --color-grey-1: #edf2f7;
+  --color-grey-2: #e2e8f0;
+  --color-grey-3: #cbd5e0;
+  --color-grey-4: #a0aec0;
+  --color-grey-5: #718096;
+  --color-grey-6: #4a5568;
+  --color-grey-7: #2d3748;
+
+  /**
+    * Sizes
+   */
+  --size-rounded-sm: 0.25rem;
+  --size-rounded-md: 0.5rem;
+  --size-rounded-lg: 1rem;
+
+  /**
+    * Defaults
+   */
+  font-size: 18px;
+}
+
+body {
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen,
+    Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+svg {
+  height: 24px;
+  width: 24px;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+h2 {
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+}
+
+h3 {
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+input {
+  background: var(--color-bg);
+  border: 2px solid var(--color-grey-3);
+  border-radius: var(--size-rounded-sm);
+  color: var(--color-grey-9);
+  font-size: 1rem;
+  padding: 0.5rem 1rem;
+  width: 100%;
+
+  &:focus,
+  &:hover {
+    border-color: var(--color-grey-4);
+    color: var(--color-text);
+
+    &::placeholder {
+      color: var(--color-grey-7);
+    }
+  }
+
+  &::placeholder {
+    color: var(--color-grey-6);
+  }
+}
+
+@import "~assets/styles/layout.scss";
+@import "~assets/styles/utils.scss";
+@import "~assets/styles/components.scss";

assets/styles/layout.scss

@@ -0,0 +1,9 @@
+.columns {
+  display: flex;
+
+  @for $i from 1 through 4 {
+    .column-grow-#{$i} {
+      flex-grow: $i;
+    }
+  }
+}

assets/styles/utils.scss

@@ -0,0 +1,3 @@
+.rounded-md {
+  border-radius: 0.5rem;
+}