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 f61f900 Add layouts for tablet (#150)
f61f900 is described below
commit f61f900889afef73b09f5aa405b4a5d70ac641f0
Author: Kamil Gabryjelski <[email protected]>
AuthorDate: Fri Nov 15 11:30:22 2019 +0100
Add layouts for tablet (#150)
---
landing-pages/site/assets/scss/_accordion.scss | 2 +-
landing-pages/site/assets/scss/_base-layout.scss | 30 +++++++++++++-------
landing-pages/site/assets/scss/_blog-page.scss | 8 ++++++
landing-pages/site/assets/scss/_buttons.scss | 4 +--
landing-pages/site/assets/scss/_case-study.scss | 3 +-
.../site/assets/scss/_community-page.scss | 6 +++-
.../site/assets/scss/_content-drawer.scss | 3 +-
landing-pages/site/assets/scss/_feature.scss | 9 ++++--
landing-pages/site/assets/scss/_footer.scss | 2 +-
landing-pages/site/assets/scss/_header.scss | 23 ++++++++++++----
landing-pages/site/assets/scss/_install-page.scss | 18 ++++++++++--
landing-pages/site/assets/scss/_list-boxes.scss | 21 ++++++++------
landing-pages/site/assets/scss/_media.scss | 2 +-
landing-pages/site/assets/scss/_meetups.scss | 6 +++-
landing-pages/site/assets/scss/_navbar.scss | 2 +-
landing-pages/site/assets/scss/_roadmap.scss | 5 ++--
landing-pages/site/assets/scss/_search.scss | 4 +--
.../site/assets/scss/_text-with-icon.scss | 32 ++++++++++++++--------
landing-pages/site/assets/scss/_video.scss | 4 ++-
landing-pages/site/layouts/blog/single.html | 6 ++--
landing-pages/site/layouts/install/list.html | 2 +-
landing-pages/site/layouts/partials/navbar.html | 2 +-
landing-pages/site/layouts/roadmap/baseof.html | 2 +-
23 files changed, 136 insertions(+), 60 deletions(-)
diff --git a/landing-pages/site/assets/scss/_accordion.scss
b/landing-pages/site/assets/scss/_accordion.scss
index 330ec7b..8ddae57 100644
--- a/landing-pages/site/assets/scss/_accordion.scss
+++ b/landing-pages/site/assets/scss/_accordion.scss
@@ -87,7 +87,7 @@ details.accordion {
}
}
-@media (max-width: $mobile) {
+@media (max-width: $tablet) {
details.accordion {
padding: 30px 0;
diff --git a/landing-pages/site/assets/scss/_base-layout.scss
b/landing-pages/site/assets/scss/_base-layout.scss
index c98271f..5e7113b 100644
--- a/landing-pages/site/assets/scss/_base-layout.scss
+++ b/landing-pages/site/assets/scss/_base-layout.scss
@@ -34,7 +34,7 @@
}
}
-@media (max-width: $mobile) {
+@media (max-width: $tablet) {
.base-layout {
padding: 76px 0 60px;
@@ -49,7 +49,7 @@
text-align: center;
margin-bottom: 16px;
- @media (max-width: $mobile) {
+ @media (max-width: $tablet) {
font-size: 36px !important;
line-height: 1.22 !important;
}
@@ -61,7 +61,7 @@
font-weight: normal !important;
margin-bottom: 80px;
- @media (max-width: $mobile) {
+ @media (max-width: $tablet) {
font-family: $primary-font !important;
font-size: 16px !important;
line-height: 1.63 !important;
@@ -71,13 +71,11 @@
.container {
margin-top: 44px;
- @media(min-width: 1200px) {
- max-width: 1200px;
- }
+ max-width: 1200px;
- @media (max-width: $mobile) {
+ @media (max-width: $tablet) {
& > * {
- max-width: 306px;
+ max-width: 630px;
margin-left: auto;
margin-right: auto;
}
@@ -85,6 +83,12 @@
max-width: none;
}
}
+
+ @media (max-width: $mobile) {
+ & > * {
+ max-width: 306px;
+ }
+ }
}
.container-fluid {
@@ -96,13 +100,19 @@
width: fit-content;
margin: 60px auto 0;
- @media (max-width: 640px) {
+ @media (max-width: $tablet) {
margin-top: 30px;
}
}
.desktop-only {
- @media (max-width: $mobile) {
+ @media (max-width: $tablet) {
+ display: none;
+ }
+}
+
+.no-desktop {
+ @media (min-width: calc(#{$tablet} + 1px)) {
display: none;
}
}
diff --git a/landing-pages/site/assets/scss/_blog-page.scss
b/landing-pages/site/assets/scss/_blog-page.scss
index 92dd7cf..6649206 100644
--- a/landing-pages/site/assets/scss/_blog-page.scss
+++ b/landing-pages/site/assets/scss/_blog-page.scss
@@ -59,6 +59,14 @@
@extend .bodytext__medium--cerulean-blue;
font-weight: 500;
}
+
+ @media (max-width: $tablet) {
+ max-width: 580px;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 10px;
+ padding-left: 10px;
+ }
}
.blogpost-content {
diff --git a/landing-pages/site/assets/scss/_buttons.scss
b/landing-pages/site/assets/scss/_buttons.scss
index d9f0528..6cfd88b 100644
--- a/landing-pages/site/assets/scss/_buttons.scss
+++ b/landing-pages/site/assets/scss/_buttons.scss
@@ -99,7 +99,7 @@ button {
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .12);
}
- @media (max-width: $mobile) {
- padding: 4px 18px;
+ @media (max-width: $tablet) {
+ padding: 4px 17px;
}
}
diff --git a/landing-pages/site/assets/scss/_case-study.scss
b/landing-pages/site/assets/scss/_case-study.scss
index 5ee783f..a94e771 100644
--- a/landing-pages/site/assets/scss/_case-study.scss
+++ b/landing-pages/site/assets/scss/_case-study.scss
@@ -16,9 +16,10 @@
* specific language governing permissions and limitations
* under the License.
*/
+@import "media";
.case-study-page {
- max-width: 790px;
+ max-width: 790px !important;
margin: 60px auto 0;
@media (max-width: $mobile) {
diff --git a/landing-pages/site/assets/scss/_community-page.scss
b/landing-pages/site/assets/scss/_community-page.scss
index e7a5cc1..e9ba427 100644
--- a/landing-pages/site/assets/scss/_community-page.scss
+++ b/landing-pages/site/assets/scss/_community-page.scss
@@ -53,8 +53,12 @@
}
}
-@media (max-width: $mobile) {
+@media (max-width: $tablet) {
.community {
+ &--header-container {
+ max-width: 580px;
+ }
+
&--header-join {
font-family: $primary-font !important;
font-size: 24px !important;
diff --git a/landing-pages/site/assets/scss/_content-drawer.scss
b/landing-pages/site/assets/scss/_content-drawer.scss
index c92964b..6510445 100644
--- a/landing-pages/site/assets/scss/_content-drawer.scss
+++ b/landing-pages/site/assets/scss/_content-drawer.scss
@@ -16,10 +16,11 @@
* specific language governing permissions and limitations
* under the License.
*/
+@import "media";
.content-drawer-wrapper {
display: none;
- @media (max-width: 1024px) {
+ @media (max-width: $tablet) {
display: block;
margin-bottom: 30px;
}
diff --git a/landing-pages/site/assets/scss/_feature.scss
b/landing-pages/site/assets/scss/_feature.scss
index 8bbdeac..d526bac 100644
--- a/landing-pages/site/assets/scss/_feature.scss
+++ b/landing-pages/site/assets/scss/_feature.scss
@@ -23,6 +23,9 @@
.features-list {
margin: 76px auto 100px;
max-width: 720px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
@media (max-width: $mobile) {
margin-top: 0;
@@ -31,7 +34,7 @@
.feature-item {
display: flex;
- margin-top: 44px;
+ margin: 44px auto 0;
&--icon-box {
display: flex;
@@ -54,9 +57,11 @@
@extend .bodytext__medium--brownish-grey;
}
- @media (max-width: $mobile) {
+ @media (max-width: $tablet) {
flex-direction: column;
margin-top: 40px;
+ max-width: 260px;
+
svg {
height: 60px;
width: auto;
diff --git a/landing-pages/site/assets/scss/_footer.scss
b/landing-pages/site/assets/scss/_footer.scss
index 2de15e9..3e4fa66 100644
--- a/landing-pages/site/assets/scss/_footer.scss
+++ b/landing-pages/site/assets/scss/_footer.scss
@@ -90,7 +90,7 @@ footer {
}
}
-@media (max-width: $mobile) {
+@media (max-width: $tablet) {
footer {
.footer-section {
flex-direction: column-reverse;
diff --git a/landing-pages/site/assets/scss/_header.scss
b/landing-pages/site/assets/scss/_header.scss
index c89eac1..3e3cd54 100644
--- a/landing-pages/site/assets/scss/_header.scss
+++ b/landing-pages/site/assets/scss/_header.scss
@@ -55,6 +55,7 @@
&--subheader {
@extend .subtitle__large--brownish-grey;
+ font-weight: normal !important;
text-align: center;
margin-bottom: 20px;
}
@@ -70,12 +71,28 @@
}
}
-@media (max-width: $mobile) {
+@media (max-width: $tablet) {
#header {
margin: 77px -20px 0;
min-height: calc(100vh - 77px);
}
+ #header-canvas {
+ .text-area {
+ max-width: 450px;
+
+ &--header {
+ margin-bottom: 14px;
+ }
+
+ &--subheader {
+ margin-bottom: 26px;
+ }
+ }
+ }
+}
+
+@media (max-width: $mobile) {
#header-canvas {
.text-area {
max-width: 290px;
@@ -83,15 +100,11 @@
&--header {
font-size: 48px !important;
line-height: 1.25 !important;
- margin-bottom: 14px;
}
&--subheader {
font-size: 16px !important;
- font-weight: normal !important;
line-height: 1.63 !important;
- text-align: center;
- margin-bottom: 26px;
}
}
}
diff --git a/landing-pages/site/assets/scss/_install-page.scss
b/landing-pages/site/assets/scss/_install-page.scss
index 8847419..d5a0ff1 100644
--- a/landing-pages/site/assets/scss/_install-page.scss
+++ b/landing-pages/site/assets/scss/_install-page.scss
@@ -71,13 +71,27 @@
}
}
-@media (max-width: $mobile) {
+@media (max-width: $tablet) {
.install {
+ &--headers-wrapper {
+ max-width: 580px;
+ }
+ &--description {
+ margin-top: 30px;
+ margin-bottom: 30px;
+ }
&__accordions {
&--wrapper {
- max-width: 306px;
+ max-width: 580px;
+ margin-top: 40px;
margin-bottom: 0;
}
+ }
+ }
+}
+@media (max-width: $mobile) {
+ .install {
+ &__accordions {
&-content {
&--methods-wrapper {
flex-direction: column;
diff --git a/landing-pages/site/assets/scss/_list-boxes.scss
b/landing-pages/site/assets/scss/_list-boxes.scss
index 20bebd1..ce598ba 100644
--- a/landing-pages/site/assets/scss/_list-boxes.scss
+++ b/landing-pages/site/assets/scss/_list-boxes.scss
@@ -26,8 +26,12 @@ $card-margin: 20px;
flex-wrap: wrap;
margin: calc(-1 * #{$card-margin});
+ @media (max-width: $tablet) {
+ margin: auto;
+ max-width: 580px;
+ }
+
@media (max-width: $mobile) {
- margin: 0;
flex-direction: column;
align-items: center;
}
@@ -36,18 +40,19 @@ $card-margin: 20px;
.list-item {
width: 25%;
- &--wide {
- width: 50%;
- @media (max-width: $tablet) {
- width: 100%;
- }
- }
@media (max-width: $tablet) {
width: 50%;
}
@media (max-width: $mobile) {
width: 100%;
}
+
+ &--wide {
+ width: 50%;
+ @media (max-width: $tablet) {
+ width: 100%;
+ }
+ }
}
.card {
@@ -56,7 +61,7 @@ $card-margin: 20px;
margin: $card-margin;
padding: 30px 10px;
- @media (max-width: $mobile) {
+ @media (max-width: $tablet) {
margin: $card-margin / 2;
}
}
diff --git a/landing-pages/site/assets/scss/_media.scss
b/landing-pages/site/assets/scss/_media.scss
index 6388ffb..0f54c3f 100644
--- a/landing-pages/site/assets/scss/_media.scss
+++ b/landing-pages/site/assets/scss/_media.scss
@@ -18,4 +18,4 @@
*/
$mobile: 640px;
-$tablet: 1024px;
+$tablet: 1280px;
diff --git a/landing-pages/site/assets/scss/_meetups.scss
b/landing-pages/site/assets/scss/_meetups.scss
index b27f363..18471cd 100644
--- a/landing-pages/site/assets/scss/_meetups.scss
+++ b/landing-pages/site/assets/scss/_meetups.scss
@@ -40,8 +40,12 @@
margin-bottom: 40px;
width: 100%;
- @media (max-width: $mobile) {
+ @media (max-width: $tablet) {
margin-top: 30px;
+ margin-bottom: 30px;
+ }
+
+ @media (max-width: $mobile) {
margin-bottom: 10px;
}
}
diff --git a/landing-pages/site/assets/scss/_navbar.scss
b/landing-pages/site/assets/scss/_navbar.scss
index a928143..840043f 100644
--- a/landing-pages/site/assets/scss/_navbar.scss
+++ b/landing-pages/site/assets/scss/_navbar.scss
@@ -76,7 +76,7 @@
}
}
-@media (max-width: $mobile) {
+@media (max-width: $tablet) {
.navbar {
padding: 20px;
diff --git a/landing-pages/site/assets/scss/_roadmap.scss
b/landing-pages/site/assets/scss/_roadmap.scss
index b89090d..415969e 100644
--- a/landing-pages/site/assets/scss/_roadmap.scss
+++ b/landing-pages/site/assets/scss/_roadmap.scss
@@ -67,6 +67,7 @@
li > a {
@extend .bodytext__medium--brownish-grey;
+ width: fit-content;
&.active {
color: map-get($colors, cerulean-blue);
@@ -165,7 +166,7 @@
top: 6px;
left: -12px;
font-size: 8px;
- color: #707070;
+ color: #51504f;
}
& > ul {
@@ -244,7 +245,7 @@
}
}
- @media (max-width: $mobile) {
+ @media (max-width: $tablet) {
main {
padding-left: 0;
}
diff --git a/landing-pages/site/assets/scss/_search.scss
b/landing-pages/site/assets/scss/_search.scss
index 9b439cd..a1a2050 100644
--- a/landing-pages/site/assets/scss/_search.scss
+++ b/landing-pages/site/assets/scss/_search.scss
@@ -48,10 +48,10 @@
}
}
-@media (max-width: $mobile) {
+@media (max-width: $tablet) {
.search-form {
width: 270px;
padding: 3px 20px;
- margin-top: 20px;
+ margin-top: 30px;
}
}
diff --git a/landing-pages/site/assets/scss/_text-with-icon.scss
b/landing-pages/site/assets/scss/_text-with-icon.scss
index ff31876..4674e35 100644
--- a/landing-pages/site/assets/scss/_text-with-icon.scss
+++ b/landing-pages/site/assets/scss/_text-with-icon.scss
@@ -44,26 +44,34 @@
@extend .bodytext__medium--brownish-grey;
text-align: center;
}
+}
- @media (max-width: $mobile) {
+@media (max-width: $tablet) {
+ .text-with-icon-item {
margin-top: 30px;
+ max-width: 276px;
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;
- }
+ &--header {
+ font-family: $primary-font;
+ font-size: 24px;
+ line-height: 1.5;
+ margin-top: 16px;
+ }
+
+ &--text {
+ font-size: 14px;
+ line-height: 1.57;
}
}
}
+
+@media (max-width: $mobile) {
+ .text-with-icon-list {
+ justify-content: center;
+ }
+}
diff --git a/landing-pages/site/assets/scss/_video.scss
b/landing-pages/site/assets/scss/_video.scss
index 06b4b54..b79369d 100644
--- a/landing-pages/site/assets/scss/_video.scss
+++ b/landing-pages/site/assets/scss/_video.scss
@@ -26,7 +26,9 @@
@media (max-width: $tablet) {
flex-direction: column;
- padding: 20px
+ max-width: 560px;
+ margin: 0 auto;
+ padding: 20px;
}
}
diff --git a/landing-pages/site/layouts/blog/single.html
b/landing-pages/site/layouts/blog/single.html
index 66b51d5..6210fb6 100644
--- a/landing-pages/site/layouts/blog/single.html
+++ b/landing-pages/site/layouts/blog/single.html
@@ -20,12 +20,12 @@
{{ define "main" }}
<div class="blogpost-content">
{{ .Render "content" }}
+ <div class="no-width-restriction no-desktop">
+ {{ partial "pager.html" . }}
+ </div>
</div>
<div class="no-width-restriction desktop-only">
{{ partial "blog-pager" . }}
</div>
- <div class="mobile-only">
- {{ partial "pager.html" . }}
- </div>
{{ end }}
diff --git a/landing-pages/site/layouts/install/list.html
b/landing-pages/site/layouts/install/list.html
index b74ddee..3f813b3 100644
--- a/landing-pages/site/layouts/install/list.html
+++ b/landing-pages/site/layouts/install/list.html
@@ -20,7 +20,7 @@
{{ define "main" }}
<div class="install--headers-wrapper">
<h2 class="page-header">Install</h2>
- <h5 class="page-subtitle" style="margin-bottom: 45px">
+ <h5 class="page-subtitle">
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>
diff --git a/landing-pages/site/layouts/partials/navbar.html
b/landing-pages/site/layouts/partials/navbar.html
index a90d9f6..f1494c7 100644
--- a/landing-pages/site/layouts/partials/navbar.html
+++ b/landing-pages/site/layouts/partials/navbar.html
@@ -27,7 +27,7 @@
<div class="desktop-only navbar__menu-container">
{{ template "menu-content" . }}
</div>
- <div class="mobile-only navbar__drawer-container">
+ <div class="no-desktop navbar__drawer-container">
<button class="navbar__toggle-button" id="navbar-toggle-button">
{{ with resources.Get "icons/hamburger-icon.svg" }}
<div id="hamburger-icon" class="navbar__toggle-button--icon
visible">
diff --git a/landing-pages/site/layouts/roadmap/baseof.html
b/landing-pages/site/layouts/roadmap/baseof.html
index 3cb2dda..0e8be68 100644
--- a/landing-pages/site/layouts/roadmap/baseof.html
+++ b/landing-pages/site/layouts/roadmap/baseof.html
@@ -60,7 +60,7 @@
<div class="td-sidebar desktop-only d-print-none">
{{ partial "sidebar.html" . }}
</div>
- <main class="col-12 col-md-9 col-xl-8" role="main">
+ <main class="col-12 col-xl-8" role="main">
{{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial
"breadcrumb.html" . }}{{ end }}
{{ block "main" . }}{{ end }}
</main>
