[GitHub] [camel-website] AemieJ commented on a change in pull request #397: Merge Projects and Documentation Page

[GitBox]

AemieJ commented on a change in pull request #397:
URL: https://github.com/apache/camel-website/pull/397#discussion_r443378003



##########
File path: antora-ui-camel/src/css/projects.css
##########
@@ -2,6 +2,21 @@
   text-align: center;
 }
 
+.projects .camel-project {
+  width: 96%;
+  display: inline-flex;
+  border: 1px solid var(--color-smoke-90);
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 1rem 1rem 2rem 1rem;
+  margin: 1rem;
+}
+
+.projects .camel-project .project {
+  border: none;
+}
+
 .projects .project {
   display: inline-flex;
   border: 1px solid var(--color-smoke-90);

Review comment:
       Also, for the documentation frame, could you use an additional class so 
within `.projects .documentation`, you could make the following change - 
   ```
   .projects .documentation {
       width: 45%;
   } 
   
   @media screen and (max-width: 1023px) {
     .projects .documentation {
         width: 100%;
     }
   }
   ```
   The reason I am suggesting this is 'cause due to `width: 46%` even at 1024px 
the `user-manual` and `components` get separated and I don't find that the 
ideal behavior. 
   
   ### Before At 1024px
   
![before-frame-1024](https://user-images.githubusercontent.com/44139348/85262507-7c794e80-b48b-11ea-9b21-f13b64a3868e.png)
   
   ### After at 1024 if you could make those changes
   
![after-frame-1024](https://user-images.githubusercontent.com/44139348/85262512-800cd580-b48b-11ea-9c3e-3c1ff25af112.png)
   

##########
File path: antora-ui-camel/src/css/projects.css
##########
@@ -2,6 +2,21 @@
   text-align: center;
 }
 
+.projects .camel-project {
+  width: 96%;
+  display: inline-flex;
+  border: 1px solid var(--color-smoke-90);
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 1rem 1rem 2rem 1rem;
+  margin: 1rem;

Review comment:
       I observed from the preview that the alignment is not present below < 
1024 and the documentation frame appears shrunk compared to that of project 
frames. It's best to maintain the same structure, so for below < 1024px width, 
you should perform the following changes: `width: auto` and `margin: auto`.




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