Skip to content

Commit

Permalink
fix: banner consistency css
Browse files Browse the repository at this point in the history
  • Loading branch information
Eric Lin committed Jan 31, 2023
1 parent 3f71d56 commit 1386d71
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 10 deletions.
22 changes: 15 additions & 7 deletions src/pages/index.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,6 @@
* and scoped locally.
*/

.heroBanner {
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
}

@media screen and (max-width: 996px) {
.heroBanner {
padding: 2rem;
Expand All @@ -21,3 +14,18 @@
align-items: center;
justify-content: center;
}

.introductionBlock {
background: linear-gradient(56.02deg, #2c56dd 49.2%, #30daad 95.07%), #2c56dd;
padding: 6rem;
text-align: center;
width: 100%;
}

.forceColor {
color: var(--ifm-color-content-inverse);
}

html[data-theme="dark"] .forceColor {
color: var(--ifm-font-color-secondary);
}
10 changes: 7 additions & 3 deletions src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,14 @@ import styles from "./index.module.css";
function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
return (
<header className={clsx("hero hero--primary", styles.heroBanner)}>
<header className={clsx(styles.introductionBlock)}>
<div className="container">
<h1 className="hero__title">{siteConfig.title}</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p>
<h1 className={clsx("hero__title", styles.forceColor)}>
{siteConfig.title}
</h1>
<p className={clsx("hero__subtitle", styles.forceColor)}>
{siteConfig.tagline}
</p>
<div className={styles.buttons}>
<Link
className="button button--secondary button--lg"
Expand Down

0 comments on commit 1386d71

Please sign in to comment.