tyler.durden
/
dashy
mirror of https://github.com/Lissy93/dashy.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

✨ Creates the homepage header

This commit is contained in:
Alicia Sykes 2021-06-28 21:26:10 +01:00
parent eee99d1ffe
commit 8c7b2a6a0a
4 changed files with 75 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/HomePageHeader.js Normal file
View File

@ -0,0 +1,26 @@
import React from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import styles from '../styles/Header.module.scss';
import Button from '../components/Button';
// Icons
import IconBannerDemo from '../../static/icons/banner_demo.svg';
import IconBannerGetStarted from '../../static/icons/banner_get-started.svg';
import IconBannerSource from '../../static/icons/banner_source.svg';
import IconBannerDocs from '../../static/icons/banner_docs.svg';
export default function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
return (
<header className={styles.heroBanner}>
<h1 className={styles.heroTitle}>{siteConfig.title}</h1>
<h3 className={styles.heroSubTitle}>{siteConfig.tagline}</h3>
<div className={styles.buttons}>
<Button to="/docs" color="pink"><IconBannerDemo />Try it Out</Button>
<Button to="/docs" color="blue"><IconBannerGetStarted />Get Started</Button>
<Button to="/docs" color="green"><IconBannerSource />Source Code</Button>
<Button to="/docs" color="yellow"><IconBannerDocs />Documentation</Button>
</div>
</header>
);
}

24
src/pages/index.js
View File

@ -1,26 +1,11 @@
import React from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import styles from './index.module.scss';
import Button from './../components/Button';
function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
return (
<header className={styles.heroBanner}>
<h1 className={styles.heroTitle}>{siteConfig.title}</h1>
<h3 className={styles.heroSubTitle}>{siteConfig.tagline}</h3>
<div className={styles.buttons}>
<Button to="/docs" color="pink">Try it Out</Button>
<Button to="/docs" color="blue">Get Started</Button>
<Button to="/docs" color="green">Source Code</Button>
<Button to="/docs" color="yellow">Documentation</Button>
</div>
</header>
);
}
import HomePageHeader from '../components/HomePageHeader';
import HomePageFeatures from '../components/HomePageFeatures';
export default function Home() {
const { siteConfig } = useDocusaurusContext();
@ -28,7 +13,8 @@ export default function Home() {
<Layout
title={siteConfig.title}
description="Description will go into a meta tag in <head />">
<HomepageHeader />
<HomePageHeader />
<HomePageFeatures />
<main>
</main>
</Layout>

17
src/pages/index.module.scss
View File

@ -27,14 +27,6 @@ header.heroBanner {
}
}
@media screen and (max-width: 966px) {
.heroBanner {
padding: 2rem;
}
}
.buttons {
display: flex;
align-items: center;
@ -43,3 +35,12 @@ header.heroBanner {
flex-direction: column;
}
}
@media screen and (max-width: 966px) {
.heroBanner {
padding: 2rem;
}
}

35
src/styles/Header.module.scss Normal file
View File

@ -0,0 +1,35 @@
html {
&[data-theme='dark'] {
--heading-shadow: -5px 4px 0px #000000;
--sub-heading-shadow: -3px 3px 1px #000000;
}
&[data-theme='light'] {
--heading-shadow: -2px 3px 2px #a2a1a1;
--sub-heading-shadow: -1px 1px 1px #a2a1a1;
}
}
header.heroBanner {
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
background: var(--hero-background);
h1.heroTitle {
font-size: 6rem;
font-family: 'Racing Sans One', cursive;
text-shadow: var(--heading-shadow);
}
h3.heroSubTitle {
text-shadow: var(--sub-heading-shadow);
}
}
.buttons {
display: flex;
align-items: center;
justify-content: center;
@media screen and (max-width: 966px) {
flex-direction: column;
}
}