Merge pull request #9 from opendevise/issue-4-footer

resolves #4 populate footer with project-specific information and style it

Author: jmcc0nn3ll

ui/src/css/footer.css

@@ -1,15 +1,122 @@
 footer.footer {
   background-color: var(--footer-background);
   color: var(--footer-font-color);
-  font-size: calc(15 / var(--rem-base) * 1rem);
+  font-size: calc(14 / var(--rem-base) * 1rem);
   line-height: var(--footer-line-height);
-  padding: 1.5rem;
+  padding: 2rem 1rem;
+  display: flex;
+  flex-direction: column;
 }
 
 .footer p {
-  margin: 0.5rem 0;
+  margin: 0;
 }
 
 .footer a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.footer a:hover {
   color: var(--footer-link-font-color);
 }
+
+.footer img {
+  vertical-align: middle;
+}
+
+.footer p + p {
+  margin-top: 1em;
+}
+
+.footer-main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.footer-brand {
+  display: flex;
+  align-items: center;
+  margin: 0;
+}
+
+.footer-brand-links {
+  list-style: none;
+  display: flex;
+  margin: 1.25rem 0 0;
+  padding: 0;
+  font-size: 0.9rem;
+}
+
+.footer-brand-links li + li::before {
+  content: '|';
+  padding: 0 0.5em;
+}
+
+.footer-brand-follow {
+  font-size: calc(24 / var(--rem-base) * 1rem);
+  font-weight: var(--body-font-weight-bold);
+  line-height: 1;
+}
+
+.footer p.footer-brand-follow {
+  margin-top: 1.25rem;
+}
+
+.footer-brand-follow .logo {
+  filter: invert(100%);
+  width: calc(24 / var(--rem-base) * 1rem);
+}
+
+.footer-brand-follow .handle {
+  padding: 0 0 0.1em 0.5ch;
+}
+
+.footer-legal {
+  margin-top: 1.5rem;
+}
+
+.footer-legal,
+.footer-thanks {
+  text-align: center;
+}
+
+.footer-thanks .badges {
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+}
+
+.footer-thanks .badges a + a {
+  margin-left: 1em;
+}
+
+@media screen and (min-width: 1024px) {
+  footer.footer {
+    flex-direction: row;
+    position: relative;
+    z-index: var(--z-index-footer);
+  }
+
+  .footer-legal {
+    margin-top: 0;
+    padding: 0 1.5rem;
+    text-align: left;
+    width: 40%;
+  }
+
+  .footer-main,
+  .footer-thanks {
+    width: 30%;
+  }
+
+  .footer-thanks {
+    text-align: right;
+  }
+
+  .footer-thanks .badges {
+    display: flex;
+    justify-content: flex-end;
+  }
+}

ui/src/css/vars.css

@@ -7,6 +7,7 @@
   --color-smoke-70: #f0f0f0;
   --color-smoke-90: #e1e1e1;
   --color-gray-10: #c1c1c1;
+  --color-gray-15: #bababa;
   --color-gray-30: #9c9c9c;
   --color-gray-40: #8e8e8e;
   --color-gray-50: #808080;
@@ -118,9 +119,9 @@
   --toc-line-height: 1.2;
   /* footer */
   --footer-line-height: var(--doc-line-height);
-  --footer-background: var(--color-smoke-90);
-  --footer-font-color: var(--color-gray-70);
-  --footer-link-font-color: var(--color-jet-80);
+  --footer-background: var(--color-jet-80);
+  --footer-font-color: var(--color-gray-15);
+  --footer-link-font-color: var(--color-white);
   /* dimensions and positioning */
   --navbar-height: calc(63 / var(--rem-base) * 1rem);
   --toolbar-height: calc(45 / var(--rem-base) * 1rem);

ui/src/partials/footer-content.hbs

@@ -1,4 +1,29 @@
 <footer class="footer">
-  <p>This page was built using the Antora default UI.</p>
-  <p>The source code for this UI is licensed under the terms of the MPL-2.0 license.</p>
+  <div class="footer-main">
+    <figure class="footer-brand">
+      <a class="logo" href="{{or site.url siteRootPath}}"><img src="{{uiRootPath}}/img/jetty-logo.svg" alt="{{site.title}}" height="46" width="160"></a>
+    </figure>
+    <ul class="footer-brand-links">
+      <li><a href="{{relativize (resolvePageURL 'docs::index.adoc')}}">Docs</a></li>
+      <li><a href="{{relativize (resolvePageURL 'ROOT::support.adoc')}}">Support</a></li>
+      <li>Lists: <a href="http://dev.eclipse.org/mhonarc/lists/jetty-users/maillist.html" target="_blank" rel="noopener">users</a> - <a href="http://dev.eclipse.org/mhonarc/lists/jetty-dev/maillist.html" target="_blank" rel="noopener">dev</a></li>
+      <li><a href="https://github.com/eclipse/jetty.project" target="_blank" rel="noopener">Source</a></li>
+    </ul>
+    <p class="footer-brand-follow">
+      <a href="https://twitter.com/JettyProject" title="Follow us on X" target="_blank" rel="noopener"><img src="{{{uiRootPath}}}/img/x-logo.svg" alt="X logo" class="logo" width="24"><span class="handle">@JettyProject</span></a>
+    </p>
+  </div>
+  <div class="footer-legal">
+    <p>Copyright © 2008-{{{year}}} Webtide</p>
+    <p>The <a href="https://github.com/webtide/jetty.website" target="_blank" rel="noopener">UI for this site</a> is derived from the Antora default UI and is licensed under the MPL-2.0 license. Several icons are imported from <a href="https://primer.style/octicons/" target="_blank" rel="noopener">Octicons</a> and are licensed under the MIT license.</p>
+    <p>Eclipse Jetty® is a trademarks of the Eclipse Foundation, Inc.</p>
+  </div>
+  <div class="footer-thanks">
+    <p>This project is made possible by Webtide. Additional thanks to the <a href="https://eclipse.org" target="_blank" rel="noopener">Eclipse Foundation</a> for hosting this project.</p>
+    <p class="badges">
+      <a href="https://webtide.com" title="Development led by Webtide" target="_blank" rel="noopener"><img src="{{{uiRootPath}}}/img/webtide-logo.png" alt="Webtide Logo" width="100"></a>
+      <a href="https://jetbrains.com/idea" title="IntelliJ IDEA integration provided by JetBrains" target="_blank" rel="noopener"><img src="{{{uiRootPath}}}/img/intellij-idea-logo.svg" alt="IntelliJ IDEA Logo" width="24"></a>
+    </p>
+    <p>Authored in <a href="https://asciidoc.org" target="_blank" rel="noopener">AsciiDoc</a>.<br>Produced by <a href="https://antora.org" target="_blank" rel="noopener">Antora</a> and <a href="https://asciidoctor.org" target="_blank" rel="noopener">Asciidoctor</a>.</p>
+  </div>
 </footer>