[
https://issues.apache.org/jira/browse/CAMEL-15392?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=17186377#comment-17186377
]
ASF GitHub Bot commented on CAMEL-15392:
----------------------------------------
aashnajena commented on a change in pull request #471:
URL: https://github.com/apache/camel-website/pull/471#discussion_r478928891
##########
File path: antora-ui-camel/src/css/docs.css
##########
@@ -1,154 +1,84 @@
-.docs {
- padding: 1rem 3rem;
-}
-
-.docs p:empty {
- display: none;
-}
-
-.section h2 {
- text-align: center;
- padding-bottom: 0;
-}
-
-.camel-project {
- width: calc(100% - 3rem);
- display: inline-flex;
- border: 1px solid var(--color-smoke-90);
+.docs,
+.community {
+ padding: 1rem 3rem 2rem;
+ display: flex;
+ width: 80%;
flex-direction: column;
- align-items: center;
- text-align: center;
- padding: 1rem 1rem 2rem 1rem;
- margin: 1.5rem;
- border-radius: 10px;
}
-.camel-project .section {
- border: none;
- padding: 0;
-}
-
-.camel-project .section.core {
- width: 100%;
+.docs .box,
+.community .box {
+ display: flex;
+ margin: 1rem 0;
}
-.camel-project .camel-documentation .links {
- background-color: var(--color-camel-orange-light);
- padding: 0 0.5rem;
- border-radius: 25px;
- color: var(--navbar-background);
+.docs .box .content,
+.community .box .content {
+ width: 70%;
}
-.camel-project .camel-documentation .links a {
- color: var(--navbar-background);
- font-weight: bolder;
+.docs .box img,
+.community .box img {
+ margin-top: 4rem;
+ height: 8vw;
+ max-height: 6rem;
+ margin-right: 0.5rem;
}
-.section {
- display: inline-flex;
- border: 1px solid var(--color-smoke-90);
- width: calc(50% - 3.2rem);
- flex-direction: column;
- align-items: center;
+.docs .box .icon {
+ width: 30%;
text-align: center;
- padding: 1rem;
- margin: 1.5rem;
- border-radius: 10px;
-}
-
-.section > a,
-.camel-project > a {
- background: none;
-}
-
-.section a > img,
-.camel-project a > img {
- display: inline-block;
- width: auto;
- height: 5rem;
- margin-top: 1rem;
-}
-
-.section a > img + img {
- padding-left: 1rem;
}
-.section .description {
- padding: 1.2rem;
+.docs .box.camel-core .icon,
+.community .box .icon {
+ width: 20%;
text-align: center;
}
-.section .list {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
-}
-
-.section .links {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- margin: 1.5rem 0;
- word-break: break-word;
- background-color: var(--color-camel-orange-light);
- padding: 0 0.5rem;
- border-radius: 25px;
- color: var(--navbar-background);
-}
-
-.section .list pre {
- padding: 0;
- width: 0.5rem;
- box-shadow: none;
- overflow-x: hidden;
- background: none;
-}
-
-.section .list .links {
- margin: 0.5rem;
+.icon a,
+a.button-light,
+a.button-dark {
+ background-image: none;
}
-.section .links img {
- height: 1.5rem;
- width: 2rem;
- margin: 0.35rem 0 0 0.25rem;
-}
-
-.section .links p {
- margin: 0;
-}
-
-.section .links .partition {
- background: #fff;
- height: 2.5rem;
- width: 0.1rem;
- margin: 0 0.5rem;
-}
-
-.section .links a {
- color: var(--navbar-background);
- font-weight: bolder;
+.docs .box.camel-core .content {
+ width: 80%;
}
@media screen and (max-width: 1023px) {
- .docs {
+ .docs,
+ .community {
padding: 0 1rem 4rem;
+ width: 100%;
}
- .camel-project,
- .section {
- width: calc(100% - 1rem);
- margin: 1.5rem -1.5rem 1.5rem 0.5rem;
+ .docs .box,
+ .community .box,
+ .docs .box .content,
+ .community .box .content,
+ .docs .box .icon,
+ .community .box .icon {
Review comment:
Missed out on these rules earlier
```suggestion
.community .box .icon,
.docs .box.camel-core .content,
.docs .box.camel-core .icon {
```
##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -74,30 +74,32 @@ header.frontpage p {
line-height: 1.7rem;
}
-.frontpage a.button-dark,
-.frontpage a.button-dark:hover {
+a.button,
+section.frontpage a.button {
white-space: nowrap;
- padding: 0.7rem 1rem;
- background-color: var(--color-camel-orange);
- background-image: none;
- background-repeat: no-repeat;
- background-position: 0;
- color: white;
- font-weight: bold;
margin-right: 0.5rem;
+ background-image: none;
border-radius: 3rem;
- outline: none;
- display: inline-block;
- box-shadow: 0 4px #8e480b;
+ font-weight: bold;
+ padding: 0.4rem 1rem;
Review comment:
My view at 1024px 100% zoom
----------------------------------------------------------------
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:
[email protected]
> Provide a modified neat card layout for community & docs
> --------------------------------------------------------
>
> Key: CAMEL-15392
> URL: https://issues.apache.org/jira/browse/CAMEL-15392
> Project: Camel
> Issue Type: Improvement
> Components: website
> Reporter: Aemie
> Priority: Major
> Attachments: Screenshot from 2020-08-18 02-49-07.png, Screenshot from
> 2020-08-18 02-52-37.png, button-community-badges.png,
> button-link-docs-sub-project.png, camel-core-button-card.png,
> community-design-card.png, contributing-design-card.png
>
>
> The card layout design for the documentation and community page seemed plain
> compared to the other pages of the website. Thus, included rounded background
> over the links for the pages and rounded border over the section to provide
> the card-like layout. This will fit with the new design for the front page. I
> have created a PR regarding it with a minimal design approach however I came
> up with a few more designs.
--
This message was sent by Atlassian Jira
(v8.3.4#803005)
