From 9d73a8b6ed4ce3992b95d89b61ae260ad444cf8c Mon Sep 17 00:00:00 2001
From: liuboaibc <kukudehero@gmail.com>
Date: Fri, 12 Jun 2020 11:14:07 +0800
Subject: [PATCH] add case/partner css

---
 assets/scss/case-detail.scss  | 78 ++++++++++++++++++++---------------
 assets/scss/partner.scss      |  8 ++++
 content/en/partner/request.md |  2 +-
 layouts/case/single.html      | 43 ++++++++++---------
 layouts/partner/request.html  | 13 +++---
 5 files changed, 81 insertions(+), 63 deletions(-)

diff --git a/assets/scss/case-detail.scss b/assets/scss/case-detail.scss
index 05ade9d52..7c09a9545 100644
--- a/assets/scss/case-detail.scss
+++ b/assets/scss/case-detail.scss
@@ -1,36 +1,21 @@
+@import 'variables';
 .section-1 {
-  height: 300px;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
+  padding-top: 129px;
+  padding-bottom: 60px;
 
   div {
     position: relative;
-    width: 1160px;
-    margin: -162px auto 0;
-
-    h1 {
-      height: 40px;
-      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-      font-size: 40px;
-      font-weight: bold;
-      line-height: 1;
-      letter-spacing: -0.11px;
-      color: #ffffff;
-    }
 
     p {
       width: 733px;
       margin-top: 12px;
       opacity: 0.8;
       text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-      font-size: 16px;
-      line-height: 1.5;
-      letter-spacing: -0.04px;
       color: #ffffff;
+
+      @media only screen and (max-width: $mobile-max-width) {
+        width: 100%;
+      }
     }
   }
 }
@@ -42,17 +27,24 @@
     top: 320px;
     left: 50%;
     transform: translateX(400px);
+
+    @media only screen and (max-width: $mobile-max-width) {
+      display: none;
+    }
   }
   & > div {
     position: relative;
-    width: 1160px;
-    margin: 0 auto;
     padding-top: 56px;
     z-index: 2;
 
     .ul-left {
       width: 668px;
 
+      @media only screen and (max-width: $mobile-max-width) {
+        width: 100%;
+        margin-top: 40px;
+      }
+
       & > li + li {
         margin-top: 30px;
       }
@@ -84,23 +76,31 @@
           font-size: 0;
           border-radius: 8px;
           overflow: hidden;
+          @media only screen and (max-width: $mobile-max-width) {
+            width: 100%;
+          }
           li {
             position: relative;
             display: inline-block;
             box-sizing: border-box;
             width: 220px;
-            height: 126px;
+            height: 100%;
+            padding: 35px 30px;
+
+            @media only screen and (max-width: $mobile-max-width) {
+              display: block;
+              width: 100%;
+              margin: 10px auto;
+              padding: 20px;
+              border-radius: 8px;
+            }
 
             p {
-              position: absolute;
-              width: 160px;
-              top: 50%;
-              left: 50%;
-              transform: translate(-50%, -50%);
               font-size: 16px;
               line-height: 1.75;
               text-align: center;
               color: #ffffff;
+
             }
           }
           li:nth-child(1) {
@@ -152,17 +152,29 @@
       box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
       background-color: #ffffff;
 
+      @media only screen and (max-width: $mobile-max-width) {
+        width: 100%;
+        max-width: 400px;
+        position: relative;
+        right: 0;
+        top: 0px;
+        margin: 0 auto;
+      }
+
       img {
         display: block;
-        width: 293px;
-        margin: 0 auto;
-        height: 120px;
+        width: 100%;
         object-fit: contain;
+        border-radius: 10px;
       }
 
       .ul-right {
         padding: 4px 60px 26px;
 
+        @media only screen and (max-width: $mobile-max-width) {
+          padding: 4px 40px 26px;
+        }
+
         li + li {
           margin-top: 16px;
         }
diff --git a/assets/scss/partner.scss b/assets/scss/partner.scss
index 4b4c4d707..5646d89a4 100644
--- a/assets/scss/partner.scss
+++ b/assets/scss/partner.scss
@@ -170,6 +170,14 @@
   }
 }
 
+.section-iframe {
+  iframe {
+    @media only screen and (max-width: $mobile-max-width) {
+      width: 100%;
+    }
+  }
+}
+
 .section-3 {
   padding-top: 54px;
   background-image: url('/images/partner/oval-4.svg');
diff --git a/content/en/partner/request.md b/content/en/partner/request.md
index 838737a8c..d04dc66aa 100644
--- a/content/en/partner/request.md
+++ b/content/en/partner/request.md
@@ -8,7 +8,7 @@ css: "scss/partner.scss"
 section1:
   title: 'Join the Revolution,Partner with KubeSphere'
   content: 'We look forward to your joining KubeSphere partner to improve the ecosystem of both, and grow your business. KubeSphere provide  resources and rights for partners to help them increase their expertise, deliver open source technology, and resell product.'
-  topImage: 'images/partner/partner-top.jpg'
+  topImage: '/images/partner/partner-top.jpg'
 
 section2:
   title: 'Together, build partnership for success all over the world'
diff --git a/layouts/case/single.html b/layouts/case/single.html
index e5f1dc23f..7c51bb788 100644
--- a/layouts/case/single.html
+++ b/layouts/case/single.html
@@ -1,18 +1,30 @@
 {{ define "main" }}
 
-<section class='section-1'>
-  {{ with .Params.section1}}
-  <img src="/images/case/case-detail-bg.png" alt="">
-  <div>
-    <h1>{{ .title }}</h1>
-    <p>{{ .content }}</p>
-  </div>
-  {{ end }}
+{{ with .Params.section1 }}
+<section class="section-1 bg-cover" style='background-image: url("/images/case/case-detail-bg.png");'>
+    <div class="common-layout">
+        <h1 class="title-h1">{{ .title }}</h1>
+        <p class="common-p">{{ .content }}</p>
+    </div>
 </section>
+{{ end }}
 
 <section class='section-2'>
   {{ with .Params.section2 }}
-  <div>
+  <div class="common-layout">
+    <div>
+      {{ with .rightPart}}
+      <img src="{{ .icon }}" alt="">
+      <ul class='ul-right'>
+        {{ range .list }}
+        <li>
+          <p class='p1'>{{ .title }}</p>
+          <p class='p2'>{{ .content }}</p>
+        </li>
+        {{ end }}
+      </ul>
+      {{ end }}
+    </div>
     <ul class='ul-left'>
       {{ range .listLeft}}
       <li>
@@ -42,19 +54,6 @@
       </li>
       {{ end }}
     </ul>
-    <div>
-      {{ with .rightPart}}
-      <img src="{{ .icon }}" alt="">
-      <ul class='ul-right'>
-        {{ range .list }}
-        <li>
-          <p class='p1'>{{ .title }}</p>
-          <p class='p2'>{{ .content }}</p>
-        </li>
-        {{ end }}
-      </ul>
-      {{ end }}
-    </div>
   </div>
   <img src="/images/common/hexagon.svg" alt="">
   {{ end }}
diff --git a/layouts/partner/request.html b/layouts/partner/request.html
index 046501751..1e6e433ca 100644
--- a/layouts/partner/request.html
+++ b/layouts/partner/request.html
@@ -1,14 +1,13 @@
 {{ define "main" }}
 
-<section class="section-1">
-    {{ with .Params.section1 }}
-    <img class="top-cover-img" src="{{ .topImage | absURL }}" alt="">
-    <div class="title-div">
+{{ with .Params.section1 }}
+<section class="section-1 bg-cover" style='background-image: url("{{ .topImage }}");'>
+    <div class="title-div common-layout">
         <h1 class="title-center-h1">{{ .title }}</h1>
         <p class="common-p">{{ .content }}</p>
     </div>
-    {{ end }}
 </section>
+{{ end }}
 
 <section class="section-2">
     {{ with .Params.section2 }}
@@ -45,11 +44,11 @@
     {{ end }}
 </section>
 
-<section>
+<section class='section-iframe'>
   {{ with .Params.section3 }}
   <div class="common-layout">
     <h2 style="margin: 40px 0;" class="title-black-h2">{{ .title }}</h2>
-    <iframe src="{{ .googleFormUrl }}" width="640" height="1491" frameborder="0" marginheight="0" marginwidth="0">正在加载…</iframe>
+    <iframe src="{{ .googleFormUrl }}" width="640" height="1000" frameborder="0" marginheight="0" marginwidth="0">正在加载…</iframe>
   </div>
   {{ end }}
 </section>