You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by GitBox <gi...@apache.org> on 2020/07/31 01:23:18 UTC

[GitHub] [camel-website] zregvart opened a new pull request #443: CAMEL-15360: fix HTML validation issues

zregvart opened a new pull request #443:
URL: https://github.com/apache/camel-website/pull/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.


----------------------------------------------------------------
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:
users@infra.apache.org



[GitHub] [camel-website] AemieJ commented on a change in pull request #443: CAMEL-15360: fix HTML validation issues

Posted by GitBox <gi...@apache.org>.
AemieJ commented on a change in pull request #443:
URL: https://github.com/apache/camel-website/pull/443#discussion_r463949285



##########
File path: 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>

Review comment:
       `<label for="footer-toggle-overview">&#65291;</label>`* is better included with a separate unique **id** to distinguish as it appears for desktop screen as well and the same case for each label with `&#65291;` in content.
   - `<label for="footer-toggle-overview" id="expand">&#65291;</label>`




----------------------------------------------------------------
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:
users@infra.apache.org



[GitHub] [camel-website] AemieJ commented on a change in pull request #443: CAMEL-15360: fix HTML validation issues

Posted by GitBox <gi...@apache.org>.
AemieJ commented on a change in pull request #443:
URL: https://github.com/apache/camel-website/pull/443#discussion_r463385398



##########
File path: antora-ui-camel/src/css/footer.css
##########
@@ -182,59 +181,45 @@ input[type="checkbox"] {
     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;
   }
 
-  footer .footer .show-menu {
-    float: right;
-    height: 40px;
-    margin-top: -2.5rem;
-  }
-
-  footer .footer .hide-menu {
-    float: right;
-    height: 35px;
-    margin-top: -2.5rem;
+  footer .footer input[type="checkbox"] {
+    display: inline;
+    position: relative;
+    top: 2rem;
+    left: 45vw;
+    width: 1.75rem;
+    height: 1.75rem;
+    transition: 0.2s;
   }
 
-  footer .footer .footer-menu {
-    margin-top: 1rem;
+  footer .footer input[type="checkbox"] {

Review comment:
       Is this meant to be changed as `footer .footer input[type="checkbox"]:checked` as it's defined as the same as class as above and thus the preview is failing for the same?




----------------------------------------------------------------
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:
users@infra.apache.org



[GitHub] [camel-website] zregvart commented on pull request #443: CAMEL-15360: fix HTML validation issues

Posted by GitBox <gi...@apache.org>.
zregvart commented on pull request #443:
URL: https://github.com/apache/camel-website/pull/443#issuecomment-667352436


   > @zregvart I found something odd about the checkbox outline so, with the following changes I suggested, the outline is removed.
   
   This is the input showing beneath the content made with `:before`. I've implemented a different solution in the latest changes. We should not remove outline, it helps folk what navigate using the keyboard. That being said I found no way to have the checkbox focused, in the right place with keyboard navigation and not visible at the same time in the latest changes; so we don't have keyboard focus indication (outline) in the latest changes for the plus sign or for the section headings (`dt`).


----------------------------------------------------------------
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:
users@infra.apache.org



[GitHub] [camel-website] AemieJ commented on pull request #443: CAMEL-15360: fix HTML validation issues

Posted by GitBox <gi...@apache.org>.
AemieJ commented on pull request #443:
URL: https://github.com/apache/camel-website/pull/443#issuecomment-667038339


   ![outline-checkbox](https://user-images.githubusercontent.com/44139348/89023549-60e24d00-d341-11ea-98b5-d5a3215504b1.png)
   @zregvart I found something odd about the checkbox outline so, with the following changes I suggested, the outline is removed.
   
   
   


----------------------------------------------------------------
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:
users@infra.apache.org



[GitHub] [camel-website] AemieJ commented on a change in pull request #443: CAMEL-15360: fix HTML validation issues

Posted by GitBox <gi...@apache.org>.
AemieJ commented on a change in pull request #443:
URL: https://github.com/apache/camel-website/pull/443#discussion_r463515027



##########
File path: antora-ui-camel/src/css/footer.css
##########
@@ -182,59 +181,45 @@ input[type="checkbox"] {
     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;
   }
 
-  footer .footer .show-menu {
-    float: right;
-    height: 40px;
-    margin-top: -2.5rem;
-  }
-
-  footer .footer .hide-menu {
-    float: right;
-    height: 35px;
-    margin-top: -2.5rem;
+  footer .footer input[type="checkbox"] {
+    display: inline;
+    position: relative;
+    top: 2rem;
+    left: 45vw;
+    width: 1.75rem;
+    height: 1.75rem;
+    transition: 0.2s;
   }
 
-  footer .footer .footer-menu {
-    margin-top: 1rem;
+  footer .footer input[type="checkbox"]:checked {
+    transform: rotate(45deg);
   }
 
-  input[type="checkbox"] + label img.show-menu {
+  footer .footer input[type="checkbox"]::before {
+    background-color: var(--footer-background);

Review comment:
       Background color required with the above suggestions I made.




----------------------------------------------------------------
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:
users@infra.apache.org



[GitHub] [camel-website] zregvart commented on a change in pull request #443: CAMEL-15360: fix HTML validation issues

Posted by GitBox <gi...@apache.org>.
zregvart commented on a change in pull request #443:
URL: https://github.com/apache/camel-website/pull/443#discussion_r463831967



##########
File path: antora-ui-camel/src/css/footer.css
##########
@@ -182,59 +181,45 @@ input[type="checkbox"] {
     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;
   }
 
-  footer .footer .show-menu {
-    float: right;
-    height: 40px;
-    margin-top: -2.5rem;
-  }
-
-  footer .footer .hide-menu {
-    float: right;
-    height: 35px;
-    margin-top: -2.5rem;
+  footer .footer input[type="checkbox"] {
+    display: inline;
+    position: relative;
+    top: 2rem;
+    left: 45vw;
+    width: 1.75rem;
+    height: 1.75rem;
+    transition: 0.2s;
   }
 
-  footer .footer .footer-menu {
-    margin-top: 1rem;
+  footer .footer input[type="checkbox"]:checked {
+    transform: rotate(45deg);
   }
 
-  input[type="checkbox"] + label img.show-menu {
+  footer .footer input[type="checkbox"]::before {
+    background-color: var(--footer-background);

Review comment:
       I've gone with a different implementation in the latest changes.




----------------------------------------------------------------
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:
users@infra.apache.org



[GitHub] [camel-website] zregvart commented on a change in pull request #443: CAMEL-15360: fix HTML validation issues

Posted by GitBox <gi...@apache.org>.
zregvart commented on a change in pull request #443:
URL: https://github.com/apache/camel-website/pull/443#discussion_r463830149



##########
File path: antora-ui-camel/src/css/footer.css
##########
@@ -182,59 +181,45 @@ input[type="checkbox"] {
     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;
   }
 
-  footer .footer .show-menu {
-    float: right;
-    height: 40px;
-    margin-top: -2.5rem;
-  }
-
-  footer .footer .hide-menu {
-    float: right;
-    height: 35px;
-    margin-top: -2.5rem;
+  footer .footer input[type="checkbox"] {
+    display: inline;
+    position: relative;
+    top: 2rem;
+    left: 45vw;
+    width: 1.75rem;
+    height: 1.75rem;
+    transition: 0.2s;
   }
 
-  footer .footer .footer-menu {
-    margin-top: 1rem;
+  footer .footer input[type="checkbox"]:checked {
+    transform: rotate(45deg);
   }
 
-  input[type="checkbox"] + label img.show-menu {
+  footer .footer input[type="checkbox"]::before {
+    background-color: var(--footer-background);
+    content: '\FF0B';
+    position: absolute;
     display: block;
+    height: 1.75rem;
+    width: 1.75rem;
+    line-height: 1.75rem;
+    font-size: 1.75rem;
+    transition: 0.2s;
   }
 
-  input[type="checkbox"] ~ label img.hide-menu,
-  input[type="checkbox"] ~ div.footer-menu {
-    display: none;
-  }
-
-  input[type="checkbox"]:checked + label img.show-menu {
-    display: none;
-  }
-
-  input[type="checkbox"]:checked ~ label img.hide-menu,
-  input[type="checkbox"]:checked ~ div.footer-menu {
-    display: block;
+  footer .footer input[type="checkbox"]:checked::before {
+    transform: rotate(45deg);

Review comment:
       This is caused by both `input` and `::before` being rotated by 45deg. I've gone with a different implementation in the latest changes.




----------------------------------------------------------------
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:
users@infra.apache.org



[GitHub] [camel-website] AemieJ commented on a change in pull request #443: CAMEL-15360: fix HTML validation issues

Posted by GitBox <gi...@apache.org>.
AemieJ commented on a change in pull request #443:
URL: https://github.com/apache/camel-website/pull/443#discussion_r463385398



##########
File path: antora-ui-camel/src/css/footer.css
##########
@@ -182,59 +181,45 @@ input[type="checkbox"] {
     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;
   }
 
-  footer .footer .show-menu {
-    float: right;
-    height: 40px;
-    margin-top: -2.5rem;
-  }
-
-  footer .footer .hide-menu {
-    float: right;
-    height: 35px;
-    margin-top: -2.5rem;
+  footer .footer input[type="checkbox"] {
+    display: inline;
+    position: relative;
+    top: 2rem;
+    left: 45vw;
+    width: 1.75rem;
+    height: 1.75rem;
+    transition: 0.2s;
   }
 
-  footer .footer .footer-menu {
-    margin-top: 1rem;
+  footer .footer input[type="checkbox"] {

Review comment:
       Is this meant to be changed as `footer .footer input[type="checkbox"]:checked` as it's the same as the stated class as above and thus the preview is failing for the same?




----------------------------------------------------------------
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:
users@infra.apache.org



[GitHub] [camel-website] AemieJ commented on pull request #443: CAMEL-15360: fix HTML validation issues

Posted by GitBox <gi...@apache.org>.
AemieJ commented on pull request #443:
URL: https://github.com/apache/camel-website/pull/443#issuecomment-667511491


   @zregvart yes, I observed that it's better just the **+** is included now within the desktop version (> 1024px) as well so best we include separate id for those labels and change **display** property as per that.


----------------------------------------------------------------
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:
users@infra.apache.org



[GitHub] [camel-website] zregvart commented on a change in pull request #443: CAMEL-15360: fix HTML validation issues

Posted by GitBox <gi...@apache.org>.
zregvart commented on a change in pull request #443:
URL: https://github.com/apache/camel-website/pull/443#discussion_r463831461



##########
File path: antora-ui-camel/src/css/footer.css
##########
@@ -182,59 +181,45 @@ input[type="checkbox"] {
     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;
   }
 
-  footer .footer .show-menu {
-    float: right;
-    height: 40px;
-    margin-top: -2.5rem;
-  }
-
-  footer .footer .hide-menu {
-    float: right;
-    height: 35px;
-    margin-top: -2.5rem;
+  footer .footer input[type="checkbox"] {
+    display: inline;
+    position: relative;
+    top: 2rem;
+    left: 45vw;
+    width: 1.75rem;
+    height: 1.75rem;
+    transition: 0.2s;

Review comment:
       `appearance` is a [experimental](https://developer.mozilla.org/en-US/docs/Web/CSS/appearance) [feature](https://caniuse.com/#feat=css-appearance)we can't rely on it for website to render on most devices. I've gone with a different implementation in the latest changes.




----------------------------------------------------------------
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:
users@infra.apache.org



[GitHub] [camel-website] oscerd merged pull request #443: CAMEL-15360: fix HTML validation issues

Posted by GitBox <gi...@apache.org>.
oscerd merged pull request #443:
URL: https://github.com/apache/camel-website/pull/443


   


----------------------------------------------------------------
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:
users@infra.apache.org



[GitHub] [camel-website] AemieJ commented on a change in pull request #443: CAMEL-15360: fix HTML validation issues

Posted by GitBox <gi...@apache.org>.
AemieJ commented on a change in pull request #443:
URL: https://github.com/apache/camel-website/pull/443#discussion_r463515027



##########
File path: antora-ui-camel/src/css/footer.css
##########
@@ -182,59 +181,45 @@ input[type="checkbox"] {
     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;
   }
 
-  footer .footer .show-menu {
-    float: right;
-    height: 40px;
-    margin-top: -2.5rem;
-  }
-
-  footer .footer .hide-menu {
-    float: right;
-    height: 35px;
-    margin-top: -2.5rem;
+  footer .footer input[type="checkbox"] {
+    display: inline;
+    position: relative;
+    top: 2rem;
+    left: 45vw;
+    width: 1.75rem;
+    height: 1.75rem;
+    transition: 0.2s;
   }
 
-  footer .footer .footer-menu {
-    margin-top: 1rem;
+  footer .footer input[type="checkbox"]:checked {
+    transform: rotate(45deg);
   }
 
-  input[type="checkbox"] + label img.show-menu {
+  footer .footer input[type="checkbox"]::before {
+    background-color: var(--footer-background);

Review comment:
       This line of code isn't required with the above suggestions I made.

##########
File path: antora-ui-camel/src/css/footer.css
##########
@@ -182,59 +181,45 @@ input[type="checkbox"] {
     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;
   }
 
-  footer .footer .show-menu {
-    float: right;
-    height: 40px;
-    margin-top: -2.5rem;
-  }
-
-  footer .footer .hide-menu {
-    float: right;
-    height: 35px;
-    margin-top: -2.5rem;
+  footer .footer input[type="checkbox"] {
+    display: inline;
+    position: relative;
+    top: 2rem;
+    left: 45vw;
+    width: 1.75rem;
+    height: 1.75rem;
+    transition: 0.2s;
   }
 
-  footer .footer .footer-menu {
-    margin-top: 1rem;
+  footer .footer input[type="checkbox"]:checked {
+    transform: rotate(45deg);
   }
 
-  input[type="checkbox"] + label img.show-menu {
+  footer .footer input[type="checkbox"]::before {
+    background-color: var(--footer-background);
+    content: '\FF0B';
+    position: absolute;
     display: block;
+    height: 1.75rem;
+    width: 1.75rem;
+    line-height: 1.75rem;
+    font-size: 1.75rem;
+    transition: 0.2s;
   }
 
-  input[type="checkbox"] ~ label img.hide-menu,
-  input[type="checkbox"] ~ div.footer-menu {
-    display: none;
-  }
-
-  input[type="checkbox"]:checked + label img.show-menu {
-    display: none;
-  }
-
-  input[type="checkbox"]:checked ~ label img.hide-menu,
-  input[type="checkbox"]:checked ~ div.footer-menu {
-    display: block;
+  footer .footer input[type="checkbox"]:checked::before {
+    transform: rotate(45deg);

Review comment:
       `transform: rotate(90deg);` 
   This is 'cause even on clicking it rotates to a plus sign instead of a cross. To make it cross, the following code achieves it.

##########
File path: antora-ui-camel/src/css/footer.css
##########
@@ -182,59 +181,45 @@ input[type="checkbox"] {
     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;
   }
 
-  footer .footer .show-menu {
-    float: right;
-    height: 40px;
-    margin-top: -2.5rem;
-  }
-
-  footer .footer .hide-menu {
-    float: right;
-    height: 35px;
-    margin-top: -2.5rem;
+  footer .footer input[type="checkbox"] {
+    display: inline;
+    position: relative;
+    top: 2rem;
+    left: 45vw;
+    width: 1.75rem;
+    height: 1.75rem;
+    transition: 0.2s;

Review comment:
       In addition to this, there is an outline around the box, to prevent this following code achieves it: 
   ````
   -webkit-appearance: none;
   -moz-appearance: none;
   -o-appearance: none;
   appearance: none;
   outline: 0;




----------------------------------------------------------------
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:
users@infra.apache.org



[GitHub] [camel-website] zregvart commented on a change in pull request #443: CAMEL-15360: fix HTML validation issues

Posted by GitBox <gi...@apache.org>.
zregvart commented on a change in pull request #443:
URL: https://github.com/apache/camel-website/pull/443#discussion_r463985824



##########
File path: 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>

Review comment:
       Yeah I was preoccupied with mobile version that I forgot to check the desktop one. Not sure if assigning `id`s here would be the correct approach. Assigning same `id` to more than one element is not valid HTML. I've set the `display: none` via CSS selector: `footer .footer dl dt label:nth-child(2)`.




----------------------------------------------------------------
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:
users@infra.apache.org



[GitHub] [camel-website] AemieJ commented on pull request #443: CAMEL-15360: fix HTML validation issues

Posted by GitBox <gi...@apache.org>.
AemieJ commented on pull request #443:
URL: https://github.com/apache/camel-website/pull/443#issuecomment-667654630


   LGTM. 


----------------------------------------------------------------
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:
users@infra.apache.org



[GitHub] [camel-website] zregvart commented on pull request #443: CAMEL-15360: fix HTML validation issues

Posted by GitBox <gi...@apache.org>.
zregvart commented on pull request #443:
URL: https://github.com/apache/camel-website/pull/443#issuecomment-667567919


   @AemieJ I think this is now okay to get merged, thanks for reviewing, can you check the latest version when the preview is built?


----------------------------------------------------------------
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:
users@infra.apache.org



[GitHub] [camel-website] zregvart commented on a change in pull request #443: CAMEL-15360: fix HTML validation issues

Posted by GitBox <gi...@apache.org>.
zregvart commented on a change in pull request #443:
URL: https://github.com/apache/camel-website/pull/443#discussion_r463471405



##########
File path: antora-ui-camel/src/css/footer.css
##########
@@ -182,59 +181,45 @@ input[type="checkbox"] {
     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;
   }
 
-  footer .footer .show-menu {
-    float: right;
-    height: 40px;
-    margin-top: -2.5rem;
-  }
-
-  footer .footer .hide-menu {
-    float: right;
-    height: 35px;
-    margin-top: -2.5rem;
+  footer .footer input[type="checkbox"] {
+    display: inline;
+    position: relative;
+    top: 2rem;
+    left: 45vw;
+    width: 1.75rem;
+    height: 1.75rem;
+    transition: 0.2s;
   }
 
-  footer .footer .footer-menu {
-    margin-top: 1rem;
+  footer .footer input[type="checkbox"] {

Review comment:
       Yeah I noticed a quirk artefact in Chrome so I fixed it last minute without running the builds/checks, should be okay now.




----------------------------------------------------------------
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:
users@infra.apache.org