From 39f4501ff09d27798e9d6ab8f02e35ea19f39b88 Mon Sep 17 00:00:00 2001
From: Tixie <tixie@guerilla.studio>
Date: Thu, 2 Mar 2023 10:18:42 +0100
Subject: [PATCH] Improve social buttons

---
 src/_includes/icons/social/facebook.svg  |  2 +-
 src/_includes/icons/social/instagram.svg |  4 +--
 src/_includes/icons/social/linkedin.svg  |  2 +-
 src/_includes/icons/social/telegram.svg  |  2 +-
 src/_includes/icons/social/twitter.svg   |  2 +-
 src/_includes/icons/social/whatsapp.svg  |  2 +-
 src/css/2-components/_buttons.scss       | 38 ++++++++++++++++++++++--
 7 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/src/_includes/icons/social/facebook.svg b/src/_includes/icons/social/facebook.svg
index 2ac4204..f2e90ef 100644
--- a/src/_includes/icons/social/facebook.svg
+++ b/src/_includes/icons/social/facebook.svg
@@ -1,6 +1,6 @@
 <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_55_293)">
-<path d="M42 20.9996C42 9.40163 32.598 -0.00038147 21 -0.00038147C9.40201 -0.00038147 0 9.40163 0 20.9996C0 31.4813 7.6794 40.1691 17.7188 41.7445V27.0699H12.3867V20.9996H17.7188V16.3731C17.7188 11.1099 20.8539 8.20274 25.6508 8.20274C27.9483 8.20274 30.3516 8.6129 30.3516 8.6129V13.7809H27.7035C25.0948 13.7809 24.2812 15.3996 24.2812 17.0604V20.9996H30.1055L29.1744 27.0699H24.2812V41.7445C34.3206 40.1691 42 31.4813 42 20.9996Z" fill="#321D64"/>
+<path d="M42 20.9996C42 9.40163 32.598 -0.00038147 21 -0.00038147C9.40201 -0.00038147 0 9.40163 0 20.9996C0 31.4813 7.6794 40.1691 17.7188 41.7445V27.0699H12.3867V20.9996H17.7188V16.3731C17.7188 11.1099 20.8539 8.20274 25.6508 8.20274C27.9483 8.20274 30.3516 8.6129 30.3516 8.6129V13.7809H27.7035C25.0948 13.7809 24.2812 15.3996 24.2812 17.0604V20.9996H30.1055L29.1744 27.0699H24.2812V41.7445C34.3206 40.1691 42 31.4813 42 20.9996Z" fill="currentColor"/>
 </g>
 <defs>
 <clipPath id="clip0_55_293">
diff --git a/src/_includes/icons/social/instagram.svg b/src/_includes/icons/social/instagram.svg
index de5bb09..88679d9 100644
--- a/src/_includes/icons/social/instagram.svg
+++ b/src/_includes/icons/social/instagram.svg
@@ -1,7 +1,7 @@
 <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_55_294)">
-<path d="M29.75 3.5H12.25C7.41751 3.5 3.5 7.41751 3.5 12.25V29.75C3.5 34.5825 7.41751 38.5 12.25 38.5H29.75C34.5825 38.5 38.5 34.5825 38.5 29.75V12.25C38.5 7.41751 34.5825 3.5 29.75 3.5Z" stroke="#321D64" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M27.9995 19.8972C28.2155 21.3536 27.9667 22.8411 27.2886 24.1479C26.6104 25.4548 25.5375 26.5146 24.2223 27.1766C22.9072 27.8386 21.4168 28.069 19.9631 27.8351C18.5095 27.6011 17.1666 26.9148 16.1255 25.8737C15.0843 24.8326 14.398 23.4897 14.1641 22.036C13.9302 20.5824 14.1606 19.092 14.8226 17.7768C15.4845 16.4617 16.5443 15.3887 17.8512 14.7106C19.1581 14.0325 20.6456 13.7837 22.102 13.9997C23.5876 14.22 24.963 14.9122 26.025 15.9742C27.0869 17.0362 27.7792 18.4116 27.9995 19.8972Z" stroke="#321D64" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M29.75 3.5H12.25C7.41751 3.5 3.5 7.41751 3.5 12.25V29.75C3.5 34.5825 7.41751 38.5 12.25 38.5H29.75C34.5825 38.5 38.5 34.5825 38.5 29.75V12.25C38.5 7.41751 34.5825 3.5 29.75 3.5Z" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M27.9995 19.8972C28.2155 21.3536 27.9667 22.8411 27.2886 24.1479C26.6104 25.4548 25.5375 26.5146 24.2223 27.1766C22.9072 27.8386 21.4168 28.069 19.9631 27.8351C18.5095 27.6011 17.1666 26.9148 16.1255 25.8737C15.0843 24.8326 14.398 23.4897 14.1641 22.036C13.9302 20.5824 14.1606 19.092 14.8226 17.7768C15.4845 16.4617 16.5443 15.3887 17.8512 14.7106C19.1581 14.0325 20.6456 13.7837 22.102 13.9997C23.5876 14.22 24.963 14.9122 26.025 15.9742C27.0869 17.0362 27.7792 18.4116 27.9995 19.8972Z" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
 <defs>
 <clipPath id="clip0_55_294">
diff --git a/src/_includes/icons/social/linkedin.svg b/src/_includes/icons/social/linkedin.svg
index 6d3d850..f48e8d9 100644
--- a/src/_includes/icons/social/linkedin.svg
+++ b/src/_includes/icons/social/linkedin.svg
@@ -1,3 +1,3 @@
 <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M32.0833 2H9.91667C5.54508 2 2 5.54508 2 9.91667V32.0833C2 36.4549 5.54508 40 9.91667 40H32.0833C36.4565 40 40 36.4549 40 32.0833V9.91667C40 5.54508 36.4565 2 32.0833 2ZM14.6667 32.0833H9.91667V14.6667H14.6667V32.0833ZM12.2917 12.659C10.7622 12.659 9.52083 11.4082 9.52083 9.866C9.52083 8.32383 10.7622 7.073 12.2917 7.073C13.8212 7.073 15.0625 8.32383 15.0625 9.866C15.0625 11.4082 13.8228 12.659 12.2917 12.659ZM33.6667 32.0833H28.9167V23.2103C28.9167 17.8777 22.5833 18.2814 22.5833 23.2103V32.0833H17.8333V14.6667H22.5833V17.4613C24.7937 13.3668 33.6667 13.0643 33.6667 21.3816V32.0833Z" fill="#321D64"/>
+<path d="M32.0833 2H9.91667C5.54508 2 2 5.54508 2 9.91667V32.0833C2 36.4549 5.54508 40 9.91667 40H32.0833C36.4565 40 40 36.4549 40 32.0833V9.91667C40 5.54508 36.4565 2 32.0833 2ZM14.6667 32.0833H9.91667V14.6667H14.6667V32.0833ZM12.2917 12.659C10.7622 12.659 9.52083 11.4082 9.52083 9.866C9.52083 8.32383 10.7622 7.073 12.2917 7.073C13.8212 7.073 15.0625 8.32383 15.0625 9.866C15.0625 11.4082 13.8228 12.659 12.2917 12.659ZM33.6667 32.0833H28.9167V23.2103C28.9167 17.8777 22.5833 18.2814 22.5833 23.2103V32.0833H17.8333V14.6667H22.5833V17.4613C24.7937 13.3668 33.6667 13.0643 33.6667 21.3816V32.0833Z" fill="currentColor"/>
 </svg>
diff --git a/src/_includes/icons/social/telegram.svg b/src/_includes/icons/social/telegram.svg
index 5824d3b..20260a7 100644
--- a/src/_includes/icons/social/telegram.svg
+++ b/src/_includes/icons/social/telegram.svg
@@ -1,6 +1,6 @@
 <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_55_297)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21 0C9.4045 0 0 9.401 0 21C0 32.5972 9.4045 42 21 42C32.5972 42 42 32.5972 42 21C42 9.401 32.5972 0 21 0ZM26.642 31.2743C26.971 31.507 27.3945 31.5647 27.7725 31.423C28.1488 31.2795 28.427 30.9557 28.511 30.5638C29.3983 26.3953 31.5507 15.8427 32.3575 12.0522C32.4188 11.7653 32.3173 11.4677 32.0933 11.277C31.8675 11.0862 31.556 11.032 31.2795 11.1335C26.999 12.719 13.8162 17.6645 8.428 19.6577C8.08675 19.7855 7.8645 20.1127 7.875 20.475C7.88725 20.8355 8.1305 21.1488 8.4805 21.2537C10.8973 21.9765 14.0682 22.9827 14.0682 22.9827C14.0682 22.9827 15.5505 27.4592 16.3223 29.7342C16.4202 30.0212 16.6442 30.2452 16.9382 30.3223C17.234 30.3993 17.5472 30.3187 17.7677 30.1105C19.0085 28.9397 20.9265 27.1285 20.9265 27.1285C20.9265 27.1285 24.5735 29.8008 26.642 31.2743ZM15.4017 22.4158L17.1168 28.07L17.4982 24.4895C17.4982 24.4895 24.1185 18.5168 27.895 15.113C28.0052 15.0132 28.0192 14.8453 27.9282 14.728C27.8372 14.6108 27.6693 14.5827 27.545 14.6632C23.17 17.4562 15.4017 22.4158 15.4017 22.4158Z" fill="#321D64"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21 0C9.4045 0 0 9.401 0 21C0 32.5972 9.4045 42 21 42C32.5972 42 42 32.5972 42 21C42 9.401 32.5972 0 21 0ZM26.642 31.2743C26.971 31.507 27.3945 31.5647 27.7725 31.423C28.1488 31.2795 28.427 30.9557 28.511 30.5638C29.3983 26.3953 31.5507 15.8427 32.3575 12.0522C32.4188 11.7653 32.3173 11.4677 32.0933 11.277C31.8675 11.0862 31.556 11.032 31.2795 11.1335C26.999 12.719 13.8162 17.6645 8.428 19.6577C8.08675 19.7855 7.8645 20.1127 7.875 20.475C7.88725 20.8355 8.1305 21.1488 8.4805 21.2537C10.8973 21.9765 14.0682 22.9827 14.0682 22.9827C14.0682 22.9827 15.5505 27.4592 16.3223 29.7342C16.4202 30.0212 16.6442 30.2452 16.9382 30.3223C17.234 30.3993 17.5472 30.3187 17.7677 30.1105C19.0085 28.9397 20.9265 27.1285 20.9265 27.1285C20.9265 27.1285 24.5735 29.8008 26.642 31.2743ZM15.4017 22.4158L17.1168 28.07L17.4982 24.4895C17.4982 24.4895 24.1185 18.5168 27.895 15.113C28.0052 15.0132 28.0192 14.8453 27.9282 14.728C27.8372 14.6108 27.6693 14.5827 27.545 14.6632C23.17 17.4562 15.4017 22.4158 15.4017 22.4158Z" fill="currentColor"/>
 </g>
 <defs>
 <clipPath id="clip0_55_297">
diff --git a/src/_includes/icons/social/twitter.svg b/src/_includes/icons/social/twitter.svg
index cc5c351..530ae6c 100644
--- a/src/_includes/icons/social/twitter.svg
+++ b/src/_includes/icons/social/twitter.svg
@@ -1,6 +1,6 @@
 <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_55_292)">
-<path d="M13.2088 38.4733C29.059 38.4733 37.7263 25.0296 37.7263 13.3721C37.7263 12.9903 37.7187 12.6102 37.7019 12.2318C39.3845 10.9865 40.8469 9.43242 42.0003 7.66338C40.4563 8.36601 38.7948 8.83902 37.0518 9.0523C38.8309 7.96009 40.1968 6.23232 40.8411 4.17259C39.1762 5.18311 37.3323 5.91756 35.3692 6.31402C33.7967 4.59916 31.5581 3.52673 29.0792 3.52673C24.3205 3.52673 20.4615 7.47762 20.4615 12.3479C20.4615 13.0402 20.5371 13.7136 20.6849 14.3594C13.523 13.9905 7.17247 10.4799 2.92284 5.14183C2.18278 6.44561 1.75606 7.96009 1.75606 9.57604C1.75606 12.6368 3.27732 15.339 5.59072 16.9197C4.17698 16.875 2.84892 16.4776 1.68802 15.8163C1.68675 15.8533 1.68675 15.8894 1.68675 15.9289C1.68675 20.2015 4.65704 23.7688 8.60006 24.5772C7.87597 24.7793 7.11408 24.8877 6.32783 24.8877C5.77342 24.8877 5.23328 24.8318 4.70828 24.7286C5.80533 28.234 8.98647 30.7848 12.7581 30.8561C9.80884 33.2229 6.09346 34.6325 2.05552 34.6325C1.36082 34.6325 0.674531 34.592 0 34.5103C3.81366 37.013 8.34218 38.4733 13.2092 38.4733" fill="#321D64"/>
+<path d="M13.2088 38.4733C29.059 38.4733 37.7263 25.0296 37.7263 13.3721C37.7263 12.9903 37.7187 12.6102 37.7019 12.2318C39.3845 10.9865 40.8469 9.43242 42.0003 7.66338C40.4563 8.36601 38.7948 8.83902 37.0518 9.0523C38.8309 7.96009 40.1968 6.23232 40.8411 4.17259C39.1762 5.18311 37.3323 5.91756 35.3692 6.31402C33.7967 4.59916 31.5581 3.52673 29.0792 3.52673C24.3205 3.52673 20.4615 7.47762 20.4615 12.3479C20.4615 13.0402 20.5371 13.7136 20.6849 14.3594C13.523 13.9905 7.17247 10.4799 2.92284 5.14183C2.18278 6.44561 1.75606 7.96009 1.75606 9.57604C1.75606 12.6368 3.27732 15.339 5.59072 16.9197C4.17698 16.875 2.84892 16.4776 1.68802 15.8163C1.68675 15.8533 1.68675 15.8894 1.68675 15.9289C1.68675 20.2015 4.65704 23.7688 8.60006 24.5772C7.87597 24.7793 7.11408 24.8877 6.32783 24.8877C5.77342 24.8877 5.23328 24.8318 4.70828 24.7286C5.80533 28.234 8.98647 30.7848 12.7581 30.8561C9.80884 33.2229 6.09346 34.6325 2.05552 34.6325C1.36082 34.6325 0.674531 34.592 0 34.5103C3.81366 37.013 8.34218 38.4733 13.2092 38.4733" fill="currentColor"/>
 </g>
 <defs>
 <clipPath id="clip0_55_292">
diff --git a/src/_includes/icons/social/whatsapp.svg b/src/_includes/icons/social/whatsapp.svg
index 9bd4fa0..6a74f75 100644
--- a/src/_includes/icons/social/whatsapp.svg
+++ b/src/_includes/icons/social/whatsapp.svg
@@ -1,3 +1,3 @@
 <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.08984 40L4.76093 30.2419C3.11268 27.3856 2.24659 24.1477 2.24818 20.8274C2.25293 10.4471 10.7 2 21.0788 2C26.1153 2.00158 30.8432 3.96333 34.3993 7.52267C37.9539 11.082 39.9109 15.813 39.9093 20.8448C39.9046 31.2268 31.4575 39.6738 21.0788 39.6738C17.9279 39.6723 14.823 38.8822 12.0728 37.3812L2.08984 40ZM12.5351 33.9723C15.1888 35.5477 17.7221 36.4913 21.0724 36.4929C29.6984 36.4929 36.7253 29.4724 36.73 20.8417C36.7332 12.1935 29.7396 5.1825 21.0851 5.17933C12.4528 5.17933 5.43068 12.1998 5.42751 20.829C5.42593 24.3519 6.45826 26.9897 8.19201 29.7495L6.61026 35.5255L12.5351 33.9723ZM30.5645 25.3209C30.4473 25.1246 30.1338 25.0074 29.662 24.7715C29.1918 24.5356 26.8785 23.3972 26.4463 23.2404C26.0156 23.0837 25.7021 23.0045 25.387 23.4763C25.0735 23.9466 24.171 25.0074 23.8971 25.3209C23.6232 25.6344 23.3477 25.674 22.8774 25.4381C22.4072 25.2022 20.8903 24.7066 19.0933 23.1027C17.6952 21.855 16.7499 20.3144 16.476 19.8426C16.2021 19.3723 16.4475 19.1174 16.6818 18.8831C16.894 18.6725 17.1521 18.3337 17.388 18.0582C17.6271 17.7858 17.7047 17.5895 17.863 17.2744C18.0198 16.9609 17.9422 16.6854 17.8234 16.4495C17.7047 16.2152 16.7642 13.8988 16.3731 12.9567C15.9899 12.0399 15.602 12.1634 15.3138 12.1492L14.4113 12.1333C14.0978 12.1333 13.588 12.2505 13.1573 12.7223C12.7267 13.1942 11.5107 14.331 11.5107 16.6474C11.5107 18.9638 13.1969 21.2011 13.4313 21.5146C13.6672 21.8281 16.7483 26.5813 21.4683 28.619C22.5908 29.1035 23.468 29.3932 24.1504 29.6102C25.2778 29.968 26.3038 29.9173 27.1144 29.797C28.0185 29.6624 29.8979 28.6586 30.2906 27.5597C30.6833 26.4593 30.6833 25.5173 30.5645 25.3209Z" fill="#321D64"/>
+<path d="M2.08984 40L4.76093 30.2419C3.11268 27.3856 2.24659 24.1477 2.24818 20.8274C2.25293 10.4471 10.7 2 21.0788 2C26.1153 2.00158 30.8432 3.96333 34.3993 7.52267C37.9539 11.082 39.9109 15.813 39.9093 20.8448C39.9046 31.2268 31.4575 39.6738 21.0788 39.6738C17.9279 39.6723 14.823 38.8822 12.0728 37.3812L2.08984 40ZM12.5351 33.9723C15.1888 35.5477 17.7221 36.4913 21.0724 36.4929C29.6984 36.4929 36.7253 29.4724 36.73 20.8417C36.7332 12.1935 29.7396 5.1825 21.0851 5.17933C12.4528 5.17933 5.43068 12.1998 5.42751 20.829C5.42593 24.3519 6.45826 26.9897 8.19201 29.7495L6.61026 35.5255L12.5351 33.9723ZM30.5645 25.3209C30.4473 25.1246 30.1338 25.0074 29.662 24.7715C29.1918 24.5356 26.8785 23.3972 26.4463 23.2404C26.0156 23.0837 25.7021 23.0045 25.387 23.4763C25.0735 23.9466 24.171 25.0074 23.8971 25.3209C23.6232 25.6344 23.3477 25.674 22.8774 25.4381C22.4072 25.2022 20.8903 24.7066 19.0933 23.1027C17.6952 21.855 16.7499 20.3144 16.476 19.8426C16.2021 19.3723 16.4475 19.1174 16.6818 18.8831C16.894 18.6725 17.1521 18.3337 17.388 18.0582C17.6271 17.7858 17.7047 17.5895 17.863 17.2744C18.0198 16.9609 17.9422 16.6854 17.8234 16.4495C17.7047 16.2152 16.7642 13.8988 16.3731 12.9567C15.9899 12.0399 15.602 12.1634 15.3138 12.1492L14.4113 12.1333C14.0978 12.1333 13.588 12.2505 13.1573 12.7223C12.7267 13.1942 11.5107 14.331 11.5107 16.6474C11.5107 18.9638 13.1969 21.2011 13.4313 21.5146C13.6672 21.8281 16.7483 26.5813 21.4683 28.619C22.5908 29.1035 23.468 29.3932 24.1504 29.6102C25.2778 29.968 26.3038 29.9173 27.1144 29.797C28.0185 29.6624 29.8979 28.6586 30.2906 27.5597C30.6833 26.4593 30.6833 25.5173 30.5645 25.3209Z" fill="currentColor"/>
 </svg>
diff --git a/src/css/2-components/_buttons.scss b/src/css/2-components/_buttons.scss
index 2285325..2c9b204 100755
--- a/src/css/2-components/_buttons.scss
+++ b/src/css/2-components/_buttons.scss
@@ -126,15 +126,49 @@ $btn-border-width: 0.1rem;
   border: none;
   margin: 0;
   background: none;
+  color: $color-purple-1;
   cursor: pointer;
 }
 
-.btn--invisible svg {
+/* ----------------------------------------------
+  Generated by AnimatiSS
+  Licensed under FreeBSD License
+  URL: https://xsgames.co/animatiss
+  Twitter: @xsgames_
+---------------------------------------------- */
+
+@keyframes social-shake {
+  0%,
+  100% { transform: rotate(0deg); transform-origin: 50% 50%; }
+  10% { transform: rotate(2deg); }
+
+  20%,
+  40%,
+  60% { transform: rotate(-4deg); }
+
+  30%,
+  50%,
+  70% { transform: rotate(4deg); }
+  80% { transform: rotate(-2deg); }
+  90% { transform: rotate(2deg); }
+}
+
+.btn--social:hover {
+  animation: social-shake 1.5s linear both;
+}
+
+.btn--social svg {
   width: 4.2rem;
-  width: clamp(3.5rem, 5vw, 4.2rem);
+  width: clamp(3.5rem, 6vw, 5.5rem);
   height: auto;
 }
 
+.btn--social:hover,
+.btn--social:active,
+.btn--social:focus {
+  color: $color-pink-1;
+}
+
 /* size
 -------------------------------------------------------------- */