refactor: improve button-like links styles

The goal was to replace the "read more articles about" links with
button-like links to keep a certain consistence between buttons.
The hasIcon variable was useless so I update some components and
especially the back to top link.

1 files changed, 5 insertions, 4 deletions

diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
index 4daa52a..9376958 100644
--- a/src/components/Footer/Footer.module.scss
+++ b/src/components/Footer/Footer.module.scss
@@ -12,6 +12,7 @@
 
 .back-to-top {
   --button-size: #{fun.convert-px(55)};
+  --icon-size: #{fun.convert-px(32)};
 
   position: fixed;
   bottom: calc(var(--toolbar-size) + var(--spacing-md));
@@ -36,19 +37,19 @@
     height: var(--button-size);
 
     svg {
-      width: 100%;
       padding: var(--spacing-2xs);
     }
 
     :global {
       .arrow-head {
-        transform: translateY(12px) translateX(-5px) scale(1.5);
+        transform: translateY(#{fun.convert-px(18)});
         transition: all 0.45s ease-in-out 0s;
       }
 
       .arrow-bar {
         opacity: 0;
-        transform: translateY(12px) translateX(5px) scale(0.5);
+        transform: translateY(#{fun.convert-px(18)})
+          translateX(#{fun.convert-px(5)}) scale(0.5);
         transition: transform 0.45s ease-in-out 0s, opacity 0.7s ease-in-out 0s;
       }
     }
@@ -57,7 +58,7 @@
     &:focus {
       :global {
         .arrow-head {
-          transform: translateY(0) translateX(0) scale(1);
+          transform: translateY(0);
         }
 
         .arrow-bar {