[beam] branch master updated: [Website] update case-studies layout (#22342)

[pa...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

pabloem pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/beam.git


The following commit(s) were added to refs/heads/master by this push:
     new 62d3b343615 [Website] update case-studies layout (#22342)
62d3b343615 is described below

commit 62d3b34361515bf41691095632cec764eca9d063
Author: bullet03 <bu...@akvelon.com>
AuthorDate: Mon Aug 15 22:56:24 2022 +0600

    [Website] update case-studies layout (#22342)
---
 website/www/site/assets/scss/_case_study.scss     | 38 ++++++++++++++++++++---
 website/www/site/assets/scss/_global.sass         |  4 +++
 website/www/site/layouts/case-studies/baseof.html |  2 +-
 website/www/site/layouts/case-studies/list.html   |  4 +--
 4 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/website/www/site/assets/scss/_case_study.scss b/website/www/site/assets/scss/_case_study.scss
index 69d40f1c08e..3b3a8cc7b07 100644
--- a/website/www/site/assets/scss/_case_study.scss
+++ b/website/www/site/assets/scss/_case_study.scss
@@ -26,6 +26,7 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+  gap: 2%;
   margin-bottom: 16px;
 
   @media screen and (max-width: $mobile) {
@@ -42,6 +43,12 @@
   }
 }
 
+.case-study-list--additional {
+  @media (min-width: $mobile) and (max-width: $tablet) {
+    justify-content: center;
+  }
+}
+
 .case-study-used-by-card {
   padding: 16px;
   display: flex;
@@ -50,7 +57,6 @@
   background-color: #FCFCFC;
   width: 250px;
   height: 200px;
-  margin-right: 32px;
   margin-bottom: 32px;
 
   .case-study-used-by-card-img {
@@ -80,33 +86,56 @@
   }
 }
 
+.case-study-used-by-card--responsive {
+  @media (min-width: $mobile){
+    width: 23%;
+    margin-right: 0;
+  }
+}
+
 .case-study-card {
   padding: 16px;
   display: flex;
   flex-direction: column;
   background-color: #FCFCFC;
-  width: 350px;
-  margin-right: 32px;
+  width: 32%;
   margin-bottom: 32px;
+  @media (max-width: $tablet) {
+    width: 350px;
+  }
 
   .case-study-card-description {
     height: 185px;
     overflow-y: scroll;
+    @media (min-width: $mobile) and (max-width: $tablet) {
+      font-size: 14px;
+    }
   }
 
   .case-study-card-img img {
     height: 50px;
+    @media (min-width: $mobile) and (max-width: $tablet) {
+      object-fit: contain;
+    }
   }
 
   .case-study-card-title {
-    min-height: 45px;
+    min-height: 70px;
     margin: 12px 0;
     font-size: 18px;
+    @media (min-width: $mobile) and (max-width: $tablet) {
+      min-height: 90px;
+      font-size: 16px;
+      margin: 10px 0;
+    }
   }
 
   .case-study-quote-block {
     margin-top: 8px;
     height: 55px;
+    @media (min-width: $mobile) and (max-width: $tablet) {
+      margin-bottom: 8px;
+    }
   }
 
   .case-study-card-learn-more {
@@ -174,6 +203,7 @@ h2.case-study-h2 {
     .case-study-quote-author-img img {
       height: 40px;
       width: 40px;
+      max-width: none;
       border-radius: 50%;
       margin-right: 10px;
     }
diff --git a/website/www/site/assets/scss/_global.sass b/website/www/site/assets/scss/_global.sass
index 8a3972766c8..c0aa4ce23c6 100644
--- a/website/www/site/assets/scss/_global.sass
+++ b/website/www/site/assets/scss/_global.sass
@@ -71,6 +71,10 @@ body
     margin-left: 0
     width: 100%
 
+.body__section-no-nav--wide
+  margin-left: auto
+  margin-right: auto
+
 .body__section-nav
   margin-left: 256px
   width: calc(100% - 492px)
diff --git a/website/www/site/layouts/case-studies/baseof.html b/website/www/site/layouts/case-studies/baseof.html
index 87b3cccb1de..f44233d10c5 100644
--- a/website/www/site/layouts/case-studies/baseof.html
+++ b/website/www/site/layouts/case-studies/baseof.html
@@ -21,7 +21,7 @@
     <nav class="page-nav clearfix" data-offset-top="90" data-offset-bottom="500">
       {{ .TableOfContents }}
     </nav>
-    <div class="{{ if .Params.hasNav }}body__contained body__section-no-nav{{ end }} case-study-page">
+    <div class="{{ if .Params.hasNav }}body__contained body__section-no-nav--wide{{ end }} case-study-page">
       {{ block "main" . }}{{ end }}
     </div>
   </div>
diff --git a/website/www/site/layouts/case-studies/list.html b/website/www/site/layouts/case-studies/list.html
index ee1f19bb04d..c1957847a3c 100644
--- a/website/www/site/layouts/case-studies/list.html
+++ b/website/www/site/layouts/case-studies/list.html
@@ -52,9 +52,9 @@ limitations under the License. See accompanying LICENSE file.
         </a>
     </div>
     <h2 class="case-study-h2">Also used by</h2>
-    <div class="case-study-list">
+    <div class="case-study-list case-study-list--additional">
         {{ range where $pages "Params.category" "ne" "study" }}
-        <div class="case-study-used-by-card">
+        <div class="case-study-used-by-card case-study-used-by-card--responsive">
             <div class="case-study-used-by-card-img">
                 <img src="{{.Params.icon}}"></i>
             </div>