This is an automated email from the ASF dual-hosted git repository.
juzhiyuan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git
The following commit(s) were added to refs/heads/master by this push:
new 061bd9e3818 fix: blog, landing style (#1355)
061bd9e3818 is described below
commit 061bd9e381827fb703ef9e919509cfd8f29ecc4e
Author: Young <[email protected]>
AuthorDate: Sat Oct 8 13:22:52 2022 +0800
fix: blog, landing style (#1355)
---
blog/src/theme/BlogPosts/style.module.scss | 21 +++++++++--
package.json | 4 ++
website/src/components/Video.tsx | 1 +
website/src/components/sections/Benefits.tsx | 43 +++++++++++-----------
.../src/components/sections/OpensourcePromo.tsx | 9 +++--
website/src/css/landing-sections/video.css | 7 ++++
6 files changed, 58 insertions(+), 27 deletions(-)
diff --git a/blog/src/theme/BlogPosts/style.module.scss
b/blog/src/theme/BlogPosts/style.module.scss
index c6355792840..913110b4ad7 100644
--- 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
index 3372fee7ba2..28ea710a5cc 100644
--- 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
index 6fc88c22a43..9dd6eb5c4e8 100644
--- 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
index e7bc3277ed1..67a142396ba 100644
--- 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
index 85cae9e8def..f0431025204 100644
--- a/website/src/components/sections/OpensourcePromo.tsx
+++ b/website/src/components/sections/OpensourcePromo.tsx
@@ -86,7 +86,8 @@ 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'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>
@@ -94,8 +95,10 @@ const OpensourcePromo: FC = () => (
<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
new file mode 100644
index 00000000000..9f471c8782b
--- /dev/null
+++ 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;
+}
