From 62afb57ff3e7b6516b0d3d39c88ed29a1468bd3a Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 10 Jan 2022 15:19:27 +0100 Subject: chore: add a social media widget on contact and cv pages --- .../Widget/SocialMedia/SocialMedia.module.scss | 47 ++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 src/components/Widget/SocialMedia/SocialMedia.module.scss (limited to 'src/components/Widget/SocialMedia/SocialMedia.module.scss') diff --git a/src/components/Widget/SocialMedia/SocialMedia.module.scss b/src/components/Widget/SocialMedia/SocialMedia.module.scss new file mode 100644 index 0000000..70ef5d9 --- /dev/null +++ b/src/components/Widget/SocialMedia/SocialMedia.module.scss @@ -0,0 +1,47 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/placeholders"; + +.list { + @extend %flex-list; + + gap: var(--spacing-xs); + align-items: center; +} + +.link { + display: block; + width: 3em; + height: 3em; + background: none; + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) + var(--color-shadow-light), + fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-1) + var(--color-shadow-light), + fun.convert-px(3) fun.convert-px(4) fun.convert-px(4) fun.convert-px(-3) + var(--color-shadow-light), + 0 0 0 0 var(--color-shadow); + transition: all 0.3s linear 0s; + + &:hover, + &:focus { + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) + var(--color-shadow-light), + fun.convert-px(1) fun.convert-px(1) fun.convert-px(2) fun.convert-px(-1) + var(--color-shadow-lighter), + fun.convert-px(3) fun.convert-px(3) fun.convert-px(4) fun.convert-px(-4) + var(--color-shadow-lighter), + fun.convert-px(6) fun.convert-px(6) fun.convert-px(10) fun.convert-px(-3) + var(--color-shadow-light); + transform: scale(1.15); + } + + &:focus { + outline: var(--color-primary) dashed fun.convert-px(2); + } + + &:active { + box-shadow: 0 0 0 0 var(--color-shadow-light); + outline: none; + transform: scale(0.9); + } +} -- cgit v1.2.3