feat: vite for builds

src/assets/css/components/forms.css

@@ -0,0 +1,93 @@
+::placeholder {
+  color: var(--text-color);
+  opacity: .5;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="search"],
+textarea {
+  font: var(--font-weight-base) var(--font-size-base) var(--font-mono);
+  line-height: var(--line-height-base);
+  color: var(--text-color);
+  background-color: var(--background-color);
+  border: var(--border-default);
+  border-radius: var(--border-radius-slight);
+  padding: var(--spacing-sm);
+  width: 100%;
+}
+
+form:has(+ *),
+label:has(input):has(+ *) input,
+input[type="text"]:has(+ *),
+input[type="email"]:has(+ *),
+input[type="search"]:has(+ *),
+textarea:has(+ *) {
+  margin-bottom: var(--spacing-base);
+}
+
+select {
+  color: var(--text-color);
+  cursor: pointer;
+  border: var(--border-gray);
+  border-radius: var(--border-radius-slight);
+  background-color: var(--background-color);
+  padding: var(--spacing-xs) var(--spacing-sm);
+}
+
+fieldset {
+  border: var(--border-gray);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+
+  @media screen and (min-width: 768px) {
+    flex-direction: row;
+    gap: var(--spacing-lg);
+  }
+
+  & label {
+    display: flex;
+    align-items: center;
+    gap: var(--sizing-xs);
+  }
+
+  & input[type="checkbox"] {
+    margin: 0;
+  }
+
+  & legend {
+    color: var(--text-color-inverted);
+    background-color: var(--accent-color);
+    padding: var(--spacing-xs);
+    border-radius: var(--border-radius-slight);
+  }
+}
+
+.search__form {
+  margin-top: 0;
+
+  & .search__form--input::-webkit-search-cancel-button {
+    cursor: pointer;
+  }
+}
+
+.search__results {
+  margin: 0 0 var(--spacing-base);
+  padding: 0;
+  list-style: none;
+  display: none;
+
+  & li {
+    margin: var(--spacing-sm) 0;
+
+    &:not(:last-child) {
+      margin-bottom: var(--sizing-base);
+      border-bottom: var(--border-gray);
+    }
+
+    & a {
+      text-decoration: none;
+    }
+  }
+}