feat: add social media links in footer with new css classes

jonyw4 · Jan 16, 2022 · f7aa73a · f7aa73a
1 parent 7a03a2d
commit f7aa73a
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/webapp/src/components/global/styles/global.css b/webapp/src/components/global/styles/global.css
@@ -143,4 +143,25 @@ label {
 
 [type="radio"] {
   margin-right: 1em;
+}
+
+.inline-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  column-gap: 10px;
+  align-items: center;
+  align-content: center;
+  flex-wrap: nowrap;
+}
+
+.small {
+  font-size: 80%;
+  line-height: normal;
+}
+
+.strong {
+  font-weight: 600;
 }
diff --git a/webapp/src/components/organisms/Footer/Footer.component.tsx b/webapp/src/components/organisms/Footer/Footer.component.tsx
@@ -3,6 +3,22 @@ export function Footer() {
   return (
     <footer>
       <LanguageSelect />
+
+      <ul
+        className="inline-list small strong"
+        style={{ marginBottom: "0.5em" }}
+      >
+        <li>
+          <a href="https://www.linkedin.com/in/jonycelio/">LinkedIn</a>
+        </li>
+        <li>
+          <a href="https://www.instagram.com/jonycelio/">Instagram</a>
+        </li>
+        <li>
+          <a href="https://lyrax.systems/">Lyrax</a>
+        </li>
+      </ul>
+
       <small>
         <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
           CC BY-NC-SA 4.0 2021