This is an automated email from the ASF dual-hosted git repository.
bzp2010 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 073cf3e150e refactor: OpensourcePromo (#1182)
073cf3e150e is described below
commit 073cf3e150e21a457179e5e1c5bd1dcb810af4ab
Author: Young <[email protected]>
AuthorDate: Mon Jul 4 13:58:53 2022 +0800
refactor: OpensourcePromo (#1182)
---
.../src/components/sections/OpensourcePromo.tsx | 70 +++++++-------
website/src/css/os-promo.module.scss | 102 +++++++++++++++++++++
2 files changed, 136 insertions(+), 36 deletions(-)
diff --git a/website/src/components/sections/OpensourcePromo.tsx
b/website/src/components/sections/OpensourcePromo.tsx
index c6f63552d8d..8c3a120d762 100644
--- a/website/src/components/sections/OpensourcePromo.tsx
+++ b/website/src/components/sections/OpensourcePromo.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/media-has-caption */
import type { FC } from 'react';
import React from 'react';
import Link from '@docusaurus/Link';
@@ -9,20 +8,21 @@ import Translate from '@docusaurus/Translate';
import BrowserOnly from '@docusaurus/BrowserOnly';
import GitHub from '../../assets/icons/github-logo.svg';
import type { VideoProps } from '../Video';
+import style from '../../css/os-promo.module.scss';
const VideoChannel: FC = () => {
const { i18n: { currentLocale } } = useDocusaurusContext();
if (currentLocale.startsWith('zh')) {
return (
- <a style={{ color: '#e8433e' }}
href="https://space.bilibili.com/551921247";>
+ <a href="https://space.bilibili.com/551921247";>
哔哩哔哩官方账号
</a>
);
}
return (
- <a style={{ color: '#e8433e' }}
href="https://www.youtube.com/channel/UCgPD18cMhOg5rmPVnQhAC8g";>
+ <a href="https://www.youtube.com/channel/UCgPD18cMhOg5rmPVnQhAC8g";>
<Translate id="openSourcePromo.component.link.Youtube">
YouTube channel
</Translate>
@@ -53,13 +53,39 @@ const LazyLoadVideo = () => (
);
const OpensourcePromo: FC = () => (
- <div className="ossPromotion">
- <div className="docs-promo">
- <div className="docs-promo-text">
- <h3 className="docs-promo-head">
+ <div className={style.osPromotion}>
+ <div className={style.ossPromo}>
+ <h3>
+ <Translate id="openSourcePromo.component.ossPromo.title">
+ Building API Gateway Together
+ </Translate>
+ </h3>
+ <div className={style.ossPromoSubtitle}>
+ <p>
+ <Translate id="openSourcePromo.component.ossPromo.subtitle1">
+ Apache APISIX is open source and ever-growing.
+ </Translate>
+ <br />
+ <Translate id="openSourcePromo.component.ossPromo.subtitle2">
+ Contributors are always welcome, reach out to us on GitHub.
+ </Translate>
+ </p>
+ </div>
+ <div className={style.ossCta}>
+ <GitHub style={{ width: '20px', margin: '0 10px 0 0' }} />
+ <a href="https://github.com/apache/apisix";>
+ <Translate id="openSourcePromo.component.link.Github">
+ Check us out
+ </Translate>
+ </a>
+ </div>
+ </div>
+ <div className={style.docsPromo}>
+ <div className={style.docsPromoHead}>
+ <h3>
<Translate id="openSourcePromo.component.title">Learn from
developers</Translate>
</h3>
- <div className="docs-promo-subtitle">
+ <div className={style.docsPromoSubtitle}>
<p>
<Translate id="openSourcePromo.component.subtitle.fragment1">
What are microservices? What is an API Gateway?
@@ -91,34 +117,6 @@ const OpensourcePromo: FC = () => (
</div>
</div>
- <div className="oss-promo">
- <div className="oss-promo-inwrapper">
- <h3 className="oss-promo-head">
- <Translate id="openSourcePromo.component.ossPromo.title">
- Building API Gateway Together
- </Translate>
- </h3>
- <div className="oss-promo-subtitle" style={{ color: 'rgb(199, 199,
199)' }}>
- <p>
- <Translate id="openSourcePromo.component.ossPromo.subtitle1">
- Apache APISIX is open source and ever-growing.
- </Translate>
- <br />
- <Translate id="openSourcePromo.component.ossPromo.subtitle2">
- Contributors are always welcome, reach out to us on GitHub.
- </Translate>
- </p>
- <div className="oss-promo-cta">
- <GitHub style={{ width: '20px', margin: '0 10px 0 0' }} />
- <a href="https://github.com/apache/apisix"; style={{
textDecoration: 'none' }}>
- <Translate id="openSourcePromo.component.link.Github">
- Check us out
- </Translate>
- </a>
- </div>
- </div>
- </div>
- </div>
</div>
);
diff --git a/website/src/css/os-promo.module.scss
b/website/src/css/os-promo.module.scss
new file mode 100644
index 00000000000..743aba7df80
--- /dev/null
+++ b/website/src/css/os-promo.module.scss
@@ -0,0 +1,102 @@
+@import "./util";
+
+.osPromotion {
+ display: flex;
+ margin: 0 10%;
+
+ a {
+ color: #e8433e;
+ }
+
+ & .ossPromo {
+ background: #121010;
+ color: #fff;
+ display: flex;
+ flex-direction: column;
+ padding: 80px 40px;
+ width: fit-content;
+ min-width: 400px;
+ border-radius: 1rem;
+
+ h3 {
+ font-size: 2.4rem;
+ }
+
+ & .ossPromoSubtitle {
+ color: hsl(0deg 0% 78%);
+ font-size: 1.13rem;
+ font-weight: 700;
+ letter-spacing: 0.2px;
+ font-family: MaisonNeue-Light, sans-serif;
+ }
+
+ & .ossCta {
+ background: #080808;
+ border-radius: 32px;
+ border-style: solid;
+ border-width: 1.75px;
+ display: flex;
+ font-size: 0.95rem;
+ padding: 5px 12px;
+ transition: background 0.5s;
+ width: fit-content;
+
+ &:hover {
+ background: hsl(0deg 0% 100%);
+ color: #080808;
+ cursor: pointer;
+ }
+
+ & > a {
+ color: currentcolor;
+ }
+ }
+ }
+
+ & .docsPromo {
+ box-sizing: border-box;
+ display: flex;
+ justify-content: center;
+ background-color: #f8f8f8;
+ padding: 80px 40px 50px;
+ margin-left: 25px;
+ border-radius: 1rem;
+
+ & .docsPromoHead {
+ display: flex;
+ flex-flow: column;
+ margin-right: 25px;
+
+ h3 {
+ font-size: 2.4rem;
+ }
+ }
+
+ & .docsPromoSubtitle {
+ font-size: 1.13rem;
+ position: relative;
+ color: #615d5d;
+ letter-spacing: 0.2px;
+ font-family: MaisonNeue-Light, sans-serif;
+ font-weight: 700;
+ }
+ }
+
+ @include respond-below(sm) {
+ margin: 0 1rem;
+ flex-direction: column;
+
+ & .ossPromo {
+ min-width: unset;
+ }
+
+ & .docsPromo {
+ flex-direction: column;
+ margin: 4rem 0 0;
+
+ & .docsPromoHead {
+ margin-right: 0;
+ }
+ }
+ }
+}
