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
   
   ![Screenshot 2020-08-28 at 1 48 47 
PM](https://user-images.githubusercontent.com/32356795/91538379-64172b80-e935-11ea-8f54-27f8350d24c6.png)
   




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


Reply via email to