CAMEL-15185: add footer desktop and mobile design for hugo and antora pages
diff --git a/antora-ui-camel/src/css/footer.css b/antora-ui-camel/src/css/footer.css
index 83ea640..ef152e4 100644
--- a/antora-ui-camel/src/css/footer.css
+++ b/antora-ui-camel/src/css/footer.css
@@ -30,7 +30,7 @@
height: 1px;
width: 25rem;
margin: 2rem auto 1rem auto;
- background: var(--footer-font-color);
+ background: var(--footer-after-background);
}
footer .footer a {
@@ -43,7 +43,7 @@
}
footer .footer .context a {
- font-size: 18px;
+ font-size: 15px;
text-transform: uppercase;
}
@@ -54,7 +54,7 @@
width: 8px;
height: 8px;
margin: 0 1rem;
- background: var(--footer-font-color);
+ background: var(--footer-after-background);
}
footer .footer .context:last-child a::after {
@@ -106,12 +106,6 @@
margin: 0;
}
-@media screen and (max-width: 874px) {
- footer .footer figure.logo {
- display: none;
- }
-}
-
.footer-tools {
position: relative;
top: -2rem;
@@ -134,7 +128,7 @@
height: 0;
}
-footer .footer .navbar-tools {
+footer .footer .footer-icons {
display: flex;
align-items: flex-end;
justify-content: flex-end;
@@ -143,9 +137,41 @@
font-weight: bold;
}
-footer .footer .navbar-tools .brand-icon {
+footer .footer .footer-icons .brand-icon {
height: 2em;
width: 1.75em;
margin: 0.35rem;
fill: var(--navbar-font-color);
}
+
+@media screen and (max-width: 750px) {
+ footer .footer dl {
+ flex-basis: 100%;
+ margin-top: 2rem;
+ }
+
+ footer .footer figure.logo {
+ text-align: center;
+ }
+
+ footer .footer figure.logo img {
+ width: 4.5rem;
+ }
+
+ footer .footer p.remark::after {
+ width: auto;
+ }
+
+ footer .footer .context a {
+ font-size: 13.5px;
+ }
+
+ footer .footer .context a::after {
+ width: 5px;
+ height: 5px;
+ }
+
+ footer .footer .footer-icons .brand-icon {
+ height: 1.5rem;
+ }
+}
diff --git a/antora-ui-camel/src/css/vars.css b/antora-ui-camel/src/css/vars.css
index 40c2849..e38a678 100644
--- a/antora-ui-camel/src/css/vars.css
+++ b/antora-ui-camel/src/css/vars.css
@@ -131,6 +131,7 @@
--footer-line-height: var(--doc-line-height);
--footer-background: var(--color-smoke-50);
--footer-font-color: var(--color-gray-70);
+ --footer-after-background: var(--color-gray-50);
--footer-link-font-color: var(--color-jet-80);
--footer-height: 23rem; /* empirically corresponding current design of the foooter */
/* dimensions */
diff --git a/antora-ui-camel/src/img/hide-footer-menu.svg b/antora-ui-camel/src/img/hide-footer-menu.svg
new file mode 100644
index 0000000..c22a3c7
--- /dev/null
+++ b/antora-ui-camel/src/img/hide-footer-menu.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg style="stroke:black;height: 35px;float: right;margin: -4rem 0 0 0;" viewBox="0 0 100 100">
+ <line x1="32.5" y1="50" x2="67.5" y2="85" stroke-width="5"></line>
+ <line x1="67.5" y1="50" x2="32.5" y2="85" stroke-width="5"></line>
+</svg>
\ No newline at end of file
diff --git a/antora-ui-camel/src/img/show-footer-menu.svg b/antora-ui-camel/src/img/show-footer-menu.svg
new file mode 100644
index 0000000..e5d0dbe
--- /dev/null
+++ b/antora-ui-camel/src/img/show-footer-menu.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg style="stroke:black;height: 40px;float: right;margin: -3.5rem 0 0 0;" viewBox="0 0 100 100">
+ <line x1="32.5" y1="50" x2="67.5" y2="50" stroke-width="5"></line>
+ <line x1="50" y1="32.5" x2="50" y2="67.5" stroke-width="5"></line>
+</svg>
\ No newline at end of file
diff --git a/antora-ui-camel/src/partials/footer-content.hbs b/antora-ui-camel/src/partials/footer-content.hbs
index 12301db..ad4631a 100644
--- a/antora-ui-camel/src/partials/footer-content.hbs
+++ b/antora-ui-camel/src/partials/footer-content.hbs
@@ -3,22 +3,33 @@
</div>
<footer>
<div class="footer">
- <figure class="logo">
- <img src="{{siteRootPath}}/_/img/logo-d.svg" class="logo-small mt-60" alt="Apache Camel Logo" aria-label="white silhouette of a camel in front of a sand dune">
- </figure>
<dl>
+ <figure class="logo">
+ <img src="{{siteRootPath}}/_/img/logo-d.svg" class="logo-small mt-60" alt="Apache Camel Logo"
+ aria-label="white silhouette of a camel in front of a sand dune">
+ </figure>
<dt>Overview</dt>
<dd><a href="{{siteRootPath}}/blog/">Blog</a></dd>
- <dd><a href="{{siteRootPath}}/components/latest/">Components</a></dd>
+ <dd><a href="{{siteRootPath}}/docs/">Documentation</a></dd>
+ <dd><a href="{{siteRootPath}}/community/support">COmmunity</a></dd>
<dd><a href="{{siteRootPath}}/download/">Download</a></dd>
- <dd><a href="{{siteRootPath}}/manual/latest/getting-started.html">Getting started</a></dd>
+ </dl>
+ <dl>
+ <dt>Documentation</dt>
+ <dd><a href="{{siteRootPath}}/manual/latest/">User Manual</a></dd>
+ <dd><a href="{{siteRootPath}}/components/latest/index.html">Components</a></dd>
+ <dd><a href="{{siteRootPath}}/camel-k/latest/">Camel-K</a></dd>
+ <dd><a href="{{siteRootPath}}/camel-kafka-connector/latest/">Camel Kafka Connector</a></dd>
+ <dd><a href="{{siteRootPath}}/camel-quarkus/latest/">Camel Quarkus</a></dd>
+ <dd><a href="{{siteRootPath}}/camel-spring-boot/latest/">Camel Spring Boot</a></dd>
+ <dd><a href="{{siteRootPath}}/camel-karaf/latest/">Camel Karaf</a></dd>
<dd><a href="{{siteRootPath}}/manual/latest/faq/index.html">FAQ</a></dd>
</dl>
<dl>
<dt>Community</dt>
- <dd><a href="https://www.apache.org/foundation/policies/conduct">Code of conduct</a></d>
<dd><a href="{{siteRootPath}}/community/support/">Support</a></dd>
<dd><a href="{{siteRootPath}}/manual/latest/contributing.html">Contributing</a></dd>
+ <dd><a href="{{siteRootPath}}/manual/latest/mailing-lists.html">Mailing Lists</a></dd>
<dd><a href="{{siteRootPath}}/community/user-stories/">User stories</a></dd>
<dd><a href="{{siteRootPath}}/community/articles/">Articles</a></dd>
<dd><a href="{{siteRootPath}}/community/books/">Books</a></dd>
@@ -33,11 +44,25 @@
<dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/foundation/sponsorship.html" title="Sponsorship">Sponsorship</a></dd>
<dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/foundation/thanks.html" title="Thanks">Thanks</a></dd>
</dl>
- <p>
+ <p class="remark">
© 2004-{{now_year}} The <a href="https://apache.org">Apache Software Foundation</a>.<br>
Apache Camel, Camel, Apache, the Apache feather logo, and the Apache Camel project logo are trademarks of
The Apache Software Foundation. All other marks mentioned may be trademarks or registered trademarks of
their respective owners.
</p>
+ <div class="resources">
+ <div class="context">
+ <a href="#">Privacy Policy</a>
+ </div>
+ <div class="context">
+ <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/foundation/policies/conduct">Code of Conduct</a>
+ </div>
+ </div>
+ <div class="break-row-footer"></div>
+ <div id="social-media" class="footer-icons">
+ <a rel="noopener noreferrer nofollow" href="https://github.com/apache/camel/" title="Collaborate on GitHub"><svg class="brand-icon"><use xlink:href="{{uiRootPath}}/img/brand-logos.svg#github" /></svg></a>
+ <a rel="noopener noreferrer nofollow" href="https://gitter.im/apache/apache-camel" title="Chat on Gitter"><svg class="brand-icon"><use xlink:href="{{uiRootPath}}/img/brand-logos.svg#gitter" /></svg></a>
+ <a rel="noopener noreferrer nofollow" href="https://twitter.com/ApacheCamel" title="Follow Apache Camel on Twitter"><svg class="brand-icon"><use xlink:href="{{uiRootPath}}/img/brand-logos.svg#twitter" /></svg></a>
+ </div>
</div>
</footer>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 72ca3cd..cab0ee8 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -17,7 +17,6 @@
<dd><a href="/community/support/">Community</a></dd>
<dd><a href="/blog/">Download</a></dd>
</dl>
-
<dl>
<dt>Documentation</dt>
<dd><a href="/manual/latest/">User Manual</a></dd>
@@ -29,7 +28,6 @@
<dd><a href="/camel-karaf/latest/">Camel Karaf</a></dd>
<dd><a href="/manual/latest/faq/index.html">FAQ</a></dd>
</dl>
-
<dl>
<dt>Community</dt>
<dd><a href="/community/support/">Support</a></dd>
@@ -40,7 +38,6 @@
<dd><a href="/community/books/">Books</a></dd>
<dd><a href="/community/team/">Team</a></dd>
</dl>
-
<dl>
<dt>About</dt>
<dd><a href="/acknowledgments/">Acknowledgments</a></d>
@@ -50,7 +47,6 @@
<dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/foundation/sponsorship.html" title="Sponsorship">Sponsorship</a></dd>
<dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/foundation/thanks.html" title="Thanks">Thanks</a></dd>
</dl>
-
<p class="remark">
© 2004-{{ now.Format "2006" }} The <a href="https://apache.org">Apache Software Foundation</a>.<br>
Apache Camel, Camel, Apache, the Apache feather logo, and the Apache Camel project logo are trademarks of
@@ -69,7 +65,7 @@
</div>
</div>
<div class="break-row-footer"></div>
- <div id="social-media" class="navbar-tools">
+ <div id="social-media" class="footer-icons">
<a rel="noopener noreferrer nofollow" href="https://github.com/apache/camel/" title="Collaborate on GitHub"><svg class="brand-icon"><use href="{{ "_/img/brand-logos.svg#github" | relURL }}" /></svg></a>
<a rel="noopener noreferrer nofollow" href="https://gitter.im/apache/apache-camel" title="Chat on Gitter"><svg class="brand-icon"><use href="{{ "/_/img/brand-logos.svg#gitter" | relURL }}" /></svg></a>
<a rel="noopener noreferrer nofollow" href="https://twitter.com/ApacheCamel" title="Follow Apache Camel on Twitter"><svg class="brand-icon"><use href="{{ "/_/img/brand-logos.svg#twitter" | relURL }}" /></svg></a>
