docs(i18n): Edit banner style (#219)

The part where the banner looks different on the English page and the Korean page is unified to match the English page.
toss · Feb 27, 2023 · 1fad3bf · 1fad3bf
1 parent 6b9811a
commit 1fad3bf
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 9 deletions.
diff --git a/docs/i18n/ko/docusaurus-plugin-content-pages/index.md b/docs/i18n/ko/docusaurus-plugin-content-pages/index.md
@@ -3,6 +3,14 @@ title: 소개
 hide_table_of_contents: true
 ---
 
+<div class="jumbotron">
+  <div class="jumbotron-inner-wrapper">
+    <div class="jumbotron-shadow left"></div>
+    <video class="key-video" src="https://static.toss.im/assets/slash-libraries/keyvis.mp4" autoplay="true" muted="true" playsInline="true" loop="true" />
+    <div class="jumbotron-shadow right"></div>
+  </div>
+</div>
+
 # Slash 라이브러리
 
 <head>
@@ -25,10 +33,6 @@ hide_table_of_contents: true
   <p><code>⌘ + K</code>를 입력해서 라이브러리 문서를 탐색해보세요.</p>
 
   </div>
-
-  <div style={{ gridArea: 'image', textAlign: 'center' }}>
-  <video class="key-video" src="https://static.toss.im/assets/slash-libraries/keyvis.mp4" autoplay="true" muted="true" playsInline="true" loop="true" />
-  </div>
 </div>
 
 <style
@@ -38,15 +42,49 @@ hide_table_of_contents: true
   display: grid;
 }
 
+.jumbotron {
+  width: 100%;
+  height: 200px;
+  border-radius: 16px;
+  background: black;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 36px;
+  overflow: hidden;
+}
+
+.jumbotron-shadow {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 25px;
+}
+
+.jumbotron-shadow.left {
+  left: 0;
+  background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
+}
+
+.jumbotron-shadow.right {
+  right: 0;
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
+}
+
+.jumbotron-inner-wrapper {
+  position: relative;
+  height: 100%;
+}
+
 @media (min-width: 600px) {
   .mainpage_hero {
     grid-template-areas: "text image";
     grid-template-columns: 1fr 300px;
   }
 
   .key-video {
-    width: 260px;
-    height: 146px;
+    width: auto;
+    height: 100%;
   }
 }
 
@@ -57,8 +95,8 @@ hide_table_of_contents: true
   }
 
   .key-video {
-    width: 80%;
-    margin: 24px auto;
+    width: auto;
+    height: 100%;
   }
 }
 `,

diff --git a/docs/pages/index.md b/docs/pages/index.md
@@ -34,6 +34,7 @@ hide_table_of_contents: true
   <p>
     Use <code>⌘ + K</code> to search through our libraries documentation.
   </p>
+
   </div>
 </div>
 
@@ -76,7 +77,7 @@ hide_table_of_contents: true
 .jumbotron-inner-wrapper {
   position: relative;
   height: 100%;
-  }
+}
 
 @media (min-width: 600px) {
   .mainpage_hero {