[GitHub] [camel-website] zregvart commented on a change in pull request #428: CAMEL-15185: Footer design

[GitBox]

zregvart commented on a change in pull request #428:
URL: https://github.com/apache/camel-website/pull/428#discussion_r454947695



##########
File path: antora-ui-camel/src/css/footer.css
##########
@@ -90,3 +125,92 @@ footer .footer dl dd {
   border-radius: 0.4rem 0.4rem 0 0;
   height: 2rem;
 }
+
+footer .footer .break-row-footer {
+  display: block;
+  flex-basis: 100%;
+  height: 0;
+}
+
+footer .footer .footer-icons {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  line-height: 1.6;
+  padding: 0.5rem;
+  font-weight: bold;
+}
+
+footer .footer .footer-icons .brand-icon {
+  height: 2em;
+  width: 1.75em;
+  margin: 0.35rem;
+  fill: var(--navbar-font-color);
+}
+
+footer .footer .show-menu,
+footer .footer .hide-menu {
+  display: none;
+}
+
+@media screen and (max-width: 626px) {

Review comment:
       I'd put this breakpoint at 1023px, we do that for the majority of 
responsive design and if we wish to prevent wrapping About to the second row, 
it wraps on 667px as well:
   ![Screenshot_2020-07-15 Apache Camel user manual Apache 
Camel](https://user-images.githubusercontent.com/1306050/87533914-a2ae9a80-c695-11ea-974f-bf3bbd689e81.png)
   

##########
File path: antora-ui-camel/src/js/06-mobile-footer.js
##########
@@ -0,0 +1,15 @@
+document.addEventListener('DOMContentLoaded', function () {

Review comment:
       Perhaps we can do a version without JavaScript? Using `<label>` for 
`<input type=checkbox>` and based on [`:checked` 
selector](https://css-tricks.com/almanac/selectors/c/checked/).




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org