Added footer to op-deployer (#14374)

op-deployer/book/book.toml

@@ -9,4 +9,5 @@ title = "OP Deployer Book"
 site-url = "/op-deployer/"
 git-repository-url = "https://github.com/ethereum-optimism/optimism/tree/develop/op-deployer/book"
 edit-url-template = "https://github.com/ethereum-optimism/optimism/tree/develop/op-deployer/book/{path}"
-additional-css = ["custom.css"]
+additional-css = ["custom.css", "theme/css/footer.css"]
+additional-js = ["theme/js/footer.js"]

op-deployer/book/theme/css/Footer.css

@@ -0,0 +1,71 @@
+.mdbook-footer {
+  width: 100%;
+  padding: 4rem 2.5rem;  /* Increased padding */
+  background-color: var(--bg);
+  border-top: 1px solid var(--sidebar-bg);
+  margin-top: 5rem;  /* Increased margin */
+}
+
+.mdbook-footer .footer-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;  /* Increased gap */
+  align-items: center;
+}
+
+.mdbook-footer .policy-links {
+  display: flex;
+  gap: 4rem;  /* Increased gap between links */
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.mdbook-footer .policy-links a {
+  color: var(--fg);
+  text-decoration: none;
+  transition: opacity 0.2s;
+  font-size: 1.35rem;  /* Increased font size */
+  opacity: 0.85;
+  font-weight: 400;
+  line-height: 1.6;  /* Increased line height */
+}
+
+.mdbook-footer .policy-links a:hover {
+  opacity: 1;
+  text-decoration: underline;
+}
+
+.mdbook-footer .copyright {
+  color: var(--fg);
+  font-size: 1.35rem;  /* Increased font size */
+  opacity: 0.85;
+  text-align: center;
+  font-weight: 400;
+  line-height: 1.6;  /* Increased line height */
+}
+
+.mdbook-footer .copyright a {
+  color: var(--fg);
+  text-decoration: none;
+}
+
+.mdbook-footer .copyright a:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 640px) {
+  .mdbook-footer .policy-links {
+      gap: 2.5rem;  /* Increased gap for mobile */
+  }
+
+  .mdbook-footer {
+      padding: 3rem 2rem;  /* Increased padding for mobile */
+  }
+
+  .mdbook-footer .policy-links a,
+  .mdbook-footer .copyright {
+      font-size: 1.25rem;  /* Increased font size for mobile */
+  }
+}

op-deployer/book/theme/js/Footer.js

@@ -0,0 +1,41 @@
+// Create footer element
+function createFooter() {
+  const footer = document.createElement('footer');
+  footer.className = 'mdbook-footer';
+
+  const container = document.createElement('div');
+  container.className = 'footer-container';
+
+  // Add legal links
+  const policyLinks = document.createElement('div');
+  policyLinks.className = 'policy-links';
+
+  const links = [
+      { href: 'https://optimism.io/community-agreement', text: 'Community Agreement' },
+      { href: 'https://optimism.io/terms', text: 'Terms of Service' },
+      { href: 'https://optimism.io/data-privacy-policy', text: 'Privacy Policy' }
+  ];
+
+  links.forEach(link => {
+      const a = document.createElement('a');
+      a.href = link.href;
+      a.textContent = link.text;
+      policyLinks.appendChild(a);
+  });
+
+  // Add copyright notice
+  const copyright = document.createElement('div');
+  copyright.className = 'copyright';
+  copyright.innerHTML = `© ${new Date().getFullYear()} <a href="https://optimism.io">Optimism Foundation. All rights reserved.</a>`;
+
+  // Assemble footer
+  container.appendChild(policyLinks);
+  container.appendChild(copyright);
+  footer.appendChild(container);
+
+  // Add footer to page
+  document.body.appendChild(footer);
+}
+
+// Run after DOM is loaded
+document.addEventListener('DOMContentLoaded', createFooter);