Merge pull request #1 from JI-0/footer-icons

Add footer link icons
ttomczak3 · Nov 19, 2023 · dbb6855 · dbb6855
2 parents d7ff15c + f2bdb6a
commit dbb6855
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 0 deletions.
diff --git a/public/github-mark-white.svg b/public/github-mark-white.svg
diff --git a/public/github-mark.svg b/public/github-mark.svg
diff --git a/public/li-in-white.png b/public/li-in-white.png
diff --git a/public/li-in.png b/public/li-in.png
diff --git a/public/mail-white.svg b/public/mail-white.svg
diff --git a/public/mail.svg b/public/mail.svg
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -3,10 +3,27 @@ const year = new Date().getFullYear();
 ---
 <footer>
     <div>
+        <div>
+            <ul class="icons">
+                <li><a href="#" target="_blank" class="foot-btn"><span class="git-icon">GitHub</span></a></li>
+                <li><a href="mailto: #@gmail.com" class="foot-btn"><span class="mail-icon">Email</span></a></li>
+                <li><a href="#" target="_blank" class="foot-btn"><span class="linked-in">LinkedIn</span></a></li>
+            </ul>
+        </div>
         <small>&copy; {year} Milky-Way by <a href="https://github.com/ttomczak3">ttomczak</a>. All Rights Reserved.</small>
     </div>
 </footer>
 <style>
+    ul.icons {
+		cursor: default;
+		list-style: none;
+	}
+
+    ul.icons li {
+        display: inline-block;
+        padding: 0 0.75rem 0 0;
+    }
+
     div {
         margin: 4rem 0;
         text-align: center;

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -78,6 +78,36 @@ p {
     margin: 0 13px;
 }
 
+/* Footer */
+.foot-btn {
+    display: flex;
+    padding: 20px;
+    height: 30px;
+    width: 30px;
+    border-radius: 50%;
+    border: 5px solid white;
+}
+
+.foot-btn:hover {
+    background-color: lightskyblue;
+}
+
+.light .foot-btn {
+    border: 5px solid black;
+}
+
+.git-icon {
+    content: url("/github-mark-white.svg");
+}
+
+.mail-icon {
+    content: url("/mail-white.svg");
+}
+
+.linked-in {
+    content: url("/li-in-white.png");
+}
+
 /* Card listing */
 .link-card-grid {
     display: grid;
@@ -120,6 +150,18 @@ html.light {
     color: #fdebf3;
 }
 
+.light .git-icon {
+    content: url("/github-mark.svg");
+}
+
+.light .mail-icon {
+    content: url("/mail.svg");
+}
+
+.light .linked-in {
+    content: url("/li-in.png");
+}
+
 /* Media Query */
 @media only screen and (max-width: 600px) {
     body {