Merge pull request #172 from ChtiJS/refacto/link

refactor(link):change styles on links
ChtiJS · Dec 22, 2023 · ca0cc8b · ca0cc8b
2 parents 7c7ae54 + 0701f32
commit ca0cc8b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/src/app/credits/credits.module.scss b/src/app/credits/credits.module.scss
@@ -6,3 +6,9 @@
   border-radius: 50px;
   box-shadow: 5px 5px 2px 1px #c1a008;
 }
+
+.links {
+  display: flex;
+  gap: var(--gutter);
+  justify-content: flex-start;
+}
diff --git a/src/app/credits/page.tsx b/src/app/credits/page.tsx
@@ -90,7 +90,7 @@ export default async function Page() {
                 ? entry.contributions + ' contribution'
                 : entry.contributions + ' contributions'}
             </Paragraph>
-            <Paragraph>
+            <Paragraph className={styles.links}>
               {entry.blog ? (
                 <>
                   <Anchor
@@ -100,7 +100,7 @@ export default async function Page() {
                     }
                     title={`Se rendre sur le blog de ${entry.name}`}
                   >
-                    📰Blog
+                    📰 Blog
                   </Anchor>{' '}
                 </>
               ) : null}
@@ -110,16 +110,17 @@ export default async function Page() {
                     href={'https://twitter.com/' + entry.twitter_username}
                     title={`Se rendre sur le profil Twitter de ${entry.name}`}
                   >
-                    📲Twitter
+                    📲 Twitter
                   </Anchor>{' '}
                 </>
               ) : null}
+
               {
                 <Anchor
                   href={entry.html_url as string}
                   title={`Se rendre sur le profil GitHub de ${entry.name}`}
                 >
-                  💻GitHub
+                  💻 GitHub
                 </Anchor>
               }
             </Paragraph>

diff --git a/src/app/layout.module.scss b/src/app/layout.module.scss
@@ -18,7 +18,7 @@
   align-content: flex-end;
   background: var(--light);
 }
-.contents :first-child {
+.contents > :first-child {
   flex: 1;
 }
 @media screen and (max-width: $CSS_BREAKPOINT_END_S) {