m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2025-01-05 03:15:07 +01:00
Code

restore footer

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-08-11 02:39:18 +02:00
parent a3ab615eb6
commit 0f510e3fe7
Signed by: m
GPG Key ID: 606EEEF3C479A91F
8 changed files with 336 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
content/meta.yml
View File

@ -20,6 +20,7 @@ author:
github: kremalicious github: kremalicious
facebook: matthiaskretschmann facebook: matthiaskretschmann
googleplus: +MatthiasKretschmann googleplus: +MatthiasKretschmann
avatar: ../src/images/avatar.jpg
bitcoin: 171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V bitcoin: 171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V
ether: "0x339dbC44d39bf1961E385ed0Ae88FC6069b87Ea1" ether: "0x339dbC44d39bf1961E385ed0Ae88FC6069b87Ea1"

7
gatsby-config.js
View File

@ -30,6 +30,13 @@ module.exports = {
path: path.join(__dirname, 'content') path: path.join(__dirname, 'content')
} }
}, },
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'images',
path: path.join(__dirname, 'src', 'images')
}
},
{ {
resolve: 'gatsby-transformer-remark', resolve: 'gatsby-transformer-remark',
options: { options: {

58
src/components/Layout.jsx
View File

@ -1,58 +1,28 @@
import React, { Fragment } from 'react' import React, { Fragment } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby'
import Container from './atoms/Container' import Container from './atoms/Container'
import Head from './molecules/Head' import Head from './molecules/Head'
import Header from './organisms/Header' import Header from './organisms/Header'
import Footer from './organisms/Footer'
import styles from './Layout.module.scss' import styles from './Layout.module.scss'
const Layout = ({ children }) => { const Layout = ({ children }) => (
return ( <Fragment>
<StaticQuery <Head />
query={graphql` <Header />
query {
# the content/meta.yml file
contentYaml {
title
tagline
url
author {
name
email
uri
twitter
github
facebook
googleplus
bitcoin
ether
}
}
}
`}
render={data => {
const meta = data.contentYaml
return ( <main className={styles.document}>
<Fragment> <div className={styles.content}>
<Head meta={meta} /> <Container>{children}</Container>
<Header /> </div>
</main>
<main className={styles.site__document}> <Footer />
<div className={styles.site__content}> </Fragment>
<Container>{children}</Container> )
</div>
</main>
</Fragment>
)
}}
/>
)
}
Layout.propTypes = { Layout.propTypes = {
children: PropTypes.any.isRequired, children: PropTypes.any.isRequired
location: PropTypes.object.isRequired
} }
export default Layout export default Layout

6
src/components/Layout.module.scss
View File

@ -8,8 +8,7 @@
position: relative; position: relative;
} }
.site__content, .content {
.footer__content {
padding: 0 $spacer; padding: 0 $spacer;
width: 100%; width: 100%;
@ -22,7 +21,7 @@
// site background // site background
///////////////////////////////////// /////////////////////////////////////
.site__document { .document {
width: 100%; width: 100%;
padding-top: ($spacer * 2); padding-top: ($spacer * 2);
background-color: $page-background-color; background-color: $page-background-color;
@ -40,6 +39,7 @@
@include transition; @include transition;
margin-top: $spacer * 2.65; margin-top: $spacer * 2.65;
margin-bottom: $spacer * 20;
position: relative; position: relative;
z-index: 2; z-index: 2;

51
src/components/molecules/Head.jsx
View File

@ -1,28 +1,39 @@
import React, { Fragment } from 'react' import React, { Fragment } from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet' import Helmet from 'react-helmet'
import { StaticQuery, graphql } from 'gatsby'
import Typekit from '../atoms/Typekit' import Typekit from '../atoms/Typekit'
const Head = ({ meta }) => { const Head = () => (
const { title, tagline } = meta <StaticQuery
query={graphql`
query {
contentYaml {
title
tagline
}
}
`}
render={data => {
const { title, tagline } = data.contentYaml
return ( return (
<Fragment> <Fragment>
<Helmet <Helmet
defaultTitle={`${title.toLowerCase()} ¦ ${tagline.toLowerCase()}`} defaultTitle={`${title.toLowerCase()} ¦ ${tagline.toLowerCase()}`}
titleTemplate={`%s ¦ ${title.toLowerCase()}`} titleTemplate={`%s ¦ ${title.toLowerCase()}`}
> >
<meta name="apple-mobile-web-app-title" content={title.toLowerCase()} /> <meta
<meta name="theme-color" content="#e7eef4" /> name="apple-mobile-web-app-title"
</Helmet> content={title.toLowerCase()}
/>
<meta name="theme-color" content="#e7eef4" />
</Helmet>
<Typekit /> <Typekit />
</Fragment> </Fragment>
) )
} }}
/>
Head.propTypes = { )
meta: PropTypes.object.isRequired
}
export default Head export default Head

143
src/components/organisms/Footer.jsx Normal file
View File

@ -0,0 +1,143 @@
import React, { PureComponent } from 'react'
import { StaticQuery, graphql } from 'gatsby'
import Img from 'gatsby-image'
import Container from '../atoms/Container'
import Twitter from '../svg/Twitter'
import Github from '../svg/Github'
import Facebook from '../svg/Facebook'
import Bitcoin from '../svg/Bitcoin'
import Rss from '../svg/Rss'
import Jsonfeed from '../svg/Jsonfeed'
import styles from './Footer.module.scss'
class Footer extends PureComponent {
constructor(props) {
super(props)
this.state = { year: null }
}
componentDidMount() {
const year = new Date().getFullYear()
this.setState({ year })
}
render() {
return (
<StaticQuery
query={graphql`
query {
contentYaml {
author {
name
email
uri
twitter
github
facebook
googleplus
avatar {
childImageSharp {
fixed(width: 80, height: 80) {
...GatsbyImageSharpFixed
}
}
}
bitcoin
ether
}
}
}
`}
render={data => {
const { author } = data.contentYaml
return (
<footer role="contentinfo" className={styles.footer}>
<Container>
<div className="vcard author">
<Img
className={styles.avatar}
fixed={author.avatar.childImageSharp.fixed}
/>
<p className={styles.description}>
Blog of designer &amp; developer{' '}
<a className="fn" rel="author" href={author.uri}>
{author.name}
</a>
</p>
<p>
<a
className={styles.link}
href={`https://twitter.com/${author.twitter}`}
>
<Twitter className={styles.twitter} />
</a>
<a
className={styles.link}
href={`https://github.com/${author.github}`}
>
<Github className={styles.github} />
</a>
<a
className={styles.link}
href={`https://www.facebook.com/${author.facebook}`}
>
<Facebook className={styles.facebook} />
</a>
</p>
</div>
<aside className={styles.subscribe}>
<h1 className={styles.title}>Subscribe</h1>
<p>
<a
className={styles.link}
href="http://kremalicious.com/feed.xml"
title="RSS Feed"
>
<Rss className={styles.rss} />
</a>
<a
className={styles.link}
href="http://kremalicious.com/feed.json"
title="JSON Feed"
>
<Jsonfeed className={styles.json} />
</a>
</p>
</aside>
<section className={styles.copyright}>
<p>
&copy; 2005&ndash;
{this.state.year + ' '}
<a href="http://matthiaskretschmann.com" rel="me">
Matthias Kretschmann
</a>
</p>
<p>
<a href="https://github.com/kremalicious/kremalicious3/blob/master/_src/">
<Github />
View source
</a>
<a href="#" className={styles.btc}>
<Bitcoin />
<code>{author.bitcoin}</code>
</a>
</p>
</section>
</Container>
</footer>
)
}}
/>
)
}
}
export default Footer

137
src/components/organisms/Footer.module.scss Normal file
View File

@ -0,0 +1,137 @@
@import 'variables';
@import 'mixins';
.footer {
text-align: center;
padding-top: $spacer * 2;
color: $text-color-light;
line-height: $spacer;
@media (min-width: $screen-sm) {
position: fixed;
width: 100%;
border: 0;
will-change: transform;
z-index: 0;
bottom: 0;
box-shadow: none;
}
svg {
fill: $brand-grey-light;
}
}
.avatar {
@include media-frame;
margin-bottom: ($spacer / 2);
border-radius: 50%;
}
.description {
font-size: $font-size-h5;
margin-top: 0;
margin-bottom: ($spacer / 4);
a {
display: block;
}
}
.copyright {
padding-top: $spacer;
padding-bottom: $spacer;
p {
margin-bottom: 0;
font-size: $font-size-mini;
}
svg {
width: 15px;
height: 15px;
margin-right: .2em;
margin-bottom: -2px;
display: inline-block;
}
}
// Subscribe component
.subscribe {
margin: $spacer auto;
p {
text-align: center;
margin: 0;
}
}
.link {
text-align: center;
width: 2rem;
padding: $spacer / 4;
margin: 0;
display: inline-block;
color: $text-color-light;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
svg {
transition: color .3s ease-in-out;
display: block;
margin: 0 auto;
}
}
.rss:hover {
fill: #e15a00;
}
.json:hover {
fill: #8be028;
}
.twitter:hover {
fill: #019ad2;
}
.google:hover {
fill: #c63b1e;
}
.facebook:hover {
fill: #3b5998;
}
.github:hover {
fill: #333;
}
.title {
font-size: $font-size-h5;
margin-bottom: ($spacer/2);
}
.btc {
margin-left: ($spacer / 2);
// stylelint-disable-next-line
svg {
width: 10px;
margin-right: 0;
}
code {
font-size: .6rem;
background: none;
color: $link-color;
padding: 0;
}
}

0
src/images/avatar.jpeg → src/images/avatar.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB