From 1a4ad2d73646e90d1501b1985d90570dc6a79b50 Mon Sep 17 00:00:00 2001
From: TheThomaas <thethomaas@protonmail.ch>
Date: Thu, 1 May 2025 16:42:50 +0200
Subject: [PATCH] Update button styles

---
 src/_includes/partials/components/link.liquid    |  1 +
 src/_includes/partials/components/socials.liquid |  4 ++--
 src/css/components/button.css                    | 14 +++++++++++---
 src/css/components/socials-list.css              | 14 +++-----------
 4 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/_includes/partials/components/link.liquid b/src/_includes/partials/components/link.liquid
index 300f723..53fff6d 100644
--- a/src/_includes/partials/components/link.liquid
+++ b/src/_includes/partials/components/link.liquid
@@ -4,6 +4,7 @@
   {% if class %}class="{{ class }}"{% endif %}
   {% if title %}title="{{ title }}"
   {% else %}title="{{ label }}"{% endif %}
+  {% if attr %}{{ attr }}{% endif %}
   {% if target %}target="{{ target }}"{% endif %}
   >{% if icon %}{% icon icon %}{% endif %}{% if showLabel == true or  showLabel == nil %}{{ label }}{% endif %}
 </a>
\ No newline at end of file
diff --git a/src/_includes/partials/components/socials.liquid b/src/_includes/partials/components/socials.liquid
index fd7f8c8..ab16910 100644
--- a/src/_includes/partials/components/socials.liquid
+++ b/src/_includes/partials/components/socials.liquid
@@ -2,13 +2,13 @@
   {% if socials %}
     {% for social in socials %}
       <li>
-        {% render 'partials/components/link', icon: social.icon, showLabel: showLabel, label: social.title, href: social.link, class: classes, target: "_blank" %}
+        {% render 'partials/components/link', icon: social.icon, showLabel: showLabel, label: social.title, href: social.link, class: "button", attr: "data-ghost-button", target: "_blank" %}
       </li>
     {% endfor %}
     {% if mail %}
       <li>
         {% capture href %}mailto:{{ mail }}{% endcapture %}
-        {% render 'partials/components/link', icon: "mail", showLabel: showLabel, label: "Contactez moi par mail", href: href, class: classes, target: "_blank" %}
+        {% render 'partials/components/link', icon: "mail", showLabel: showLabel, label: "Contactez moi par mail", href: href, class: "button", attr: "data-ghost-button", target: "_blank" %}
       </li>
     {% endif %}
   {% endif %}
diff --git a/src/css/components/button.css b/src/css/components/button.css
index 9f84290..bd46f7d 100644
--- a/src/css/components/button.css
+++ b/src/css/components/button.css
@@ -43,7 +43,7 @@
   color: var(--button-hover-color);
 }
 
-.button:focus {
+.button:focus:focus-visible {
   outline-width: var(--button-outline-width, var(--button-border-width));
   outline-style: var(--button-outline-style, var(--button-border-style));
   outline-color: var(--button-outline-color, var(--button-border-color));
@@ -64,9 +64,17 @@
   --button-hover-bg: #c24a56;
 }
 
-/* Ghost buttons */
-.button[data-ghost-button] {
+/* Outline buttons */
+.button[data-outline-button] {
   --button-bg: transparent;
   --button-border-color: currentColor;
   --button-color: currentColor;
 }
+
+/* Ghost buttons */
+.button[data-ghost-button] {
+  --button-bg: transparent;
+  --button-border-color: transparent;
+  --button-color: currentColor;
+  --button-padding: .2em .4em;
+}
diff --git a/src/css/components/socials-list.css b/src/css/components/socials-list.css
index 37d8688..51bd7e7 100644
--- a/src/css/components/socials-list.css
+++ b/src/css/components/socials-list.css
@@ -1,19 +1,11 @@
 .socials-list {
   gap: 0.2rem;
   margin-block-start: 1rem;
+  --button-icon-size: 1.2em;
 }
 .socials-list--label {
-  gap: 2rem;
+  gap: .6rem;
 }
 .socials-list--label a {
-  --item-color: black;
-  --icon-color: #262626;
-  text-underline-offset: 0.25rem;
-  font-weight: 500;
-  -webkit-text-decoration: underline #262626;
-  text-decoration: underline #262626;
-}
-.socials-list--label a:hover {
-  --item-color: var(--text-2);
-  --icon-color: var(--text-2);
+  --button-font-weight: 600;
 }
\ No newline at end of file