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 (file)
--- a/assets/sass/components/_image.scss
+++ b/assets/sass/components/_image.scss
@@ -62,7 +62,8 @@
        }\r
 \r
        .circle > img {\r
-               @include circle(200px, "block")\r
+               @include circle(200px, "block");\r
+               @include box-shadow(-5px, 5px, 5px, _palette(fg-bold));\r
        }\r
 \r
        video {\r

diff --git a/assets/sass/libs/_my-mixins.scss b/assets/sass/libs/_my-mixins.scss
index 9d0b0ce..dc52109 100644 (file)
--- 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;
+    }
+}