credits under list

Author: stared

index.html

@@ -32,6 +32,19 @@
       <aside id="sidebar" class="sidebar">
         <h2>Equations</h2>
         <nav id="equation-selector" class="equation-selector"></nav>
+
+        <footer class="sidebar-footer">
+          <p>
+            Demo by <a href="https://p.migdal.pl" target="_blank" rel="noopener">Piotr Migdał</a>
+          </p>
+          <p>
+            Source: <a href="https://github.com/stared/equations-explained-colorfully" target="_blank" rel="noopener">github.com/stared/equations-explained-colorfully</a>
+          </p>
+          <p>
+            For more on interactive explanations, see:
+            <a href="https://p.migdal.pl/blog/2024/05/science-games-explorable-explanations/" target="_blank" rel="noopener">Science, games, and explorable explanations</a>
+          </p>
+        </footer>
       </aside>
 
       <main id="main-content" class="main-content">
@@ -45,17 +58,6 @@ <h1 id="equation-title">Interactive Equations</h1>
         <div id="static-description" class="static-description"></div>
 
         <div id="hover-explanation" class="hover-explanation"></div>
-
-        <footer class="footer">
-          <p>
-            Demo by <a href="https://p.migdal.pl" target="_blank" rel="noopener">Piotr Migdał</a> ·
-            <a href="https://github.com/stared/equations-explained-colorfully" target="_blank" rel="noopener">View source on GitHub</a>
-          </p>
-          <p>
-            For more on interactive explanations, see:
-            <a href="https://p.migdal.pl/blog/2024/05/science-games-explorable-explanations/" target="_blank" rel="noopener">Science, games, and explorable explanations</a>
-          </p>
-        </footer>
       </main>
 
       <aside id="editor-sidebar" class="editor-sidebar">

src/style.css

@@ -295,30 +295,30 @@ h1 {
   opacity: 1;
 }
 
-/* Footer */
-.footer {
-  margin-top: auto; /* Push to bottom */
-  padding-top: 3rem;
+/* Sidebar Footer */
+.sidebar-footer {
+  margin-top: auto;
+  padding-top: 2rem;
   font-family: var(--font-ui);
   font-size: 0.8125rem;
-  color: var(--text-tertiary);
-  text-align: center;
+  color: var(--text-secondary); /* Darker text */
+  /* text-align: center; */
 }
 
-.footer p {
+.sidebar-footer p {
   margin: 0.5rem 0;
+  line-height: 1.5;
 }
 
-.footer a {
-  color: var(--text-secondary);
+.sidebar-footer a {
+  color: var(--accent-color);
   text-decoration: none;
-  border-bottom: 1px dotted var(--border-color);
+  border-bottom: none;
   transition: all 0.2s ease;
 }
 
-.footer a:hover {
-  color: var(--accent-color);
-  border-bottom-color: var(--accent-color);
+.sidebar-footer a:hover {
+  text-decoration: underline;
 }
 
 /* Editor Sidebar */