You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by zr...@apache.org on 2020/07/02 08:56:32 UTC
[camel-website] branch master updated: refactor: cleanup
frontpage.css
This is an automated email from the ASF dual-hosted git repository.
zregvart pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/camel-website.git
The following commit(s) were added to refs/heads/master by this push:
new f0b2183 refactor: cleanup frontpage.css
f0b2183 is described below
commit f0b218342bc5a28bdea72e68ade25a2de9cee2e5
Author: Aashna Jena <32...@users.noreply.github.com>
AuthorDate: Thu Jul 2 14:26:21 2020 +0530
refactor: cleanup frontpage.css
---
antora-ui-camel/src/css/docs.css | 27 ++++++++++-----
antora-ui-camel/src/css/frontpage.css | 62 +++++++++++------------------------
content/_index.md | 20 ++++++-----
3 files changed, 49 insertions(+), 60 deletions(-)
diff --git a/antora-ui-camel/src/css/docs.css b/antora-ui-camel/src/css/docs.css
index 1438332..056c753 100644
--- a/antora-ui-camel/src/css/docs.css
+++ b/antora-ui-camel/src/css/docs.css
@@ -1,31 +1,37 @@
-.docs h2 {
+.docs {
+ padding: 1rem 3rem;
+}
+
+.project h2 {
text-align: center;
+ padding-bottom: 0;
}
.camel-project {
- width: calc(100% - 2.2rem);
+ width: calc(100% - 3rem);
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;
+ margin: 1.5rem;
}
.camel-project .project {
border: none;
+ padding: 0;
}
.project {
display: inline-flex;
border: 1px solid var(--color-smoke-90);
- width: calc(50% - 2.2rem);
+ width: calc(50% - 3.2rem);
flex-direction: column;
align-items: center;
text-align: center;
padding: 1rem;
- margin: 1rem;
+ margin: 1.5rem;
}
.project a > img,
@@ -35,12 +41,17 @@
height: 5rem;
}
+.docs .project a > img,
+.docs .camel-project a > img {
+ margin-top: 1rem;
+}
+
.project a > img + img {
padding-left: 1rem;
}
.project .description {
- padding: 1rem;
+ padding: 1.2rem;
text-align: center;
}
@@ -52,8 +63,8 @@
@media screen and (max-width: 1023px) {
.docs .project {
- width: calc(100% - 2.2rem);
- margin: 1rem;
+ width: calc(100% - 3.2rem);
+ margin: 1.5rem;
}
}
diff --git a/antora-ui-camel/src/css/frontpage.css b/antora-ui-camel/src/css/frontpage.css
index a7de8d7..c4e197a 100644
--- a/antora-ui-camel/src/css/frontpage.css
+++ b/antora-ui-camel/src/css/frontpage.css
@@ -140,31 +140,20 @@ section.frontpage {
max-width: var(--frontpage-max-width);
}
-section.frontpage.columns {
+section.frontpage.columns,
+section.frontpage.projects,
+section.frontpage.apache {
display: flex;
flex-wrap: wrap;
border-top: 1px solid var(--color-smoke-50);
- padding: 1rem 0 0;
-}
-
-section.frontpage.projects {
- border-top: 1px solid var(--color-smoke-50);
- display: flex;
- flex-flow: wrap;
- padding: 1rem;
- padding-top: 3rem;
+ padding: 2rem 1rem 1rem 1rem;
}
section.frontpage.projects .project {
- width: 30%;
- margin: 1.5%;
+ width: calc(33% - 3rem);
padding: 1%;
}
-section.frontpage.apache {
- padding-top: 3rem;
-}
-
section.frontpage h1,
section.frontpage h2,
section.frontpage h3,
@@ -190,31 +179,28 @@ section.frontpage a:hover {
section.frontpage h1 {
width: 100%;
text-align: center;
+ margin-bottom: 1rem;
}
section.frontpage h2 {
text-align: center;
}
-.frontpage .box {
- flex: 33%;
+section.frontpage.columns .box {
+ width: calc(50% - 3rem);
flex-direction: column;
- margin: 1rem;
- padding: 1.2rem 0.75rem;
- border: 1px solid var(--color-smoke-90);
-}
-
-.frontpage .box div {
+ align-items: center;
text-align: center;
- margin: 1rem;
- height: 100%;
+ padding: 2rem;
+ margin: 1.5rem;
+ border: 1px solid var(--color-smoke-90);
}
-.frontpage .box div img {
+.section.frontpage.columns .box img {
width: 27rem;
}
-.frontpage .box .feature-icon {
+section.frontpage.columns .box .feature-icon {
width: 3.75rem;
height: 3.75rem;
filter: invert(24%) sepia(38%) saturate(1353%) hue-rotate(200deg) brightness(89%) contrast(99%);
@@ -230,24 +216,14 @@ section.frontpage h2 {
}
@media screen and (max-width: 626px) {
- .split,
- .frontpage {
- flex: 100%;
- margin: 0 1rem;
- }
-
section.frontpage.columns,
- section.frontpage.apache {
+ section.frontpage.apache,
+ section.frontpage.projects {
padding-top: 1rem;
}
- .frontpage .box {
- padding: 1rem 0;
- }
-
section.frontpage.projects .project {
width: 100%;
- margin: 1.5rem;
}
}
@@ -272,13 +248,13 @@ section.frontpage h2 {
margin: auto;
}
- .frontpage .box {
- min-width: 51vw;
+ section.frontpage.columns .box {
+ width: 100%;
}
@media screen and (min-width: 627px) {
section.frontpage.projects .project {
- width: 47%;
+ width: calc(50% - 3rem);
}
}
}
diff --git a/content/_index.md b/content/_index.md
index b8c6fd6..c49f9c8 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -55,11 +55,13 @@ Camel supports around 50 data formats, allowing to <mark>translate messages</mar
{{< section "frontpage projects" >}}
+# Apache Camel Projects
+
{{< div "project" >}}
[](/docs/#camel-k)
-# Camel K
+## Camel K
**Apache Camel K** runs natively on [Kubernetes](https://kubernetes.io/).
@@ -69,7 +71,7 @@ Camel supports around 50 data formats, allowing to <mark>translate messages</mar
[](/manual/latest/)
-# Camel
+## Camel
**Apache Camel** is the *Swiss knife* of integration.
@@ -79,9 +81,9 @@ Camel supports around 50 data formats, allowing to <mark>translate messages</mar
[](/docs/#camel-quarkus)
-# Quarkus
+## Quarkus
-**Apache Camel Quarkus** run Camel on [Quarkus](https://quarkus.io).
+**Apache Camel Quarkus** runs Camel on [Quarkus](https://quarkus.io).
{{< /div >}}
@@ -89,7 +91,7 @@ Camel supports around 50 data formats, allowing to <mark>translate messages</mar
[](/docs/#camel-kafka-connector)
-# Kafka
+## Kafka
**Apache Camel Kafka Connector** embeds Camel within [Kafka Connect](https://kafka.apache.org/documentation/#connect).
@@ -99,9 +101,9 @@ Camel supports around 50 data formats, allowing to <mark>translate messages</mar
[](/docs/#camel-spring-boot)
-# Spring Boot
+## Spring Boot
-**Apache Camel Spring Boot** run Camel on [Spring Boot](https://spring.io/projects/spring-boot).
+**Apache Camel Spring Boot** runs Camel on [Spring Boot](https://spring.io/projects/spring-boot).
{{< /div >}}
@@ -110,9 +112,9 @@ Camel supports around 50 data formats, allowing to <mark>translate messages</mar
[](/docs/#camel-karaf)
-# Karaf
+## Karaf
-**Apache Camel Karaf** run Camel in [OSGi](https://www.osgi.org/) container using [Apache Karaf](https://karaf.apache.org/).
+**Apache Camel Karaf** runs Camel in [OSGi](https://www.osgi.org/) container using [Apache Karaf](https://karaf.apache.org/).
{{< /div >}}