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/04 22:43:20 UTC
[GitHub] [camel-website] zregvart commented on a change in pull request #442: CAMEL-15300: Update Front Page Design
zregvart commented on a change in pull request #442:
URL: https://github.com/apache/camel-website/pull/442#discussion_r465359211
##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -244,18 +222,120 @@ section.frontpage.columns .box .feature-icon {
}
.split img {
- max-width: 70%;
display: block;
margin: auto;
}
- section.frontpage.columns .box {
+ .frontpage-header .main-heading,
+ section.frontpage.columns.functionalities,
+ section.frontpage.columns.projects,
+ section.frontpage.apache,
+ section.frontpage.blog-posts .blog-post {
+ width: 90%;
+ margin: 0 auto;
+ }
+
+ section.frontpage.columns.blog-posts {
+ flex-direction: column;
+ }
+
+ section.frontpage.blog-posts .blog-post .date,
+ section.frontpage.projects .project .icon {
+ min-width: 25%;
+ }
+
+ section.frontpage.projects .project,
+ section.frontpage.columns.functionalities .box {
+ width: 100%;
+ }
+
+ section.frontpage.functionalities .icon img {
+ max-width: 25vw;
+ margin: 2vw;
+ }
+
+ section.frontpage.functionalities .content {
+ width: 70vw;
+ }
+
+ .frontpage-header p {
+ font-size: inherit;
+ text-align: center;
+ }
+
+ .frontpage-header {
+ flex-direction: column-reverse;
Review comment:
Perhaps:
```suggestion
flex-direction: column;
```
To make the "Apache Camel" above the image, since currently image doesn't really depict what Camel is?
##########
File path: antora-ui-camel/src/css/blog-frontpage.css
##########
@@ -0,0 +1,44 @@
+.blog-post .content {
Review comment:
I'd put this in `frontpage.css` and prefix with `.frontpage`.
##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -1,212 +1,200 @@
-header.frontpage {
- font-size: 1.5rem;
- display: flex;
- flex-flow: column;
- align-items: center;
- margin: 0 auto;
- max-width: 60rem;
-}
+/* common css for sections */
-header.frontpage h1 {
- font-size: 5rem;
- font-weight: bolder;
+section.frontpage h1,
+section.frontpage h2,
+section.frontpage h3,
+section.frontpage h4,
+section.frontpage h5,
+section.frontpage h6 {
+ font-weight: var(--heading-font-weight);
color: var(--heading-font-color);
- margin-top: 3rem;
- text-align: center;
- text-transform: none;
- text-shadow: -1px -1px 1px #fff5, 1px -1px 1px #fff5, -1px 1px 1px #fff5, 1px 1px 1px #fff5;
+ line-height: 1.3;
+ margin: 1rem 0 0;
+ text-transform: uppercase;
+ word-wrap: break-word;
}
-header.frontpage p {
- hyphens: none;
- margin-top: 3rem;
- text-align: center;
- line-height: 1.5;
- color: var(--body-font-color);
+section.frontpage {
+ color: var(--doc-font-color);
+ font-size: var(--doc-font-size);
+ line-height: var(--doc-line-height);
+ margin: 0 auto;
+ max-width: var(--frontpage-max-width);
}
-header.frontpage a {
- color: var(--heading-font-color);
- text-decoration: underline;
Review comment:
I think it's a mistake that we don't underline links by default. I created [a separate issue for that](https://issues.apache.org/jira/browse/CAMEL-15371).
##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -1,212 +1,200 @@
-header.frontpage {
- font-size: 1.5rem;
- display: flex;
- flex-flow: column;
- align-items: center;
- margin: 0 auto;
- max-width: 60rem;
-}
+/* common css for sections */
-header.frontpage h1 {
- font-size: 5rem;
- font-weight: bolder;
+section.frontpage h1,
+section.frontpage h2,
+section.frontpage h3,
+section.frontpage h4,
+section.frontpage h5,
+section.frontpage h6 {
+ font-weight: var(--heading-font-weight);
color: var(--heading-font-color);
- margin-top: 3rem;
- text-align: center;
- text-transform: none;
- text-shadow: -1px -1px 1px #fff5, 1px -1px 1px #fff5, -1px 1px 1px #fff5, 1px 1px 1px #fff5;
+ line-height: 1.3;
+ margin: 1rem 0 0;
+ text-transform: uppercase;
+ word-wrap: break-word;
}
-header.frontpage p {
- hyphens: none;
- margin-top: 3rem;
- text-align: center;
- line-height: 1.5;
- color: var(--body-font-color);
+section.frontpage {
+ color: var(--doc-font-color);
+ font-size: var(--doc-font-size);
+ line-height: var(--doc-line-height);
+ margin: 0 auto;
+ max-width: var(--frontpage-max-width);
}
-header.frontpage a {
- color: var(--heading-font-color);
- text-decoration: underline;
+section.frontpage a {
+ color: var(--link-font-color);
}
-header.frontpage a:hover {
- color: var(--heading-font-color);
- text-decoration: underline;
+section.frontpage a:hover {
+ color: var(--link_hover-font-color);
}
-header.frontpage a:active {
- color: var(--heading-font-color);
+section.frontpage h1 {
+ width: 100%;
+ text-align: center;
+ margin-bottom: 1rem;
+ font-size: 2.5rem;
}
-.frontpage a:hover {
- color: var(--color-white);
- text-decoration: none;
+section.frontpage h2 {
+ text-align: center;
}
-.frontpage a:active {
- color: var(--color-white);
-}
+/* css for header section */
-.frontpage a.significant {
- margin: 1rem;
- padding: 0.8rem 1.5rem;
- background: var(--color-camel-orange);
- color: var(--color-white);
- border-radius: 8px;
- font-size: 1.2rem;
- font-weight: bold;
- outline: none;
- display: inline-block;
- box-shadow: 0 4px #8e480b;
+.frontpage-header {
+ display: flex;
+ flex-direction: row;
+ margin: 2rem 3rem 2.5rem;
}
-.frontpage a.significant:hover {
- color: var(--color-white);
- box-shadow: 0 3px #8e480b;
- transform: translateY(2px);
+.frontpage-header img {
+ width: 45vw;
+ max-height: 50vh;
}
-.frontpage a.significant:active {
- color: var(--color-white);
- box-shadow: 0 3px #8e480b;
- transform: translateY(2px);
+.frontpage-header .main-heading {
+ width: 50vw;
+ display: flex;
+ flex-direction: column;
+ margin-left: 2rem;
}
-header.frontpage svg {
- position: absolute;
- top: 4rem;
- left: 0;
- width: 100%;
- height: 14rem;
- z-index: -1;
+.frontpage-header h1 {
+ font-size: 5vw;
+ color: var(--color-asf-dark-blue);
+ margin-bottom: 0.5rem;
}
-header.frontpage svg path {
- fill: none;
- animation: sparkle 2s ease alternate infinite;
+.frontpage-header p {
+ font-size: 1.2rem;
+ margin-bottom: 2rem;
+ line-height: 1.7rem;
}
-header.frontpage svg path:nth-child(1) {
- stroke: #ffebcc;
- stroke-width: 10;
- stroke-opacity: 0.9;
+a.button-dark,
+.frontpage a.button-dark,
+.frontpage a.button-dark:hover {
+ white-space: nowrap;
+ padding: 0.7rem 1rem;
+ background-color: var(--color-camel-orange);
+ color: white;
+ font-weight: bold;
+ margin-right: 0.5rem;
+ border-radius: 3rem;
}
-header.frontpage svg path:nth-child(2) {
- stroke: #911408;
- stroke-width: 10;
- stroke-opacity: 0.3;
- animation-delay: -1s;
+.button-light {
+ padding: 0.7rem 1rem;
+ border: 1px solid var(--color-gray-70);
+ color: var(--color-gray-70);
+ font-weight: bold;
+ border-radius: 3rem;
+ white-space: nowrap;
}
-header.frontpage svg path:nth-child(3) {
- stroke: #f1b35b;
- stroke-width: 15;
- stroke-opacity: 0.6;
- animation-delay: -3.5s;
-}
+/* css for blog section */
-header.frontpage svg path:nth-child(4) {
- stroke: #f28a40;
- stroke-width: 5;
- stroke-opacity: 0.4;
- animation-delay: -3s;
+.whats-new {
Review comment:
Prefix with `.frontpage`, perhaps `news` would be a better class name?
##########
File path: layouts/index.html
##########
@@ -1,18 +1,48 @@
{{ partial "header.html" . }}
-<header class="frontpage">
- <h1>🚀 Camel 3.4 is here! <wbr><a href="blog/2020/06/camel34-whatsnew/">What's new?</a></h1>
- <svg viewBox="0 0 500 70" preserveAspectRatio="none">
- <path d="M -10,25 C 130,125 330,0 510,5" />
- <path d="M -10,20 C 130,125 330,0 510,2" />
- <path d="M -10,15 C 150,115 350,0 510,15" />
- <path d="M -10,11 C 130,125 330,0 510,20" />
- <path d="M -10,5 C 130,125 330,0 510,25" />
- </svg>
- <p>Camel is an <mark>open source integration framework</mark> that empowers you to quickly and easily integrate various systems consuming or producing data.
- </p>
- <a class="significant" href="/manual/latest/getting-started.html">Get started</a>
-</header>
+<div class="frontpage-header">
Review comment:
Let's use semantic html here, so `<header>` instead of `<div>`. This not only eliminates the need for separate CSS class, but also helps screen readers.
##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -1,212 +1,200 @@
-header.frontpage {
- font-size: 1.5rem;
- display: flex;
- flex-flow: column;
- align-items: center;
- margin: 0 auto;
- max-width: 60rem;
-}
+/* common css for sections */
-header.frontpage h1 {
- font-size: 5rem;
- font-weight: bolder;
+section.frontpage h1,
+section.frontpage h2,
+section.frontpage h3,
+section.frontpage h4,
+section.frontpage h5,
+section.frontpage h6 {
+ font-weight: var(--heading-font-weight);
color: var(--heading-font-color);
- margin-top: 3rem;
- text-align: center;
- text-transform: none;
- text-shadow: -1px -1px 1px #fff5, 1px -1px 1px #fff5, -1px 1px 1px #fff5, 1px 1px 1px #fff5;
+ line-height: 1.3;
+ margin: 1rem 0 0;
+ text-transform: uppercase;
+ word-wrap: break-word;
}
-header.frontpage p {
- hyphens: none;
- margin-top: 3rem;
- text-align: center;
- line-height: 1.5;
- color: var(--body-font-color);
+section.frontpage {
+ color: var(--doc-font-color);
+ font-size: var(--doc-font-size);
+ line-height: var(--doc-line-height);
+ margin: 0 auto;
+ max-width: var(--frontpage-max-width);
}
-header.frontpage a {
- color: var(--heading-font-color);
- text-decoration: underline;
+section.frontpage a {
+ color: var(--link-font-color);
}
-header.frontpage a:hover {
- color: var(--heading-font-color);
- text-decoration: underline;
+section.frontpage a:hover {
+ color: var(--link_hover-font-color);
}
-header.frontpage a:active {
- color: var(--heading-font-color);
+section.frontpage h1 {
+ width: 100%;
+ text-align: center;
+ margin-bottom: 1rem;
+ font-size: 2.5rem;
}
-.frontpage a:hover {
- color: var(--color-white);
- text-decoration: none;
+section.frontpage h2 {
+ text-align: center;
}
-.frontpage a:active {
- color: var(--color-white);
-}
+/* css for header section */
-.frontpage a.significant {
- margin: 1rem;
- padding: 0.8rem 1.5rem;
- background: var(--color-camel-orange);
- color: var(--color-white);
- border-radius: 8px;
- font-size: 1.2rem;
- font-weight: bold;
- outline: none;
- display: inline-block;
- box-shadow: 0 4px #8e480b;
+.frontpage-header {
+ display: flex;
+ flex-direction: row;
+ margin: 2rem 3rem 2.5rem;
}
-.frontpage a.significant:hover {
- color: var(--color-white);
- box-shadow: 0 3px #8e480b;
- transform: translateY(2px);
+.frontpage-header img {
+ width: 45vw;
+ max-height: 50vh;
}
-.frontpage a.significant:active {
- color: var(--color-white);
- box-shadow: 0 3px #8e480b;
- transform: translateY(2px);
+.frontpage-header .main-heading {
+ width: 50vw;
+ display: flex;
+ flex-direction: column;
+ margin-left: 2rem;
}
-header.frontpage svg {
- position: absolute;
- top: 4rem;
- left: 0;
- width: 100%;
- height: 14rem;
- z-index: -1;
+.frontpage-header h1 {
+ font-size: 5vw;
+ color: var(--color-asf-dark-blue);
+ margin-bottom: 0.5rem;
}
-header.frontpage svg path {
- fill: none;
- animation: sparkle 2s ease alternate infinite;
+.frontpage-header p {
+ font-size: 1.2rem;
+ margin-bottom: 2rem;
+ line-height: 1.7rem;
}
-header.frontpage svg path:nth-child(1) {
- stroke: #ffebcc;
- stroke-width: 10;
- stroke-opacity: 0.9;
+a.button-dark,
+.frontpage a.button-dark,
+.frontpage a.button-dark:hover {
+ white-space: nowrap;
+ padding: 0.7rem 1rem;
+ background-color: var(--color-camel-orange);
+ color: white;
+ font-weight: bold;
+ margin-right: 0.5rem;
+ border-radius: 3rem;
}
-header.frontpage svg path:nth-child(2) {
- stroke: #911408;
- stroke-width: 10;
- stroke-opacity: 0.3;
- animation-delay: -1s;
+.button-light {
Review comment:
Prefix with `.frontpage`?
##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -1,212 +1,200 @@
-header.frontpage {
- font-size: 1.5rem;
- display: flex;
- flex-flow: column;
- align-items: center;
- margin: 0 auto;
- max-width: 60rem;
-}
+/* common css for sections */
-header.frontpage h1 {
- font-size: 5rem;
- font-weight: bolder;
+section.frontpage h1,
+section.frontpage h2,
+section.frontpage h3,
+section.frontpage h4,
+section.frontpage h5,
+section.frontpage h6 {
Review comment:
Is this needed? we're only using `h1` and `h2` from what I can see.
##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -244,18 +222,120 @@ section.frontpage.columns .box .feature-icon {
}
.split img {
- max-width: 70%;
display: block;
margin: auto;
}
- section.frontpage.columns .box {
+ .frontpage-header .main-heading,
+ section.frontpage.columns.functionalities,
+ section.frontpage.columns.projects,
+ section.frontpage.apache,
+ section.frontpage.blog-posts .blog-post {
+ width: 90%;
+ margin: 0 auto;
+ }
+
+ section.frontpage.columns.blog-posts {
+ flex-direction: column;
+ }
+
+ section.frontpage.blog-posts .blog-post .date,
+ section.frontpage.projects .project .icon {
+ min-width: 25%;
+ }
+
+ section.frontpage.projects .project,
+ section.frontpage.columns.functionalities .box {
+ width: 100%;
+ }
+
+ section.frontpage.functionalities .icon img {
+ max-width: 25vw;
+ margin: 2vw;
+ }
+
+ section.frontpage.functionalities .content {
+ width: 70vw;
+ }
+
+ .frontpage-header p {
+ font-size: inherit;
+ text-align: center;
+ }
+
+ .frontpage-header {
+ flex-direction: column-reverse;
+ margin: 0;
+ }
+
+ .frontpage-header img {
+ width: 60%;
+ max-height: 45vh;
+ margin: 0 auto;
+ }
+
+ .whats-new {
Review comment:
Prefix with `.frontpage`?
##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -1,212 +1,200 @@
-header.frontpage {
- font-size: 1.5rem;
- display: flex;
- flex-flow: column;
- align-items: center;
- margin: 0 auto;
- max-width: 60rem;
-}
+/* common css for sections */
-header.frontpage h1 {
- font-size: 5rem;
- font-weight: bolder;
+section.frontpage h1,
+section.frontpage h2,
+section.frontpage h3,
+section.frontpage h4,
+section.frontpage h5,
+section.frontpage h6 {
+ font-weight: var(--heading-font-weight);
color: var(--heading-font-color);
- margin-top: 3rem;
- text-align: center;
- text-transform: none;
- text-shadow: -1px -1px 1px #fff5, 1px -1px 1px #fff5, -1px 1px 1px #fff5, 1px 1px 1px #fff5;
+ line-height: 1.3;
+ margin: 1rem 0 0;
+ text-transform: uppercase;
+ word-wrap: break-word;
}
-header.frontpage p {
- hyphens: none;
- margin-top: 3rem;
- text-align: center;
- line-height: 1.5;
- color: var(--body-font-color);
+section.frontpage {
+ color: var(--doc-font-color);
+ font-size: var(--doc-font-size);
+ line-height: var(--doc-line-height);
+ margin: 0 auto;
+ max-width: var(--frontpage-max-width);
}
-header.frontpage a {
- color: var(--heading-font-color);
- text-decoration: underline;
+section.frontpage a {
+ color: var(--link-font-color);
}
-header.frontpage a:hover {
- color: var(--heading-font-color);
- text-decoration: underline;
+section.frontpage a:hover {
+ color: var(--link_hover-font-color);
}
-header.frontpage a:active {
- color: var(--heading-font-color);
+section.frontpage h1 {
+ width: 100%;
+ text-align: center;
+ margin-bottom: 1rem;
+ font-size: 2.5rem;
}
-.frontpage a:hover {
- color: var(--color-white);
- text-decoration: none;
+section.frontpage h2 {
+ text-align: center;
}
-.frontpage a:active {
- color: var(--color-white);
-}
+/* css for header section */
-.frontpage a.significant {
- margin: 1rem;
- padding: 0.8rem 1.5rem;
- background: var(--color-camel-orange);
- color: var(--color-white);
- border-radius: 8px;
- font-size: 1.2rem;
- font-weight: bold;
- outline: none;
- display: inline-block;
- box-shadow: 0 4px #8e480b;
+.frontpage-header {
+ display: flex;
+ flex-direction: row;
+ margin: 2rem 3rem 2.5rem;
}
-.frontpage a.significant:hover {
- color: var(--color-white);
- box-shadow: 0 3px #8e480b;
- transform: translateY(2px);
+.frontpage-header img {
+ width: 45vw;
+ max-height: 50vh;
}
-.frontpage a.significant:active {
- color: var(--color-white);
- box-shadow: 0 3px #8e480b;
- transform: translateY(2px);
+.frontpage-header .main-heading {
+ width: 50vw;
+ display: flex;
+ flex-direction: column;
+ margin-left: 2rem;
}
-header.frontpage svg {
- position: absolute;
- top: 4rem;
- left: 0;
- width: 100%;
- height: 14rem;
- z-index: -1;
+.frontpage-header h1 {
+ font-size: 5vw;
+ color: var(--color-asf-dark-blue);
+ margin-bottom: 0.5rem;
}
-header.frontpage svg path {
- fill: none;
- animation: sparkle 2s ease alternate infinite;
+.frontpage-header p {
+ font-size: 1.2rem;
+ margin-bottom: 2rem;
+ line-height: 1.7rem;
}
-header.frontpage svg path:nth-child(1) {
- stroke: #ffebcc;
- stroke-width: 10;
- stroke-opacity: 0.9;
+a.button-dark,
+.frontpage a.button-dark,
+.frontpage a.button-dark:hover {
+ white-space: nowrap;
+ padding: 0.7rem 1rem;
+ background-color: var(--color-camel-orange);
+ color: white;
+ font-weight: bold;
+ margin-right: 0.5rem;
+ border-radius: 3rem;
}
-header.frontpage svg path:nth-child(2) {
- stroke: #911408;
- stroke-width: 10;
- stroke-opacity: 0.3;
- animation-delay: -1s;
+.button-light {
+ padding: 0.7rem 1rem;
+ border: 1px solid var(--color-gray-70);
+ color: var(--color-gray-70);
+ font-weight: bold;
+ border-radius: 3rem;
+ white-space: nowrap;
}
-header.frontpage svg path:nth-child(3) {
- stroke: #f1b35b;
- stroke-width: 15;
- stroke-opacity: 0.6;
- animation-delay: -3.5s;
-}
+/* css for blog section */
-header.frontpage svg path:nth-child(4) {
- stroke: #f28a40;
- stroke-width: 5;
- stroke-opacity: 0.4;
- animation-delay: -3s;
+.whats-new {
+ padding: 0.2rem 0;
+ width: 20%;
+ text-align: center;
+ margin-left: 3rem;
+ background-color: #f5f5f5;
+ border-radius: 1rem 1rem 0 0;
}
-header.frontpage svg path:nth-child(5) {
- stroke: #ee6d11;
- stroke-width: 5;
- stroke-opacity: 0.6;
- animation-delay: -6s;
+.whats-new h2 {
Review comment:
Prefix with `.frontpage`?
##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -1,212 +1,200 @@
-header.frontpage {
- font-size: 1.5rem;
- display: flex;
- flex-flow: column;
- align-items: center;
- margin: 0 auto;
- max-width: 60rem;
-}
+/* common css for sections */
-header.frontpage h1 {
- font-size: 5rem;
- font-weight: bolder;
+section.frontpage h1,
+section.frontpage h2,
+section.frontpage h3,
+section.frontpage h4,
+section.frontpage h5,
+section.frontpage h6 {
+ font-weight: var(--heading-font-weight);
color: var(--heading-font-color);
- margin-top: 3rem;
- text-align: center;
- text-transform: none;
- text-shadow: -1px -1px 1px #fff5, 1px -1px 1px #fff5, -1px 1px 1px #fff5, 1px 1px 1px #fff5;
+ line-height: 1.3;
+ margin: 1rem 0 0;
+ text-transform: uppercase;
+ word-wrap: break-word;
}
-header.frontpage p {
- hyphens: none;
- margin-top: 3rem;
- text-align: center;
- line-height: 1.5;
- color: var(--body-font-color);
+section.frontpage {
+ color: var(--doc-font-color);
+ font-size: var(--doc-font-size);
+ line-height: var(--doc-line-height);
+ margin: 0 auto;
+ max-width: var(--frontpage-max-width);
}
-header.frontpage a {
- color: var(--heading-font-color);
- text-decoration: underline;
+section.frontpage a {
+ color: var(--link-font-color);
}
-header.frontpage a:hover {
- color: var(--heading-font-color);
- text-decoration: underline;
+section.frontpage a:hover {
+ color: var(--link_hover-font-color);
}
-header.frontpage a:active {
- color: var(--heading-font-color);
+section.frontpage h1 {
+ width: 100%;
+ text-align: center;
+ margin-bottom: 1rem;
+ font-size: 2.5rem;
}
-.frontpage a:hover {
- color: var(--color-white);
- text-decoration: none;
+section.frontpage h2 {
+ text-align: center;
}
-.frontpage a:active {
- color: var(--color-white);
-}
+/* css for header section */
-.frontpage a.significant {
- margin: 1rem;
- padding: 0.8rem 1.5rem;
- background: var(--color-camel-orange);
- color: var(--color-white);
- border-radius: 8px;
- font-size: 1.2rem;
- font-weight: bold;
- outline: none;
- display: inline-block;
- box-shadow: 0 4px #8e480b;
+.frontpage-header {
+ display: flex;
+ flex-direction: row;
+ margin: 2rem 3rem 2.5rem;
}
-.frontpage a.significant:hover {
- color: var(--color-white);
- box-shadow: 0 3px #8e480b;
- transform: translateY(2px);
+.frontpage-header img {
+ width: 45vw;
+ max-height: 50vh;
}
-.frontpage a.significant:active {
- color: var(--color-white);
- box-shadow: 0 3px #8e480b;
- transform: translateY(2px);
+.frontpage-header .main-heading {
+ width: 50vw;
+ display: flex;
+ flex-direction: column;
+ margin-left: 2rem;
}
-header.frontpage svg {
- position: absolute;
- top: 4rem;
- left: 0;
- width: 100%;
- height: 14rem;
- z-index: -1;
+.frontpage-header h1 {
+ font-size: 5vw;
+ color: var(--color-asf-dark-blue);
+ margin-bottom: 0.5rem;
}
-header.frontpage svg path {
- fill: none;
- animation: sparkle 2s ease alternate infinite;
+.frontpage-header p {
+ font-size: 1.2rem;
+ margin-bottom: 2rem;
+ line-height: 1.7rem;
}
-header.frontpage svg path:nth-child(1) {
- stroke: #ffebcc;
- stroke-width: 10;
- stroke-opacity: 0.9;
+a.button-dark,
+.frontpage a.button-dark,
+.frontpage a.button-dark:hover {
+ white-space: nowrap;
+ padding: 0.7rem 1rem;
+ background-color: var(--color-camel-orange);
+ color: white;
+ font-weight: bold;
+ margin-right: 0.5rem;
+ border-radius: 3rem;
}
-header.frontpage svg path:nth-child(2) {
- stroke: #911408;
- stroke-width: 10;
- stroke-opacity: 0.3;
- animation-delay: -1s;
+.button-light {
+ padding: 0.7rem 1rem;
+ border: 1px solid var(--color-gray-70);
+ color: var(--color-gray-70);
+ font-weight: bold;
+ border-radius: 3rem;
+ white-space: nowrap;
}
-header.frontpage svg path:nth-child(3) {
- stroke: #f1b35b;
- stroke-width: 15;
- stroke-opacity: 0.6;
- animation-delay: -3.5s;
-}
+/* css for blog section */
-header.frontpage svg path:nth-child(4) {
- stroke: #f28a40;
- stroke-width: 5;
- stroke-opacity: 0.4;
- animation-delay: -3s;
+.whats-new {
+ padding: 0.2rem 0;
+ width: 20%;
+ text-align: center;
+ margin-left: 3rem;
+ background-color: #f5f5f5;
Review comment:
Use a variable here.
##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -1,212 +1,200 @@
-header.frontpage {
- font-size: 1.5rem;
- display: flex;
- flex-flow: column;
- align-items: center;
- margin: 0 auto;
- max-width: 60rem;
-}
+/* common css for sections */
-header.frontpage h1 {
- font-size: 5rem;
- font-weight: bolder;
+section.frontpage h1,
+section.frontpage h2,
+section.frontpage h3,
+section.frontpage h4,
+section.frontpage h5,
+section.frontpage h6 {
+ font-weight: var(--heading-font-weight);
color: var(--heading-font-color);
- margin-top: 3rem;
- text-align: center;
- text-transform: none;
- text-shadow: -1px -1px 1px #fff5, 1px -1px 1px #fff5, -1px 1px 1px #fff5, 1px 1px 1px #fff5;
+ line-height: 1.3;
+ margin: 1rem 0 0;
+ text-transform: uppercase;
+ word-wrap: break-word;
}
-header.frontpage p {
- hyphens: none;
- margin-top: 3rem;
- text-align: center;
- line-height: 1.5;
- color: var(--body-font-color);
+section.frontpage {
+ color: var(--doc-font-color);
+ font-size: var(--doc-font-size);
+ line-height: var(--doc-line-height);
+ margin: 0 auto;
+ max-width: var(--frontpage-max-width);
}
-header.frontpage a {
- color: var(--heading-font-color);
- text-decoration: underline;
+section.frontpage a {
+ color: var(--link-font-color);
}
-header.frontpage a:hover {
- color: var(--heading-font-color);
- text-decoration: underline;
+section.frontpage a:hover {
+ color: var(--link_hover-font-color);
}
-header.frontpage a:active {
- color: var(--heading-font-color);
+section.frontpage h1 {
+ width: 100%;
+ text-align: center;
+ margin-bottom: 1rem;
+ font-size: 2.5rem;
}
-.frontpage a:hover {
- color: var(--color-white);
- text-decoration: none;
+section.frontpage h2 {
+ text-align: center;
}
-.frontpage a:active {
- color: var(--color-white);
-}
+/* css for header section */
-.frontpage a.significant {
- margin: 1rem;
- padding: 0.8rem 1.5rem;
- background: var(--color-camel-orange);
- color: var(--color-white);
- border-radius: 8px;
- font-size: 1.2rem;
- font-weight: bold;
- outline: none;
- display: inline-block;
- box-shadow: 0 4px #8e480b;
+.frontpage-header {
+ display: flex;
+ flex-direction: row;
+ margin: 2rem 3rem 2.5rem;
}
-.frontpage a.significant:hover {
- color: var(--color-white);
- box-shadow: 0 3px #8e480b;
- transform: translateY(2px);
+.frontpage-header img {
+ width: 45vw;
+ max-height: 50vh;
}
-.frontpage a.significant:active {
- color: var(--color-white);
- box-shadow: 0 3px #8e480b;
- transform: translateY(2px);
+.frontpage-header .main-heading {
+ width: 50vw;
+ display: flex;
+ flex-direction: column;
+ margin-left: 2rem;
}
-header.frontpage svg {
- position: absolute;
- top: 4rem;
- left: 0;
- width: 100%;
- height: 14rem;
- z-index: -1;
+.frontpage-header h1 {
+ font-size: 5vw;
+ color: var(--color-asf-dark-blue);
+ margin-bottom: 0.5rem;
}
-header.frontpage svg path {
- fill: none;
- animation: sparkle 2s ease alternate infinite;
+.frontpage-header p {
+ font-size: 1.2rem;
+ margin-bottom: 2rem;
+ line-height: 1.7rem;
}
-header.frontpage svg path:nth-child(1) {
- stroke: #ffebcc;
- stroke-width: 10;
- stroke-opacity: 0.9;
+a.button-dark,
+.frontpage a.button-dark,
+.frontpage a.button-dark:hover {
+ white-space: nowrap;
+ padding: 0.7rem 1rem;
+ background-color: var(--color-camel-orange);
+ color: white;
+ font-weight: bold;
+ margin-right: 0.5rem;
+ border-radius: 3rem;
}
-header.frontpage svg path:nth-child(2) {
- stroke: #911408;
- stroke-width: 10;
- stroke-opacity: 0.3;
- animation-delay: -1s;
+.button-light {
+ padding: 0.7rem 1rem;
+ border: 1px solid var(--color-gray-70);
+ color: var(--color-gray-70);
+ font-weight: bold;
+ border-radius: 3rem;
+ white-space: nowrap;
}
-header.frontpage svg path:nth-child(3) {
- stroke: #f1b35b;
- stroke-width: 15;
- stroke-opacity: 0.6;
- animation-delay: -3.5s;
-}
+/* css for blog section */
-header.frontpage svg path:nth-child(4) {
- stroke: #f28a40;
- stroke-width: 5;
- stroke-opacity: 0.4;
- animation-delay: -3s;
+.whats-new {
+ padding: 0.2rem 0;
+ width: 20%;
+ text-align: center;
+ margin-left: 3rem;
+ background-color: #f5f5f5;
+ border-radius: 1rem 1rem 0 0;
}
-header.frontpage svg path:nth-child(5) {
- stroke: #ee6d11;
- stroke-width: 5;
- stroke-opacity: 0.6;
- animation-delay: -6s;
+.whats-new h2 {
+ margin-bottom: 0.5rem;
}
-@keyframes sparkle {
- 0% {
- stroke-opacity: 0.2;
- }
-
- 100% {
- stroke-opacity: 0.6;
- }
+section.frontpage.columns.blog-posts {
+ margin: 0;
+ display: flex;
+ flex-direction: row;
+ padding: 1rem 1rem 1rem 3rem;
+ max-width: none;
+ border-top: none;
+ background-color: var(--color-smoke-50);
}
-section.frontpage {
- color: var(--doc-font-color);
- font-size: var(--doc-font-size);
- line-height: var(--doc-line-height);
- margin: 0 auto;
- margin-top: 4rem;
- max-width: var(--frontpage-max-width);
+/* common css for columns section */
+
+section.frontpage.columns.functionalities p,
+.project .content p {
+ margin-bottom: 1.5rem;
}
-section.frontpage.columns,
section.frontpage.projects,
-section.frontpage.apache {
+section.frontpage.apache,
+section.frontpage.functionalities {
display: flex;
flex-wrap: wrap;
border-top: 1px solid var(--color-smoke-50);
padding: 2rem 1rem 1rem 1rem;
}
-section.frontpage.projects .section {
- width: calc(33% - 3rem);
- padding: 1%;
- margin: 1.5rem;
+section.frontpage.columns.functionalities {
+ border: none;
}
-section.frontpage h1,
-section.frontpage h2,
-section.frontpage h3,
-section.frontpage h4,
-section.frontpage h5,
-section.frontpage h6 {
- font-weight: var(--heading-font-weight);
- color: var(--heading-font-color);
- line-height: 1.3;
- margin: 1rem 0 0;
- text-transform: uppercase;
- word-wrap: break-word;
+section.frontpage.columns.functionalities h2,
+.project .content h2,
+.project .content p {
Review comment:
Prefix with `.frontpage`?
##########
File path: layouts/index.html
##########
@@ -1,18 +1,48 @@
{{ partial "header.html" . }}
-<header class="frontpage">
- <h1>🚀 Camel 3.4 is here! <wbr><a href="blog/2020/06/camel34-whatsnew/">What's new?</a></h1>
- <svg viewBox="0 0 500 70" preserveAspectRatio="none">
- <path d="M -10,25 C 130,125 330,0 510,5" />
- <path d="M -10,20 C 130,125 330,0 510,2" />
- <path d="M -10,15 C 150,115 350,0 510,15" />
- <path d="M -10,11 C 130,125 330,0 510,20" />
- <path d="M -10,5 C 130,125 330,0 510,25" />
- </svg>
- <p>Camel is an <mark>open source integration framework</mark> that empowers you to quickly and easily integrate various systems consuming or producing data.
- </p>
- <a class="significant" href="/manual/latest/getting-started.html">Get started</a>
-</header>
+<div class="frontpage-header">
+ <div class="main-heading">
+ <h1>Apache Camel</h1>
+ <p>
+ Camel is an Open Source integration framework that empowers you
+ to quickly and easily integrate various systems consuming or producing data.
+ </p>
+ <p>
+ <a class="button-dark" href="/manual/latest/getting-started.html">Get Started</a> <a class="button-light" href="/manual/latest/faq/what-is-camel.html">What is Camel?</a>
+ </p>
+ </div>
+ <img src="./img/camel-gears.svg" />
+</div>
+
+<div class="whats-new">
+ <h2>What's New?</h2>
+</div>
+
+<section class="frontpage columns blog-posts">
+
+{{with .Site.GetPage "taxonomy" "releases"}}
+{{range .Pages | first 3}}
+
+<div class="blog-post">
Review comment:
I'd use `<ol>` and `<li>` for each blog post, this helps screen readers.
##########
File path: layouts/index.html
##########
@@ -1,18 +1,48 @@
{{ partial "header.html" . }}
-<header class="frontpage">
- <h1>🚀 Camel 3.4 is here! <wbr><a href="blog/2020/06/camel34-whatsnew/">What's new?</a></h1>
- <svg viewBox="0 0 500 70" preserveAspectRatio="none">
- <path d="M -10,25 C 130,125 330,0 510,5" />
- <path d="M -10,20 C 130,125 330,0 510,2" />
- <path d="M -10,15 C 150,115 350,0 510,15" />
- <path d="M -10,11 C 130,125 330,0 510,20" />
- <path d="M -10,5 C 130,125 330,0 510,25" />
- </svg>
- <p>Camel is an <mark>open source integration framework</mark> that empowers you to quickly and easily integrate various systems consuming or producing data.
- </p>
- <a class="significant" href="/manual/latest/getting-started.html">Get started</a>
-</header>
+<div class="frontpage-header">
+ <div class="main-heading">
+ <h1>Apache Camel</h1>
+ <p>
+ Camel is an Open Source integration framework that empowers you
+ to quickly and easily integrate various systems consuming or producing data.
+ </p>
+ <p>
+ <a class="button-dark" href="/manual/latest/getting-started.html">Get Started</a> <a class="button-light" href="/manual/latest/faq/what-is-camel.html">What is Camel?</a>
+ </p>
+ </div>
+ <img src="./img/camel-gears.svg" />
+</div>
+
+<div class="whats-new">
+ <h2>What's New?</h2>
+</div>
+
+<section class="frontpage columns blog-posts">
+
+{{with .Site.GetPage "taxonomy" "releases"}}
+{{range .Pages | first 3}}
Review comment:
Do you think we could fit more than 3, perhaps by reducing the font size of the date presented? It's quite large and probably not the more important than other text.
##########
File path: layouts/index.html
##########
@@ -1,18 +1,48 @@
{{ partial "header.html" . }}
-<header class="frontpage">
- <h1>🚀 Camel 3.4 is here! <wbr><a href="blog/2020/06/camel34-whatsnew/">What's new?</a></h1>
- <svg viewBox="0 0 500 70" preserveAspectRatio="none">
- <path d="M -10,25 C 130,125 330,0 510,5" />
- <path d="M -10,20 C 130,125 330,0 510,2" />
- <path d="M -10,15 C 150,115 350,0 510,15" />
- <path d="M -10,11 C 130,125 330,0 510,20" />
- <path d="M -10,5 C 130,125 330,0 510,25" />
- </svg>
- <p>Camel is an <mark>open source integration framework</mark> that empowers you to quickly and easily integrate various systems consuming or producing data.
- </p>
- <a class="significant" href="/manual/latest/getting-started.html">Get started</a>
-</header>
+<div class="frontpage-header">
+ <div class="main-heading">
+ <h1>Apache Camel</h1>
+ <p>
+ Camel is an Open Source integration framework that empowers you
+ to quickly and easily integrate various systems consuming or producing data.
+ </p>
+ <p>
+ <a class="button-dark" href="/manual/latest/getting-started.html">Get Started</a> <a class="button-light" href="/manual/latest/faq/what-is-camel.html">What is Camel?</a>
+ </p>
+ </div>
+ <img src="./img/camel-gears.svg" />
+</div>
+
+<div class="whats-new">
+ <h2>What's New?</h2>
+</div>
+
+<section class="frontpage columns blog-posts">
+
+{{with .Site.GetPage "taxonomy" "releases"}}
Review comment:
Let's use all blog posts, rather than just releases. We can feature releases on the _Downloads_ page.
##########
File path: layouts/index.html
##########
@@ -1,18 +1,48 @@
{{ partial "header.html" . }}
-<header class="frontpage">
- <h1>🚀 Camel 3.4 is here! <wbr><a href="blog/2020/06/camel34-whatsnew/">What's new?</a></h1>
- <svg viewBox="0 0 500 70" preserveAspectRatio="none">
- <path d="M -10,25 C 130,125 330,0 510,5" />
- <path d="M -10,20 C 130,125 330,0 510,2" />
- <path d="M -10,15 C 150,115 350,0 510,15" />
- <path d="M -10,11 C 130,125 330,0 510,20" />
- <path d="M -10,5 C 130,125 330,0 510,25" />
- </svg>
- <p>Camel is an <mark>open source integration framework</mark> that empowers you to quickly and easily integrate various systems consuming or producing data.
- </p>
- <a class="significant" href="/manual/latest/getting-started.html">Get started</a>
-</header>
+<div class="frontpage-header">
+ <div class="main-heading">
+ <h1>Apache Camel</h1>
+ <p>
+ Camel is an Open Source integration framework that empowers you
+ to quickly and easily integrate various systems consuming or producing data.
+ </p>
+ <p>
+ <a class="button-dark" href="/manual/latest/getting-started.html">Get Started</a> <a class="button-light" href="/manual/latest/faq/what-is-camel.html">What is Camel?</a>
+ </p>
+ </div>
+ <img src="./img/camel-gears.svg" />
+</div>
+
+<div class="whats-new">
+ <h2>What's New?</h2>
+</div>
+
+<section class="frontpage columns blog-posts">
+
+{{with .Site.GetPage "taxonomy" "releases"}}
+{{range .Pages | first 3}}
+
+<div class="blog-post">
+ <div class="date">
+ <div class="day">
+ {{ dateFormat "2" .PublishDate}}
+ </div>
+ <div class="month">
+ {{ dateFormat "Jan" .PublishDate}}
+ {{ dateFormat "2006" .PublishDate}}
+ </div>
+ </div>
Review comment:
Use semantic HTML here, [`<time>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time) would be appropriate I think.
----------------------------------------------------------------
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