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 <kamil.gabryjel...@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:d...@airflow.apache.org">d...@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>