Add page source link and footer link hover effects

index.html

@@ -19,14 +19,22 @@
             <svg id="barTemplate" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 8.47 8.47"><path fill="none" stroke="#3d2f1f" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.8" d="m1.5 4.23.23-.1a6 6 0 0 1 5.01 0l.23.1" style="paint-order:markers stroke fill"/></svg>
         </span>
     </h1>
+
     <h2>About Me</h2>
     <p>Hi there! I am Niki and welcome to my website, I make stuff with computers. My current project is <a href="https://roplus.dev" target="_blank" rel="noopener">roplus.dev</a>!</p>
+        
     <h2>Links n Stuff</h2>
     <ul>
         <li><a href="https://gitlab.com/Nikology" target="_blank" rel="noopener">GitLab</a></li>
     </ul>
     <footer>
         <p>Bird recording by Petter Westberg via <a href="https://xeno-canto.org/1087467" target="_blank" rel="noopener">xeno-canto</a>, CC BY-NC-SA 4.0</p>
+        <p>
+            <a href="https://gitlab.com/Nikology/nikology.dev">
+                Page Source
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 380"><path d="m282.83 170.73-.27-.69-26.14-68.22a6.8 6.8 0 0 0-2.69-3.24 7 7 0 0 0-8 .43 7 7 0 0 0-2.32 3.52l-17.65 54h-71.47l-17.65-54a6.86 6.86 0 0 0-2.32-3.53 7 7 0 0 0-8-.43 6.87 6.87 0 0 0-2.69 3.24L97.44 170l-.26.69a48.54 48.54 0 0 0 16.1 56.1l.09.07.24.17 39.82 29.82 19.7 14.91 12 9.06a8.07 8.07 0 0 0 9.76 0l12-9.06 19.7-14.91 40.06-30 .1-.08a48.56 48.56 0 0 0 16.08-56.04" transform="matrix(1.9787 0 0 2.0178 -185.94 -193.36)"/></svg>
+            </a>
+        </p>
     </footer>
     <!-- Scripts -->
     <script>

styles.css

@@ -43,12 +43,44 @@ p {
     margin-bottom: 0;
 }
 
+/* a {
+    transition: color 0.5s;
+}
+
+a:hover {
+    color: #3d2f1f;
+} */
+
+/* Footer */
+
 footer {
+    display: flex;
     position: fixed;
     bottom: 1rem;
     left: 1rem;
     font-size: 0.8rem;
-    opacity: 0.4;
+    gap: 1rem;
+}
+
+footer p {
+    color: #3d2f1f66;
+}
+
+footer a {
+    color: #3d2f1f66;
+    transition: color 0.5s;
+}
+
+footer a:hover {
+    color: #3d2f1f;
+}
+
+footer svg {
+    margin-left: 0.25rem;
+    height: 1em;
+    width: 1em;
+    vertical-align: -0.15rem;
+    fill: currentColor;
 }
 
 /* Corner Ribbon */