From 6410b3c0a908313913e04fa4493af60576ebe885 Mon Sep 17 00:00:00 2001
From: Cian Hughes <chughes000@gmail.com>
Date: Tue, 21 Jan 2025 14:47:46 +0000
Subject: [PATCH] Added email details and mailto link to contact us page

---
 src/routes/contact/+page.svelte     | 17 ++++++++++++-----
 src/routes/contact/ContactPage.scss | 16 +++++++++++++++-
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index d751905..d27bd87 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -29,11 +29,18 @@
             />
         </div>
         <div class="contact-image-column">
-            <img
-                class="contact-image"
-                src="{CDN}/contact.webp"
-                alt="A photograph of our lovely colleague who is eager to hear from you"
-            />
+            <div class="contact-image-pane hover:bg-blue-200">
+                <img
+                    class="contact-image"
+                    src="{CDN}/contact.webp"
+                    alt="A photograph of our lovely colleague who is eager to hear from you"
+                />
+                <a href="mailto:dermot.brabazon@dcu.ie"
+                    ><p class="contact-image-subtitle">
+                        ✉ Dermot Brabazon (dermot.brabazon@dcu.ie)
+                    </p></a
+                >
+            </div>
         </div>
     </div>
     <NavigationFooter />
diff --git a/src/routes/contact/ContactPage.scss b/src/routes/contact/ContactPage.scss
index 2be23ad..62b8c83 100644
--- a/src/routes/contact/ContactPage.scss
+++ b/src/routes/contact/ContactPage.scss
@@ -38,15 +38,29 @@
   padding: 32px 0 32px 48px;
 }
 
-.contact-image {
+.contact-image-pane {
   position: sticky;
   border-radius: var(--contact-corner-round);
   width: 100%;
   top: 64px;
   max-width: var(--contact-img-size);
+  justify-items: center;
+}
+
+.contact-image {
+  border-radius: var(--contact-corner-round);
+  width: 100%;
+  max-width: var(--contact-img-size);
   max-height: var(--contact-img-size);
 }
 
+.contact-image-subtitle {
+  font: "Assistant";
+  font-size: 24px;
+  color: #d9d9d9;
+  text-align: center;
+}
+
 @media (orientation: landscape) and (min-width: 1200px) {
   .contact-form-column {
     width: 67%;