commit c57b5e0d5ab65181b8338608873c1195b7b4f619
parent 5729cee9853c94372ad15aab0d7d0d58322ad112
Author: Agastya Chandrakant <me@hanabi.in>
Date: Tue, 3 Sep 2019 22:08:06 +0530
Add CSS, className, and something I can't seem to recall
Diffstat:
16 files changed, 3020 insertions(+), 256 deletions(-)
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -12,7 +12,7 @@ module.exports = {
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
- path: `${__dirname}/src/pages`,
+ path: `${__dirname}/src/blogs`,
},
},
`gatsby-plugin-react-helmet`,
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -1,7 +1,36 @@
-/**
- * Implement Gatsby's Node APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/node-apis/
- */
+const path = require('path');
-// You can delete this file if you're not using it
+exports.createPages = ({ graphql, actions }) => {
+ const { createPage } = actions;
+ return new Promise((resolve, reject) => {
+ const BlogPostTemplate = path.resolve('src/components/blogPost.js');
+ resolve(
+ graphql(
+ `
+ query {
+ allMarkdownRemark {
+ edges {
+ node {
+ frontmatter {
+ path
+ }
+ }
+ }
+ }
+ }
+ `
+ ).then(result => {
+ result.data.allMarkdownRemark.edges.forEach(({ node }) => {
+ createPage({
+ path: node.frontmatter.path,
+ component: BlogPostTemplate,
+ context: {
+ pathSlug: node.frontmatter.path,
+ },
+ });
+ resolve;
+ });
+ })
+ );
+ });
+};
diff --git a/src/blogs/08-08-2019-zealots-against-zomato/index.md b/src/blogs/08-08-2019-zealots-against-zomato/index.md
@@ -0,0 +1,18 @@
+---
+path: '/zealots-against-zomato'
+date: '2019-08-08'
+title: 'Zealots against Zomato'
+tags: ['religion', 'food', 'discrimination', 'zomato', 'faith']
+cover: 'https://images.unsplash.com/photo-1526367790999-0150786686a2'
+excerpt: 'Zeal'
+---
+
+I can't justify someone's request to not have a particular person as the SPL because she is of a particular religion. Judging here on the basis of the faith they hold is not the right criterion because that will have no effect on what services you expect from them. Just like letting someone not be a doctor because they are fat, or not hiring a driver who wakes up in the middle of the night, strap up for a while and goes back to sleep.
+
+Ordering food home and having a problem with the delivery boy because of his faith makes no sense, just like not wanting to go to an office where there is no picture of God put up.
+
+But if I have to guess why he might have done that, maybe ignorance, he probably thought that the driver would chant a prayer for him and package to be delivered safely and that way his food is getting effected in a way that he did not expect.
+
+Or maybe he dislikes the practices that a general Muslim would do and thus, was not ready to accept services from them, but maybe ignore or not make an effort to know if the other services that he had been getting are from a Muslim.
+
+But none of the guesses that I made are valid enough for him to put up a request like that.
diff --git a/src/blogs/bar/index.md b/src/blogs/bar/index.md
@@ -0,0 +1,9 @@
+---
+path: '/bar'
+date: '2019-07-07'
+title: 'bar bar bar'
+tags: ['religion', 'bar', 'foo']
+cover: 'https://upload.wikimedia.org/wikipedia/commons/f/f9/深圳公交M375路K9.jpg'
+---
+
+bar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar barbar bar bar
diff --git a/src/blogs/foo/index.md b/src/blogs/foo/index.md
@@ -0,0 +1,9 @@
+---
+path: '/foo'
+date: '2019-07-08'
+title: 'foo foo foo'
+tags: ['religion', 'food', 'zomato', 'foo']
+cover: 'https://upload.wikimedia.org/wikipedia/commons/e/e2/F-22_Raptor_edit1.jpg'
+---
+
+foo foo foo
diff --git a/src/components/blogPost.js b/src/components/blogPost.js
@@ -0,0 +1,8 @@
+import React from 'react';
+// import { graphql } from 'gatsby';
+
+const BlogPostTemplate = props => {
+ return <div>foo bar</div>;
+};
+
+export default BlogPostTemplate;
diff --git a/src/components/footer.js b/src/components/footer.js
@@ -2,43 +2,72 @@ import { Link } from 'gatsby';
import PropTypes from 'prop-types';
import React from 'react';
-const Footer = ({ name }) => (
- <footer
- style={{
- background: `#323330`,
- marginTop: `1.45rem`,
- }}
- >
+const Footer = ({ name, author }) => (
+ <footer style={{ background: `#323330` }}>
<div
+ // style={{
+ // color: `#fff`,
+ // fontSize: '13px',
+ // margin: `0 auto`,
+ // maxWidth: 960,
+ // padding: `1.45rem 1.0875rem`,
+ // verticalAlign: `middle`,
+ // }}
style={{
- color: `#fff`,
- fontSize: '20px',
+ ...siteFooterContent,
+ ...inner,
+ fontSize: '13px',
margin: `0 auto`,
- maxWidth: 960,
- padding: `1.45rem 1.0875rem`,
- verticalAlign: `middle`,
+ padding: `1.45rem 0`,
}}
>
- <Link
- to="/"
- style={{
- color: `#fff`,
- textDecoration: `none`,
- }}
- >
- {name}
- </Link>{' '}
- © {new Date().getFullYear()}
+ <section className="copyright">
+ <a href={`https://www.twitter.com/${author}`} style={links}>
+ {name}
+ </a>{' '}
+ © {new Date().getFullYear()}
+ </section>
+ <nav style={siteFooterNav}>
+ <Link style={links} to="/">
+ Latest Posts
+ </Link>
+ </nav>
</div>
</footer>
);
Footer.propTypes = {
name: PropTypes.string,
+ author: PropTypes.string,
};
Footer.defaultProps = {
name: `Sanā Habeeb`,
+ author: `@SanaHabeeb4`,
};
export default Footer;
+
+const inner = {
+ margin: `0 auto`,
+ maxWidth: `960px`,
+ width: `100%`,
+};
+
+const siteFooterContent = {
+ alignItems: `center`,
+ color: `rgba(255, 255, 255, 0.7)`,
+ display: `flex`,
+ flexWrap: `wrap`,
+ fontSize: `1.3rem`,
+ justifyContent: `space-between`,
+};
+
+const siteFooterNav = {
+ display: `flex`,
+};
+
+const links = {
+ color: `#fff`,
+ textDecoration: `none`,
+};
diff --git a/src/components/hanabi.global.css b/src/components/hanabi.global.css
@@ -0,0 +1,511 @@
+/* Variables
+/* ---------------------------------------------------------- */
+
+:root {
+ /* Colours */
+ --blue: #3eb0ef;
+ --green: #a4d037;
+ --purple: #ad26b4;
+ --yellow: #fecd35;
+ --red: #f05230;
+ --darkgrey: #15171a;
+ --midgrey: #738a94;
+ --lightgrey: #c5d2d9;
+ --whitegrey: #e5eff5;
+ --pink: #fa3a57;
+ --brown: #a3821a;
+}
+
+/* Reset
+/* ---------------------------------------------------------- */
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font: inherit;
+ font-size: 100%;
+ vertical-align: baseline;
+}
+body {
+ line-height: 1;
+}
+ol,
+ul {
+ list-style: none;
+}
+blockquote,
+q {
+ quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-spacing: 0;
+ border-collapse: collapse;
+}
+img {
+ max-width: 100%;
+}
+html {
+ box-sizing: border-box;
+ font-family: sans-serif;
+
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
+}
+*,
+*:before,
+*:after {
+ box-sizing: inherit;
+}
+a {
+ background-color: transparent;
+}
+a:active,
+a:hover {
+ outline: 0;
+}
+b,
+strong {
+ font-weight: bold;
+}
+i,
+em,
+dfn {
+ font-style: italic;
+}
+h1 {
+ margin: 0.67em 0;
+ font-size: 2em;
+}
+small {
+ font-size: 80%;
+}
+sub,
+sup {
+ position: relative;
+ font-size: 75%;
+ line-height: 0;
+ vertical-align: baseline;
+}
+sup {
+ top: -0.5em;
+}
+sub {
+ bottom: -0.25em;
+}
+img {
+ border: 0;
+}
+svg:not(:root) {
+ overflow: hidden;
+}
+mark {
+ background-color: #fdffb6;
+}
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, monospace;
+ font-size: 1em;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+ margin: 0; /* 3 */
+ color: inherit; /* 1 */
+ font: inherit; /* 2 */
+}
+button {
+ overflow: visible;
+ border: none;
+}
+button,
+select {
+ text-transform: none;
+}
+button,
+html input[type="button"],
+/* 1 */
+input[type="reset"],
+input[type="submit"] {
+ cursor: pointer; /* 3 */
+
+ -webkit-appearance: button; /* 2 */
+}
+button[disabled],
+html input[disabled] {
+ cursor: default;
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ padding: 0;
+ border: 0;
+}
+input {
+ line-height: normal;
+}
+input:focus {
+ outline: none;
+}
+input[type='checkbox'],
+input[type='radio'] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+ height: auto;
+}
+input[type='search'] {
+ box-sizing: content-box; /* 2 */
+
+ -webkit-appearance: textfield; /* 1 */
+}
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+legend {
+ padding: 0; /* 2 */
+ border: 0; /* 1 */
+}
+textarea {
+ overflow: auto;
+}
+table {
+ border-spacing: 0;
+ border-collapse: collapse;
+}
+td,
+th {
+ padding: 0;
+}
+
+/* ==========================================================================
+ Base styles: opinionated defaults
+ ========================================================================== */
+
+html {
+ overflow-x: hidden;
+ overflow-y: scroll;
+ font-size: 62.5%;
+
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+body {
+ overflow-x: hidden;
+ /* color: color(var(--midgrey) l(-25%)); */
+ color: #454545;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+ Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ font-size: 1.5rem;
+ line-height: 1.6em;
+ font-weight: 400;
+ font-style: normal;
+ letter-spacing: 0;
+ text-rendering: optimizeLegibility;
+ background: #fff;
+
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -moz-font-feature-settings: 'liga' on;
+}
+
+::selection {
+ background: rgba(228, 175, 10, 0.5);
+}
+
+::-moz-selection {
+ background: rgba(228, 175, 10, 0.5);
+}
+
+hr {
+ /* position: relative; */
+ overflow: visible; /* For IE */
+ text-align: center;
+ display: block;
+ width: 100%;
+ margin: 2.5em 0 3.5em;
+ padding: 0;
+ height: 1px;
+ border: 0;
+ /* border-top: 1px solid color(var(--lightgrey) l(+10%)); */
+ background-image: linear-gradient(
+ to right,
+ rgba(0, 0, 0, 0),
+ rgba(0, 0, 0, 0.75),
+ rgba(0, 0, 0, 0)
+ );
+}
+
+hr:last-child::after {
+ content: 'Fin';
+ font-style: oblique;
+ display: inline-block;
+ position: relative;
+ top: -0.7em;
+ font-size: 1.5em;
+ padding: 0 0.25em;
+ background: #f5f5f5;
+}
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+ vertical-align: middle;
+}
+
+fieldset {
+ margin: 0;
+ padding: 0;
+ border: 0;
+}
+
+textarea {
+ resize: vertical;
+}
+
+p,
+ul,
+ol,
+dl,
+blockquote {
+ margin: 0 0 1.5em 0;
+}
+
+ol,
+ul {
+ padding-left: 1.3em;
+ padding-right: 1.5em;
+}
+
+ol ol,
+ul ul,
+ul ol,
+ol ul {
+ margin: 0.5em 0 1em;
+}
+
+ul {
+ list-style: disc;
+}
+
+ol {
+ list-style: decimal;
+}
+
+ul,
+ol {
+ max-width: 100%;
+}
+
+li {
+ margin: 0.5em 0;
+ padding-left: 0.3em;
+ line-height: 1.6em;
+}
+
+dt {
+ float: left;
+ margin: 0 20px 0 0;
+ width: 120px;
+ color: var(--darkgrey);
+ font-weight: 500;
+ text-align: right;
+}
+
+dd {
+ margin: 0 0 5px 0;
+ text-align: left;
+}
+
+blockquote {
+ margin: 1.5em 0;
+ padding: 0 1.6em 0 1.6em;
+ border-left: var(--whitegrey) 0.5em solid;
+}
+
+blockquote p {
+ margin: 0.8em 0;
+ font-size: 1.2em;
+ font-weight: 300;
+}
+
+blockquote small {
+ display: inline-block;
+ margin: 0.8em 0 0.8em 1.5em;
+ font-size: 0.9em;
+ opacity: 0.8;
+}
+/* Quotation marks */
+blockquote small:before {
+ content: '\2014 \00A0';
+}
+
+blockquote cite {
+ font-weight: bold;
+}
+blockquote cite a {
+ font-weight: normal;
+}
+
+a {
+ /* color: color(var(--blue) l(-5%)); */
+ color: #e4af0a;
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin-top: 0;
+ line-height: 1.15;
+ font-weight: 700;
+ text-rendering: optimizeLegibility;
+}
+
+h1 {
+ margin: 0 0 0.5em 0;
+ font-size: 5rem;
+ font-weight: 700;
+}
+@media (max-width: 500px) {
+ h1 {
+ font-size: 2.2rem;
+ }
+}
+
+h2 {
+ margin: 1.5em 0 0.5em 0;
+ font-size: 2rem;
+}
+@media (max-width: 500px) {
+ h2 {
+ font-size: 1.8rem;
+ }
+}
+
+h3 {
+ margin: 1.5em 0 0.5em 0;
+ font-size: 1.8rem;
+ font-weight: 500;
+}
+@media (max-width: 500px) {
+ h3 {
+ font-size: 1.7rem;
+ }
+}
+
+h4 {
+ margin: 1.5em 0 0.5em 0;
+ font-size: 1.6rem;
+ font-weight: 500;
+}
+
+h5 {
+ margin: 1.5em 0 0.5em 0;
+ font-size: 1.4rem;
+ font-weight: 500;
+}
+
+h6 {
+ margin: 1.5em 0 0.5em 0;
+ font-size: 1.4rem;
+ font-weight: 500;
+}
diff --git a/src/components/hanabi.screen.css b/src/components/hanabi.screen.css
@@ -0,0 +1,2313 @@
+/* Table of Contents
+/* ------------------------------------------------------------
+
+This is a development CSS file which is built to a minified
+production stylesheet in assets/built/screen.css
+
+1. Global Styles
+2. Layout
+3. Special Templates
+4. Site Header
+5. Site Navigation
+6. Post Feed
+7. Single Post
+ 7.1. Subscribe Form
+ 7.2. Post Footer
+ 7.2.1 Single Author Byline
+ 7.2.2 Multiple Author Byline
+ 7.3. Comments
+ 7.4. Related Posts
+ 7.5. Floating Header
+ 7.6. Koenig Styles
+8. Author Template
+9. Error Template
+10. Subscribe Overlay
+11. Site Footer
+
+*/
+
+/* 1. Global - Set up the things
+/* ---------------------------------------------------------- */
+@import 'hanabi.global.css';
+
+body {
+ background: #f1f1f1;
+}
+
+.img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ background-position: center center;
+ background-size: cover;
+ border-radius: 100%;
+}
+
+.hidden {
+ visibility: hidden;
+ position: absolute;
+ text-indent: -9999px;
+}
+
+/* 2. Layout - Page building blocks
+/* ---------------------------------------------------------- */
+
+.site-wrapper {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+}
+
+.site-main {
+ z-index: 100;
+ flex-grow: 1;
+}
+
+/* Full width page blocks */
+.outer {
+ position: relative;
+ padding: 0 4vw;
+}
+
+/* Centered content container blocks */
+.inner {
+ margin: 0 auto;
+ max-width: 1040px;
+ width: 100%;
+}
+
+/* Usage:
+
+<div class="outer">
+ <div class="inner">
+ Centered content
+ </div>
+</div>
+
+*/
+
+/* 3. Special Template Styles
+/* ---------------------------------------------------------- */
+
+@media (min-width: 900px) {
+ .home-template .post-feed,
+ .tag-template .post-feed,
+ .author-template .post-feed {
+ margin-top: -70px;
+ padding-top: 0;
+ }
+ .home-template .site-nav {
+ position: relative;
+ top: -70px;
+ }
+}
+
+/* 4. Site Header
+/* ---------------------------------------------------------- */
+
+.site-header {
+ position: relative;
+ padding-top: 12px;
+ padding-bottom: 12px;
+ color: #fff;
+ background: color(var(--darkgrey) l(-5%)) no-repeat center center;
+ background-size: cover;
+}
+
+.site-header:before {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 10;
+ display: block;
+ background: rgba(0, 0, 0, 0.18);
+}
+
+.site-header:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: auto;
+ left: 0;
+ z-index: 10;
+ display: block;
+ height: 80px;
+ background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
+}
+
+.site-header.no-cover:before,
+.site-header.no-cover:after {
+ display: none;
+}
+
+.site-header-content {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 10vw 4vw;
+ min-height: 200px;
+ max-height: 450px;
+ text-align: center;
+}
+
+.site-title {
+ z-index: 10;
+ margin: 0;
+ padding: 0;
+ font-size: 3.8rem;
+ font-weight: 700;
+}
+
+.site-logo {
+ max-height: 45px;
+}
+
+.site-description {
+ z-index: 10;
+ margin: 0;
+ padding: 5px 0;
+ font-size: 2.2rem;
+ font-weight: 300;
+ letter-spacing: 0.5px;
+ opacity: 0.8;
+}
+
+@media (max-width: 500px) {
+ .site-title {
+ font-size: 3rem;
+ }
+ .site-description {
+ font-size: 1.8rem;
+ }
+}
+
+/* 5. Site Navigation
+/* ---------------------------------------------------------- */
+
+.site-nav {
+ position: relative;
+ z-index: 300;
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ overflow-y: hidden;
+ height: 40px;
+ font-size: 1.2rem;
+}
+
+.site-nav-left {
+ display: flex;
+ align-items: center;
+ overflow-x: auto;
+ overflow-y: hidden;
+ -webkit-overflow-scrolling: touch;
+ margin-right: 10px;
+ padding-bottom: 80px;
+ letter-spacing: 0.4px;
+ white-space: nowrap;
+
+ -ms-overflow-scrolling: touch;
+}
+
+/* Site Nav Hack Explanation (above):
+
+What's happening above it .site-nav-left is set to overflow-x and allow sideways scrolling, so that when there isn't enough space for all nav items (either due to lots of nav items, or a small viewport), you can still scroll side-to-side to reach them.
+
+The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px of padding-bottom and a 40px fixed height parent (.site-nav) hides that entirely. Slightly hacky code. But nice clean end-result.
+
+*/
+
+.site-nav-logo {
+ flex-shrink: 0;
+ display: block;
+ margin-right: 24px;
+ padding: 11px 0;
+ color: #fff;
+ font-size: 1.7rem;
+ line-height: 1em;
+ font-weight: bold;
+ letter-spacing: -0.5px;
+}
+
+.site-nav-logo:hover {
+ text-decoration: none;
+}
+
+.site-nav-logo img {
+ display: block;
+ width: auto;
+ height: 21px;
+}
+
+.nav {
+ display: flex;
+ margin: 0 0 0 -12px;
+ padding: 0;
+ list-style: none;
+}
+
+.nav li {
+ display: block;
+ margin: 0;
+ padding: 0;
+ text-transform: uppercase;
+}
+
+.nav li a {
+ display: block;
+ margin: 0;
+ padding: 10px 12px;
+ color: #fff;
+ opacity: 0.8;
+}
+
+.nav li a:hover {
+ text-decoration: none;
+ opacity: 1;
+}
+
+.site-nav-right {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ height: 40px;
+}
+
+.social-links {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+}
+
+.social-links a:last-of-type {
+ padding-right: 20px;
+}
+
+.social-link {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 0;
+ padding: 10px;
+ color: #fff;
+ opacity: 0.8;
+}
+
+.social-link:hover {
+ opacity: 1;
+}
+
+.social-link svg {
+ height: 1.8rem;
+ fill: #fff;
+}
+
+.social-link-fb svg {
+ height: 1.5rem;
+}
+
+.social-link-wb svg {
+ height: 1.6rem;
+}
+
+.social-link-wb svg path {
+ stroke: #fff;
+}
+
+.social-link-rss svg {
+ height: 1.9rem;
+}
+
+.subscribe-button {
+ display: block;
+ padding: 4px 10px;
+ border: #fff 1px solid;
+ color: #fff;
+ font-size: 1.2rem;
+ line-height: 1em;
+ border-radius: 10px;
+ opacity: 0.8;
+}
+
+.subscribe-button:hover {
+ text-decoration: none;
+ opacity: 1;
+}
+
+.rss-button {
+ opacity: 0.8;
+}
+
+.rss-button:hover {
+ opacity: 1;
+}
+
+.rss-button svg {
+ margin-bottom: 1px;
+ height: 2.1rem;
+ fill: #fff;
+}
+
+@media (max-width: 700px) {
+ .site-header {
+ padding-right: 0;
+ padding-left: 0;
+ }
+ .site-nav-left {
+ margin-right: 0;
+ padding-left: 4vw;
+ }
+ .site-nav-right {
+ display: none;
+ }
+}
+
+/* 6. Post Feed
+/* ---------------------------------------------------------- */
+
+.post-feed {
+ position: relative;
+ display: flex;
+ flex-wrap: wrap;
+ margin: 0 -20px;
+ padding: 40px 0 0 0;
+}
+
+.post-card {
+ flex: 1 1 300px;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ margin: 0 20px 40px;
+ min-height: 300px;
+ background: #f7f7f7 center center;
+ background-size: cover;
+ border-radius: 10px;
+ /* box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16); */
+ box-shadow: 0 20px 25px 0 rgba(50, 50, 50, 0.2);
+ transition: all 0.5s ease;
+}
+
+.post-card:hover {
+ /* box-shadow: 0 15px 24px rgba(0, 0, 0, 0.22), 0 19px 76px rgba(0, 0, 0, 0.3); */
+ box-shadow: 0 30px 35px 0 rgba(50, 50, 50, 0.4);
+ transition: all 0.4s ease;
+ transform: translate3D(0, -1px, 0) scale(1.02);
+}
+
+.post-card-image-link {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ border-radius: 5px 5px 0 0;
+}
+
+.post-card-image {
+ width: auto;
+ height: 200px;
+ background: var(--lightgrey) no-repeat center center;
+ background-size: cover;
+}
+
+.post-card-content-link {
+ position: relative;
+ flex-grow: 1;
+ display: block;
+ padding: 25px 25px 0;
+ /* color: var(--darkgrey); */
+ color: #454545;
+}
+
+.post-card-content-link:hover {
+ text-decoration: none;
+}
+
+.post-card-tags {
+ display: block;
+ margin-bottom: 4px;
+ /* color: var(--midgrey); */
+ color: #434343;
+ font-size: 1.2rem;
+ line-height: 1.15em;
+ font-weight: bolder;
+ letter-spacing: 0.5px;
+ text-transform: uppercase;
+}
+
+.post-card-title {
+ margin-top: 0;
+}
+
+.post-card-content {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+.post-card-excerpt {
+ /* font-family: Georgia, serif; */
+}
+
+.post-card-meta {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ padding: 0 25px 25px;
+}
+
+.author-profile-image,
+.avatar-wrapper {
+ display: block;
+ width: 100%;
+ height: 100%;
+ background: color(var(--lightgrey) l(+10%));
+ border-radius: 100%;
+
+ object-fit: cover;
+}
+
+.post-card-meta .profile-image-wrapper,
+.post-card-meta .avatar-wrapper {
+ position: relative;
+}
+
+.author-list {
+ display: flex;
+ flex-wrap: wrap-reverse;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.author-list-item {
+ position: relative;
+ flex-shrink: 0;
+ margin: 0;
+ padding: 0;
+}
+
+.author-list-item:nth-child(1) {
+ z-index: 10;
+}
+.author-list-item:nth-child(2) {
+ z-index: 9;
+}
+.author-list-item:nth-child(3) {
+ z-index: 8;
+}
+.author-list-item:nth-child(4) {
+ z-index: 7;
+}
+.author-list-item:nth-child(5) {
+ z-index: 6;
+}
+.author-list-item:nth-child(6) {
+ z-index: 5;
+}
+.author-list-item:nth-child(7) {
+ z-index: 4;
+}
+.author-list-item:nth-child(8) {
+ z-index: 3;
+}
+.author-list-item:nth-child(9) {
+ z-index: 2;
+}
+.author-list-item:nth-child(10) {
+ z-index: 1;
+}
+
+.static-avatar {
+ display: block;
+ overflow: hidden;
+ margin: 0 -5px;
+ width: 34px;
+ height: 34px;
+ border: #e0e0e0 2px solid;
+ border-radius: 100%;
+}
+
+.moving-avatar {
+ display: block;
+ overflow: hidden;
+ margin: 0 -6px;
+ width: 56px;
+ height: 56px;
+ border: #fff 2px solid;
+ border-radius: 100%;
+ transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.7s;
+}
+
+@media (min-width: 800px) {
+ .author-list:hover .moving-avatar {
+ margin: 0;
+ transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
+ }
+}
+
+.author-name-tooltip {
+ position: absolute;
+ bottom: 105%;
+ z-index: 999;
+ display: block;
+ padding: 2px 8px;
+ color: white;
+ font-size: 1.2rem;
+ letter-spacing: 0.2px;
+ white-space: nowrap;
+ background: var(--darkgrey);
+ border-radius: 3px;
+ box-shadow: rgba(39, 44, 49, 0.08) 0 12px 26px,
+ rgba(39, 44, 49, 0.03) 1px 3px 8px;
+ opacity: 0;
+ transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
+ transform: translateY(6px);
+ pointer-events: none;
+}
+
+.author-list-item:hover .author-name-tooltip {
+ opacity: 1;
+ transform: translateY(0px);
+}
+
+@media (max-width: 650px) {
+ .author-name-tooltip {
+ display: none;
+ }
+}
+
+.reading-time {
+ flex-shrink: 0;
+ margin-left: 20px;
+ /* color: var(--midgrey); */
+ color: #a6aaa9;
+ font-size: 1.2rem;
+ line-height: 33px;
+ font-weight: bolder;
+ letter-spacing: 0.5px;
+ text-transform: uppercase;
+}
+
+/* Special Styling for home page grid (below):
+
+The first (most recent) post in the list is styled to be bigger than the others and take over the full width of the grid to give it more emphasis. Wrapped in a media query to make sure this only happens on large viewports / desktop-ish devices.
+
+ */
+
+@media (min-width: 795px) {
+ .home-template .post-feed .post-card:nth-child(6n + 1):not(.no-image) {
+ flex: 1 1 100%;
+ flex-direction: row;
+ }
+
+ .home-template
+ .post-feed
+ .post-card:nth-child(6n + 1):not(.no-image)
+ .post-card-image-link {
+ position: relative;
+ flex: 1 1 auto;
+ border-radius: 5px 0 0 5px;
+ }
+
+ .home-template
+ .post-feed
+ .post-card:nth-child(6n + 1):not(.no-image)
+ .post-card-image {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ }
+
+ .home-template
+ .post-feed
+ .post-card:nth-child(6n + 1):not(.no-image)
+ .post-card-content {
+ flex: 0 1 357px;
+ }
+
+ .home-template .post-feed .post-card:nth-child(6n + 1):not(.no-image) h2 {
+ font-size: 2.6rem;
+ }
+
+ .home-template .post-feed .post-card:nth-child(6n + 1):not(.no-image) p {
+ font-size: 1.8rem;
+ line-height: 1.55em;
+ }
+
+ .home-template
+ .post-feed
+ .post-card:nth-child(6n + 1):not(.no-image)
+ .post-card-content-link {
+ padding: 30px 40px 0;
+ }
+
+ .home-template
+ .post-feed
+ .post-card:nth-child(6n + 1):not(.no-image)
+ .post-card-meta {
+ padding: 0 40px 30px;
+ }
+}
+
+.home-template .site-header:after {
+ display: none;
+}
+
+/* Adjust some margins for smaller screens */
+@media (max-width: 650px) {
+ .post-feed {
+ padding-top: 5vw;
+ }
+ .post-card {
+ margin: 0 20px 5vw;
+ }
+}
+
+/* 7. Single Post
+/* ---------------------------------------------------------- */
+
+.post-template .site-main,
+.page-template .site-main {
+ padding-bottom: 4vw;
+ background: #f5f5f5;
+}
+
+.post-full {
+ position: relative;
+ z-index: 50;
+}
+/* ^ Required to make .post-full-content:before/after z-index stacking work */
+
+.post-full-header {
+ margin: 0 auto;
+ padding: 6vw 3vw 3vw;
+ max-width: 1040px;
+ text-align: center;
+}
+@media (max-width: 500px) {
+ .post-full-header {
+ padding: 14vw 3vw 10vw;
+ }
+}
+
+.post-full-meta {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: var(--midgrey);
+ font-size: 1.4rem;
+ font-weight: 600;
+ text-transform: uppercase;
+}
+
+.post-full-meta-date {
+ /* color: var(--blue); */
+ color: #e4af0a;
+}
+
+.post-full-title {
+ margin: 0;
+ /* color: color(var(--darkgrey) l(-5%)); */
+ color: #434343;
+ font-family: 'Didot', 'Baskerville', 'Playfair Display', serif;
+ font-weight: 500 !important;
+}
+
+.date-divider {
+ display: inline-block;
+ margin: 0 6px 1px;
+}
+
+.post-full-image {
+ margin: 0 -10vw -165px;
+ height: 800px;
+ background: var(--lightgrey) center center;
+ background-size: cover;
+ border-radius: 5px;
+}
+
+@media (max-width: 1170px) {
+ .post-full-image {
+ margin: 0 -4vw -100px;
+ height: 600px;
+ border-radius: 0;
+ }
+}
+
+@media (max-width: 800px) {
+ .post-full-image {
+ height: 400px;
+ }
+}
+
+.post-full-content {
+ position: relative;
+ margin: 0 auto;
+ padding: 70px 100px 0;
+ min-height: 230px;
+ /* font-family: Georgia, serif; */
+ font-size: 2.2rem;
+ line-height: 1.6em;
+ background: #f5f5f5;
+}
+
+@media (max-width: 1170px) {
+ .post-full-content {
+ padding: 5vw 7vw 0;
+ }
+}
+@media (max-width: 800px) {
+ .post-full-content {
+ font-size: 1.9rem;
+ }
+}
+
+.post-full-content:before {
+ content: '';
+ position: absolute;
+ top: 15px;
+ left: -5px;
+ z-index: -1;
+ display: block;
+ width: 20px;
+ height: 200px;
+ background: rgba(39, 44, 49, 0.15);
+ filter: blur(5px);
+ transform: rotate(-5deg);
+}
+
+.post-full-content:after {
+ content: '';
+ position: absolute;
+ top: 15px;
+ right: -5px;
+ z-index: -1;
+ display: block;
+ width: 20px;
+ height: 200px;
+ background: rgba(39, 44, 49, 0.15);
+ filter: blur(5px);
+ transform: rotate(5deg);
+}
+
+.no-image .post-full-content {
+ padding-top: 0;
+}
+
+.no-image .post-full-content:before,
+.no-image .post-full-content:after {
+ display: none;
+}
+
+.post-full-content h1,
+.post-full-content h2,
+.post-full-content h3,
+.post-full-content h4,
+.post-full-content h5,
+.post-full-content h6,
+.post-full-content p,
+.post-full-content ul,
+.post-full-content ol,
+.post-full-content dl,
+.post-full-content pre,
+.post-full-content blockquote,
+.post-full-comments,
+.footnotes {
+ min-width: 100%;
+}
+
+.post-full-content li {
+ word-break: break-word;
+}
+
+.post-full-content li p {
+ margin: 0;
+}
+
+.post-full-content a {
+ color: #000;
+ word-break: break-word;
+ /* box-shadow: var(--blue) 0 -1px 0 inset; */
+ box-shadow: #e4af0a 0 -1px 0 inset;
+}
+
+.post-full-content a:hover {
+ /* color: var(--blue); */
+ color: #e4af0a;
+ text-decoration: none;
+}
+
+.post-full-content strong,
+.post-full-content em {
+ /* color: color(var(--darkgrey) l(-5%)); */
+ color: #434343;
+}
+
+.post-full-content small {
+ display: inline-block;
+ line-height: 1.6em;
+}
+
+.post-full-content li:first-child {
+ margin-top: 0;
+}
+
+.post-full-content img,
+.post-full-content video {
+ display: block;
+ margin: 1.5em auto;
+ max-width: 1040px;
+ height: auto;
+}
+@media (max-width: 1040px) {
+ .post-full-content img,
+ .post-full-content video {
+ width: 100%;
+ }
+}
+
+/* Full bleed images (#full)
+Super neat trick courtesy of @JoelDrapper
+
+Usage (In Ghost edtior):
+
+
+
+*/
+.post-full-content img[src$='#full'] {
+ max-width: none;
+ width: 100vw;
+}
+
+/* Image captions
+
+Usage (In Ghost editor):
+
+
+<small>Your image caption</small>
+
+*/
+.post-full-content img + br + small {
+ display: block;
+ margin-top: -3em;
+ margin-bottom: 1.5em;
+ text-align: center;
+}
+
+/* Override third party iframe styles */
+.post-full-content iframe {
+ margin: 0 auto !important;
+}
+
+.post-full-content blockquote {
+ margin: 0 0 1.5em;
+ padding: 0 1.5em;
+ /* border-left: #3eb0ef 3px solid; */
+ border-left: #e4af0a 3px solid;
+}
+
+.post-full-content blockquote p {
+ margin: 0 0 1em 0;
+ color: inherit;
+ font-size: inherit;
+ line-height: inherit;
+ font-style: italic;
+}
+
+.post-full-content blockquote p:last-child {
+ margin-bottom: 0;
+}
+
+.post-full-content code {
+ padding: 0 5px 2px;
+ font-size: 0.8em;
+ line-height: 1em;
+ font-weight: 400 !important;
+ /* background: var(--whitegrey); */
+ /* border-radius: 3px; */
+}
+
+.post-full-content p code {
+ word-break: break-all;
+}
+
+.post-full-content pre {
+ overflow-x: auto;
+ margin: 1.5em 0 3em;
+ padding: 20px;
+ max-width: 100%;
+ border: color(var(--darkgrey) l(-10%)) 1px solid;
+ color: var(--whitegrey);
+ font-size: 1.4rem;
+ line-height: 1.5em;
+ background: color(var(--darkgrey) l(-3%));
+ border-radius: 5px;
+}
+
+.post-full-content pre code {
+ padding: 0;
+ font-size: inherit;
+ line-height: inherit;
+ background: transparent;
+}
+
+.post-full-content pre code :not(span) {
+ color: inherit;
+}
+
+.post-full-content .fluid-width-video-wrapper {
+ margin: 1.5em 0 3em;
+}
+
+.post-full-content hr {
+ margin: 4vw 0;
+}
+
+/* .post-full-content hr:after {
+ content: "";
+ position: absolute;
+ top: -15px;
+ left: 50%;
+ display: block;
+ margin-left: -10px;
+ width: 1px;
+ height: 30px;
+ background: color(var(--lightgrey) l(+10%));
+ box-shadow: #fff 0 0 0 5px;
+ transform: rotate(45deg);
+} */
+
+.post-full-content h1,
+.post-full-content h2,
+.post-full-content h3,
+.post-full-content h4,
+.post-full-content h5,
+.post-full-content h6 {
+ /* color: color(var(--darkgrey) l(-5%)); */
+ color: #a6aaa9;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+ Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+.post-full-content h1 {
+ margin: 0.5em 0 0.2em 0;
+ font-size: 4.6rem;
+ font-weight: 700;
+}
+@media (max-width: 500px) {
+ .post-full-content h1 {
+ font-size: 2.8rem;
+ }
+}
+
+.post-full-content h2 {
+ margin: 0.5em 0 0.2em 0;
+ font-size: 3.6rem;
+ font-weight: 700;
+}
+@media (max-width: 500px) {
+ .post-full-content h2 {
+ font-size: 2.6rem;
+ }
+}
+
+.post-full-content h3 {
+ margin: 0.5em 0 0.2em 0;
+ font-size: 2.8rem;
+ font-weight: 700;
+}
+@media (max-width: 500px) {
+ .post-full-content h3 {
+ font-size: 2.2rem;
+ }
+}
+
+.post-full-content h4 {
+ margin: 0.5em 0 0.2em 0;
+ font-size: 2.8rem;
+ font-weight: 700;
+}
+@media (max-width: 500px) {
+ .post-full-content h4 {
+ font-size: 2.2rem;
+ }
+}
+
+.post-full-content h5 {
+ display: block;
+ margin: 0.5em 0;
+ padding: 1em 0 1.5em;
+ border: 0;
+ color: var(--blue);
+ /* font-family: Georgia,serif; */
+ font-size: 3.2rem;
+ line-height: 1.35em;
+ text-align: center;
+}
+@media (min-width: 1180px) {
+ .post-full-content h5 {
+ max-width: 1060px;
+ width: 100vw;
+ }
+}
+@media (max-width: 500px) {
+ .post-full-content h5 {
+ padding: 0 0 0.5em;
+ font-size: 2.2rem;
+ }
+}
+
+.post-full-content h6 {
+ margin: 0.5em 0 0.2em 0;
+ font-size: 2.3rem;
+ font-weight: 700;
+}
+@media (max-width: 500px) {
+ .post-full-content h6 {
+ font-size: 2rem;
+ }
+}
+
+.footnotes-sep {
+ margin-bottom: 30px;
+}
+
+.footnotes {
+ font-size: 1.5rem;
+}
+
+.footnotes p {
+ margin: 0;
+}
+
+.footnote-backref {
+ color: var(--blue) !important;
+ font-size: 1.2rem;
+ font-weight: bold;
+ text-decoration: none !important;
+ box-shadow: none !important;
+}
+
+/* Some grouped styles for smaller viewports */
+@media (max-width: 500px) {
+ .post-full-meta {
+ font-size: 1.2rem;
+ line-height: 1.3em;
+ }
+ .post-full-title {
+ font-size: 2.9rem;
+ }
+ .post-full-image {
+ margin-bottom: 4vw;
+ height: 350px;
+ }
+ .post-full-content {
+ padding: 0;
+ }
+ .post-full-content:before,
+ .post-full-content:after {
+ display: none;
+ }
+}
+
+/* Tables */
+.post-full-content table {
+ display: inline-block;
+ overflow-x: auto;
+ margin: 0.5em 0 2.5em;
+ max-width: 100%;
+ width: auto;
+ border-spacing: 0;
+ border-collapse: collapse;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+ Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ font-size: 1.6rem;
+ white-space: nowrap;
+ vertical-align: top;
+}
+
+.post-full-content table {
+ -webkit-overflow-scrolling: touch;
+ background: radial-gradient(
+ ellipse at left,
+ rgba(0, 0, 0, 0.2) 0%,
+ rgba(0, 0, 0, 0) 75%
+ )
+ 0 center,
+ radial-gradient(
+ ellipse at right,
+ rgba(0, 0, 0, 0.2) 0%,
+ rgba(0, 0, 0, 0) 75%
+ )
+ 100% center;
+ background-attachment: scroll, scroll;
+ background-size: 10px 100%, 10px 100%;
+ background-repeat: no-repeat;
+}
+
+.post-full-content table td:first-child {
+ background-image: linear-gradient(
+ to right,
+ rgba(255, 255, 255, 1) 50%,
+ rgba(255, 255, 255, 0) 100%
+ );
+ background-size: 20px 100%;
+ background-repeat: no-repeat;
+}
+
+.post-full-content table td:last-child {
+ background-image: linear-gradient(
+ to left,
+ rgba(255, 255, 255, 1) 50%,
+ rgba(255, 255, 255, 0) 100%
+ );
+ background-position: 100% 0;
+ background-size: 20px 100%;
+ background-repeat: no-repeat;
+}
+
+.post-full-content table th {
+ color: var(--darkgrey);
+ font-size: 1.2rem;
+ font-weight: 700;
+ letter-spacing: 0.2px;
+ text-align: left;
+ text-transform: uppercase;
+ background-color: color(var(--whitegrey) l(+4%));
+}
+
+.post-full-content table th,
+.post-full-content table td {
+ padding: 6px 12px;
+ border: color(var(--whitegrey) l(-1%) s(-5%)) 1px solid;
+}
+
+/* 7.1. Subscribe Form
+/* ---------------------------------------------------------- */
+
+.subscribe-form {
+ margin: 1.5em 0;
+ padding: 6.5vw 7vw 7vw;
+ border: color(var(--whitegrey) l(+2%)) 1px solid;
+ text-align: center;
+ background: color(var(--whitegrey) l(+4%));
+ border-radius: 7px;
+}
+
+.subscribe-form-title {
+ margin: 0 0 3px 0;
+ padding: 0;
+ color: var(--darkgrey);
+ font-size: 3.5rem;
+ line-height: 1;
+ font-weight: 700;
+}
+
+.subscribe-form p {
+ margin-bottom: 1em;
+ color: var(--midgrey);
+ font-size: 2.2rem;
+ line-height: 1.55em;
+ letter-spacing: 0.2px;
+}
+
+.subscribe-form form {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 0 auto;
+ max-width: 420px;
+}
+
+.subscribe-form .form-group {
+ flex-grow: 1;
+}
+
+.subscribe-email {
+ display: block;
+ padding: 10px;
+ width: 100%;
+ border: color(var(--lightgrey) l(+7%)) 1px solid;
+ color: var(--midgrey);
+ font-size: 1.8rem;
+ line-height: 1em;
+ font-weight: normal;
+ user-select: text;
+ border-radius: 5px;
+ transition: border-color 0.15s linear;
+
+ -webkit-appearance: none;
+}
+
+.subscribe-email:focus {
+ outline: 0;
+ border-color: color(var(--lightgrey) l(-2%));
+}
+
+.subscribe-form button {
+ display: inline-block;
+ margin: 0 0 0 10px;
+ padding: 0 20px;
+ height: 41px;
+ outline: none;
+ color: #fff;
+ font-size: 1.5rem;
+ line-height: 37px;
+ font-weight: 400;
+ text-align: center;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
+ background: linear-gradient(
+ color(var(--blue) whiteness(+7%)),
+ color(var(--blue) lightness(-7%) saturation(-10%)) 60%,
+ color(var(--blue) lightness(-7%) saturation(-10%)) 90%,
+ color(var(--blue) lightness(-4%) saturation(-10%))
+ );
+ border-radius: 5px;
+ box-shadow: 0 0 0 1px inset rgba(0, 0, 0, 0.14);
+
+ -webkit-font-smoothing: subpixel-antialiased;
+}
+
+.subscribe-form button:active,
+.subscribe-form button:focus {
+ background: color(var(--blue) lightness(-9%) saturation(-10%));
+}
+
+@media (max-width: 650px) {
+ .subscribe-form-title {
+ font-size: 2.4rem;
+ }
+ .subscribe-form p {
+ font-size: 1.6rem;
+ }
+}
+
+@media (max-width: 500px) {
+ .subscribe-form form {
+ flex-direction: column;
+ }
+ .subscribe-form .form-group {
+ width: 100%;
+ }
+ .subscribe-form button {
+ margin: 10px 0 0 0;
+ width: 100%;
+ }
+}
+
+/* 7.2. Post Footer
+/* ---------------------------------------------------------- */
+
+.post-full-footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin: 0 auto;
+ padding: 3vw 0 6vw 0;
+ max-width: 840px;
+}
+
+/* 7.2.1 Single Author Byline
+/* ---------------------------------------------------------- */
+
+.author-card {
+ display: flex;
+}
+
+.author-card .author-profile-image,
+.author-card .avatar-wrapper {
+ margin-right: 15px;
+ width: 60px;
+ height: 60px;
+}
+
+.author-card-name {
+ margin: 8px 0 2px 0;
+ padding: 0;
+ font-size: 2rem;
+}
+
+.author-card-name a {
+ color: var(--darkgrey);
+ font-weight: 700;
+}
+
+.author-card-name a:hover {
+ text-decoration: none;
+}
+
+.author-card-content p {
+ margin: 0;
+ color: var(--midgrey);
+ line-height: 1.3em;
+}
+
+.post-full-footer-right {
+ flex-shrink: 0;
+ margin-left: 20px;
+}
+
+.author-card-button {
+ display: block;
+ padding: 9px 16px;
+ border: color(var(--midgrey) l(+20%)) 1px solid;
+ color: var(--midgrey);
+ font-size: 1.2rem;
+ line-height: 1;
+ font-weight: 500;
+ border-radius: 20px;
+ transition: all ease 0.2s;
+}
+
+.author-card-button:hover {
+ border-color: var(--blue);
+ color: var(--blue);
+ text-decoration: none;
+}
+
+/* 7.2.2 Multiple Author Byline
+/* ---------------------------------------------------------- */
+
+.post-full-authors {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 20px;
+ padding-top: 40px;
+ border-top: color(var(--lightgrey) l(+10%)) 1px solid;
+}
+
+.post-full-authors-content {
+ margin-bottom: 20px;
+}
+
+.post-full-authors-content p {
+ margin-bottom: 0;
+ color: var(--midgrey);
+ font-size: 1.4rem;
+ letter-spacing: 0.2px;
+ text-align: center;
+ text-transform: uppercase;
+}
+
+.post-full-authors-content a {
+ display: inline-block;
+ color: color(var(--darkgrey) l(+20%));
+ font-size: 1.4rem;
+ font-weight: 600;
+ text-transform: uppercase;
+}
+
+.post-full-footer .author-list {
+ justify-content: center;
+ padding: 10px 20px;
+}
+
+.author-card .author-profile-image,
+.author-card .avatar-wrapper {
+ position: relative;
+ margin-right: 15px;
+}
+
+.author-list-item .author-card {
+ position: absolute;
+ bottom: 130%;
+ left: 50%;
+ z-index: 300;
+ display: block;
+ margin-left: -160px;
+ width: 320px;
+ font-size: 1.4rem;
+ letter-spacing: 0.2px;
+ background: white;
+ border-radius: 6px;
+ box-shadow: rgba(39, 44, 49, 0.08) 0 12px 26px,
+ rgba(39, 44, 49, 0.03) 1px 3px 8px;
+ opacity: 0;
+ transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
+ transform: scale(0.98) translateY(15px);
+ pointer-events: none;
+}
+
+.author-list-item .author-card:before {
+ content: '';
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ display: block;
+ margin-left: -12px;
+ width: 0;
+ height: 0;
+ border-top: 12px solid #fff;
+ border-right: 12px solid transparent;
+ border-left: 12px solid transparent;
+}
+
+.author-list-item .author-card.hovered {
+ opacity: 1;
+ transform: scale(1) translateY(0px);
+ pointer-events: auto;
+}
+
+.author-card .basic-info {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 30px 20px 20px 20px;
+ color: #fff;
+ background: var(--darkgrey);
+ border-radius: 6px 6px 0 0;
+}
+
+.author-card .basic-info h2 {
+ margin: 1em 0 0.5em;
+}
+
+.author-card .bio {
+ padding: 20px 20px 0;
+}
+
+@media (max-width: 650px) {
+ .author-list-item .author-card {
+ display: none;
+ }
+}
+
+.basic-info .author-profile-image {
+ margin: 0;
+ width: 88px;
+ height: 88px;
+ border: none;
+}
+
+.basic-info .avatar-wrapper {
+ position: relative;
+ margin: 0;
+ width: 88px;
+ height: 88px;
+ border: none;
+ background: rgba(229, 239, 245, 0.1);
+}
+
+.basic-info .avatar-wrapper svg {
+ margin: 0;
+ width: 88px;
+ height: 88px;
+ opacity: 0.15;
+}
+
+/* 7.3. Comments
+/* ---------------------------------------------------------- */
+
+.post-full-comments {
+ margin: 0 auto;
+ max-width: 840px;
+}
+
+/* 7.4. Related posts
+/* ---------------------------------------------------------- */
+
+.read-next-feed {
+ display: flex;
+ flex-wrap: wrap;
+ margin: 0 -20px;
+ padding: 40px 0 0 0;
+}
+
+.read-next-card {
+ position: relative;
+ flex: 1 1 300px;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ margin: 0 20px 40px;
+ padding: 25px;
+ color: #fff;
+ background: var(--darkgrey) center center;
+ background-size: cover;
+ border-radius: 5px;
+ box-shadow: rgba(39, 44, 49, 0.06) 8px 14px 38px,
+ rgba(39, 44, 49, 0.03) 1px 3px 8px;
+}
+
+.read-next-card:before {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: block;
+ background: linear-gradient(
+ 135deg,
+ rgba(0, 40, 60, 0.8) 0%,
+ rgba(0, 20, 40, 0.7) 100%
+ );
+ border-radius: 5px;
+
+ backdrop-filter: blur(2px);
+}
+
+.read-next-card-header {
+ position: relative;
+ z-index: 50;
+ padding-top: 20px;
+ text-align: center;
+}
+
+.read-next-card-header-sitetitle {
+ display: block;
+ font-size: 1.3rem;
+ line-height: 1.3em;
+ opacity: 0.8;
+}
+
+.read-next-card-header-title {
+ margin: 0;
+ padding: 0 20px;
+ color: #fff;
+ font-size: 3rem;
+ line-height: 1.2em;
+ letter-spacing: 1px;
+}
+
+.read-next-card-header-title a {
+ color: #fff;
+ font-weight: 300;
+ text-decoration: none;
+}
+
+.read-next-card-header-title a:hover {
+ text-decoration: none;
+}
+
+.read-next-divider {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ height: 80px;
+}
+
+.read-next-divider svg {
+ width: 40px;
+ fill: transparent;
+ stroke: #fff;
+
+ stroke-width: 0.5px;
+ stroke-opacity: 0.65;
+}
+
+.read-next-card-content {
+ position: relative;
+ z-index: 50;
+ flex-grow: 1;
+ display: flex;
+ font-size: 1.7rem;
+}
+
+.read-next-card-content ul {
+ display: flex;
+ flex-direction: column;
+ margin: 0 auto;
+ padding: 0;
+ text-align: center;
+ list-style: none;
+}
+
+.read-next-card-content li {
+ margin: 0;
+ padding: 0;
+ font-size: 1.6rem;
+ line-height: 1.25em;
+ font-weight: 200;
+ letter-spacing: -0.5px;
+}
+
+.read-next-card-content li a {
+ display: block;
+ padding: 20px 0;
+ border-bottom: rgba(255, 255, 255, 0.3) 1px solid;
+ color: #fff;
+ font-weight: 500;
+ vertical-align: top;
+ transition: opacity 0.3s ease;
+}
+
+.read-next-card-content li:first-of-type a {
+ padding-top: 10px;
+}
+
+.read-next-card-content li a:hover {
+ opacity: 1;
+}
+
+.read-next-card-footer {
+ position: relative;
+ margin: 15px 0 3px 0;
+ text-align: center;
+}
+
+.read-next-card-footer a {
+ color: #fff;
+}
+
+/* 7.5. Floating Header
+/* ---------------------------------------------------------- */
+
+.floating-header {
+ visibility: hidden;
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: 1000;
+ display: flex;
+ align-items: center;
+ height: 60px;
+ border-bottom: rgba(0, 0, 0, 0.06) 1px solid;
+ /* background: rgba(255,255,255,0.95); */
+ background: rgba(247, 247, 247, 0.95);
+ transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
+ transform: translate3d(0, -120%, 0);
+}
+
+.floating-active {
+ visibility: visible;
+ transition: all 500ms cubic-bezier(0.22, 1, 0.27, 1);
+ transform: translate3d(0, 0, 0);
+}
+
+.floating-header-logo {
+ overflow: hidden;
+ margin: 0 0 0 20px;
+ font-size: 1.6rem;
+ line-height: 1em;
+ letter-spacing: -1px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.floating-header-logo a {
+ display: flex;
+ align-items: center;
+ color: var(--darkgrey);
+ line-height: 1.1em;
+ font-weight: 700;
+}
+
+.floating-header-logo a:hover {
+ text-decoration: none;
+}
+
+.floating-header-logo img {
+ margin: 0 10px 0 0;
+ max-height: 20px;
+}
+
+.floating-header-divider {
+ margin: 0 5px;
+ line-height: 1em;
+}
+
+.floating-header-title {
+ flex: 1;
+ overflow: hidden;
+ margin: 0;
+ color: #2e2e2e;
+ font-size: 1.6rem;
+ line-height: 1.3em;
+ font-weight: bold;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.floating-header-share {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ padding-left: 2%;
+ font-size: 1.3rem;
+ line-height: 1;
+}
+
+.floating-header-share a {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.floating-header-share svg {
+ width: auto;
+ height: 16px;
+ fill: #fff;
+}
+
+.floating-header-share-label {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ margin-right: 10px;
+ color: rgba(0, 0, 0, 0.7);
+ font-weight: 500;
+}
+
+.floating-header-share-label svg {
+ margin: 0 5px 0 10px;
+ width: 18px;
+ height: 18px;
+ stroke: rgba(0, 0, 0, 0.7);
+ transform: rotate(90deg);
+}
+
+.floating-header-share-tw,
+.floating-header-share-fb {
+ display: block;
+ align-items: center;
+ width: 60px;
+ height: 60px;
+ color: #fff;
+ line-height: 48px;
+ text-align: center;
+ transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.floating-header-share-tw {
+ background: #33b1ff;
+}
+
+.floating-header-share-fb {
+ background: #005e99;
+}
+
+.progress {
+ position: absolute;
+ right: 0;
+ bottom: -1px;
+ left: 0;
+ width: 100%;
+ height: 2px;
+ border: none;
+ /* color: var(--blue); */
+ color: #e4af0a;
+ background: transparent;
+
+ appearance: none;
+}
+
+.progress::-webkit-progress-bar {
+ background-color: transparent;
+}
+
+.progress::-webkit-progress-value {
+ /* background-color: var(--blue); */
+ background-color: #e4af0a;
+}
+
+.progress::-moz-progress-bar {
+ /* background-color: var(--blue); */
+ background-color: #e4af0a;
+}
+
+.progress-container {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: block;
+ width: 100%;
+ height: 2px;
+ background-color: transparent;
+}
+
+.progress-bar {
+ display: block;
+ width: 50%;
+ height: inherit;
+ /* background-color: var(--blue); */
+ background-color: #e4af0a;
+}
+
+@media (max-width: 900px) {
+ .floating-header {
+ height: 40px;
+ }
+ .floating-header-title,
+ .floating-header-logo {
+ font-size: 1.5rem;
+ }
+ .floating-header-share-tw,
+ .floating-header-share-fb {
+ width: 40px;
+ height: 40px;
+ line-height: 38px;
+ }
+}
+
+@media (max-width: 800px) {
+ .floating-header-logo {
+ margin-left: 10px;
+ }
+ .floating-header-logo a {
+ color: #2e2e2e;
+ }
+ .floating-header-title,
+ .floating-header-divider {
+ visibility: hidden;
+ }
+}
+
+@media (max-width: 450px) {
+ .floating-header-share-label {
+ display: none;
+ }
+}
+
+/* 7.6. Koenig Styles
+/* ---------------------------------------------------------- */
+
+.post-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ max-width: 920px;
+}
+
+.post-template .post-content > p:first-child {
+ font-size: 1.25em;
+ line-height: 1.5em;
+}
+
+.post-full-content .kg-image {
+ max-width: 100%;
+}
+
+/* Preventing full-width image overlap with post image. */
+.post-full-image + .post-full-content .kg-content *:first-child .kg-image {
+ width: 100%;
+}
+
+.post-full-content .kg-width-wide .kg-image {
+ max-width: 1040px;
+}
+
+.post-full-content .kg-width-full .kg-image {
+ max-width: 100vw;
+}
+
+.post-full-content figure {
+ margin: 1.5em 0 3em;
+}
+
+.post-full-content figure img {
+ margin: 0;
+}
+
+.post-full-content figcaption {
+ margin: 1em 0 0;
+ font-size: 80%;
+ line-height: 1.6em;
+ text-align: center;
+ color: #a6aaa9;
+}
+
+.kg-width-full figcaption {
+ padding: 0 1.5em;
+}
+
+.kg-embed-card {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-width: 100%;
+}
+
+.kg-embed-card .fluid-width-video-wrapper {
+ margin: 0;
+}
+
+@media (max-width: 1040px) {
+ .post-full-content .kg-width-full .kg-image {
+ width: 100vw;
+ }
+}
+
+.kg-gallery-container {
+ display: flex;
+ flex-direction: column;
+ max-width: 1040px;
+ width: 100vw;
+}
+
+.kg-gallery-row {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+}
+
+.kg-gallery-image img {
+ display: block;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.kg-gallery-row:not(:first-of-type) {
+ margin: 0.75em 0 0 0;
+}
+
+.kg-gallery-image:not(:first-of-type) {
+ margin: 0 0 0 0.75em;
+}
+
+.kg-gallery-card + .kg-image-card.kg-width-wide,
+.kg-gallery-card + .kg-gallery-card,
+.kg-image-card.kg-width-wide + .kg-gallery-card,
+.kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
+ margin: -2.25em 0 3em;
+}
+
+/* 8. Author Template
+/* ---------------------------------------------------------- */
+
+.site-header-content .author-profile-image {
+ z-index: 10;
+ flex-shrink: 0;
+ margin: 0 0 20px 0;
+ width: 100px;
+ height: 100px;
+ box-shadow: rgba(255, 255, 255, 0.1) 0 0 0 6px;
+}
+
+.site-header-content .author-bio {
+ z-index: 10;
+ flex-shrink: 0;
+ margin: 5px 0 10px 0;
+ max-width: 600px;
+ font-size: 2rem;
+ line-height: 1.3em;
+ font-weight: 300;
+ letter-spacing: 0.5px;
+ opacity: 0.8;
+}
+
+.site-header-content .author-meta {
+ z-index: 10;
+ flex-shrink: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 0 0 10px 0;
+ /* font-family: Georgia, serif; */
+ font-style: italic;
+}
+
+.site-header-content .author-location svg {
+ height: 1.9rem;
+ stroke: #fff;
+}
+
+.site-header-content .bull {
+ display: inline-block;
+ margin: 0 12px;
+ opacity: 0.5;
+}
+
+.site-header-content .social-link:first-of-type {
+ padding-left: 4px;
+}
+
+@media (max-width: 500px) {
+ .site-header-content .author-bio {
+ font-size: 1.8rem;
+ line-height: 1.15em;
+ letter-spacing: 0;
+ }
+ .author-location,
+ .author-stats {
+ display: none;
+ }
+}
+
+/* 9. Error Template
+/* ---------------------------------------------------------- */
+
+.error-template .site-main {
+ padding: 7vw 4vw;
+}
+
+.site-nav-center {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+}
+
+.site-nav-center .site-nav-logo {
+ margin-right: 0;
+}
+
+.error-message {
+ text-align: center;
+}
+
+.error-code {
+ margin: 0;
+ font-size: 12vw;
+ line-height: 1em;
+ letter-spacing: -5px;
+ opacity: 0.3;
+}
+
+.error-description {
+ margin: 0;
+ color: var(--midgrey);
+ font-size: 3rem;
+ line-height: 1.3em;
+ font-weight: 400;
+}
+
+@media (max-width: 800px) {
+ .error-description {
+ margin: 5px 0 0 0;
+ font-size: 1.8rem;
+ }
+}
+
+.error-link {
+ display: inline-block;
+ margin-top: 5px;
+}
+
+.error-template .post-feed {
+ padding-top: 0;
+}
+
+/* 10. Subscribe Overlay
+/* ---------------------------------------------------------- */
+
+.subscribe-overlay {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 9000;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: rgba(0, 25, 40, 0.97);
+ opacity: 0;
+ transition: opacity 200ms ease-in;
+ pointer-events: none;
+
+ backdrop-filter: blur(3px);
+}
+
+.subscribe-overlay:target {
+ opacity: 1;
+ pointer-events: auto;
+}
+
+.subscribe-overlay-content {
+ position: relative;
+ z-index: 9999;
+ margin: 0 0 5vw 0;
+ padding: 4vw;
+ color: #fff;
+ text-align: center;
+}
+
+.subscribe-overlay-logo {
+ position: fixed;
+ top: 23px;
+ left: 30px;
+ height: 30px;
+}
+
+.subscribe-overlay-title {
+ display: inline-block;
+ margin: 0 0 10px 0;
+ font-size: 6rem;
+ line-height: 1.15em;
+}
+
+.subscribe-overlay-description {
+ margin: 0 auto 50px;
+ max-width: 650px;
+ /* font-family: Georgia, serif; */
+ font-size: 3rem;
+ line-height: 1.3em;
+ font-weight: 300;
+ opacity: 0.8;
+}
+
+.subscribe-overlay form {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 0 auto;
+ max-width: 500px;
+}
+
+.subscribe-overlay .form-group {
+ flex-grow: 1;
+}
+
+.subscribe-overlay .subscribe-email {
+ display: block;
+ padding: 14px 20px;
+ width: 100%;
+ border: none;
+ color: var(--midgrey);
+ font-size: 2rem;
+ line-height: 1em;
+ font-weight: normal;
+ letter-spacing: 0.5px;
+ user-select: text;
+ border-radius: 8px;
+ transition: border-color 0.15s linear;
+
+ -webkit-appearance: none;
+}
+
+.subscribe-email:focus {
+ outline: 0;
+ border-color: color(var(--lightgrey) l(-2%));
+}
+
+.subscribe-overlay button {
+ display: inline-block;
+ margin: 0 0 0 15px;
+ padding: 0 25px;
+ height: 52px;
+ outline: none;
+ color: #fff;
+ font-size: 1.7rem;
+ line-height: 37px;
+ font-weight: 400;
+ text-align: center;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
+ background: linear-gradient(
+ color(var(--blue) whiteness(+7%)),
+ color(var(--blue) lightness(-7%) saturation(-10%)) 60%,
+ color(var(--blue) lightness(-7%) saturation(-10%)) 90%,
+ color(var(--blue) lightness(-4%) saturation(-10%))
+ );
+ border-radius: 8px;
+ box-shadow: 0 0 0 1px inset rgba(0, 0, 0, 0.14);
+
+ -webkit-font-smoothing: subpixel-antialiased;
+}
+
+.subscribe-overlay button:active,
+.subscribe-overlay button:focus {
+ background: color(var(--blue) lightness(-9%) saturation(-10%));
+}
+
+.subscribe-overlay-close {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: block;
+}
+
+.subscribe-overlay-close:before {
+ content: '';
+ position: absolute;
+ top: 40px;
+ right: 25px;
+ display: block;
+ width: 30px;
+ height: 2px;
+ background: #fff;
+ opacity: 0.8;
+ transform: rotate(45deg);
+}
+
+.subscribe-overlay-close:after {
+ content: '';
+ position: absolute;
+ top: 40px;
+ right: 25px;
+ display: block;
+ width: 30px;
+ height: 2px;
+ background: #fff;
+ opacity: 0.8;
+ transform: rotate(-45deg);
+}
+
+.subscribe-overlay-close:hover {
+ cursor: default;
+}
+
+/* 11. Site Footer
+/* ---------------------------------------------------------- */
+
+.site-footer {
+ position: relative;
+ padding-top: 20px;
+ padding-bottom: 60px;
+ color: #fff;
+ background: color(var(--darkgrey) l(-15%));
+}
+
+.site-footer-content {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ color: rgba(255, 255, 255, 0.7);
+ font-size: 1.3rem;
+}
+
+.site-footer-content a {
+ color: rgba(255, 255, 255, 0.7);
+}
+
+.site-footer-content a:hover {
+ color: rgba(255, 255, 255, 1);
+ text-decoration: none;
+}
+
+.site-footer-nav {
+ display: flex;
+}
+
+.site-footer-nav a {
+ position: relative;
+ margin-left: 20px;
+}
+
+.site-footer-nav a:before {
+ content: '';
+ position: absolute;
+ top: 11px;
+ left: -11px;
+ display: block;
+ width: 2px;
+ height: 2px;
+ background: #fff;
+ border-radius: 100%;
+}
+
+.site-footer-nav a:first-of-type:before {
+ display: none;
+}
+
+@media (max-width: 650px) {
+ .site-footer-content {
+ flex-direction: column;
+ }
+ .site-footer-nav a:first-child {
+ margin-left: 0;
+ }
+}
diff --git a/src/components/header.js b/src/components/header.js
@@ -3,18 +3,13 @@ import PropTypes from 'prop-types';
import React from 'react';
const Header = ({ siteTitle, description }) => (
- <header
- style={{
- background: `#F0DB4F`,
- // boxShadow: `0 0 8px #323330`,
- marginBottom: `1.45rem`,
- }}
- >
+ <header style={{ background: `#F0DB4F`, marginBottom: `1.45rem` }}>
<div
style={{
margin: `0 auto`,
maxWidth: 960,
- padding: `1.45rem 1.0875rem`,
+ // padding: `1.45rem 1.0875rem`,
+ padding: `1.45rem 0`,
}}
>
<h1 style={{ margin: 0 }}>
diff --git a/src/components/indexStyle.js b/src/components/indexStyle.js
@@ -1,143 +0,0 @@
-const authorList = {
- display: `flex`,
- flexWrap: `wrap-reverse`,
- listStyle: `none`,
- margin: 0,
- padding: 0,
-};
-
-const authorListItem = {
- flexShrink: 0,
- margin: 0,
- padding: 0,
- position: `relative`,
-};
-
-const avatarWrapper = {
- background: `#e3e9ed`,
- borderRadius: `100%`,
- display: `block`,
- height: `100%`,
- objectFit: `cover`,
- width: `100%`,
-};
-
-const Excerpt = {
- fontSize: `18px`,
- fontStretch: `100%`,
- lineHeight: `28px`,
- marginBlockEnd: `27px`,
- marginBottom: `22.5px`,
-};
-
-const postCard = {
- background: `#f7f7f7 center center`,
- backgroundSize: `cover`,
- borderRadius: `10px`,
- boxShadow: `0 20px 25px 0 rgba(50, 50, 50, 0.2)`,
- display: `flex`,
- flex: `1 1 300px`,
- flexDirection: `column`,
- margin: `0 20px 40px`,
- minHeight: `300px`,
- overflow: `hidden`,
-};
-
-const postCardContent = {
- display: `flex`,
- flexDirection: `column`,
- flexGrow: 1,
- justifyContent: `space-between`,
-};
-
-const postCardContentLink = {
- color: `#454545`,
- display: `block`,
- flexGrow: 1,
- padding: `25px 25px 0`,
- position: `relative`,
- textDecoration: `none`,
-};
-
-const postCardImage = {
- background: `#c5d2d9 no-repeat 50%`,
- backgroundSize: `cover`,
- height: `200px`,
- width: `auto`,
-};
-
-const postCardImageLink = {
- borderRadius: `5px 5px 0 0`,
- display: `block`,
- overflow: `hidden`,
- position: `relative`,
-};
-
-const postCardMeta = {
- alignItems: `flex-end`,
- display: `flex`,
- justifyContent: `space-between`,
- padding: `0 25px 25px`,
-};
-
-const postCardTags = {
- color: `#434343`,
- display: `block`,
- fontSize: `12px`,
- fontWeight: `bolder`,
- letterSpacing: `0.5px`,
- lineHeight: `14px`,
- marginBottom: `4px`,
- textTransform: `uppercase`,
-};
-
-const postCardTitle = {
- marginTop: 0,
-};
-
-const postFeed = {
- display: `flex`,
- flexWrap: `wrap`,
- margin: `0 -20px`,
- padding: `40px 0 0 0`,
- position: `relative`,
-};
-
-const readingTime = {
- color: `#a6aaa9`,
- flexShrink: 0,
- fontSize: `12px`,
- fontWeight: `bolder`,
- letterSpacing: `0.5px`,
- lineHeight: `33px`,
- marginLeft: `20px`,
- textTransform: `uppercase`,
-};
-
-const staticAvatar = {
- border: `#e0e0e0 2px solid`,
- borderRadius: `100%`,
- display: `block`,
- height: `34px`,
- margin: `0 -5px`,
- overflow: `hidden`,
- width: `34px`,
-};
-
-module.exports = {
- authorList,
- authorListItem,
- avatarWrapper,
- Excerpt,
- postCard,
- postCardContent,
- postCardContentLink,
- postCardImage,
- postCardImageLink,
- postCardMeta,
- postCardTags,
- postCardTitle,
- postFeed,
- readingTime,
- staticAvatar,
-};
diff --git a/src/components/layout.js b/src/components/layout.js
@@ -17,6 +17,7 @@ const Layout = ({ children }) => {
query SiteTitleQuery {
site {
siteMetadata {
+ author
description
name
title
@@ -37,16 +38,18 @@ const Layout = ({ children }) => {
/>
<div
style={{
- margin: `0 auto`,
- maxWidth: 960,
- minHeight: `80vh`,
- padding: `0px 1.0875rem 1.45rem`,
- paddingTop: 0,
+ ...siteMain,
+ ...outer,
+ minHeight: `75vh`,
}}
>
- <main>{children}</main>
+ <main style={inner}>{children}</main>
</div>
- <Footer name={site.siteMetadata.name} />
+ <Footer
+ author={site.siteMetadata.author}
+ name={site.siteMetadata.name}
+ style={{ ...siteFooter, ...outer }}
+ />
</div>
);
};
@@ -56,3 +59,26 @@ Layout.propTypes = {
};
export default Layout;
+
+const inner = {
+ margin: `0 auto`,
+ maxWidth: `960px`,
+ width: `100%`,
+};
+
+const outer = {
+ padding: `0 4vw`,
+ position: `relative`,
+};
+
+const siteFooter = {
+ color: `white`,
+ paddingBottom: `60px`,
+ paddingTop: `20px`,
+ position: `relative`,
+};
+
+const siteMain = {
+ flexGrow: `1`,
+ zIndex: `100`,
+};
diff --git a/src/pages/08-08-2019-zealots-against-zomato/index.md b/src/pages/08-08-2019-zealots-against-zomato/index.md
@@ -1,17 +0,0 @@
----
-path: '/zealots-against-zomato'
-date: '08-08-2019'
-title: 'Zealots against Zomato'
-tags: ['religion', 'food', 'discrimination', 'zomato', 'faith']
-cover: 'https://images.unsplash.com/photo-1526367790999-0150786686a2'
----
-
-I can't justify someone's request to not have a particular person as the SPL because she is of a particular religion. Judging here on the basis of the faith they hold is not the right criterion because that will have no effect on what services you expect from them. Just like letting someone not be a doctor because they are fat, or not hiring a driver who wakes up in the middle of the night, strap up for a while and goes back to sleep.
-
-Ordering food home and having a problem with the delivery boy because of his faith makes no sense, just like not wanting to go to an office where there is no picture of God put up.
-
-But if I have to guess why he might have done that, maybe ignorance, he probably thought that the driver would chant a prayer for him and package to be delivered safely and that way his food is getting effected in a way that he did not expect.
-
-Or maybe he dislikes the practices that a general Muslim would do and thus, was not ready to accept services from them, but maybe ignore or not make an effort to know if the other services that he had been getting are from a Muslim.
-
-But none of the guesses that I made are valid enough for him to put up a request like that.
diff --git a/src/pages/bar/index.md b/src/pages/bar/index.md
@@ -1,9 +0,0 @@
----
-path: '/bar'
-date: '07-07-2019'
-title: 'bar bar bar'
-tags: ['religion', 'bar', 'foo']
-cover: 'https://images.unsplash.com/photo-1495298885678-3158c444c6b5'
----
-
-bar bar bar
diff --git a/src/pages/foo/index.md b/src/pages/foo/index.md
@@ -1,9 +0,0 @@
----
-path: '/foo'
-date: '08-07-2019'
-title: 'foo foo foo'
-tags: ['religion', 'food', 'zomato', 'foo']
-cover: 'https://images.unsplash.com/photo-1520520544506-d06b4b9dfd93'
----
-
-foo foo foo
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -2,25 +2,11 @@ import React from 'react';
import Layout from '../components/layout';
import SEO from '../components/seo';
-import {
- authorList,
- authorListItem,
- avatarWrapper,
- Excerpt,
- postCard,
- postCardContent,
- postCardContentLink,
- postCardImage,
- postCardImageLink,
- postCardMeta,
- postCardTags,
- postCardTitle,
- postFeed,
- readingTime,
- staticAvatar,
-} from '../components/indexStyle';
import { graphql, Link } from 'gatsby';
+import '../components/hanabi.global.css';
+import '../components/hanabi.screen.css';
+
export const query = graphql`
query BlogPostList {
site {
@@ -51,52 +37,61 @@ export const query = graphql`
`;
export default function IndexPage(props) {
- const { edges, nodes } = props.data.allMarkdownRemark;
+ const edges = props.data.allMarkdownRemark.edges;
+ const nodes = props.data.allMarkdownRemark.nodes;
+ for (let index in edges) edges[index] = { ...edges[index], ...nodes[index] };
const { author: twitterHandle, name, photo } = props.data.site.siteMetadata;
return (
<Layout>
<SEO title="Home" />
- <div style={postFeed}>
+ <div className={'post-feed'}>
{edges.map((edge, index) => {
const { frontmatter } = edge.node;
const publishDate = new Date(frontmatter.date).toDateString();
const cover = frontmatter.cover;
return (
- <article style={postCard} key={frontmatter.path}>
- <Link to={frontmatter.path} style={postCardImageLink}>
+ <article className={'post-card'} key={frontmatter.path}>
+ <Link to={frontmatter.path} className={'post-card-image-link'}>
<div
+ className={'post-card-image'}
style={{
- ...postCardImage,
backgroundImage: `url("${cover}")`,
}}
></div>
</Link>
- <div style={postCardContent}>
- <Link to={frontmatter.path} style={postCardContentLink}>
+ <div className={'post-card-content'}>
+ <Link
+ to={frontmatter.path}
+ className={'post-card-content-link'}
+ >
<header className="postCardHeader">
- <span style={postCardTags}>
+ <span className={'post-card-tags'}>
{frontmatter.tags ? frontmatter.tags[0] + ` • ` : ``}{' '}
{publishDate}
</span>
- <h2 style={postCardTitle}>{frontmatter.title}</h2>
+ <h2 className={'post-card-title'}>{frontmatter.title}</h2>
</header>
<section className="postCardExcerpt">
- <p style={Excerpt}>{nodes[index].excerpt}</p>
+ <p className={'excerpt'}>{edges[index].excerpt}</p>
</section>
</Link>
- <footer style={postCardMeta}>
- <ul style={authorList}>
- <li style={authorListItem}>
+ <footer className={'post-card-meta'}>
+ <ul className={'author-list'}>
+ <li className={'author-list-item'}>
<a
href={`https://www.twitter.com/${twitterHandle}`}
- style={staticAvatar}
+ className={'static-avatar'}
>
- <img src={photo} style={avatarWrapper} alt={name} />
+ <img
+ src={photo}
+ className={'avatar-wrapper'}
+ alt={name}
+ />
</a>
</li>
</ul>
- <span style={readingTime}>
- {nodes[index].timeToRead} min read
+ <span className={'reading-time'}>
+ {edges[index].timeToRead} min read
</span>
</footer>
</div>
