[camel-website] branch master updated: CAMEL-15360: fix HTML validation issues (#443)

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

[camel-website] branch master updated: CAMEL-15360: fix HTML validation issues (#443)

acosentino
This is an automated email from the ASF dual-hosted git repository.

acosentino pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/camel-website.git


The following commit(s) were added to refs/heads/master by this push:
     new b9b86e8  CAMEL-15360: fix HTML validation issues (#443)
b9b86e8 is described below

commit b9b86e806258dddbd1e5000c0283dd7041f4ece1
Author: Zoran Regvart <[hidden email]>
AuthorDate: Sun Aug 2 14:00:58 2020 +0200

    CAMEL-15360: fix HTML validation issues (#443)
   
    This greatly simplifies the footer design and fixes HTML issues
    identified by `check:html` script.
   
    We're now using Unicode full width plus symbol so we don't need the SVG
    icons for show/hide menu.
---
 antora-ui-camel/src/css/footer.css              | 104 ++++++++++--------------
 antora-ui-camel/src/img/hide-footer-menu.svg    |   4 -
 antora-ui-camel/src/img/show-footer-menu.svg    |   4 -
 antora-ui-camel/src/partials/footer-content.hbs |  93 +++++++++------------
 antora-ui-camel/src/partials/header-content.hbs |   2 +-
 layouts/partials/footer.html                    |  93 +++++++++------------
 layouts/partials/header.html                    |   2 +-
 7 files changed, 119 insertions(+), 183 deletions(-)

diff --git a/antora-ui-camel/src/css/footer.css b/antora-ui-camel/src/css/footer.css
index c67a783..e6efd13 100644
--- a/antora-ui-camel/src/css/footer.css
+++ b/antora-ui-camel/src/css/footer.css
@@ -62,11 +62,13 @@ footer .footer .context:last-child a::after {
 }
 
 footer .footer figure.logo {
+  display: flex;
   flex-direction: row;
   flex-grow: 1;
-  align-items: flex-start;
   justify-content: center;
   margin-inline-start: 0;
+  align-content: center;
+  align-items: center;
 }
 
 footer .footer figure.logo img {
@@ -91,7 +93,7 @@ footer .footer dl dt {
   margin-bottom: 1.5rem;
 }
 
-footer .footer dl dt::after {
+footer .footer dl dt label:first-of-type::after {
   content: '';
   display: block;
   position: relative;
@@ -102,10 +104,6 @@ footer .footer dl dt::after {
   background: var(--footer-font-color);
 }
 
-footer .footer .footer-menu {
-  display: block;
-}
-
 footer .footer dl dd {
   margin: 0;
 }
@@ -126,10 +124,9 @@ footer .footer dl dd {
   height: 2rem;
 }
 
-footer .footer .break-row-footer {
-  display: block;
+footer .resources {
   flex-basis: 100%;
-  height: 0;
+  text-align: center;
 }
 
 footer .footer .footer-icons {
@@ -148,93 +145,74 @@ footer .footer .footer-icons .brand-icon {
   fill: var(--navbar-font-color);
 }
 
-footer .footer .show-menu,
-footer .footer .hide-menu {
+footer .footer input[type="checkbox"],
+footer .footer dl dt label:nth-child(2) {
   display: none;
 }
 
-input[type="checkbox"] {
-  width: 0;
-  height: 0;
-  float: right;
-  visibility: hidden;
-}
-
 @media screen and (max-width: 1023px) {
+  footer {
+    flex-direction: column;
+  }
+
   footer .footer dl {
     flex-basis: 100%;
-    margin-top: 2rem;
+    margin-top: 0;
   }
 
   footer .footer dl dt {
-    margin-bottom: 0;
-  }
-
-  footer .footer figure.logo {
-    text-align: center;
-  }
-
-  footer .footer figure.logo img {
-    width: 4.5rem;
-  }
-
-  footer .footer p.remark::after {
-    width: auto;
+    margin-bottom: 1rem;
+    display: flex;
   }
 
-  footer .footer .context a {
-    font-size: 13.5px;
+  footer .footer dl dt label {
+    user-select: none;
   }
 
-  footer .footer .context a::after {
-    width: 5px;
-    height: 5px;
+  footer .footer dl dt label:nth-child(1) {
+    flex: 1;
   }
 
-  footer .footer .footer-icons .brand-icon {
-    height: 1.5rem;
-  }
-
-  footer .footer .show-menu {
-    float: right;
-    height: 40px;
-    margin-top: -2.5rem;
+  footer .footer dl dt label:nth-child(2) {
+    display: block;
+    height: 1.75rem;
+    width: 1.75rem;
+    line-height: 1.75rem;
+    font-size: 1.75rem;
+    transition: 0.2s;
   }
 
-  footer .footer .hide-menu {
-    float: right;
-    height: 35px;
-    margin-top: -2.5rem;
+  footer .footer input[type="checkbox"]:checked + dl dt label:nth-child(2) {
+    transform: rotate(45deg);
   }
 
-  footer .footer .footer-menu {
+  footer .footer dl dd:first-of-type {
     margin-top: 1rem;
   }
 
-  input[type="checkbox"] + label img.show-menu {
-    display: block;
+  footer .footer figure.logo {
+    margin: 0.5rem auto;
+    text-align: center;
+    flex-basis: 100%;
   }
 
-  input[type="checkbox"] ~ label img.hide-menu,
-  input[type="checkbox"] ~ div.footer-menu {
-    display: none;
+  footer .footer figure.logo img {
+    width: 4.5rem;
   }
 
-  input[type="checkbox"]:checked + label img.show-menu {
-    display: none;
+  footer .footer p.remark::after {
+    width: auto;
   }
 
-  input[type="checkbox"]:checked ~ label img.hide-menu,
-  input[type="checkbox"]:checked ~ div.footer-menu {
-    display: block;
+  footer .footer .footer-icons .brand-icon {
+    height: 1.5rem;
   }
 
-  input[type="checkbox"]:not(:checked) + label img.show-menu {
+  footer input[type="checkbox"]:checked + dl dd {
     display: block;
   }
 
-  input[type="checkbox"]:not(:checked) ~ label .hide-menu,
-  input[type="checkbox"]:not(:checked) ~ div.footer-menu {
+  footer input[type="checkbox"] + dl dd {
     display: none;
   }
 }
diff --git a/antora-ui-camel/src/img/hide-footer-menu.svg b/antora-ui-camel/src/img/hide-footer-menu.svg
deleted file mode 100644
index 76a440d..0000000
--- a/antora-ui-camel/src/img/hide-footer-menu.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" version="1.1">
-  <path stroke-width="5" stroke="#000" d="M32.5 50l35 35m0-35l-35 35"/>
-</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
deleted file mode 100644
index a90c6f0..0000000
--- a/antora-ui-camel/src/img/show-footer-menu.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" version="1.1">
-  <path stroke="#000" stroke-width="5" d="M32.5 50h35M50 32.5v35"/>
-</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 9e6eb03..ff3a62b 100644
--- a/antora-ui-camel/src/partials/footer-content.hbs
+++ b/antora-ui-camel/src/partials/footer-content.hbs
@@ -3,66 +3,50 @@
     </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>
+            <input id="footer-toggle-overview" type="checkbox" title="Show/Hide Overview section" />
             <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>
-                <input type="checkbox" id="show-overview"/>
-                <label for="show-overview"><img class="show-menu" src="{{siteRootPath}}/_/img/show-footer-menu.svg"></label>
-                <label for="show-overview"><img class="hide-menu" src="{{siteRootPath}}/_/img/hide-footer-menu.svg"></label>
-                <div class="footer-menu">
-                    <dd><a href="{{siteRootPath}}/blog/">Blog</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>
-                </div>
+                <dt><label for="footer-toggle-overview">Overview</label><label for="footer-toggle-overview">&#65291;</label></dt>
+                <dd><a href="{{siteRootPath}}/blog/">Blog</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>
             </dl>
+            <input id="footer-toggle-documentation" type="checkbox" title="Show/Hide Documentation section" />
             <dl>
-                <dt>Documentation</dt>
-                <input type="checkbox" id="show-docs"/>
-                <label for="show-docs"><img class="show-menu" src="{{siteRootPath}}/_/img/show-footer-menu.svg"></label>
-                <label for="show-docs"><img class="hide-menu" src="{{siteRootPath}}/_/img/hide-footer-menu.svg"></label>
-                <div class="footer-menu">
-                    <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>
-                </div>
+                <dt><label for="footer-toggle-documentation">Documentation</label><label for="footer-toggle-documentation">&#65291;</label></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>
+            <input id="footer-toggle-community" type="checkbox" title="Show/Hide Community section" />
             <dl>
-                <dt>Community</dt>
-                <input type="checkbox" id="show-community"/>
-                <label for="show-community"><img class="show-menu" src="{{siteRootPath}}/_/img/show-footer-menu.svg"></label>
-                <label for="show-community"><img class="hide-menu" src="{{siteRootPath}}/_/img/hide-footer-menu.svg"></label>
-                <div class="footer-menu">
-                    <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>
-                    <dd><a href="{{siteRootPath}}/community/team/">Team</a></dd>
-                </div>
+                <dt><label for="footer-toggle-community">Community</label><label for="footer-toggle-community">&#65291;</label></dt>
+                <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>
+                <dd><a href="{{siteRootPath}}/community/team/">Team</a></dd>
             </dl>
+            <input id="footer-toggle-about" type="checkbox" title="Show/Hide Acknowledgements section" />
             <dl>
-                <dt>About</dt>
-                <input type="checkbox" id="show-about"/>
-                <label for="show-about"><img class="show-menu" src="{{siteRootPath}}/_/img/show-footer-menu.svg"></label>
-                <label for="show-about"><img class="hide-menu" src="{{siteRootPath}}/_/img/hide-footer-menu.svg"></label>
-                <div class="footer-menu">
-                    <dd><a href="{{siteRootPath}}/acknowledgments/">Acknowledgments</a></d>
-                    <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/events/current-event.html" title="Apache Events">Apache Events</a></dd>
-                    <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/licenses/" title="License">License</a></dd>
-                    <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/security/" title="Security">Security</a></dd>
-                    <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>
-                </div>
+                <dt><label for="footer-toggle-about">About</label><label for="footer-toggle-about">&#65291;</label></dt>
+                <dd><a href="{{siteRootPath}}/acknowledgments/">Acknowledgments</a></d>
+                <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/events/current-event.html" title="Apache Events">Apache Events</a></dd>
+                <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/licenses/" title="License">License</a></dd>
+                <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/security/" title="Security">Security</a></dd>
+                <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">
                 &copy; 2004-{{now_year}} The <a href="https://apache.org">Apache Software Foundation</a>.<br>
@@ -78,8 +62,7 @@
                     <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">
+            <div 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>
diff --git a/antora-ui-camel/src/partials/header-content.hbs b/antora-ui-camel/src/partials/header-content.hbs
index 9babea2..152d672 100644
--- a/antora-ui-camel/src/partials/header-content.hbs
+++ b/antora-ui-camel/src/partials/header-content.hbs
@@ -29,7 +29,7 @@
         <img src= "/_/img/cancel.svg" alt="Clear" id="search-cancel">
         <div id="search_results"></div>
       </div>
-      <div id="social-media" class="navbar-tools">
+      <div class="navbar-tools">
         <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>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index ab46923..b21d318 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -6,66 +6,50 @@
     </div>
     <footer>
         <div class="footer">
+            <figure class="logo">
+                <img class="logo" src="/_/img/logo-d.svg" alt="Apache Camel Logo"
+                    aria-label="white silhouette of a camel in front of a sand dune">
+            </figure>
+            <input id="footer-toggle-overview" type="checkbox" title="Show/Hide Overview section" />
             <dl>
-                <figure class="logo">
-                    <img class="logo" src="/_/img/logo-d.svg" alt="Apache Camel Logo"
-                        aria-label="white silhouette of a camel in front of a sand dune">
-                </figure>
-                <dt>Overview</dt>
-                <input type="checkbox" id="show-overview"/>
-                <label for="show-overview"><img class="show-menu" src="/_/img/show-footer-menu.svg"></label>
-                <label for="show-overview"><img class="hide-menu" src="/_/img/hide-footer-menu.svg"></label>
-                <div class="footer-menu">
-                    <dd><a href="/blog/">Blog</a></dd>
-                    <dd><a href="/docs/">Documentation</a></dd>
-                    <dd><a href="/community/support/">Community</a></dd>
-                    <dd><a href="/blog/">Download</a></dd>
-                </div>
+                <dt><label for="footer-toggle-overview">Overview</label><label for="footer-toggle-overview">&#65291;</label></dt>
+                <dd><a href="/blog/">Blog</a></dd>
+                <dd><a href="/docs/">Documentation</a></dd>
+                <dd><a href="/community/support/">Community</a></dd>
+                <dd><a href="/blog/">Download</a></dd>
             </dl>
+            <input id="footer-toggle-documentation" type="checkbox" title="Show/Hide Documentation section" />
             <dl>
-                <dt>Documentation</dt>
-                <input type="checkbox" id="show-docs"/>
-                <label for="show-docs"><img class="show-menu" src="/_/img/show-footer-menu.svg"></label>
-                <label for="show-docs"><img class="hide-menu" src="/_/img/hide-footer-menu.svg"></label>
-                <div class="footer-menu">
-                    <dd><a href="/manual/latest/">User Manual</a></dd>
-                    <dd><a href="/components/latest/index.html">Components</a></dd>
-                    <dd><a href="/camel-k/latest/">Camel-K</a></dd>
-                    <dd><a href="/camel-kafka-connector/latest/">Camel Kafka Connector</a></dd>
-                    <dd><a href="/camel-quarkus/latest/">Camel Quarkus</a></dd>
-                    <dd><a href="/camel-spring-boot/latest/">Camel Spring Boot</a></dd>
-                    <dd><a href="/camel-karaf/latest/">Camel Karaf</a></dd>
-                    <dd><a href="/manual/latest/faq/index.html">FAQ</a></dd>
-                </div>
+                <dt><label for="footer-toggle-documentation">Documentation</label><label for="footer-toggle-documentation">&#65291;</label></dt>
+                <dd><a href="/manual/latest/">User Manual</a></dd>
+                <dd><a href="/components/latest/index.html">Components</a></dd>
+                <dd><a href="/camel-k/latest/">Camel-K</a></dd>
+                <dd><a href="/camel-kafka-connector/latest/">Camel Kafka Connector</a></dd>
+                <dd><a href="/camel-quarkus/latest/">Camel Quarkus</a></dd>
+                <dd><a href="/camel-spring-boot/latest/">Camel Spring Boot</a></dd>
+                <dd><a href="/camel-karaf/latest/">Camel Karaf</a></dd>
+                <dd><a href="/manual/latest/faq/index.html">FAQ</a></dd>
             </dl>
+            <input id="footer-toggle-community" type="checkbox" title="Show/Hide Community section" />
             <dl>
-                <dt>Community</dt>
-                <input type="checkbox" id="show-community"/>
-                <label for="show-community"><img class="show-menu" src="/_/img/show-footer-menu.svg"></label>
-                <label for="show-community"><img class="hide-menu" src="/_/img/hide-footer-menu.svg"></label>
-                <div class="footer-menu">
-                    <dd><a href="/community/support/">Support</a></dd>
-                    <dd><a href="/manual/latest/contributing.html">Contributing</a></dd>
-                    <dd><a href="/manual/latest/mailing-lists.html">Mailing Lists</a></dd>
-                    <dd><a href="/community/user-stories/">User stories</a></dd>
-                    <dd><a href="/community/articles/">Articles</a></dd>
-                    <dd><a href="/community/books/">Books</a></dd>
-                    <dd><a href="/community/team/">Team</a></dd>
-                </div>
+                <dt><label for="footer-toggle-community">Community</label><label for="footer-toggle-community">&#65291;</label></dt>
+                <dd><a href="/community/support/">Support</a></dd>
+                <dd><a href="/manual/latest/contributing.html">Contributing</a></dd>
+                <dd><a href="/manual/latest/mailing-lists.html">Mailing Lists</a></dd>
+                <dd><a href="/community/user-stories/">User stories</a></dd>
+                <dd><a href="/community/articles/">Articles</a></dd>
+                <dd><a href="/community/books/">Books</a></dd>
+                <dd><a href="/community/team/">Team</a></dd>
             </dl>
+            <input id="footer-toggle-about" type="checkbox" title="Show/Hide Acknowledgements section" />
             <dl>
-                <dt>About</dt>
-                <input type="checkbox" id="show-about"/>
-                <label for="show-about"><img class="show-menu" src="/_/img/show-footer-menu.svg"></label>
-                <label for="show-about"><img class="hide-menu" src="/_/img/hide-footer-menu.svg"></label>
-                <div class="footer-menu">
-                    <dd><a href="/acknowledgments/">Acknowledgments</a></d>
-                    <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/events/current-event.html" title="Apache Events">Apache Events</a></dd>
-                    <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/licenses/" title="License">License</a></dd>
-                    <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/security/" title="Security">Security</a></dd>
-                    <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>
-                </div>
+                <dt><label for="footer-toggle-about">About</label><label for="footer-toggle-about">&#65291;</label></dt>
+                <dd><a href="/acknowledgments/">Acknowledgments</a></d>
+                <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/events/current-event.html" title="Apache Events">Apache Events</a></dd>
+                <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/licenses/" title="License">License</a></dd>
+                <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/security/" title="Security">Security</a></dd>
+                <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">
                 &copy; 2004-{{ now.Format "2006" }} The <a href="https://apache.org">Apache Software Foundation</a>.<br>
@@ -84,8 +68,7 @@
                     <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">
+            <div 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>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index e557ac0..3d7add9 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -59,7 +59,7 @@
                     <img src= "/_/img/cancel.svg" alt="Clear" id="search-cancel">
                     <div id="search_results"></div>
                 </div>
-                <div id="social-media" class="navbar-tools">
+                <div class="navbar-tools">
                   <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>