zregvart commented on a change in pull request #370:
URL: https://github.com/apache/camel-website/pull/370#discussion_r434822637
##########
File path: antora-ui-camel/src/css/projects.css
##########
@@ -0,0 +1,94 @@
+.projects h2 {
+ text-align: center;
+}
+
+.projects .box {
+ display: inline-flex;
+ border: 1px solid var(--color-smoke-90);
+ width: 46%;
+ flex-direction: column;
+ align-items: center;
+ padding: 1rem;
+ margin: 1rem;
+}
+
+.projects .box a > img {
+ display: inline-block;
+ width: auto;
+ height: 5rem;
+}
+
+.projects .box a > img + img {
+ padding-left: 1rem;
+}
+
+.projects .box .description {
+ padding: 1rem;
+ text-align: center;
+}
+
+.projects .box .links {
+ align-items: center;
+ margin: 1.5rem 0;
+}
+
+.projects .box .links img {
+ display: inline-flex;
+ margin: 0 0.25rem;
+ width: 1rem;
+ height: 1rem;
+ vertical-align: -0.18rem;
+ filter: invert(24%) sepia(38%) saturate(1353%) hue-rotate(200deg)
brightness(89%) contrast(99%);
+}
+
+.projects .box .links span {
+ padding: 0.5rem;
+ margin: 0 0.4rem;
+ border: 1px solid var(--color-gray-10);
+ border-radius: 10rem;
+ color: var(--body-font-color);
+}
+
+.projects .box .links span:hover {
+ color: var(--body-font-color);
+ border: 2px solid var(--color-gray-30);
+}
+
+.projects .box .links a:hover {
+ text-decoration: none;
+}
+
+@media screen and (max-width: 1023px) {
+ .projects .box {
+ width: 100%;
+ margin: 1rem 0;
+ }
+}
+
+@media screen and (max-width: 480px) {
+ .projects .box .links {
+ padding: 0.4rem 0;
+ }
+
+ .projects .box .links span {
+ margin: 0 0.2rem;
+ padding: 0.4rem;
+ }
+
+ .projects .box {
+ padding: 1rem 0.4rem;
+ }
+
+ .projects .box .links img {
+ height: 0.8rem;
+ width: 0.8rem;
+ vertical-align: -0.1rem;
+ margin: 0 0.2rem;
Review comment:
This looks very odd, we should a simpler and more straightforward way to
center images.
##########
File path: antora-ui-camel/src/css/projects.css
##########
@@ -0,0 +1,94 @@
+.projects h2 {
+ text-align: center;
+}
+
+.projects .box {
+ display: inline-flex;
+ border: 1px solid var(--color-smoke-90);
+ width: 46%;
+ flex-direction: column;
+ align-items: center;
+ padding: 1rem;
+ margin: 1rem;
+}
+
+.projects .box a > img {
+ display: inline-block;
+ width: auto;
+ height: 5rem;
+}
+
+.projects .box a > img + img {
+ padding-left: 1rem;
+}
+
+.projects .box .description {
+ padding: 1rem;
+ text-align: center;
+}
+
+.projects .box .links {
+ align-items: center;
+ margin: 1.5rem 0;
+}
+
+.projects .box .links img {
+ display: inline-flex;
+ margin: 0 0.25rem;
+ width: 1rem;
+ height: 1rem;
+ vertical-align: -0.18rem;
+ filter: invert(24%) sepia(38%) saturate(1353%) hue-rotate(200deg)
brightness(89%) contrast(99%);
Review comment:
This seems overly complex to change the color of a path in SVG, have a
look at how we use SVGs for the social/GitHub icons and can change the color
via SVG. We need the color to be managed via a variable in the vars.css.
##########
File path: content/projects/_index.md
##########
@@ -2,36 +2,140 @@
title: Apache Camel Projects
---
+{{< div "box" >}}
+
+[](/manual/latest/)
+
+## Camel
+
+{{< div "description" >}}
+
+Apache Camel is the Swiss knife of integration. It is an open source
integration framework that is packed with several hundred components that are
used to access databases, message queues and APIs, helping you integrate with
everything.
+
+{{< /div >}}
+
+{{< div "links" >}}
+
+[<span><img src="../img/icons/book-icon.svg" />Docs</span>](/manual/latest/)
Review comment:
Can we put the images in the `img` directory, they already have the
`-icon` in the name no need for a separate directory to hold them. I think we
can use the absolute paths to images, i.e. `/_/img/`, as we do for the Camel
logo above.
##########
File path: static/img/icons/book-icon.svg
##########
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 24 24"><g
data-name="Layer 2"><g data-name="book"><rect width="24" height="24"
opacity="0"/><path d="M19 3H7a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a1 1 0 0 0
1-1V4a1 1 0 0 0-1-1zM7 5h11v10H7a3 3 0 0 0-1 .18V6a1 1 0 0 1 1-1zm0 14a1 1 0 0
1 0-2h11v2z"/></g></g></svg>
Review comment:
Images need to be placed in the `antora-ui-camel/src/img` directory, we
have a pipeline for optimizing SVGs at build time.
##########
File path: antora-ui-camel/src/css/doc.css
##########
@@ -652,11 +652,6 @@ kbd,
}
@media screen and (max-width: 1023px) and (min-width: 480px) {
- .doc > h1.page:first-child,
- .static > h1:first-child {
- font-size: inherit;
- }
-
Review comment:
I'm wondering why this was removed?
##########
File path: antora-ui-camel/src/css/projects.css
##########
@@ -0,0 +1,94 @@
+.projects h2 {
+ text-align: center;
+}
+
+.projects .box {
+ display: inline-flex;
+ border: 1px solid var(--color-smoke-90);
+ width: 46%;
+ flex-direction: column;
+ align-items: center;
+ padding: 1rem;
+ margin: 1rem;
+}
+
+.projects .box a > img {
+ display: inline-block;
+ width: auto;
+ height: 5rem;
+}
+
+.projects .box a > img + img {
+ padding-left: 1rem;
+}
+
+.projects .box .description {
+ padding: 1rem;
+ text-align: center;
+}
+
+.projects .box .links {
+ align-items: center;
+ margin: 1.5rem 0;
+}
+
+.projects .box .links img {
+ display: inline-flex;
+ margin: 0 0.25rem;
+ width: 1rem;
+ height: 1rem;
+ vertical-align: -0.18rem;
+ filter: invert(24%) sepia(38%) saturate(1353%) hue-rotate(200deg)
brightness(89%) contrast(99%);
+}
+
+.projects .box .links span {
+ padding: 0.5rem;
+ margin: 0 0.4rem;
+ border: 1px solid var(--color-gray-10);
+ border-radius: 10rem;
+ color: var(--body-font-color);
+}
+
+.projects .box .links span:hover {
+ color: var(--body-font-color);
+ border: 2px solid var(--color-gray-30);
Review comment:
This changes the metrics of the link and causes a reflow.
----------------------------------------------------------------
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
