Merge pull request #167 from phel-lang/add-legal-footer

Author: JesusValeraDev

css/components/api.css

@@ -210,7 +210,7 @@
   box-shadow: none;
   opacity: 0;
   pointer-events: none;
-  animation: fadeInButton 0.3s ease-out 0.2s forwards;
+  animation: fadeInButton 0.35s cubic-bezier(0, 0, 1, 0.5) 0.2s forwards;
 }
 
 @keyframes fadeInButton {

css/components/footer.css

@@ -112,7 +112,7 @@
   letter-spacing: 0.05em;
 }
 
-.footer-column:not(.footer-column-spacer) {
+.footer-column {
   margin-top: 0;
 }
 
@@ -146,10 +146,6 @@
   color: var(--color-light-link);
 }
 
-.footer-column-spacer {
-  display: none;
-}
-
 /* Footer Bottom Section */
 .footer-bottom {
   margin-top: var(--space-2xl);
@@ -203,14 +199,6 @@
   font-size: 0.65rem;
 }
 
-/* Tablet Layout */
-@media (min-width: 640px) {
-  .footer-links {
-    grid-template-columns: repeat(2, 1fr);
-    gap: var(--space-2xl);
-  }
-}
-
 /* Desktop Layout */
 @media (min-width: 768px) {
   .site-footer {
@@ -258,7 +246,7 @@
     font-size: var(--text-base);
   }
 
-  .footer-column:not(.footer-column-spacer) {
+  .footer-column {
     margin-top: calc(1.5em + var(--space-lg) + var(--space-md));
   }
 
@@ -293,10 +281,6 @@
     gap: var(--space-3xl);
   }
 
-  .footer-column-spacer {
-    display: block;
-  }
-
   .footer-bottom {
     margin-top: var(--space-3xl);
   }

templates/footer.html

@@ -22,8 +22,6 @@
         </div>
 
         <div class="footer-links">
-            <div class="footer-column footer-column-spacer"></div>
-
             <div class="footer-column">
                 <h3>Documentation</h3>
                 <ul>
@@ -41,6 +39,14 @@ <h3>Community</h3>
                     <li><a href="https://github.com/phel-lang/phel-lang/blob/main/.github/CODE_OF_CONDUCT.md" target="_blank" rel="noopener noreferrer">Code of conduct</a></li>
                 </ul>
             </div>
+
+            <div class="footer-column">
+                <h3>Legal</h3>
+                <ul>
+                    <li><a href="/legal/data-protection/">Data Protection</a></li>
+                    <li><a href="/legal/disclosure/">Disclosure</a></li>
+                </ul>
+            </div>
         </div>
     </div>