From 35c67ba4d1b1aff2146befb33bffb8fd2b1ab365 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Flemming=20M=C3=B8ller=20Pedersen?=
Date: Mon, 1 Jul 2024 13:00:50 +0200
Subject: [PATCH 01/21] Feat: Contact form init
---
src/components/contact-footer.astro | 143 ++++++++++++++++++++++++++++
1 file changed, 143 insertions(+)
create mode 100644 src/components/contact-footer.astro
diff --git a/src/components/contact-footer.astro b/src/components/contact-footer.astro
new file mode 100644
index 00000000..e5c2f073
--- /dev/null
+++ b/src/components/contact-footer.astro
@@ -0,0 +1,143 @@
+
+
+
From 5c2332bf747cdcd1f7583a5a991a0954965a38aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Flemming=20M=C3=B8ller=20Pedersen?=
Date: Mon, 1 Jul 2024 13:01:58 +0200
Subject: [PATCH 02/21] Feat: Add contact form to main layout
---
src/layouts/default.astro | 2 ++
1 file changed, 2 insertions(+)
diff --git a/src/layouts/default.astro b/src/layouts/default.astro
index 5b949bac..4ebb4c36 100644
--- a/src/layouts/default.astro
+++ b/src/layouts/default.astro
@@ -3,6 +3,7 @@ import type { WithContext, Thing } from 'schema-dts';
import '@fontsource-variable/sora';
import { jsonLd } from './json-ld';
import Header from '@components/header.astro';
+import ContactFooter from '@components/contact-footer.astro';
import Footer from '@components/footer.astro';
import { ViewTransitions } from 'astro:transitions';
@@ -182,6 +183,7 @@ const canonical = new URL(path, Astro.site);
+
diff --git a/src/pages/kontakt/index.astro b/src/pages/kontakt/index.astro
index d855e7ea..3ca7fdf0 100644
--- a/src/pages/kontakt/index.astro
+++ b/src/pages/kontakt/index.astro
@@ -2,6 +2,7 @@
import Brief from '@components/brief.astro';
import Person from '@components/person.astro';
import Layout from '@layouts/default.astro';
+import ContactForm from '@components/contact-form.astro';
import { getCollection } from 'astro:content';
const people = await getCollection('people');
@@ -98,16 +99,8 @@ const employees = people.filter(person => person.data.email.includes('@bjerk.io'
+
@@ -164,16 +157,6 @@ const employees = people.filter(person => person.data.email.includes('@bjerk.io'
dl div > dd a {
color: inherit;
}
- form,
- form .identity,
- form .issue {
- display: flex;
- flex-direction: column;
- gap: 1rem;
- }
- form {
- gap: 2rem;
- }
.employees {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(244px, 1fr));
From 288b440cf84cdca11f0b81c0a4fce9f7ecdc99e1 Mon Sep 17 00:00:00 2001
From: Xillians
Date: Thu, 8 Aug 2024 12:49:04 +0200
Subject: [PATCH 17/21] refactor: re-use contact form
---
src/components/contact-footer.astro | 21 +++++----------------
src/layouts/default.astro | 6 ++++--
2 files changed, 9 insertions(+), 18 deletions(-)
diff --git a/src/components/contact-footer.astro b/src/components/contact-footer.astro
index fe18bd5a..129aa713 100644
--- a/src/components/contact-footer.astro
+++ b/src/components/contact-footer.astro
@@ -1,3 +1,6 @@
+---
+import ContactForm from '@components/contact-form.astro';
+---
@@ -59,6 +47,7 @@
.content {
flex-grow: 1;
+ max-width: 60ch;
}
.content p:last-child {
diff --git a/src/layouts/default.astro b/src/layouts/default.astro
index 536c823d..4254fb48 100644
--- a/src/layouts/default.astro
+++ b/src/layouts/default.astro
@@ -257,7 +257,7 @@ const canonical = new URL(path, Astro.site);
border-width: 2px;
border-color: hsl(var(--green-base) 75%);
text-decoration: none;
- background-color: white;
+ background-color: hsl(var(--green-base) 75%);
width: fit-content;
}
.primary:hover {
@@ -308,6 +308,7 @@ const canonical = new URL(path, Astro.site);
sans-seri;
transition: all 0.5s ease;
max-width: 60ch;
+ background-color: transparent;
}
input {
border: none;
@@ -317,10 +318,11 @@ const canonical = new URL(path, Astro.site);
textarea {
border-radius: 8px;
}
-
+ textarea:focus,
input:focus {
background-color: hsl(var(--blue-base) 95%);
padding: 16px 1em;
+ background-color: white;
}
@media (hover) {
From b791f3f17f7a2cf6c61c23a0438c49e9ad6d4d30 Mon Sep 17 00:00:00 2001
From: Xillians
Date: Thu, 8 Aug 2024 13:03:44 +0200
Subject: [PATCH 18/21] footer with image
---
src/components/contact-footer.astro | 93 ++++++++---------------------
1 file changed, 26 insertions(+), 67 deletions(-)
diff --git a/src/components/contact-footer.astro b/src/components/contact-footer.astro
index 129aa713..fde764b3 100644
--- a/src/components/contact-footer.astro
+++ b/src/components/contact-footer.astro
@@ -1,19 +1,18 @@
---
import ContactForm from '@components/contact-form.astro';
---
+
@@ -28,6 +27,11 @@ import ContactForm from '@components/contact-form.astro';
--link-color: hsl(var(--blue-base) 50%);
}
+ img {
+ max-width: 550px;
+ border-radius: 1rem;
+ }
+
@media (hover) {
a:hover {
--link-color: hsl(var(--blue-base) 25%);
@@ -39,9 +43,10 @@ import ContactForm from '@components/contact-form.astro';
margin-inline: auto;
padding-block: 4rem;
- display: flex;
+ display: grid;
+ grid-template-columns: 1.5fr 1fr;
justify-content: center;
- align-items: baseline;
+ align-items: center;
flex-wrap: wrap;
}
@@ -49,22 +54,11 @@ import ContactForm from '@components/contact-form.astro';
flex-grow: 1;
max-width: 60ch;
}
-
+
.content p:last-child {
font-size: 0.8rem;
}
- input {
- padding: 16px 0;
- background-color: hsl(var(--blue-base) 95%);
- border: none;
- border-block-end: 1px solid grey;
- }
-
- input:focus {
- background-color: hsl(var(--blue-base) 95%);
- }
-
.socials {
font-size: 1.7rem;
display: flex;
@@ -83,48 +77,13 @@ import ContactForm from '@components/contact-form.astro';
list-style: none;
padding: 0;
}
-
- form .identity {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 1rem;
- }
- form .issue {
- display: grid;
- grid-template-columns: 1fr;
- }
- form #submit {
- font-size: 1rem;
- padding: 0.25rem 1rem;
- border-radius: 16px;
- border: solid;
- border-width: 2px;
- border-color: hsl(var(--green-base) 75%);
- text-decoration: none;
-
- }
- form #submit:hover {
- background-color: hsl(var(--green-base) 75%);
- }
- form #submit:active {
- border-color: hsl(var(--green-base) 55%);
- background-color: hsl(var(--green-base) 55%);
- }
- form .buttons {
- padding-top: 2rem;
- display: flex;
- gap: 0.5rem;
- align-items: center;
- }
- form .accept {
- display: flex;
- flex-grow: 2;
- gap: 0.5em;
- }
- form .accept * {
- max-width: 60ch;
- font-size: 0.75rem;
- margin: 0.5em 0;
+ @media (max-width: 1024px) {
+ .container {
+ display: flex;
+ gap: 2rem;
+ }
+ img {
+ display: none;
+ }
}
-
From eaca5c227ee712a88b1131a029092ad36feaf373 Mon Sep 17 00:00:00 2001
From: "Sandra Viktoria D. Toftemo"
Date: Thu, 8 Aug 2024 15:06:49 +0200
Subject: [PATCH 19/21] refactor: set margin on slot instead of specific footer
(#746)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* refactor: set margin on slot instead of specific footer
* Feat: Add contact footer boolean
* Style: Move padding to main element
---------
Co-authored-by: Flemming Møller Pedersen
---
src/components/contact-footer.astro | 1 -
src/layouts/default.astro | 15 +++++++++++++--
src/pages/kontakt/index.astro | 1 +
3 files changed, 14 insertions(+), 3 deletions(-)
diff --git a/src/components/contact-footer.astro b/src/components/contact-footer.astro
index fde764b3..03f2fe42 100644
--- a/src/components/contact-footer.astro
+++ b/src/components/contact-footer.astro
@@ -19,7 +19,6 @@ import ContactForm from '@components/contact-form.astro';