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/08/24 18:57:56 UTC

[GitHub] [camel-website] zregvart commented on a change in pull request #469: Provide new layout for Documentation page

zregvart commented on a change in pull request #469:
URL: https://github.com/apache/camel-website/pull/469#discussion_r475827529



##########
File path: antora-ui-camel/src/css/docs.css
##########
@@ -1,154 +1,81 @@
-.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 auto;
 }
 
-.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;

Review comment:
       We might need to have the width instead of the height here, or redo the SVGs so they're of the same aspect ratio.
   
   ![Screenshot_2020-08-24 Community - Apache Camel](https://user-images.githubusercontent.com/1306050/91084356-2a4fd780-e64c-11ea-8a56-cd3b6bbf4bab.png)
   

##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -74,29 +74,30 @@ header.frontpage p {
   line-height: 1.7rem;
 }
 
-.frontpage a.button-dark,
-.frontpage a.button-dark:hover {
+a.button-dark,
+section.frontpage a.button-dark,
+section.frontpage a.button-dark:hover,
+a.button-dark:hover {
   white-space: nowrap;
   padding: 0.7rem 1rem;

Review comment:
       ```suggestion
     padding: 0.3rem 1rem;
   ```
   
   I think smaller buttons look a bit less imposing:
   
   ![Screenshot_2020-08-24 Documentation - Apache Camel](https://user-images.githubusercontent.com/1306050/91084066-b0b7e980-e64b-11ea-9a66-3c5ce3ee1db9.png)
   

##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -74,29 +74,30 @@ header.frontpage p {
   line-height: 1.7rem;
 }
 
-.frontpage a.button-dark,
-.frontpage a.button-dark:hover {
+a.button-dark,
+section.frontpage a.button-dark,
+section.frontpage a.button-dark:hover,
+a.button-dark:hover {
   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;
   border-radius: 3rem;
   outline: none;
   display: inline-block;
-  box-shadow: 0 4px #8e480b;
+  background-image: none;
 }
 
-.frontpage a.button-light {
+a.button-light,

Review comment:
       I'd start with a `a.button` selector and then have a `a.button.light` and a `a.button.dark` variant, that way any change to the `a.button` doesn't have to be redone for both variants.

##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -74,29 +74,30 @@ header.frontpage p {
   line-height: 1.7rem;
 }
 
-.frontpage a.button-dark,
-.frontpage a.button-dark:hover {
+a.button-dark,
+section.frontpage a.button-dark,
+section.frontpage a.button-dark:hover,
+a.button-dark:hover {
   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;
   border-radius: 3rem;
   outline: none;
   display: inline-block;
-  box-shadow: 0 4px #8e480b;
+  background-image: none;
 }
 
-.frontpage a.button-light {
+a.button-light,
+a.button-light:hover {
   padding: 0.7rem 1rem;

Review comment:
       ```suggestion
     padding: 0.3rem 1rem;
   ```
   
   We could try a bit smaller buttons.




----------------------------------------------------------------
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