Skip to content

Commit

Permalink
changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@chandrikadeb7
chandrikadeb7 committed Apr 14, 2024
1 parent e4c60b5 commit aed60d9
Show file tree
Hide file tree
Showing 2 changed files with 161 additions and 152 deletions.
276 changes: 147 additions & 129 deletions src/pages/pensieve/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
import React from 'react';
import { graphql, Link } from 'gatsby';
import { Helmet } from 'react-helmet';
import kebabCase from 'lodash/kebabCase';
import PropTypes from 'prop-types';
import { Layout } from '@components';
import { IconZap } from '@components/icons';
import { Helmet } from 'react-helmet';
import styled from 'styled-components';
import { theme, mixins, media, Main } from '@styles';
const { colors, fontSizes, fonts } = theme;
import { Layout } from '@components';
import { IconBookmark } from '@components/icons';

const StyledMainContainer = styled(Main)`
const StyledMainContainer = styled.main`
& > header {
text-align: center;
margin-bottom: 100px;
text-align: center;
a {
&:hover,
Expand All @@ -25,94 +23,121 @@ const StyledMainContainer = styled(Main)`
}
footer {
${mixins.flexBetween};
margin-top: 20px;
${({ theme }) => theme.mixins.flexBetween};
width: 100%;
margin-top: 20px;
}
`;
const StyledGrid = styled.div`
const StyledGrid = styled.ul`
${({ theme }) => theme.mixins.resetList};
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 15px;
margin-top: 50px;
.posts {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 15px;
position: relative;
${media.desktop`grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));`};
}
`;
const StyledPostInner = styled.div`
${mixins.boxShadow};
${mixins.flexBetween};
flex-direction: column;
align-items: flex-start;
position: relative;
padding: 2rem 1.75rem;
height: 100%;
border-radius: ${theme.borderRadius};
transition: ${theme.transition};
background-color: ${colors.lightNavy};
header,
a {
width: 100%;
@media (max-width: 1080px) {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
`;
const StyledPost = styled.div`
transition: ${theme.transition};
const StyledPost = styled.li`
transition: var(--transition);
cursor: default;
&:hover,
&:focus {
outline: 0;
${StyledPostInner} {
transform: translateY(-5px);
@media (prefers-reduced-motion: no-preference) {
&:hover,
&:focus-within {
.post__inner {
transform: translateY(-7px);
}
}
}
`;
const StyledPostHeader = styled.div`
${mixins.flexBetween};
margin-bottom: 30px;
`;
const StyledFolder = styled.div`
color: ${colors.green};
svg {
width: 40px;
height: 40px;
a {
position: relative;
z-index: 1;
}
`;
const StyledPostName = styled.h5`
margin: 0 0 10px;
font-size: ${fontSizes.xxl};
color: ${colors.lightestSlate};
`;
const StyledPostDescription = styled.div`
font-size: 17px;
color: ${colors.lightSlate};
`;
const StyledDate = styled.span`
text-transform: uppercase;
font-family: ${fonts.SFMono};
font-size: ${fontSizes.xs};
color: ${colors.lightSlate};
`;
const StyledTags = styled.ul`
display: flex;
align-items: flex-end;
flex-wrap: wrap;
padding: 0;
margin: 0;
list-style: none;
li {
font-family: ${fonts.SFMono};
font-size: ${fontSizes.xs};
color: ${colors.green};
line-height: 1.75;
margin-right: 15px;
&:last-of-type {
margin-right: 0;
.post__inner {
${({ theme }) => theme.mixins.boxShadow};
${({ theme }) => theme.mixins.flexBetween};
flex-direction: column;
align-items: flex-start;
position: relative;
height: 100%;
padding: 2rem 1.75rem;
border-radius: var(--border-radius);
transition: var(--transition);
background-color: var(--light-navy);
header,
a {
width: 100%;
}
}
.post__icon {
${({ theme }) => theme.mixins.flexBetween};
color: var(--green);
margin-bottom: 30px;
margin-left: -5px;
svg {
width: 40px;
height: 40px;
}
}
.post__title {
margin: 0 0 10px;
color: var(--lightest-slate);
font-size: var(--fz-xxl);
a {
${mixins.inlineLink};
position: static;
&:before {
content: '';
display: block;
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
}
}
.post__desc {
color: var(--light-slate);
font-size: 17px;
}
.post__date {
color: var(--light-slate);
font-family: var(--font-mono);
font-size: var(--fz-xxs);
text-transform: uppercase;
}
ul.post__tags {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
padding: 0;
margin: 0;
list-style: none;
li {
color: var(--green);
font-family: var(--font-mono);
font-size: var(--fz-xxs);
line-height: 1.75;
&:not(:last-of-type) {
margin-right: 15px;
}
}
}
`;
Expand All @@ -122,61 +147,54 @@ const PensievePage = ({ location, data }) => {

return (
<Layout location={location}>
<Helmet>
<title>Pensieve | Chandrika Deb</title>
<link rel="canonical" href="https://chandrikadeb7.github.io/pensieve" />
</Helmet>
<Helmet title="Pensieve" />

<StyledMainContainer>
<header>
<h1 className="big-title">Pensieve</h1>
<h1 className="big-heading">Pensieve</h1>
<p className="subtitle">
<a
href="https://www.wizardingworld.com/writing-by-jk-rowling/pensieve"
target="_blank"
rel="noopener noreferrer">
<a href="https://www.wizardingworld.com/writing-by-jk-rowling/pensieve">
a collection of memories
</a>
</p>
</header>

<StyledGrid>
<div className="posts">
{posts.length > 0 &&
posts.map(({ node }, i) => {
const { frontmatter } = node;
const { title, description, slug, date, tags } = frontmatter;
const d = new Date(date);

return (
<StyledPost key={i} tabIndex="0">
<StyledPostInner>
<header>
<Link to={slug}>
<StyledPostHeader>
<StyledFolder>
<IconZap />
</StyledFolder>
</StyledPostHeader>
<StyledPostName>{title}</StyledPostName>
<StyledPostDescription>{description}</StyledPostDescription>
</Link>
</header>
<footer>
<StyledDate>{`${d.toLocaleDateString()}`}</StyledDate>
<StyledTags>
{tags.map((tag, i) => (
<li key={i}>
<Link to={`/pensieve/tags/${kebabCase(tag)}/`}>#{tag}</Link>
</li>
))}
</StyledTags>
</footer>
</StyledPostInner>
</StyledPost>
);
})}
</div>
{posts.length > 0 &&
posts.map(({ node }, i) => {
const { frontmatter } = node;
const { title, description, slug, date, tags } = frontmatter;
const formattedDate = new Date(date).toLocaleDateString();

return (
<StyledPost key={i}>
<div className="post__inner">
<header>
<div className="post__icon">
<IconBookmark />
</div>
<h5 className="post__title">
<Link to={slug}>{title}</Link>
</h5>
<p className="post__desc">{description}</p>
</header>

<footer>
<span className="post__date">{formattedDate}</span>
<ul className="post__tags">
{tags.map((tag, i) => (
<li key={i}>
<Link to={`/pensieve/tags/${kebabCase(tag)}/`} className="inline-link">
#{tag}
</Link>
</li>
))}
</ul>
</footer>
</div>
</StyledPost>
);
})}
</StyledGrid>
</StyledMainContainer>
</Layout>
Expand All @@ -193,7 +211,7 @@ export default PensievePage;
export const pageQuery = graphql`
{
allMarkdownRemark(
filter: { fileAbsolutePath: { regex: "/posts/" }, frontmatter: { draft: { ne: true } } }
filter: { fileAbsolutePath: { regex: "/content/posts/" }, frontmatter: { draft: { ne: true } } }
sort: { fields: [frontmatter___date], order: DESC }
) {
edges {
Expand All @@ -211,4 +229,4 @@ export const pageQuery = graphql`
}
}
}
`;
`;
Loading

0 comments on commit aed60d9

Please sign in to comment.