From: danix <danix@danix.xyz>
Date: Sun, 19 Feb 2023 17:13:21 +0000 (+0100)
Subject: added box-shadow mixin. Added shadow to the gravatar in homepage.
X-Git-Url: https://git.danix.xyz/?p=theme-danix.xyz.git;a=commitdiff_plain;h=7e7766c9ada48098c94bd94aaac04f919dfb3297

added box-shadow mixin. Added shadow to the gravatar in homepage.
---

diff --git a/assets/sass/components/_image.scss b/assets/sass/components/_image.scss
index 09c402c..6e1388e 100644
--- a/assets/sass/components/_image.scss
+++ b/assets/sass/components/_image.scss
@@ -62,7 +62,8 @@
 	}
 
 	.circle > img {
-		@include circle(200px, "block")
+		@include circle(200px, "block");
+		@include box-shadow(-5px, 5px, 5px, _palette(fg-bold));
 	}
 
 	video {
diff --git a/assets/sass/libs/_my-mixins.scss b/assets/sass/libs/_my-mixins.scss
index 9d0b0ce..dc52109 100644
--- a/assets/sass/libs/_my-mixins.scss
+++ b/assets/sass/libs/_my-mixins.scss
@@ -166,3 +166,22 @@
   -moz-border-radius: $size/2;
   border-radius: $size/2;
 }
+
+// box-shadow
+// top and left are  the anchor point from where to start moving the shadow
+@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
+    @if unitless($top) or unitless($left) or unitless($blur) {
+        $top: $top * 1px;
+        $left: $left * 1px;
+        $blur: $blur * 1px;
+    }
+    @if $inset {
+        -webkit-box-shadow:inset $top $left $blur $color;
+        -moz-box-shadow:inset $top $left $blur $color;
+        box-shadow:inset $top $left $blur $color;
+    } @else {
+        -webkit-box-shadow: $top $left $blur $color;
+        -moz-box-shadow: $top $left $blur $color;
+        box-shadow: $top $left $blur $color;
+    }
+}