fix: blog, landing style (apache#1355)

lijing-21 · Oct 8, 2022 · 061bd9e · 061bd9e
1 parent 3279c4c
commit 061bd9e
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 27 deletions.
diff --git a/blog/src/theme/BlogPosts/style.module.scss b/blog/src/theme/BlogPosts/style.module.scss
@@ -68,12 +68,12 @@
 
   width: fit-content;
   display: grid;
-  grid-template-columns: repeat(3, $width);
+  grid-template-columns: repeat(3, min($width, 30%));
   margin: 5rem auto 0;
   align-items: start;
   font-family: apple-system, system-ui, sans-serif;
-  column-gap: 1.25rem;
   row-gap: 3rem;
+  justify-content: space-between;
 
   article {
     border-radius: 1rem;
@@ -217,7 +217,7 @@
   }
 }
 
-@include respond-above(sm) {
+@include respond-above(lg) {
   .firstPage {
     grid-template-columns: repeat(2, 645px);
 
@@ -228,6 +228,21 @@
           max-width: unset;
         }
       }
+    }
+  }
+}
+
+@include respond-above(sm) {
+  .firstPage {
+    grid-template-columns: repeat(2, min(645px, 50%));
+
+    > article {
+      & > a {
+        img {
+          // width: min(605px, 50%) !important;
+          max-width: unset;
+        }
+      }
 
       .content {
         padding: 0 1.875rem 1.875rem;

diff --git a/package.json b/package.json
@@ -38,6 +38,10 @@
     "serve:doc": "yarn workspace doc docusaurus serve",
     "serve:blog:zh": "yarn workspace blog docusaurus serve zh",
     "serve:blog:en": "yarn workspace blog docusaurus serve en",
+    "build:website:preview:serve": "yarn build:website:preview && yarn serve:website",
+    "build:doc:preview:serve": "yarn build:doc:previw && yarn serve:doc",
+    "build:blog:zh:preview:serve": "yarn build:blog:zh:preview && yarn serve:blog:zh",
+    "build:blog:en:preview:serve": "yarn build:blog:en:preview && yarn serve:blog:en",
     "prepare": "husky install",
     "prepare-data": "yarn sync-docs && yarn generate-repos-info && yarn generate-picked-posts"
   },

diff --git a/website/src/components/Video.tsx b/website/src/components/Video.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import videojs from 'video.js';
 import type { VideoJsPlayerOptions, VideoJsPlayer } from 'video.js';
 import 'video.js/dist/video-js.min.css';
+import '../css/landing-sections/video.css';
 
 export interface VideoProps {
     options: VideoJsPlayerOptions,

diff --git a/website/src/components/sections/Benefits.tsx b/website/src/components/sections/Benefits.tsx
@@ -43,7 +43,7 @@ const Benefits: FC = () => {
             ease: 'power3.inOut',
             yoyoEase: 'power3.out',
           },
-        })
+        }),
       );
     }
 
@@ -73,7 +73,7 @@ const Benefits: FC = () => {
           ease: 'power2.in',
           yoyoEase: 'power2.out',
           repeat: -1,
-        }
+        },
       )
       .fromTo(
         '.performance_svg__lightning',
@@ -85,7 +85,7 @@ const Benefits: FC = () => {
           duration: 1,
           repeat: -1,
         },
-        '-=1'
+        '-=1',
       );
 
     // Security anim
@@ -99,7 +99,7 @@ const Benefits: FC = () => {
         duration: 0.5,
         repeat: -1,
         repeatDelay: 0.1,
-      }
+      },
     );
     for (let i = 1; i < 4; i += 1) {
       tweenTls[1].fromTo(
@@ -115,7 +115,7 @@ const Benefits: FC = () => {
           repeat: -1,
           ease: 'linear',
           yoyoEase: 'linear',
-        }
+        },
       );
     }
 
@@ -131,7 +131,7 @@ const Benefits: FC = () => {
           duration: 0.3,
           repeat: -1,
           repeatDelay: 0.1,
-        }
+        },
       );
       tweenTls[2].fromTo(
         links[i],
@@ -143,7 +143,7 @@ const Benefits: FC = () => {
           duration: 0.3,
           repeat: -1,
           repeatDelay: 0.1,
-        }
+        },
       );
     }
 
@@ -161,7 +161,7 @@ const Benefits: FC = () => {
           x: 0,
           ease: 'sin.inOut',
           duration: 1.5,
-        }
+        },
       )
       .fromTo(
         '.dynamic_svg__arrow',
@@ -172,7 +172,7 @@ const Benefits: FC = () => {
           opacity: 1,
           ease: 'power3.out',
           duration: 0.5,
-        }
+        },
       )
       .fromTo(
         '.dynamic_svg__lightning',
@@ -185,7 +185,7 @@ const Benefits: FC = () => {
           y: 0,
           duration: 1,
           ease: 'power2.inOut',
-        }
+        },
       );
 
     // Multiplatform anim
@@ -198,7 +198,7 @@ const Benefits: FC = () => {
         {
           fill: '#ffdc21',
           duration: 0.5,
-        }
+        },
       );
     }
 
@@ -223,7 +223,7 @@ const Benefits: FC = () => {
         onComplete: () => {
           rot -= 360;
         },
-      }
+      },
     );
     const tweenFloat = gsap.fromTo(
       '.multiplatform_svg__lightning',
@@ -238,7 +238,7 @@ const Benefits: FC = () => {
         yoyo: true,
         paused: true,
         yoyoEase: 'linear',
-      }
+      },
     );
 
     function onIntersection(entries) {
@@ -277,8 +277,8 @@ const Benefits: FC = () => {
           {
             root: null,
             threshold: 0.2,
-          }
-        )
+          },
+        ),
       );
     }
 
@@ -327,7 +327,7 @@ const Benefits: FC = () => {
           },
           {
             opacity: 0,
-          }
+          },
         )
           .fromTo(
             security.current,
@@ -336,7 +336,7 @@ const Benefits: FC = () => {
             },
             {
               opacity: 1,
-            }
+            },
           )
           .to(security.current, {
             opacity: 0,
@@ -348,7 +348,7 @@ const Benefits: FC = () => {
             },
             {
               opacity: 1,
-            }
+            },
           )
           .to(scale.current, {
             opacity: 0,
@@ -360,7 +360,7 @@ const Benefits: FC = () => {
             },
             {
               opacity: 1,
-            }
+            },
           )
           .to(dynamic.current, {
             opacity: 0,
@@ -372,7 +372,7 @@ const Benefits: FC = () => {
             },
             {
               opacity: 1,
-            }
+            },
           );
       },
       '(min-width: 1101px)': () => {
@@ -447,7 +447,8 @@ const Benefits: FC = () => {
                 Apache APISIX Gateway provides multiple security plugins for identity authentication
                 and API verification, including CORS, JWT, Key Auth, OpenID Connect (OIDC),
                 Keycloak, etc. We put stability and security first. For more information, check
-              </Translate>{' '}
+              </Translate>
+              {' '}
               <Link style={{ color: '#e8433e' }} to={useBaseUrl('docs/apisix/plugins/cors/')}>
                 <Translate id="benefits.component.security.link.here">here</Translate>
               </Link>

diff --git a/website/src/components/sections/OpensourcePromo.tsx b/website/src/components/sections/OpensourcePromo.tsx
@@ -86,16 +86,19 @@ const OpensourcePromo: FC = () => (
             <Translate id="openSourcePromo.component.subtitle.fragment1">
               What are microservices? What is an API Gateway? Want to learn Apache APISIX usage, but
               don&apos;t know where to start? Check out our
-            </Translate>{' '}
+            </Translate>
+            {' '}
             <Link style={{ color: '#e8433e' }} to={useBaseUrl('docs')}>
               <Translate id="openSourcePromo.component.link.docs">Docs.</Translate>
             </Link>
           </p>
           <p>
             <Translate id="openSourcePromo.component.subtitle.fragment2">
               Like visual information, check out our
-            </Translate>{' '}
-            <VideoChannel />{' '}
+            </Translate>
+            {' '}
+            <VideoChannel />
+            {' '}
             <Translate id="openSourcePromo.component.subtitle.fragment3">
               for detailed tutorials. Subscribe for more.
             </Translate>

diff --git a/website/src/css/landing-sections/video.css b/website/src/css/landing-sections/video.css
@@ -0,0 +1,7 @@
+.video-js.vjs-playing .vjs-big-play-button {
+  display: none !important;
+}
+
+.video-js.vjs-paused .vjs-big-play-button {
+  display: inline-block !important;
+}