From a6f30a8985d62bd3cfa4a41277ee56c1ce241e13 Mon Sep 17 00:00:00 2001 From: midblep Date: Mon, 5 Jul 2021 22:57:57 +0200 Subject: [PATCH] trying out netlify forms with contact --- components/buttons.tsx | 2 +- components/elements/smallstyledbutton.tsx | 3 + components/elements/styledbutton.tsx | 3 + components/menu.tsx | 2 +- pages/about.tsx | 2 +- pages/contact.tsx | 73 +++++++++++++++++++++++ styles/Contact.module.css | 0 styles/globals.css | 27 +++++++++ 8 files changed, 109 insertions(+), 3 deletions(-) create mode 100644 pages/contact.tsx create mode 100644 styles/Contact.module.css diff --git a/components/buttons.tsx b/components/buttons.tsx index 09c90d7..46aae4b 100644 --- a/components/buttons.tsx +++ b/components/buttons.tsx @@ -7,7 +7,7 @@ export default function Footer() {

Learn more

About - Contact + Contact Twitter GitLab Discord diff --git a/components/elements/smallstyledbutton.tsx b/components/elements/smallstyledbutton.tsx index 8834c51..4313823 100644 --- a/components/elements/smallstyledbutton.tsx +++ b/components/elements/smallstyledbutton.tsx @@ -14,6 +14,9 @@ export default function StyledButton(props: any) { font-size: 1em; border-radius: 8px; transition-duration: 0.2s; + gap: var(--padding-sm); + color: unset; + text-decoration: unset; } a:hover { background-color: var(--background-color-dark); diff --git a/components/elements/styledbutton.tsx b/components/elements/styledbutton.tsx index d1074cd..b5ef7f5 100644 --- a/components/elements/styledbutton.tsx +++ b/components/elements/styledbutton.tsx @@ -15,6 +15,9 @@ export default function StyledButton(props: any) { border-radius: 8px; background-color: var(--background-color-dark); transition-duration: 0.2s; + gap: var(--padding-sm); + color: unset; + text-decoration: unset; } a:hover { background-color: var(--theme-color-500); diff --git a/components/menu.tsx b/components/menu.tsx index 2f467a8..290dbf6 100644 --- a/components/menu.tsx +++ b/components/menu.tsx @@ -20,7 +20,7 @@ export default function Menu() {
Blog
Showcase
Services
-
Contact
+ Contact
diff --git a/pages/about.tsx b/pages/about.tsx index d319755..b7d7930 100644 --- a/pages/about.tsx +++ b/pages/about.tsx @@ -8,7 +8,7 @@ import SmallStyledButton from '../components/elements/smallstyledbutton'; import pascal from '../public/img/mid.png' import marco from '../public/img/marco.png' -export default function Index() { +export default function About() { return (
diff --git a/pages/contact.tsx b/pages/contact.tsx new file mode 100644 index 0000000..09e1d90 --- /dev/null +++ b/pages/contact.tsx @@ -0,0 +1,73 @@ +import Head from 'next/head'; +import Image from 'next/image'; +import styles from '../styles/Contact.module.css'; +import Link from 'next/link'; +import StyledButton from '../components/elements/styledbutton'; +import SmallStyledButton from '../components/elements/smallstyledbutton'; + +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faTwitter } from '@fortawesome/free-brands-svg-icons' +import { faDiscord } from '@fortawesome/free-brands-svg-icons' + +export default function Contact() { + return ( +
+ + {process.env.NEXT_PUBLIC_NAME} | About + + +
+
+ + +

{"📬 Contact us"}

+
+
+
+

{"📨 Shoot us an email"}

+
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+
+

{"💬 Other contact methods"}

+
+ Message us on our Discord server + Send a DM to our Twitter account +
+

+ + {"📵 We don't have a public phone number for contact"} +

+
+
+ +
+
+ +
+ ) +} \ No newline at end of file diff --git a/styles/Contact.module.css b/styles/Contact.module.css new file mode 100644 index 0000000..e69de29 diff --git a/styles/globals.css b/styles/globals.css index 807432b..b68024a 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -132,6 +132,33 @@ hr { } +/* form defaults */ +form { + display: flex; + flex-direction: column; + gap: var(--padding); +} + +form > div { + display: flex; + flex-direction: column; + gap: var(--padding-sm); +} + +textarea { + max-width: 100%; + min-width: 100%; +} + +form input, form textarea { + border-radius: var(--padding-sm); + font-size: 1rem; + border: unset; + background-color: var(--background-color-body); + padding: 0.3em 0.4em; +} + + /* mobile */ @media(max-aspect-ratio: 5/4) { .content {