You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by ka...@apache.org on 2019/10/29 22:53:29 UTC
[airflow-site] branch aip-11 updated: Add mobile layouts (#97)
This is an automated email from the ASF dual-hosted git repository.
kamilbregula pushed a commit to branch aip-11
in repository https://gitbox.apache.org/repos/asf/airflow-site.git
The following commit(s) were added to refs/heads/aip-11 by this push:
new 696f839 Add mobile layouts (#97)
696f839 is described below
commit 696f839c803b7b1ec263c03a752ce905818681bf
Author: Kamil Gabryjelski <ka...@gmail.com>
AuthorDate: Tue Oct 29 23:53:24 2019 +0100
Add mobile layouts (#97)
---
landing-pages/site/assets/scss/_accordion.scss | 25 +++++++
landing-pages/site/assets/scss/_base-layout.scss | 45 ++++++++++-
landing-pages/site/assets/scss/_blog-page.scss | 38 ++++++++++
landing-pages/site/assets/scss/_case-study.scss | 4 +
.../site/assets/scss/_community-page.scss | 39 +++++++++-
landing-pages/site/assets/scss/_feature.scss | 45 +++++++++++
.../assets/scss/{_meetups.scss => _fonts.scss} | 10 +--
landing-pages/site/assets/scss/_home-page.scss | 6 ++
landing-pages/site/assets/scss/_install-page.scss | 87 ++++++++++++++++------
landing-pages/site/assets/scss/_list-boxes.scss | 61 +++++++++++----
.../assets/scss/{_case-study.scss => _media.scss} | 6 +-
landing-pages/site/assets/scss/_meetups.scss | 6 ++
landing-pages/site/assets/scss/_quote.scss | 7 ++
.../site/assets/scss/_text-with-icon.scss | 24 ++++++
landing-pages/site/assets/scss/_typography.scss | 5 +-
landing-pages/site/assets/scss/_video.scss | 11 +++
.../site/content/en/community/_index.html | 2 +-
landing-pages/site/content/en/install/_index.html | 2 +-
landing-pages/site/layouts/blog/list.html | 2 +-
landing-pages/site/layouts/blog/single.html | 4 +-
.../site/layouts/case-studies/single.html | 2 +-
landing-pages/site/layouts/community/list.html | 66 ++++++++--------
landing-pages/site/layouts/install/list.html | 27 +++----
landing-pages/site/layouts/meetups/list.html | 42 +++++------
.../site/layouts/partials/boxes/blogpost.html | 28 +++----
.../site/layouts/partials/boxes/case-study.html | 19 ++---
.../site/layouts/partials/boxes/commiter.html | 54 +++++++-------
.../site/layouts/partials/boxes/event.html | 33 ++++----
.../site/layouts/partials/boxes/integration.html | 10 +--
landing-pages/site/layouts/partials/feature.html | 4 +-
.../site/layouts/shortcodes/accordion.html | 6 +-
31 files changed, 516 insertions(+), 204 deletions(-)
diff --git a/landing-pages/site/assets/scss/_accordion.scss b/landing-pages/site/assets/scss/_accordion.scss
index c5410e7..6bdcce6 100644
--- a/landing-pages/site/assets/scss/_accordion.scss
+++ b/landing-pages/site/assets/scss/_accordion.scss
@@ -17,6 +17,7 @@
* under the License.
*/
@import "colors";
+@import "media";
details.accordion {
padding: 40px 30px;
@@ -38,6 +39,7 @@ details.accordion {
.accordion__summary-content {
display: flex;
max-width: 750px;
+ margin-right: 40px;
&--icon {
width: 60px;
@@ -77,9 +79,32 @@ details.accordion {
.accordion__content {
margin-top: 30px;
+ margin-right: 36px;
&.indented {
margin-left: 102px;
}
}
}
+
+@media (max-width: $mobile) {
+ details.accordion {
+ padding: 30px 0;
+
+ .accordion__summary-content {
+ &--icon {
+ margin-right: 20px;
+ }
+ }
+
+ .accordion__content {
+ &.indented {
+ margin-left: 80px;
+ }
+
+ ol.counter-blue {
+ margin-left: -38px !important;
+ }
+ }
+ }
+}
diff --git a/landing-pages/site/assets/scss/_base-layout.scss b/landing-pages/site/assets/scss/_base-layout.scss
index c94204e..e235cb6 100644
--- a/landing-pages/site/assets/scss/_base-layout.scss
+++ b/landing-pages/site/assets/scss/_base-layout.scss
@@ -16,9 +16,11 @@
* specific language governing permissions and limitations
* under the License.
*/
+@import "media";
+@import "fonts";
.base-layout {
- padding: 64px 0 40px;
+ padding: 44px 0 40px;
&--button {
display: flex;
@@ -26,19 +28,42 @@
margin-right: 45px;
margin-top: 80px
}
+
+}
+
+@media (max-width: $mobile) {
+ .base-layout {
+ padding: 0 0 60px;
+
+ &--button {
+ display: none;
+ }
+ }
}
.page-header {
@extend .header__medium--greyish-brown;
text-align: center;
margin-bottom: 16px;
+
+ @media (max-width: $mobile) {
+ font-size: 36px !important;
+ line-height: 1.22 !important;
+ }
}
.page-subtitle {
@extend .subtitle__large--brownish-grey;
text-align: center;
- font-weight: normal;
+ font-weight: normal !important;
margin-bottom: 80px;
+
+ @media (max-width: $mobile) {
+ font-family: $primary-font !important;
+ font-size: 16px !important;
+ line-height: 1.63 !important;
+ margin-bottom: 30px;
+ }
}
.container {
@@ -46,4 +71,20 @@
@media(min-width: 1200px) {
max-width: 1200px;
}
+
+ @media (max-width: $mobile) {
+ & > * {
+ max-width: 306px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ .no-width-restriction {
+ max-width: none;
+ }
+ }
+}
+
+.container-fluid {
+ padding-left: 20px;
+ padding-right: 20px;
}
diff --git a/landing-pages/site/assets/scss/_blog-page.scss b/landing-pages/site/assets/scss/_blog-page.scss
index 7f3d936..626ef6e 100644
--- a/landing-pages/site/assets/scss/_blog-page.scss
+++ b/landing-pages/site/assets/scss/_blog-page.scss
@@ -17,6 +17,8 @@
* under the License.
*/
@import "colors";
+@import "media";
+@import "fonts";
.tag {
@extend .bodytext__medium--cerulean-blue;
@@ -39,6 +41,10 @@
flex-wrap: wrap;
width: fit-content;
margin-top: -14px;
+
+ @media (max-width: $mobile) {
+ justify-content: center;
+ }
}
.all-tags-container {
@@ -86,9 +92,41 @@
font-weight: normal;
margin-bottom: 30px;
}
+
+ &--date {
+ @extend .bodytext__medium--brownish-grey;
+ margin-top: 17px;
+ }
}
}
+@media (max-width: $mobile) {
+ .blogpost-content {
+ &__metadata {
+ &--container {
+ flex-direction: column;
+ margin-bottom: 19px;
+ }
+ &--title {
+ font-family: $primary-font !important;
+ font-size: 24px !important;
+ line-height: 1.5 !important;
+ max-width: 272px;
+ margin-bottom: 13px;
+ }
+ &--author {
+ margin-bottom: 20px;
+ }
+ &--description {
+ font-family: $primary-font !important;
+ font-weight: normal !important;
+ font-size: 16px !important;
+ line-height: 1.63 !important;
+ margin-bottom: 20px;
+ }
+ }
+ }
+}
.blog-pager {
margin-top: 60px;
display: flex;
diff --git a/landing-pages/site/assets/scss/_case-study.scss b/landing-pages/site/assets/scss/_case-study.scss
index 801c5bc..5ee783f 100644
--- a/landing-pages/site/assets/scss/_case-study.scss
+++ b/landing-pages/site/assets/scss/_case-study.scss
@@ -20,4 +20,8 @@
.case-study-page {
max-width: 790px;
margin: 60px auto 0;
+
+ @media (max-width: $mobile) {
+ margin-top: 40px;
+ }
}
diff --git a/landing-pages/site/assets/scss/_community-page.scss b/landing-pages/site/assets/scss/_community-page.scss
index 12ac871..093a28d 100644
--- a/landing-pages/site/assets/scss/_community-page.scss
+++ b/landing-pages/site/assets/scss/_community-page.scss
@@ -17,6 +17,9 @@
* under the License.
*/
+@import "media";
+@import "fonts";
+
.list-link {
@extend .bodytext__medium--greyish-brown;
text-decoration: underline;
@@ -28,6 +31,11 @@
margin: 0 auto;
}
+ &--header-join {
+ @extend .header__small--greyish-brown;
+ text-align: center;
+ }
+
&--accordion-container {
margin: 60px 18px;
}
@@ -35,10 +43,12 @@
&--commiters-header {
@extend .header__small--greyish-brown;
text-align: center;
- margin: 70px 0 40px;
+ margin-top: 70px;
+ margin-bottom: 40px;
&.large-margin {
- margin: 100px 0 40px;
+ margin-top: 100px;
+ margin-bottom: 40px;
}
}
@@ -47,3 +57,28 @@
margin: 60px auto 0;
}
}
+
+@media (max-width: $mobile) {
+ .community {
+ &--header-join {
+ font-family: $primary-font !important;
+ font-size: 24px !important;
+ line-height: 1.5 !important;
+ }
+ &--accordion-container {
+ margin: 40px 0;
+ }
+ &--commiters-header {
+ font-size: 36px !important;
+ line-height: 1.22 !important;
+ margin-top: 60px;
+ &.large-margin {
+ margin-top: 60px;
+ margin-bottom: 40px;
+ }
+ }
+ &--button-container {
+ margin-top: 20px;
+ }
+ }
+}
diff --git a/landing-pages/site/assets/scss/_feature.scss b/landing-pages/site/assets/scss/_feature.scss
index 46bdb26..8bbdeac 100644
--- a/landing-pages/site/assets/scss/_feature.scss
+++ b/landing-pages/site/assets/scss/_feature.scss
@@ -17,9 +17,16 @@
* under the License.
*/
+@import "media";
+@import "fonts";
+
.features-list {
margin: 76px auto 100px;
max-width: 720px;
+
+ @media (max-width: $mobile) {
+ margin-top: 0;
+ }
}
.feature-item {
@@ -38,4 +45,42 @@
&--text-box {
margin-left: 60px;
}
+
+ &--header {
+ @extend .header__xsmall--greyish-brown;
+ }
+
+ &--text {
+ @extend .bodytext__medium--brownish-grey;
+ }
+
+ @media (max-width: $mobile) {
+ flex-direction: column;
+ margin-top: 40px;
+ svg {
+ height: 60px;
+ width: auto;
+ }
+ &--icon-box {
+ margin-top: 0;
+ margin-bottom: 20px;
+ max-width: unset;
+ }
+
+ &--text-box {
+ margin-left: 0;
+ text-align: center;
+ }
+
+ &--header {
+ font-family: $primary-font !important;
+ font-size: 24px !important;
+ line-height: 1.5 !important;
+ }
+
+ &--text {
+ font-size: 14px !important;
+ line-height: 1.57 !important;
+ }
+ }
}
diff --git a/landing-pages/site/assets/scss/_meetups.scss b/landing-pages/site/assets/scss/_fonts.scss
similarity index 87%
copy from landing-pages/site/assets/scss/_meetups.scss
copy to landing-pages/site/assets/scss/_fonts.scss
index fa63a23..079abed 100644
--- a/landing-pages/site/assets/scss/_meetups.scss
+++ b/landing-pages/site/assets/scss/_fonts.scss
@@ -17,10 +17,6 @@
* under the License.
*/
-.video-section-container {
- margin: 80px 0;
-}
-
-.host-header {
- margin-bottom: 6px;
-}
+$header-font: 'Rubik', sans-serif;
+$primary-font: 'Roboto', sans-serif;
+$monospace-font: 'Roboto Mono', monospace;
diff --git a/landing-pages/site/assets/scss/_home-page.scss b/landing-pages/site/assets/scss/_home-page.scss
index beb35e3..7bc6d31 100644
--- a/landing-pages/site/assets/scss/_home-page.scss
+++ b/landing-pages/site/assets/scss/_home-page.scss
@@ -16,11 +16,17 @@
* specific language governing permissions and limitations
* under the License.
*/
+@import "media";
.principles-header {
+ margin-top: 20px;
margin-bottom: 4px;
}
.integrations-header {
margin-bottom: 60px; // to be changed when searchbox is added
+
+ @media (max-width: $mobile) {
+ margin-bottom: 30px;
+ }
}
diff --git a/landing-pages/site/assets/scss/_install-page.scss b/landing-pages/site/assets/scss/_install-page.scss
index 0c6b5e9..8847419 100644
--- a/landing-pages/site/assets/scss/_install-page.scss
+++ b/landing-pages/site/assets/scss/_install-page.scss
@@ -16,37 +16,80 @@
* specific language governing permissions and limitations
* under the License.
*/
+@import "colors";
+@import "media";
-.install__accordions {
- &--wrapper {
- margin: 60px 18px;
+.install {
+ &--headers-wrapper {
+ max-width: 936px;
+ margin: 0 auto;
}
- &-content {
- &--header {
- @extend .bodytext__medium--greyish-brown;
- font-weight: 500;
+ &--description {
+ @extend .bodytext__medium--brownish-grey;
+ text-align: center;
+ margin: 45px 0 60px;
+ a {
+ color: map-get($colors, cerulean-blue);
+ text-decoration: underline;
}
+ }
- &--list-wrapper {
- margin-bottom: 40px;
+ &__accordions {
+ &--wrapper {
+ max-width: 900px;
+ margin: 60px auto;
}
- &--methods-wrapper {
- display: flex;
- margin-bottom: 20px;
+ &-content {
+ &--header {
+ @extend .bodytext__medium--greyish-brown;
+ font-weight: 500;
+ }
+
+ &--list-wrapper {
+ margin-bottom: 40px;
+ }
+
+ &--methods-wrapper {
+ display: flex;
+ margin-bottom: 20px;
+ }
+
+ &--method-box {
+ display: flex;
+ width: 270px;
+ height: 160px;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ border: solid 1px #cbcbcb;
+ border-radius: 5px;
+ margin-right: 40px;
+ }
}
+ }
+}
- &--method-box {
- display: flex;
- width: 270px;
- height: 160px;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- border: solid 1px #cbcbcb;
- border-radius: 5px;
- margin-right: 40px;
+@media (max-width: $mobile) {
+ .install {
+ &__accordions {
+ &--wrapper {
+ max-width: 306px;
+ margin-bottom: 0;
+ }
+ &-content {
+ &--methods-wrapper {
+ flex-direction: column;
+ align-items: center;
+ margin-bottom: 0;
+ margin-right: -36px;
+ }
+ &--method-box {
+ margin-right: 0;
+ margin-bottom: 20px;
+ }
+ }
}
}
}
diff --git a/landing-pages/site/assets/scss/_list-boxes.scss b/landing-pages/site/assets/scss/_list-boxes.scss
index 69cd658..a031349 100644
--- a/landing-pages/site/assets/scss/_list-boxes.scss
+++ b/landing-pages/site/assets/scss/_list-boxes.scss
@@ -17,28 +17,47 @@
* under the License.
*/
@import "colors";
+@import "media";
-$box-margin: 20px;
+$card-margin: 20px;
.list-items {
display: flex;
flex-wrap: wrap;
- margin: calc(-1 * #{$box-margin});
+ margin: calc(-1 * #{$card-margin});
+
+ @media (max-width: $mobile) {
+ margin: 0;
+ flex-direction: column;
+ align-items: center;
+ }
}
.list-item {
- border: solid 1px map_get($colors, very-light-pink);
- border-radius: 5px;
- margin: $box-margin;
- padding: 30px 10px;
- width: 270px;
+ width: 25%;
&--wide {
- max-width: 580px;
+ width: 50%;
+ @media (max-width: $tablet) {
+ width: 100%;
+ }
+ }
+ @media (max-width: $tablet) {
+ width: 50%;
+ }
+ @media (max-width: $mobile) {
+ margin: 0 0 20px;
width: 100%;
}
}
+.card {
+ border: solid 1px map_get($colors, very-light-pink);
+ border-radius: 5px;
+ margin: $card-margin;
+ padding: 30px 10px;
+}
+
.box-event {
display: flex;
flex-direction: column;
@@ -83,6 +102,10 @@ $box-margin: 20px;
@extend .bodytext__medium--brownish-grey;
margin-bottom: 20px;
}
+
+ &--date {
+ @extend .bodytext__medium--brownish-grey;
+ }
}
&__case-study {
@@ -153,16 +176,26 @@ $box-margin: 20px;
}
&__integration {
- justify-content: space-between;
-
- &--logo {
- margin-top: 75px;
- }
+ height: 208px;
+ justify-content: center;
&--name {
@extend .subtitle__medium--brownish-grey;
font-weight: bold;
- margin-top: 50px;
+ }
+ }
+}
+
+@media (max-width: $mobile) {
+ .box-event {
+ &__blogpost {
+ &--metadata {
+ flex-direction: column;
+ }
+
+ &--date {
+ margin-top: 17px;
+ }
}
}
}
diff --git a/landing-pages/site/assets/scss/_case-study.scss b/landing-pages/site/assets/scss/_media.scss
similarity index 92%
copy from landing-pages/site/assets/scss/_case-study.scss
copy to landing-pages/site/assets/scss/_media.scss
index 801c5bc..6388ffb 100644
--- a/landing-pages/site/assets/scss/_case-study.scss
+++ b/landing-pages/site/assets/scss/_media.scss
@@ -17,7 +17,5 @@
* under the License.
*/
-.case-study-page {
- max-width: 790px;
- margin: 60px auto 0;
-}
+$mobile: 640px;
+$tablet: 1024px;
diff --git a/landing-pages/site/assets/scss/_meetups.scss b/landing-pages/site/assets/scss/_meetups.scss
index fa63a23..f8cfef0 100644
--- a/landing-pages/site/assets/scss/_meetups.scss
+++ b/landing-pages/site/assets/scss/_meetups.scss
@@ -17,8 +17,14 @@
* under the License.
*/
+@import "media";
+
.video-section-container {
margin: 80px 0;
+
+ @media (max-width: $mobile) {
+ margin: 60px 0;
+ }
}
.host-header {
diff --git a/landing-pages/site/assets/scss/_quote.scss b/landing-pages/site/assets/scss/_quote.scss
index 55d35d2..a3ca516 100644
--- a/landing-pages/site/assets/scss/_quote.scss
+++ b/landing-pages/site/assets/scss/_quote.scss
@@ -18,6 +18,7 @@
*/
@import "colors";
+@import "media";
.quote {
display: flex;
@@ -50,3 +51,9 @@
margin: 0 auto;
}
}
+
+@media (max-width: $mobile) {
+ .quote {
+ padding: 0 0 40px;
+ }
+}
diff --git a/landing-pages/site/assets/scss/_text-with-icon.scss b/landing-pages/site/assets/scss/_text-with-icon.scss
index f508d91..ff31876 100644
--- a/landing-pages/site/assets/scss/_text-with-icon.scss
+++ b/landing-pages/site/assets/scss/_text-with-icon.scss
@@ -16,6 +16,8 @@
* specific language governing permissions and limitations
* under the License.
*/
+@import "media";
+@import "fonts";
.text-with-icon-list {
display: flex;
@@ -42,4 +44,26 @@
@extend .bodytext__medium--brownish-grey;
text-align: center;
}
+
+ @media (max-width: $mobile) {
+ margin-top: 30px;
+
+ svg {
+ width: 70px;
+ height: 70px;
+ }
+ .text-with-icon-item {
+ &--header {
+ font-family: $primary-font;
+ font-size: 24px;
+ line-height: 1.5;
+ margin-top: 16px;
+ }
+
+ &--text {
+ font-size: 14px;
+ line-height: 1.57;
+ }
+ }
+ }
}
diff --git a/landing-pages/site/assets/scss/_typography.scss b/landing-pages/site/assets/scss/_typography.scss
index 321def2..88c99b4 100644
--- a/landing-pages/site/assets/scss/_typography.scss
+++ b/landing-pages/site/assets/scss/_typography.scss
@@ -18,10 +18,7 @@
*/
@import "colors";
-
-$header-font: 'Rubik', sans-serif;
-$primary-font: 'Roboto', sans-serif;
-$monospace-font: 'Roboto Mono', monospace;
+@import "fonts";
$font-weights: (
normal: 400,
diff --git a/landing-pages/site/assets/scss/_video.scss b/landing-pages/site/assets/scss/_video.scss
index f8dd998..06b4b54 100644
--- a/landing-pages/site/assets/scss/_video.scss
+++ b/landing-pages/site/assets/scss/_video.scss
@@ -17,11 +17,17 @@
* under the License.
*/
@import "colors";
+@import "media";
.video-section {
display: flex;
border: solid 1px #cbcbcb;
padding: 40px;
+
+ @media (max-width: $tablet) {
+ flex-direction: column;
+ padding: 20px
+ }
}
.video-wrapper {
@@ -54,6 +60,11 @@
max-width: 365px;
width: 100%;
margin-left: 40px;
+
+ @media (max-width: $tablet) {
+ max-width: unset;
+ margin-left: 0;
+ }
}
.video-list {
diff --git a/landing-pages/site/content/en/community/_index.html b/landing-pages/site/content/en/community/_index.html
index bda9212..58e8199 100644
--- a/landing-pages/site/content/en/community/_index.html
+++ b/landing-pages/site/content/en/community/_index.html
@@ -6,7 +6,7 @@ menu:
---
<div class="community--accordion-container">
- {{< accordion title="Join the devlist" description="If you want to stay up to date with what is going on in the project, want to discuss the features, talk about fixes or simply ask a question - this is the first step to take." logo_path="icons/join-devlist-icon.svg" >}}
+ {{< accordion title="Join the devlist" description="If you want to stay up to date with what is going on in the project, want to discuss the features, talk about fixes or simply ask a question - this is the first step to take." logo_path="icons/join-devlist-icon.svg" open="true" >}}
<ol class="counter-blue mx-auto">
<li>Send an email without any subject or content at <a class="list-link" href="mailto:dev@airflow.apache.org">dev@airflow.apache.org</a>
</li>
diff --git a/landing-pages/site/content/en/install/_index.html b/landing-pages/site/content/en/install/_index.html
index ed70fee..c0e70b6 100644
--- a/landing-pages/site/content/en/install/_index.html
+++ b/landing-pages/site/content/en/install/_index.html
@@ -6,7 +6,7 @@ menu:
---
<div class="install__accordions--wrapper">
- {{< accordion title="Install Apache Airflow locally" description="Working on an Open Source project such as Apache Airflow is very demanding but also equally rewarding when you realize how many businesses use it every day." >}}
+ {{< accordion title="Install Apache Airflow locally" description="Working on an Open Source project such as Apache Airflow is very demanding but also equally rewarding when you realize how many businesses use it every day." open="true">}}
<p class="install__accordions-content--header">When installing locally is a good option for you?</p>
<div class="install__accordions-content--list-wrapper">
<ul class="ticks-blue">
diff --git a/landing-pages/site/layouts/blog/list.html b/landing-pages/site/layouts/blog/list.html
index 4891c43..855ce0f 100644
--- a/landing-pages/site/layouts/blog/list.html
+++ b/landing-pages/site/layouts/blog/list.html
@@ -18,7 +18,7 @@
*/}}
{{ define "main" }}
- <div>
+ <div class="no-width-restriction">
<h2 class="page-header">Blog</h2>
<div class="all-tags-container">
<div class="tags-container mx-auto">
diff --git a/landing-pages/site/layouts/blog/single.html b/landing-pages/site/layouts/blog/single.html
index 6070848..685e952 100644
--- a/landing-pages/site/layouts/blog/single.html
+++ b/landing-pages/site/layouts/blog/single.html
@@ -21,5 +21,7 @@
<div class="blogpost-content">
{{ .Render "content" }}
</div>
- {{ partial "blog-pager" . }}
+ <div class="no-width-restriction">
+ {{ partial "blog-pager" . }}
+ </div>
{{ end }}
diff --git a/landing-pages/site/layouts/case-studies/single.html b/landing-pages/site/layouts/case-studies/single.html
index eaa0d61..0715a5d 100644
--- a/landing-pages/site/layouts/case-studies/single.html
+++ b/landing-pages/site/layouts/case-studies/single.html
@@ -18,7 +18,7 @@
*/}}
{{ define "main" }}
- <div class="case-study-page">
+ <div class="case-study-page no-width-restriction">
{{ .Render "content" }}
{{ partial "pager.html" . }}
</div>
diff --git a/landing-pages/site/layouts/community/list.html b/landing-pages/site/layouts/community/list.html
index dc1dc3e..50b5a83 100644
--- a/landing-pages/site/layouts/community/list.html
+++ b/landing-pages/site/layouts/community/list.html
@@ -18,41 +18,41 @@
*/}}
{{ define "main" }}
- <div>
- <div class="community--header-container">
- <h2 class="page-header">Community</h2>
- <h5 class="page-subtitle">
- Started at Airbnb as open source from the very first commit. Apache Airflow community
- has about 500 active members who support each other in solving problems.
- </h5>
+ <div class="community--header-container">
+ <h2 class="page-header">Community</h2>
+ <h5 class="page-subtitle">
+ Started at Airbnb as open source from the very first commit. Apache Airflow community
+ has about 500 active members who support each other in solving problems.
+ </h5>
- <h5 class="header__small--greyish-brown text-center">Join the community!</h5>
- {{ with .Content }}
+ <h5 class="community--header-join">Join the community!</h5>
+ {{ with .Content }}
+ <div class="no-width-restriction">
{{ . }}
- {{ end }}
- </div>
- <h5 class="community--commiters-header large-margin">Primary Members Commiters</h5>
- <div id="pmc-container" class="list-items">
- {{ range .Site.Data.commiters }}
- <div class="list-item">
- {{ partial "boxes/commiter" . }}
- </div>
- {{ end }}
- </div>
- <div class="community--button-container">
- {{ partial "buttons/button-filled" (dict "text" "Show all" "id" "show-all-pmcs")}}
- </div>
+ </div>
+ {{ end }}
+ </div>
+ <h5 class="community--commiters-header large-margin">Primary Members Commiters</h5>
+ <div id="pmc-container" class="list-items">
+ {{ range .Site.Data.commiters }}
+ <div class="list-item">
+ {{ partial "boxes/commiter" . }}
+ </div>
+ {{ end }}
+ </div>
+ <div class="community--button-container">
+ {{ partial "buttons/button-filled" (dict "text" "Show all" "id" "show-all-pmcs")}}
+ </div>
- <h5 class="community--commiters-header">Commiters</h5>
- <div id="commiters-container" class="list-items">
- {{ range .Site.Data.commiters }}
- <div class="list-item">
- {{ partial "boxes/commiter" . }}
- </div>
- {{ end }}
- </div>
- <div class="community--button-container">
- {{ partial "buttons/button-filled" (dict "text" "Show all" "id" "show-all-commiters")}}
- </div>
+ <h5 class="community--commiters-header">Commiters</h5>
+ <div id="commiters-container" class="list-items">
+ {{ range .Site.Data.commiters }}
+ <div class="list-item">
+ {{ partial "boxes/commiter" . }}
+ </div>
+ {{ end }}
+ </div>
+ <div class="community--button-container">
+ {{ partial "buttons/button-filled" (dict "text" "Show all" "id" "show-all-commiters")}}
</div>
{{ end }}
diff --git a/landing-pages/site/layouts/install/list.html b/landing-pages/site/layouts/install/list.html
index 04f2c94..b74ddee 100644
--- a/landing-pages/site/layouts/install/list.html
+++ b/landing-pages/site/layouts/install/list.html
@@ -18,18 +18,19 @@
*/}}
{{ define "main" }}
- <div>
- <div style="max-width: 936px; margin: 0 auto;">
- <h2 class="page-header">Install</h2>
- <h5 class="page-subtitle" style="margin-bottom: 45px">
- Apache Airflow can be installed on computer or you can use it
by Cloud/Pass. Depending on your goals
- choose the best method of installation.
- </h5>
- <p class="bodytext__medium--brownish-grey text-center" style="margin-bottom: 60px;">Remember that Apache Airflow is a platform created by the <a
- class="bodytext__medium--cerulean-blue" style="text-decoration: underline;" href="/community">Community</a> and you can join us!</p>
- {{ with .Content }}
- {{ . }}
- {{ end }}
- </div>
+ <div class="install--headers-wrapper">
+ <h2 class="page-header">Install</h2>
+ <h5 class="page-subtitle" style="margin-bottom: 45px">
+ Apache Airflow can be installed on computer or you can use it
by Cloud/Pass. Depending on your goals
+ choose the best method of installation.
+ </h5>
+ <p class="install--description">Remember that Apache Airflow
+ is a platform created by the <a href="/community">Community</a>
+ and you can join us!</p>
+ </div>
+ <div class="no-width-restriction">
+ {{ with .Content }}
+ {{ . }}
+ {{ end }}
</div>
{{ end }}
diff --git a/landing-pages/site/layouts/meetups/list.html b/landing-pages/site/layouts/meetups/list.html
index 5fdb425..a03a69f 100644
--- a/landing-pages/site/layouts/meetups/list.html
+++ b/landing-pages/site/layouts/meetups/list.html
@@ -18,29 +18,27 @@
*/}}
{{ define "main" }}
- <div>
- <h2 class="page-header">Meetups</h2>
- <h5 class="page-subtitle">
- Meetups are a great way for the community to meet face-to face
- </h5>
- <div id="events-container" class="list-items">
- {{ range .Site.Data.meetups }}
- <div class="list-item">
- {{ partial "boxes/event" . }}
- </div>
- {{ end }}
- </div>
- <div class="video-section-container">
- {{ partial "video-section" . }}
- </div>
- <div>
- <h4 class="page-header host-header">Want to host a meetup?</h4>
- <div class="text-with-icon-list">
- {{ partial "text-with-icon" (dict "logo_path" "icons/meetup-icon.svg" "header" "Plan a meetup" "text" "Airflow pipelines are configuration as code (Python), allowing for dynamic pipeline generation. This allows for writing code that instantiates pipelines dynamically.") }}
- {{ partial "text-with-icon" (dict "logo_path" "icons/intent-icon.svg" "header" "Voice your intent" "text" "Airflow pipelines are configuration as code (Python), allowing for dynamic pipeline generation. This allows for writing code that instantiates pipelines dynamically.") }}
- {{ partial "text-with-icon" (dict "logo_path" "icons/date-icon.svg" "header" "Set up the date" "text" "Easily define your own operators, executors and extend the library so that it fits the level of abstraction that suits your environment.") }}
- {{ partial "text-with-icon" (dict "logo_path" "icons/promote-icon.svg" "header" "Promote it!" "text" "Airflow pipelines are lean and explicit. Parametrizing your scripts is built into its core using the powerful Jinja templating engine.") }}
+ <h2 class="page-header">Meetups</h2>
+ <h5 class="page-subtitle">
+ Meetups are a great way for the community to meet face-to face
+ </h5>
+ <div id="events-container" class="list-items">
+ {{ range .Site.Data.meetups }}
+ <div class="list-item">
+ {{ partial "boxes/event" . }}
</div>
+ {{ end }}
+ </div>
+ <div class="video-section-container no-width-restriction">
+ {{ partial "video-section" . }}
+ </div>
+ <div>
+ <h4 class="page-header host-header">Want to host a meetup?</h4>
+ <div class="text-with-icon-list">
+ {{ partial "text-with-icon" (dict "logo_path" "icons/meetup-icon.svg" "header" "Plan a meetup" "text" "Airflow pipelines are configuration as code (Python), allowing for dynamic pipeline generation. This allows for writing code that instantiates pipelines dynamically.") }}
+ {{ partial "text-with-icon" (dict "logo_path" "icons/intent-icon.svg" "header" "Voice your intent" "text" "Airflow pipelines are configuration as code (Python), allowing for dynamic pipeline generation. This allows for writing code that instantiates pipelines dynamically.") }}
+ {{ partial "text-with-icon" (dict "logo_path" "icons/date-icon.svg" "header" "Set up the date" "text" "Easily define your own operators, executors and extend the library so that it fits the level of abstraction that suits your environment.") }}
+ {{ partial "text-with-icon" (dict "logo_path" "icons/promote-icon.svg" "header" "Promote it!" "text" "Airflow pipelines are lean and explicit. Parametrizing your scripts is built into its core using the powerful Jinja templating engine.") }}
</div>
</div>
{{ end }}
diff --git a/landing-pages/site/layouts/partials/boxes/blogpost.html b/landing-pages/site/layouts/partials/boxes/blogpost.html
index f59859c..598cfd0 100644
--- a/landing-pages/site/layouts/partials/boxes/blogpost.html
+++ b/landing-pages/site/layouts/partials/boxes/blogpost.html
@@ -17,21 +17,23 @@
under the License.
*/}}
-<div class="box-event__blogpost">
- <div class="box-event__blogpost--metadata">
- <div class="tags-container">
- {{ range $tag := .Params.tags }}
+<div class="card">
+ <div class="box-event__blogpost">
+ <div class="box-event__blogpost--metadata">
+ <div class="tags-container">
+ {{ range $tag := .Params.tags }}
{{ with $.Site.GetPage (printf "/tags/%s" $tag) }}
- <a class="tag" href="{{ .Permalink }}">{{ humanize $tag }}</a>
+ <a class="tag" href="{{ .Permalink }}">{{ humanize $tag }}</a>
{{ end }}
- {{ end }}
+ {{ end }}
+ </div>
+ <span class="bodytext__medium--brownish-grey">{{ .Date.Format "Mon, Jan 2, 2006" }}</span>
</div>
- <span class="bodytext__medium--brownish-grey">{{ .Date.Format "Mon, Jan 2, 2006" }}</span>
+ <p class="box-event__blogpost--header">{{ .Params.title }}</p>
+ <p class="box-event__blogpost--author">{{ .Params.author }}</p>
+ <p class="box-event__blogpost--description">{{ .Params.description }}</p>
+ <a href="{{ .RelPermalink }}">
+ {{ partial "buttons/button-hollow" (dict "text" "Read more") }}
+ </a>
</div>
- <p class="box-event__blogpost--header">{{ .Params.title }}</p>
- <p class="box-event__blogpost--author">{{ .Params.author }}</p>
- <p class="box-event__blogpost--description">{{ .Params.description }}</p>
- <a href="{{ .RelPermalink }}">
- {{ partial "buttons/button-hollow" (dict "text" "Read more") }}
- </a>
</div>
diff --git a/landing-pages/site/layouts/partials/boxes/case-study.html b/landing-pages/site/layouts/partials/boxes/case-study.html
index 72848fc..413d916 100644
--- a/landing-pages/site/layouts/partials/boxes/case-study.html
+++ b/landing-pages/site/layouts/partials/boxes/case-study.html
@@ -17,14 +17,15 @@
under the License.
*/}}
-
-<div class="box-event box-event__case-study hoverable-icon">
- <div class="box-event__case-study--logo">
- {{ with resources.Get .logo_path }}
- {{ .Content | safeHTML }}
- {{ end }}
+<div class="card">
+ <div class="box-event box-event__case-study hoverable-icon">
+ <div class="box-event__case-study--logo">
+ {{ with resources.Get .logo_path }}
+ {{ .Content | safeHTML }}
+ {{ end }}
+ </div>
+ <p class="box-event__case-study--quote"
+ >{{ .quote.text }}</p>
+ {{ partial "buttons/button-hollow" (dict "text" "Learn more")}}
</div>
- <p class="box-event__case-study--quote"
- >{{ .quote.text }}</p>
- {{ partial "buttons/button-hollow" (dict "text" "Learn more")}}
</div>
diff --git a/landing-pages/site/layouts/partials/boxes/commiter.html b/landing-pages/site/layouts/partials/boxes/commiter.html
index 047129b..9d581f1 100644
--- a/landing-pages/site/layouts/partials/boxes/commiter.html
+++ b/landing-pages/site/layouts/partials/boxes/commiter.html
@@ -17,34 +17,36 @@
under the License.
*/}}
-<div class="box-event">
- <img src="{{ .image }}" alt="Commiter {{ .name }}" class="avatar"/>
- <p class="box-event__commiter--nick">@{{ .nick }}</p>
- <p class="bodytext__medium--brownish-grey">{{ .name }}</p>
- <div class="box-event__commiter--social-media-container">
- {{ if .github }}
- {{ $url := .github }}
- {{ with resources.Get "icons/github.svg" }}
- <a href="{{ $url }}" class="box-event__commiter--social-media-icon">
- {{ .Content | safeHTML }}
- </a>
+<div class="card">
+ <div class="box-event">
+ <img src="{{ .image }}" alt="Commiter {{ .name }}" class="avatar"/>
+ <p class="box-event__commiter--nick">@{{ .nick }}</p>
+ <p class="bodytext__medium--brownish-grey">{{ .name }}</p>
+ <div class="box-event__commiter--social-media-container">
+ {{ if .github }}
+ {{ $url := .github }}
+ {{ with resources.Get "icons/github.svg" }}
+ <a href="{{ $url }}" class="box-event__commiter--social-media-icon">
+ {{ .Content | safeHTML }}
+ </a>
+ {{ end }}
{{ end }}
- {{ end }}
- {{ if .twitter }}
- {{ $url := .twitter }}
- {{ with resources.Get "icons/twitter.svg" }}
- <a href="{{ $url }}" class="box-event__commiter--social-media-icon">
- {{ .Content | safeHTML }}
- </a>
+ {{ if .twitter }}
+ {{ $url := .twitter }}
+ {{ with resources.Get "icons/twitter.svg" }}
+ <a href="{{ $url }}" class="box-event__commiter--social-media-icon">
+ {{ .Content | safeHTML }}
+ </a>
+ {{ end }}
{{ end }}
- {{ end }}
- {{ if .linkedin }}
- {{ $url := .linkedin }}
- {{ with resources.Get "icons/linkedin.svg" }}
- <a href="{{ $url }}" class="box-event__commiter--social-media-icon">
- {{ .Content | safeHTML }}
- </a>
+ {{ if .linkedin }}
+ {{ $url := .linkedin }}
+ {{ with resources.Get "icons/linkedin.svg" }}
+ <a href="{{ $url }}" class="box-event__commiter--social-media-icon">
+ {{ .Content | safeHTML }}
+ </a>
+ {{ end }}
{{ end }}
- {{ end }}
+ </div>
</div>
</div>
diff --git a/landing-pages/site/layouts/partials/boxes/event.html b/landing-pages/site/layouts/partials/boxes/event.html
index 550ab2a..ef8a836 100644
--- a/landing-pages/site/layouts/partials/boxes/event.html
+++ b/landing-pages/site/layouts/partials/boxes/event.html
@@ -17,20 +17,21 @@
under the License.
*/}}
-
-<div class="box-event">
- <p class="box-event__meetup--location">
- {{ .city }}<br/>{{ .country }}
- </p>
- <p class="box-event__meetup--members">
- {{ with resources.Get "icons/members-icon.svg" }}
- {{ .Content | safeHTML }}
- {{ end }}
- <span>{{ .members }} members</span>
- </p>
- <p class="box-event__meetup--next-meetup">
- Next meetup:<br>
- <span class="bodytext__medium--greyish-brown font-weight-500">{{ .date }}</span>
- </p>
- {{ partial "buttons/button-hollow" (dict "text" "Learn more") }}
+<div class="card">
+ <div class="box-event">
+ <p class="box-event__meetup--location">
+ {{ .city }}<br/>{{ .country }}
+ </p>
+ <p class="box-event__meetup--members">
+ {{ with resources.Get "icons/members-icon.svg" }}
+ {{ .Content | safeHTML }}
+ {{ end }}
+ <span>{{ .members }} members</span>
+ </p>
+ <p class="box-event__meetup--next-meetup">
+ Next meetup:<br>
+ <span class="bodytext__medium--greyish-brown font-weight-500">{{ .date }}</span>
+ </p>
+ {{ partial "buttons/button-hollow" (dict "text" "Learn more") }}
+ </div>
</div>
diff --git a/landing-pages/site/layouts/partials/boxes/integration.html b/landing-pages/site/layouts/partials/boxes/integration.html
index 1a3924a..aa0d2a0 100644
--- a/landing-pages/site/layouts/partials/boxes/integration.html
+++ b/landing-pages/site/layouts/partials/boxes/integration.html
@@ -17,12 +17,8 @@
under the License.
*/}}
-
-<div class="box-event box-event__integration hoverable-icon">
- <div class="box-event__integration--logo">
- {{ with resources.Get .logo_path }}
- {{ .Content | safeHTML }}
- {{ end }}
+<div class="card">
+ <div class="box-event box-event__integration">
+ <span class="box-event__integration--name">{{ .name }}</span>
</div>
- <span class="box-event__integration--name">{{ .name }}</span>
</div>
diff --git a/landing-pages/site/layouts/partials/feature.html b/landing-pages/site/layouts/partials/feature.html
index b41eeda..eddf6aa 100644
--- a/landing-pages/site/layouts/partials/feature.html
+++ b/landing-pages/site/layouts/partials/feature.html
@@ -24,7 +24,7 @@
{{ end }}
</div>
<div class="feature-item--text-box">
- <h5 class="header__xsmall--greyish-brown">{{ .header }}</h5>
- <p class="bodytext__medium--brownish-grey">{{ .text }}</p>
+ <h5 class="feature-item--header">{{ .header }}</h5>
+ <p class="feature-item--text">{{ .text }}</p>
</div>
</div>
diff --git a/landing-pages/site/layouts/shortcodes/accordion.html b/landing-pages/site/layouts/shortcodes/accordion.html
index 78846ac..072a430 100644
--- a/landing-pages/site/layouts/shortcodes/accordion.html
+++ b/landing-pages/site/layouts/shortcodes/accordion.html
@@ -18,7 +18,7 @@
*/}}
{{ $icon := .Get "logo_path" }}
-<details class="accordion">
+<details class="accordion" {{if .Get "open" }}open{{ end }}>
<summary>
<div class="accordion__arrow">
{{ with resources.Get "icons/accordion-arrow.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}
@@ -29,11 +29,11 @@
{{ with resources.Get $icon }}{{ ( . | minify).Content | safeHTML }}{{ end }}
</div>
{{ end }}
-<div>
+<div class="accordion__summary-content--text">
<h4 class="accordion__summary-content--header {{ if $icon }} subtitle__large--greyish-brown {{ else }} subtitle__large--cerulean-blue {{ end }}">{{ .Get "title" }}</h4>
<span class="bodytext__medium--brownish-grey">{{ .Get "description" }}</span>
- </div>
</div>
+ </div>
</summary>
<div class="accordion__content {{if $icon }}indented{{ end }}">{{ .Inner }}</div>
</details>