zregvart commented on a change in pull request #398:
URL: https://github.com/apache/camel-website/pull/398#discussion_r448032410
##########
File path: antora-ui-camel/src/css/blog.css
##########
@@ -223,3 +223,13 @@ article.blog p {
.blog .page-item.active a {
color: var(--color-white);
}
+
+@media screen and (max-width: 1023px) {
+ article.blog:first-child {
Review comment:
This selector might be a bit problematic as it might target anything
(including an element that's absolutely positioned). I'm fairly certain that to
accommodate the second row on the top level navigation we need to move or add
the padding/margin globaly. I think this change needs to go to `base.css` and
cover all pages. We should also base this from the `--navbar-height` variable
like we do for the `--body-top`. Remember these variables can change and then
`5rem` is not accurate.
##########
File path: antora-ui-camel/src/css/header.css
##########
@@ -387,11 +407,19 @@ body {
.navbar-fill {
flex-grow: 1;
+ order: 3;
+}
+
+.break-row {
+ display: none;
+ flex-basis: 100%;
+ height: 0;
Review comment:
I'm not sure that elements that have `display:none` have a hight, do
they?
##########
File path: antora-ui-camel/src/css/doc.css
##########
@@ -37,12 +37,18 @@
margin: 1.5rem 0;
}
-@media screen and (min-width: 769px) {
+@media screen and (min-width: 1024px) {
.doc > h1.page:first-child {
margin-top: 2.5rem;
}
}
+@media screen and (max-width: 1023px) {
+ .doc > h1.page:first-child {
Review comment:
Could be unnecessary if we move the `--body-top`.
##########
File path: antora-ui-camel/src/css/header.css
##########
@@ -59,18 +65,26 @@ body {
height: var(--navbar-height);
}
+@media screen and (max-width: 1277px) {
+ .navbar-brand {
+ flex-wrap: wrap;
+ }
+}
+
.navbar-burger {
color: var(--navbar-font-color);
- background: none;
+ background: var(--navbar-background);
border: none;
outline: none;
line-height: 1;
- height: var(--navbar-height);
Review comment:
Use the `--navbar-height` variable instead.
##########
File path: antora-ui-camel/src/css/header.css
##########
@@ -351,6 +359,12 @@ body {
margin-left: 2rem;
}
+ @media screen and (min-width: 1024px) and (max-width: 1080px) {
+ .navbar-end {
+ margin-left: 1rem;
Review comment:
This is to change the left margin between the top level navigation (i.e.
"Blog") and the logo? I think we can make that for all resolutions.
##########
File path: antora-ui-camel/src/css/blog.css
##########
@@ -223,3 +223,13 @@ article.blog p {
.blog .page-item.active a {
color: var(--color-white);
}
+
+@media screen and (max-width: 1023px) {
+ article.blog:first-child {
+ margin-top: 5rem;
+ }
+
+ .blog.list aside {
+ margin-top: 4.5rem;
Review comment:
If we move the whole `--body-top` then we don't need to reposition the
individual elements, like the category menu here.
##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -252,12 +252,17 @@ section.frontpage h2 {
}
@media screen and (max-width: 1023px) {
+ header.frontpage {
+ margin-top: var(--navbar-height);
+ }
+
header.frontpage h1 {
font-size: 9vw;
}
header.frontpage svg {
height: 10rem;
+ top: 8rem;
Review comment:
Could be unnecessary if we move the `--body-top`.
##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -252,12 +252,17 @@ section.frontpage h2 {
}
@media screen and (max-width: 1023px) {
+ header.frontpage {
+ margin-top: var(--navbar-height);
Review comment:
Could be unnecessary if we move the `--body-top`.
##########
File path: antora-ui-camel/src/css/static.css
##########
@@ -9,6 +8,12 @@
}
}
+@media screen and (max-width: 1023px) {
+ .static {
+ margin-top: 5rem;
Review comment:
Could be unnecessary if we move the `--body-top`.
##########
File path: antora-ui-camel/src/css/toc.css
##########
@@ -8,6 +8,13 @@
top: var(--toc-top);
}
+@media screen and (min-width: 1024px) and (max-width: 1174px) {
+ .toc.sidebar .toc-menu {
+ margin-top: 4rem;
Review comment:
Could be unnecessary if we move the `--body-top`.
##########
File path: antora-ui-camel/src/css/header.css
##########
@@ -225,14 +227,14 @@ body {
}
}
-@media screen and (max-width: 479px) {
+@media screen and (max-width: 1023px) {
.navbar-menu.is-active {
display: block;
position: absolute;
height: 100vh;
box-shadow: 0 16px 16px 0 rgba(10, 10, 10, 0.1);
overflow-y: auto;
- top: 4rem;
+ top: 8rem;
Review comment:
Could be unnecessary if we move the `--body-top`.
##########
File path: antora-ui-camel/src/css/header.css
##########
@@ -318,6 +320,12 @@ body {
padding: 1rem 2rem 1rem 0;
}
+ @media screen and (max-width: 1080px) {
+ .navbar-item {
+ padding-right: 1.5rem;
+ }
+ }
Review comment:
I'd change this in higher widths, no need for a lot of padding, 1.5rem
should look okay in all resolutions.
##########
File path: antora-ui-camel/src/css/static.css
##########
@@ -1,6 +1,5 @@
.static {
margin: var(--static-margin);
- max-width: var(--static-max-width);
Review comment:
Not sure about this change, why are we making it?
##########
File path: antora-ui-camel/src/partials/header-content.hbs
##########
@@ -23,6 +23,7 @@
</div>
</div>
<div class="navbar-fill"></div>
+ <div class="break-row"></div>
Review comment:
Doesn't seem to make a difference, I've removed this from the DOM in
developer tools and resized from 1023px to 300px, and the layout remained 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:
us...@infra.apache.org
