Added hover effect to contact elements

src/app.css

@@ -1,7 +1,7 @@
 body {
     background-color: #0a0d0f; 
     color: #e5e4ea;    
-    font-family: sans-serif;
+    font-family: "Inter", sans-serif;
     margin: 0;
     padding: 0;
     display: flex;

src/app.html

@@ -3,6 +3,9 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">

src/lib/Header.svelte

@@ -15,17 +15,7 @@
         top: 0;
         backdrop-filter: blur(7px);
         padding: 0 0 1em 0;
-    }
+        z-index: 1;
-
-
-    .blur-background {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1;
-        background-color: rgba(15, 15, 16, 0.8);
     }
 
     div>img{
@@ -33,9 +23,6 @@
         width: 15em;
         z-index: 1;
     }
-
-    
-
 @media (min-width: 900px){
 
     :global(.header-contact){

src/lib/HeaderContact.svelte

@@ -1,7 +1,7 @@
 <script>
 import HeaderContactElement from "./HeaderContactElement.svelte";
-import phone_icon from '$lib/assets/phone.svg'
+import phone_icon from '/phone.svg'
-import mail_icon from '$lib/assets/mail.svg'
+import mail_icon from '/mail.svg'
 export let customClass = '';
 </script>
 
@@ -17,12 +17,12 @@ export let customClass = '';
     .header-contact{
         display: flex;
         flex-direction: column;
-        gap: 0.5em;
+        gap: 0em;
     }
 }
 </style>
 
 <div class="header-contact {customClass}" >
-<HeaderContactElement image_src={mail_icon} image_alt="Mail icon" link="mailto:info@intelidom.si" text="info@intelidom.si"></HeaderContactElement>
+<HeaderContactElement image_src={mail_icon} link="mailto:info@intelidom.si" text="info@intelidom.si"></HeaderContactElement>
-<HeaderContactElement image_src={phone_icon} image_alt="Mail icon" link="tel:+3860771166" text="040 77 11 66"></HeaderContactElement>
+<HeaderContactElement image_src={phone_icon} link="tel:+3860771166" text="040 77 11 66"></HeaderContactElement>
 </div>

src/lib/HeaderContactElement.svelte

@@ -1,10 +1,11 @@
 <script>
     export let image_src;
-    export let image_alt;
     export let link;
     export let text;
     export let icon_color = '#bcc0c2';
     export let text_color = '#bcc0c2';
+
+    import SvgImage from "./SvgImage.svelte";
 </script>
 
 <style>
@@ -12,10 +13,15 @@
         display: flex;
         gap: 0.75em;
         align-items: center;
+        padding: 0.3em;
+        border-radius: 0.5em;
+        transition: 0.2s;
     }
 
     div:hover{
         cursor: pointer;
+        background-color: rgba(255, 255, 255, 0.055);
+        transition: 0.2s;
     }
 
     a{
@@ -24,15 +30,16 @@
         font-weight: bold;
     }
 
-    img{
+    div{
-        width: 1.5em;
+        display: flex;
-        height: 1.5em;
+        gap: 0.75em;
-        filter: drop-shadow(0 0 0 var(--icon-color));
+        align-items: center;
     }
 
 </style>
 
 <div>
-    <img src={image_src} alt={image_alt} style="--icon-color: {icon_color}">
+    <SvgImage image_src={image_src} icon_color={icon_color} />
+    
     <a style="--text-color: {text_color}" href={link}>{text}</a>
 </div>

src/lib/Main.svelte

@@ -11,12 +11,16 @@ import Service from '$lib/Service.svelte';
     align-items: center;
     gap: 2em;
 }
+
+li{
+    margin-bottom: 1em;
+}
 </style>
 
 <div class="main">
     <Service service='Pametne inštalacije' serviceImage='/loxone_image.png'>
         <ul>
-            <li>Inštalacija in zagon <a style="color: rgb(66, 175, 56); text-decoration: none;" href="https://www.loxone.com/int/">Loxone</a> sistema za pametno hišo</li>
+            <li>Inštalacija in zagon <a style="color: rgb(66, 175, 56);" href="https://www.loxone.com/int/">Loxone</a> sistema za pametno hišo</li>
             <li>Montaža in zagon domofonskih sistemov</li>
             <li>Odpiranje vrat na pin kodo ali kartico</li>
         </ul>

src/lib/Service.svelte

@@ -3,6 +3,7 @@ export let service = 'Lorem Ipsum';
 export let serviceImage = '/default_image.jpg';
 export let serviceImageAlt = 'Image';
 export let imageOnRight = false;
+import ZoomInImage from '$lib/ZoomInImage.svelte'
 </script>
 
 <style>
@@ -11,12 +12,15 @@ export let imageOnRight = false;
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
 }
 
 .service-content{
     width: 100%;
+    height: 100%;
     display: flex;
     flex-direction: column-reverse;
+    align-items: center;
     gap: 2em;
 }
 
@@ -24,15 +28,6 @@ export let imageOnRight = false;
     flex-direction: column-reverse;
 }
 
-.image{
-    width: 100%;
-}
-
-.image>img{
-    width: 100%;
-    border-radius: 2em;
-}
-
 .service-text{
     width: 100%;
     font-size: 1.3em;
@@ -43,10 +38,16 @@ export let imageOnRight = false;
     text-transform: uppercase;
 }
 
+h2{
+    text-align: center;
+    width: 100%;
+}
+
 @media (min-width: 900px){
 
     .service-content{
         flex-direction: row;
+        align-items: start;
     }
 
     .image-right{
@@ -66,9 +67,9 @@ h2{
         </h2>
     </div>
     <div class="service-content" class:image-right={imageOnRight}>
-        <div class="image">
+        <ZoomInImage serviceImage={serviceImage} serviceImageAlt={serviceImageAlt}>
-            <img src={serviceImage} alt={serviceImageAlt}>
+
-        </div>
+        </ZoomInImage>
         <div class="service-text">
             <slot />
         </div>

src/lib/SvgImage.svelte

@@ -0,0 +1,21 @@
+<script>
+    export let image_src = '';
+    export let width = '1.5em';
+    export let height = '1.5em';
+    export let icon_color = '#bcc0c2';
+</script>
+
+<style>
+    div {
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        mask-position: center;
+    }
+</style>
+
+<div style='
+mask-image: url("{image_src}"); 
+width: {width}; 
+height: {height}; 
+background-color: {icon_color};'>
+</div>

src/lib/ZoomInImage.svelte

@@ -0,0 +1,45 @@
+<script>
+    export let serviceImage = '/default_image.jpg';
+    export let serviceImageAlt = 'Image';
+</script>
+
+<style>
+
+.image{
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 2em;
+    width: 80%;
+    height: 0;
+    padding-top: 60%;
+    overflow: hidden;
+    z-index: 0;
+}
+
+.image>img{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    object-fit: cover;
+    transition: 0.2s;
+}
+
+.image>img:hover{
+    transform: scale(1.1);
+}
+
+@media (min-width: 900px){
+
+    .image{
+        padding-top: 33%;
+    }
+}
+
+</style>
+
+<div class="image">
+    <img src={serviceImage} alt={serviceImageAlt}>
+</div>

src/lib/assets/mail.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(6.23174,0,0,-6.22835,-179.599,2542.96)">
-        <path d="M44.023,392.574C40.848,392.574 37.906,391.609 35.473,389.961L69.902,370.082L104.328,389.961C101.895,391.613 98.953,392.574 95.781,392.574L44.023,392.574ZM109.586,383.754L71.93,362.012C71.309,361.652 70.629,361.48 69.957,361.473L69.844,361.473C69.172,361.48 68.492,361.652 67.871,362.012L30.215,383.754C29.32,381.816 28.82,379.656 28.82,377.375L28.82,357C28.82,348.578 35.602,341.797 44.023,341.797L95.781,341.797C104.199,341.797 110.98,348.578 110.98,357L110.98,377.375C110.98,379.656 110.48,381.816 109.586,383.754Z" style="fill:white;"/>
-    </g>
-</svg>

static/mail.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(6.23174,0,0,-6.22835,-179.599,2542.96)"><path d="M44.023,392.574C40.848,392.574 37.906,391.609 35.473,389.961L69.902,370.082L104.328,389.961C101.895,391.613 98.953,392.574 95.781,392.574L44.023,392.574ZM109.586,383.754L71.93,362.012C71.309,361.652 70.629,361.48 69.957,361.473L69.844,361.473C69.172,361.48 68.492,361.652 67.871,362.012L30.215,383.754C29.32,381.816 28.82,379.656 28.82,377.375L28.82,357C28.82,348.578 35.602,341.797 44.023,341.797L95.781,341.797C104.199,341.797 110.98,348.578 110.98,357L110.98,377.375C110.98,379.656 110.48,381.816 109.586,383.754Z" style="fill:white;"/></g></svg>