[
https://issues.apache.org/jira/browse/CAMEL-14994?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=17125280#comment-17125280
]
ASF GitHub Bot commented on CAMEL-14994:
----------------------------------------
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
> camel website - Projects page can we add logos
> ----------------------------------------------
>
> Key: CAMEL-14994
> URL: https://issues.apache.org/jira/browse/CAMEL-14994
> Project: Camel
> Issue Type: Improvement
> Components: website
> Reporter: Claus Ibsen
> Priority: Major
> Attachments: projects-desgin.png, projects_mockup.png
>
>
> The page
> https://camel.apache.org/projects/
> List the projects (we should btw add Camel itself IMHO).
> So basically can we add the logos that we have on the front page, and list
> them with same caption too. This would make it more appealing as today its a
> bit dull. And if you go to the front page you have to scroll down to see
> those projects and logos, so some users may miss seeing that.
> Also order them so its
> - camel
> - camel k
> - camel kafka
> - camel spring boot
> - camel quarkus
> - camel karaf
--
This message was sent by Atlassian Jira
(v8.3.4#803005)
