Merge pull request #155 from ChtiJS/refacto/anchored

refactor(anchored):change styles on anchored
ChtiJS · Dec 12, 2023 · ccc6e6b · ccc6e6b
2 parents b2a30e7 + fc5ad9e
commit ccc6e6b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 28 deletions.
diff --git a/src/components/anchored.module.scss b/src/components/anchored.module.scss
@@ -0,0 +1,28 @@
+.small {
+    font-weight: bold;
+}
+
+a.icon {
+display: none;
+width: var(--column);
+height: var(--vRythm);
+background: var(--tertiary);
+mask-repeat: no-repeat;
+mask-position: left center;
+-webkit-mask-size: calc(var(--vRythm) * 1);
+mask-size: calc(var(--vRythm) * 1);
+}
+
+.root:hover a.icon {
+display: inline-block;
+mask-image: url('/images/icons/link.svg');
+}
+
+a.icon:target {
+display: inline-block;
+mask-image: url('/images/icons/target.svg');
+}
+
+a.icon span {
+display: none;
+}
diff --git a/src/components/anchored.tsx b/src/components/anchored.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import styles from './anchored.module.scss';
 import { publicRuntimeConfig } from '../utils/config';
 
 const Anchored = ({
@@ -9,41 +10,15 @@ const Anchored = ({
   id?: string;
 }) => {
   return (
-    <span className="root">
+    <span className={styles.root}>
       {children}{' '}
       <small>
         <Link href={`#${id}`} legacyBehavior>
-          <a className="icon" id={id} title="Lien vers cette section">
+          <a className={styles.icon} id={id} title="Lien vers cette section">
             <span>🔗</span>
           </a>
         </Link>
       </small>
-      <style jsx>{`
-        small {
-          font-weight: bold;
-        }
-        a.icon {
-          display: none;
-          width: var(--column);
-          height: var(--vRythm);
-          background: var(--tertiary);
-          mask-repeat: no-repeat;
-          mask-position: left center;
-          -webkit-mask-size: calc(var(--vRythm) * 1);
-          mask-size: calc(var(--vRythm) * 1);
-        }
-        .root:hover a.icon {
-          display: inline-block;
-          mask-image: url('${publicRuntimeConfig.basePath}/images/icons/link.svg');
-        }
-        a.icon:target {
-          display: inline-block;
-          mask-image: url('${publicRuntimeConfig.basePath}/images/icons/target.svg');
-        }
-        a.icon span {
-          display: none;
-        }
-      `}</style>
     </span>
   );
 };