fixing footer

ColinB19 · Sep 9, 2024 · ac360b8 · ac360b8
1 parent 07e9287
commit ac360b8
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 3 deletions.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,6 +1,14 @@
 <footer class="footer">
-    <p>&copy; {{site.username}}</p>
-    <p>Build with Jekyll and <span class="love">❤</span> by <a href="https://github.com/nrandecker">Nathan Randecker</a></p>
+    <div class="footer-icons">
+        <!-- Smaller Social Icons -->
+        <a aria-label="Send email" href="mailto:{{ site.social.email }}"><i class="icon fa fa-envelope"></i></a>
+        <a aria-label="My LinkedIn" target="_blank" href="{{ site.social.linkedin }}"><i class="icon fa fa-linkedin" aria-hidden="true"></i></a>
+        <a aria-label="My Github" target="_blank" href="{{ site.social.github }}"><i class="icon fa fa-github-alt" aria-hidden="true"></i></a>
+      </div>
+
+      <!-- Username and Home link in a line below -->
+      <p>&copy; {{ site.username }}</p>
+      <p><a class="link" href="{{ site.baseurl }}/">Home</a></p>
 </footer>
 <script src="//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
 <script src="{{ "/assets/js/sweet-scroll.min.js" | prepend: site.baseurl }}"></script>

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -5224,4 +5224,41 @@ body {
   pre {
     overflow: auto;
     padding: 10px;
-  }
+  }
+
+/*footer icons*/
+  .footer-icons {
+    text-align: center;
+    margin-bottom: 15px;
+}
+
+.footer-icons .icon {
+    height: 20px;
+    width: 20px;
+    padding: 10px;
+    font-size: 20px;
+    border: 1px solid #fff;
+    border-radius: 50%;
+    transition: all 0.7s;
+    margin: 5px;
+}
+
+.footer-icons .icon:hover {
+    color: #1a222c;
+    background: #fff;
+}
+
+.footer p {
+    text-align: center;
+    margin: 5px 0;
+}
+
+.footer a.link {
+    text-decoration: none;
+    color: #fff;
+    transition: color 0.3s ease;
+}
+
+.footer a.link:hover {
+    color: #ddd;
+}