algorithm/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2025-07-28 20:52:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

website: make ad component change background color

Browse Source
This commit is contained in:
Yangshun
2021-08-07 23:03:41 +08:00
parent 348ad0c907
commit 27894a7389
2 changed files with 38 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
website/src/components/SidebarAd/index.js
View File

@ -2,12 +2,24 @@ import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
import clsx from 'clsx';
import styles from './styles.module.css'; import styles from './styles.module.css';
export default function SidebarAd() { const BACKGROUNDS = [
styles.backgroundBlue,
styles.backgroundGreen,
styles.backgroundOrange,
styles.backgroundPurple,
styles.backgroundRed,
];
export default React.memo(function SidebarAd() {
const backgroundClass = BACKGROUNDS[Math.floor(Math.random() * BACKGROUNDS.length)];
return ( return (
<a <a
className={styles.container} className={clsx(styles.container, backgroundClass)}
href="https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_docs_sidebar" href="https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_docs_sidebar"
target="_blank" target="_blank"
rel="noreferrer noopener" rel="noreferrer noopener"
@ -20,4 +32,4 @@ export default function SidebarAd() {
</p> </p>
</a> </a>
); );
} });

26
website/src/components/SidebarAd/styles.module.css
View File

@ -1,18 +1,38 @@
.container { .container {
background: linear-gradient(138deg, rgb(69, 104, 220), rgb(176, 106, 179));
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
border-radius: var(--ifm-global-radius); border-radius: var(--ifm-global-radius);
color: #fff; color: #fff;
display: block; display: block;
opacity: 0.95;
padding: 1rem; padding: 1rem;
transition: background-color var(--ifm-transition-fast) transition: opacity var(--ifm-transition-fast)
var(--ifm-transition-timing-default); var(--ifm-transition-timing-default);
} }
.backgroundPurple {
background-image: linear-gradient(138deg, rgb(69, 104, 220), rgb(176, 106, 179));
}
.backgroundRed {
background-image: linear-gradient(39deg, rgb(188, 78, 156), rgb(248, 7, 89));
}
.backgroundOrange {
background-image: linear-gradient(39deg, rgb(255, 81, 47), rgb(240, 152, 25));
}
.backgroundGreen {
background-image: linear-gradient(198deg, rgb(29, 151, 108), rgb(147, 249, 185));
}
.backgroundBlue {
background-image: linear-gradient(153deg, rgb(116, 116, 191), rgb(52, 138, 199));
}
.container:hover { .container:hover {
background-color: var(--ifm-color-primary-dark);
color: #fff; color: #fff;
opacity: 1;
text-decoration: none; text-decoration: none;
} }