Kontaktformular

static/css/custom.css

@@ -0,0 +1,98 @@
+/* Contact Form Styles - Using Blowfish GitHub Color Scheme */
+.contact-form-container {
+  width: 60vw;
+  box-sizing: border-box;
+}
+
+.contact-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.form-row-two-col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-input,
+.form-textarea {
+  padding: 0.625rem 0.875rem;
+  font-size: 0.9375rem;
+  border: 1px solid rgb(var(--color-neutral-300));
+  border-radius: 0.375rem;
+  background-color: rgb(var(--color-neutral));
+  color: rgb(var(--color-neutral-800));
+  transition: all 0.2s;
+  font-family: inherit;
+}
+
+.form-input:focus,
+.form-textarea:focus {
+  outline: none;
+  border-color: rgb(var(--color-primary-500));
+  box-shadow: 0 0 0 3px rgba(var(--color-primary-500), 0.1);
+}
+
+.form-input::placeholder,
+.form-textarea::placeholder {
+  color: rgb(var(--color-neutral-400));
+}
+
+.form-textarea {
+  min-height: 180px;
+  resize: vertical;
+}
+
+.submit-button {
+  padding: 0.625rem 1.25rem;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: rgb(var(--color-neutral));
+  background-color: rgb(var(--color-neutral-800));
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  width: 100%;
+  margin-top: 0.25rem;
+}
+
+.submit-button:hover {
+  background-color: rgb(var(--color-neutral-700));
+}
+
+/* Dark mode support */
+.dark .form-input,
+.dark .form-textarea {
+  background-color: rgb(var(--color-neutral-800));
+  color: rgb(var(--color-neutral-100));
+  border-color: rgb(var(--color-neutral-600));
+}
+
+.dark .form-input:focus,
+.dark .form-textarea:focus {
+  border-color: rgb(var(--color-primary-400));
+  box-shadow: 0 0 0 3px rgba(var(--color-primary-400), 0.1);
+}
+
+.dark .submit-button {
+  background-color: rgb(var(--color-primary-600));
+}
+
+.dark .submit-button:hover {
+  background-color: rgb(var(--color-primary-700));
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .form-row-two-col {
+    grid-template-columns: 1fr;
+  }
+}