diff --git a/website/src/css/customTheme.css b/website/src/css/customTheme.css index 988453e114e19..86fe284dd35bd 100644 --- a/website/src/css/customTheme.css +++ b/website/src/css/customTheme.css @@ -30,7 +30,7 @@ --color-downloads-dropdown-items: #f3f4f6; } -html[data-theme='dark'] { +html[data-theme="dark"] { --color-secondary-bg: #121212; --ifm-color-dark: #b0b0b0; --color-title: #f0f0f0; @@ -324,7 +324,7 @@ header h2 { font-size: 2.2rem; margin-bottom: 10px; } -.learn-how .hero__subtitle{ +.learn-how .hero__subtitle { color: var(--color-secondary-text); } @@ -569,7 +569,7 @@ a:hover { height: 24px; } -.team-githubLogo{ +.team-githubLogo { height: 24px; } @@ -627,7 +627,7 @@ a:hover { } .downloads-versioninfo-span { - color: var(--color-downloads-rightside-versioninfo-span) + color: var(--color-downloads-rightside-versioninfo-span); } .downloads-dropdown { @@ -639,7 +639,7 @@ a:hover { } .team-repocard { - color: var(--color-team-repocard) + color: var(--color-team-repocard); } .team-repocard:hover { @@ -657,3 +657,48 @@ a:hover { .help-page .card p { color: var(--color-help-subtitle); } + +.pic-wrapper { + width: 440px; + position: fixed; + display: flex; + right: 0; + bottom: 0; + z-index: 999; + outline: 0; + overflow: auto; + border: 0; + box-shadow: 0 0 20px -12px #626365; +} + +.pic-wrapper a { + display: flex; +} + +.pic-wrapper-close { + position: absolute; + z-index: 1000; + top: 10px; + right: 25px; + font-weight: 900; + color: rgb(135, 151, 172); + font-size: 16px; + outline: none; + border: 1px solid transparent; +} + +.pic-wrapper-close:hover { + cursor: pointer; +} + +.pic-wrapper-close svg { + width: 10px; + height: 15px; + display: inherit; +} + +@media only screen and (max-width: 440px) { + .pic-wrapper { + width: 100%; + } +} diff --git a/website/src/pages/index.js b/website/src/pages/index.js index b641ce3d37150..a2604ca63521f 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -120,7 +120,7 @@ const Showcase = () => { } const showcases = siteConfig.customFields.showcases.map((user) => ( - {user.caption} + {user.caption} )); const middleIndex = (showcases.length / 2).toFixed(0); @@ -216,12 +216,12 @@ const ContributionSection = () => {

Find a good first issue to get you started !

- - - Good First Issues - + + + Good First Issues +
); @@ -233,20 +233,20 @@ const NewsletterSection = () => {
- - - - - - - - - - - - - - + + + + + + + + + + + + + +

Stay up to date about all Apache APISIX™ News

@@ -258,6 +258,44 @@ const NewsletterSection = () => { ); }; +const Contributor200Poster = () => { + const [display, setDisplay] = useState(true); + const [theme, setTheme] = useState('light'); + + useEffect(() => { + addEventListener('click', () => { + if (localStorage.getItem('theme') !== theme) { + setTheme(localStorage.getItem('theme')); + }; + }); + }, [theme]); + + if (!display || (typeof window !== 'undefined' && localStorage.getItem('SHOW_200_CONTRIBUTOR_EVENT_ENTRY'))) { + return null; + } + + const onClose = () => { + setDisplay(false); + if (typeof window !== 'undefined') { + localStorage.setItem('SHOW_200_CONTRIBUTOR_EVENT_ENTRY', 'true'); + } + }; + + return ( +
+ + + {theme === "light" && } + {theme === "dark" && } + +
+ ) +} + const Index = (props) => { return ( @@ -267,6 +305,7 @@ const Index = (props) => { + ); }; diff --git a/website/static/img/200_mark_dark.jpg b/website/static/img/200_mark_dark.jpg new file mode 100644 index 0000000000000..8b28a86851b7f Binary files /dev/null and b/website/static/img/200_mark_dark.jpg differ diff --git a/website/static/img/200_mark_light.jpg b/website/static/img/200_mark_light.jpg new file mode 100644 index 0000000000000..c4ba064397caf Binary files /dev/null and b/website/static/img/200_mark_light.jpg differ