1
0
mirror of https://github.com/kremalicious/portfolio.git synced 2025-01-03 18:35:00 +01:00
This commit is contained in:
Matthias Kretschmann 2018-09-19 19:50:41 +02:00
parent 17d186d890
commit 9acca5fe98
Signed by: m
GPG Key ID: 606EEEF3C479A91F
6 changed files with 26 additions and 23 deletions

View File

@ -30,7 +30,7 @@ export default class Layout extends PureComponent {
delay={timeout}
delayChildren={timeout}
>
<Header isHomepage={isHomepage} />
<Header minimal={!isHomepage} />
<main className={styles.screen}>{children}</main>
</RoutesContainer>
</PoseGroup>

View File

@ -19,7 +19,7 @@ const query = graphql`
const Animation = posed.div(moveInBottom)
export default class LogoUnit extends PureComponent {
state = { minimal: false }
state = { isMinimal: false }
static propTypes = {
minimal: PropTypes.bool
@ -28,7 +28,7 @@ export default class LogoUnit extends PureComponent {
checkMinimal = () => {
const { minimal } = this.props
this.setState({ minimal: minimal })
this.setState({ isMinimal: minimal })
}
componentDidMount() {
@ -45,11 +45,11 @@ export default class LogoUnit extends PureComponent {
query={query}
render={data => {
const { title, tagline } = data.dataYaml
const { minimal } = this.state
const { isMinimal } = this.state
return (
<Animation>
<div className={minimal ? styles.minimal : styles.logounit}>
<div className={isMinimal ? styles.minimal : styles.logounit}>
<Logo className={styles.logounit__logo} />
<h1 className={styles.logounit__title}>
{title.toLowerCase()}

View File

@ -54,8 +54,12 @@
// stylelint-disable no-descending-specificity
.logounit__title,
.logounit__description {
color: $text-color-light;
:global(.dark) & {
color: $text-color-light--dark;
}
}
// stylelint-enable no-descending-specificity
.logounit__logo {

View File

@ -46,16 +46,16 @@ const NetworkIcon = props => {
const Animation = posed.aside(moveInTop)
export default class Network extends PureComponent {
export default class Networks extends PureComponent {
state = {
classes: styles.networks
}
static propTypes = {
minimal: PropTypes.bool,
hide: PropTypes.bool
}
state = {
classes: styles.networks
}
componentDidMount() {
this.toggleClasses()
}

View File

@ -57,8 +57,8 @@
/* stylelint-disable no-descending-specificity */
svg {
width: .85rem;
height: .85rem;
width: .75rem;
height: .75rem;
opacity: .8;
}
}

View File

@ -18,12 +18,12 @@ const query = graphql`
`
export default class Header extends PureComponent {
state = { minimal: false }
state = { isMinimal: this.props.minimal }
checkMinimal = () => {
const { isHomepage } = this.props
const { minimal } = this.props
this.setState({ minimal: !isHomepage })
this.setState({ isMinimal: minimal })
}
componentDidMount() {
@ -35,8 +35,7 @@ export default class Header extends PureComponent {
}
render() {
const { isHomepage } = this.props
const { minimal } = this.state
const { isMinimal } = this.state
return (
<StaticQuery
@ -45,16 +44,16 @@ export default class Header extends PureComponent {
const meta = data.dataYaml
return (
<header className={minimal ? styles.minimal : styles.header}>
<header className={isMinimal ? styles.minimal : styles.header}>
<ThemeSwitch />
<Link className={styles.header__link} to={'/'}>
<LogoUnit minimal={!isHomepage} />
<LogoUnit minimal={isMinimal} />
</Link>
<Networks hide={!isHomepage} />
<Networks hide={isMinimal} />
<Availability hide={!isHomepage && !meta.availability.status} />
<Availability hide={isMinimal && !meta.availability.status} />
</header>
)
}}
@ -64,5 +63,5 @@ export default class Header extends PureComponent {
}
Header.propTypes = {
isHomepage: PropTypes.bool
minimal: PropTypes.bool
}