Contact page

assets/css/page/contact.css

@@ -0,0 +1,15 @@
+main h2 {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+main p {
+  margin-bottom: 3rem;
+}
+
+@media only screen and (max-width: 1024px) {
+  main h2 {
+    font-size: 1.75rem;
+  }
+}
+

assets/css/partials/contact-form.css

@@ -0,0 +1,39 @@
+:root {
+  --input-light-background: #f3f3f3;
+  --input-dark-background: #2d2d2d;
+  --button-light-background: #131212;
+  --button-dark-background: #353535;
+}
+
+input,
+textarea,
+button {
+  border: none;
+  border-radius: 0.5625rem;
+  color: var(--text);
+}
+
+button {
+  padding: 1rem 2.8rem;
+  background-color: var(--button-background);
+  color: var(--white);
+}
+
+input,
+textarea {
+  padding: 1.2rem 1.9rem;
+  background-color: var(--input-background);
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: center;
+  row-gap: 1.7rem;
+}
+
+form input,
+form textarea {
+  width: 100%;
+}

assets/js/baseof.js

@@ -37,6 +37,18 @@ function loadTheme() {
       ? 'var(--nav-light-background)'
       : 'var(--nav-dark-background)'
   );
+  root.style.setProperty(
+    '--input-background',
+    theme === 'light'
+      ? 'var(--input-light-background)'
+      : 'var(--input-dark-background)'
+  );
+  root.style.setProperty(
+    '--button-background',
+    theme === 'light'
+      ? 'var(--button-light-background)'
+      : 'var(--button-dark-background)'
+  );
   root.style.setProperty(
     '--footer-background',
     theme === 'light'