contact glow

Author: HannesGitH

src/lib/components/contact.svelte

@@ -32,7 +32,7 @@
 </div>
 
 <style lang="scss">
-	// @import url('https://use.fontawesome.com/releases/v5.15.4/css/solid.css');
+
 
 	#contact {
 		& * {
@@ -63,9 +63,9 @@
 		}
 
 		&.externally-activated {
-			background-color: $primary;
-			color: $on-primary;
-			box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+			// background-color: $primary;
+			// color: $on-primary;
+			box-shadow: $glow-shadow;
 		}
 		&.activated {
 			background-color: azure;

src/lib/sections/contact.svelte

@@ -45,7 +45,7 @@
 				</div>
 			{/each}
 		</div>
-		<div id="link-preview" class:active>
+		<div id="link-preview" class:active class:left>
 			{#if active}
 				<a transition:slide href={activeContact?.link}> 
 					<!-- <i class={activeContact?.iconClass}></i> -->{activeContact?.link}<i class="fa-solid fa fa-arrow-up-right-from-square"></i>
@@ -95,6 +95,9 @@
 		opacity: 0;
 		transform: translateX(-20rem);
 		&.active {
+			&.left{
+				box-shadow: $glow-shadow;
+			}
 			opacity: 1;
 			pointer-events: all;
 			transform: translateX(0);

src/theme/dark/_smui-theme.scss

@@ -6,6 +6,9 @@
 $primary: #a7c347;
 $surface: black;
 
+$glow-shadow: 0 0 15px -2px $primary;
+
+
 // Svelte Colors! (Dark Theme)
 @forward '@material/theme/index' with (
   $primary: $primary,