From d5368067d6bf54f1ff4252d10b22935dc4006f30 Mon Sep 17 00:00:00 2001
From: MaticIvesic <matic.ivesic@gmail.com>
Date: Mon, 3 Aug 2026 18:51:33 +0200
Subject: [PATCH] Home: contact card platform + mail/phone icons, gallery icon
 in nav

- Put the Kontakt section on a rounded card ("platform")
- Add mail/phone icons (via SvgImage mask) next to the email and phone
- Use gallery_icon.svg in the top-nav Galerija button
- Scope the header banner-image CSS to .banner-link so the nav icon isn't resized

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/lib/Header.svelte   | 17 +++++++++++--
 src/routes/+page.svelte | 56 ++++++++++++++++++++++++++++++-----------
 2 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/src/lib/Header.svelte b/src/lib/Header.svelte
index 4967b9a..9b54624 100644
--- a/src/lib/Header.svelte
+++ b/src/lib/Header.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import intelidom_banner from '$lib/assets/intelidom_banner.svg';
+    import gallery_icon from '$lib/assets/gallery_icon.svg';
     import HeaderContact from './HeaderContact.svelte';
 </script>
 
@@ -18,7 +19,7 @@
         z-index: 1;
     }
 
-    .header-content img{
+    .banner-link img{
         padding: 1em;
         width: 15em;
         z-index: 1;
@@ -32,6 +33,9 @@
     }
 
     .nav-link{
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5em;
         color: #e5e4ea;
         text-decoration: none;
         font-weight: 500;
@@ -42,6 +46,12 @@
         transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
     }
 
+    .nav-icon{
+        width: 1.15em;
+        height: 1.15em;
+        display: block;
+    }
+
     .nav-link:hover{
         background-color: rgba(66, 175, 56, 0.15);
         border-color: rgba(66, 175, 56, 0.8);
@@ -76,7 +86,10 @@
 
 <div class="header-content">
     <nav class="nav">
-        <a class="nav-link" href="/gallery">Galerija</a>
+        <a class="nav-link" href="/gallery">
+            <img class="nav-icon" src={gallery_icon} alt="" />
+            <span>Galerija</span>
+        </a>
     </nav>
     <a class="banner-link" href="/" aria-label="Domov">
         <img src={intelidom_banner} alt="intelidom banner">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f20e56b..e242405 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Slideshow from '$lib/Slideshow.svelte';
+	import SvgImage from '$lib/SvgImage.svelte';
 	import type { PageData } from './$types';
 
 	let { data }: { data: PageData } = $props();
@@ -64,23 +65,31 @@
 
 	<section class="contact" id="kontakt">
 		<h2 class="section-title">Kontakt</h2>
-		<div class="contact-grid">
-			<div class="contact-info">
-				{#if data.contact.address}
-					<p class="address">{data.contact.address}</p>
-				{/if}
-				{#if data.contact.email}
-					<p><a href="mailto:{data.contact.email}">{data.contact.email}</a></p>
-				{/if}
-				{#if data.contact.phone}
-					<p><a href="tel:{data.contact.phone.replace(/\s+/g, '')}">{data.contact.phone}</a></p>
+		<div class="contact-card">
+			<div class="contact-grid">
+				<div class="contact-info">
+					{#if data.contact.address}
+						<p class="address">{data.contact.address}</p>
+					{/if}
+					{#if data.contact.email}
+						<div class="contact-line">
+							<SvgImage image_src="/mail.svg" icon_color="#42af38" width="1.4em" height="1.4em" />
+							<a href="mailto:{data.contact.email}">{data.contact.email}</a>
+						</div>
+					{/if}
+					{#if data.contact.phone}
+						<div class="contact-line">
+							<SvgImage image_src="/phone.svg" icon_color="#42af38" width="1.4em" height="1.4em" />
+							<a href="tel:{data.contact.phone.replace(/\s+/g, '')}">{data.contact.phone}</a>
+						</div>
+					{/if}
+				</div>
+				{#if data.contact.showMap && data.contact.address}
+					<div class="map">
+						<iframe title="Zemljevid" src={mapSrc(data.contact.address)} loading="lazy"></iframe>
+					</div>
 				{/if}
 			</div>
-			{#if data.contact.showMap && data.contact.address}
-				<div class="map">
-					<iframe title="Zemljevid" src={mapSrc(data.contact.address)} loading="lazy"></iframe>
-				</div>
-			{/if}
 		</div>
 	</section>
 </div>
@@ -225,6 +234,12 @@
 		text-decoration: none;
 	}
 
+	.contact-card {
+		background: #11161a;
+		border-radius: 1.5em;
+		padding: clamp(1.5em, 4vw, 2.5em);
+	}
+
 	.contact-grid {
 		display: grid;
 		grid-template-columns: 1fr;
@@ -234,11 +249,22 @@
 	.contact-info {
 		font-size: 1.1em;
 		line-height: 1.6;
+		display: flex;
+		flex-direction: column;
+		gap: 0.8em;
+		justify-content: center;
 	}
 
 	.address {
 		white-space: pre-line;
 		color: #c7c9cf;
+		margin: 0;
+	}
+
+	.contact-line {
+		display: flex;
+		align-items: center;
+		gap: 0.7em;
 	}
 
 	.contact-info a {