From aed60d9820fa8e2488097ee557d50c8e2d766cb6 Mon Sep 17 00:00:00 2001 From: chandrikadeb7 Date: Sun, 14 Apr 2024 23:52:40 +0530 Subject: [PATCH] changes --- src/pages/pensieve/index.js | 276 +++++++++++++++++++----------------- src/pages/pensieve/tags.js | 37 ++--- 2 files changed, 161 insertions(+), 152 deletions(-) diff --git a/src/pages/pensieve/index.js b/src/pages/pensieve/index.js index eccc123c1..7e626eef9 100644 --- a/src/pages/pensieve/index.js +++ b/src/pages/pensieve/index.js @@ -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, @@ -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; + } } } `; @@ -122,61 +147,54 @@ const PensievePage = ({ location, data }) => { return ( - - Pensieve | Chandrika Deb - - +
-

Pensieve

+

Pensieve

- + a collection of memories

-
- {posts.length > 0 && - posts.map(({ node }, i) => { - const { frontmatter } = node; - const { title, description, slug, date, tags } = frontmatter; - const d = new Date(date); - - return ( - - -
- - - - - - - {title} - {description} - -
-
- {`${d.toLocaleDateString()}`} - - {tags.map((tag, i) => ( -
  • - #{tag} -
    • - ))} -     -
    -     -     - ); - })} -
    + {posts.length > 0 && + posts.map(({ node }, i) => { + const { frontmatter } = node; + const { title, description, slug, date, tags } = frontmatter; + const formattedDate = new Date(date).toLocaleDateString(); + + return ( + +
    +
    +
    + +
    +
    + {title} +
    +

    {description}

    +
    + +
    + {formattedDate} +
      + {tags.map((tag, i) => ( +
    • + + #{tag} + +
      • + ))} +
    +
    +
    +     + ); + })}     @@ -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 { @@ -211,4 +229,4 @@ export const pageQuery = graphql` } } } -`; +`; \ No newline at end of file diff --git a/src/pages/pensieve/tags.js b/src/pages/pensieve/tags.js index d21366bab..c6a78a49c 100644 --- a/src/pages/pensieve/tags.js +++ b/src/pages/pensieve/tags.js @@ -1,31 +1,30 @@ import React from 'react'; -import { Helmet } from 'react-helmet'; import { Link, graphql } from 'gatsby'; import kebabCase from 'lodash/kebabCase'; import PropTypes from 'prop-types'; -import { Layout } from '@components'; +import { Helmet } from 'react-helmet'; import styled from 'styled-components'; -import { theme, mixins, Main } from '@styles'; -const { colors, fontSizes, fonts } = theme; +import { Layout } from '@components'; -const StyledTagsContainer = styled(Main)` +const StyledTagsContainer = styled.main` max-width: 1000px; h1 { margin-bottom: 50px; } ul { - color: ${colors.lightSlate}; + color: var(--light-slate); + li { - font-size: ${fontSizes.xxl}; + font-size: var(--fz-xxl); a { - ${mixins.inlineLink}; - color: ${colors.lightSlate}; + color: var(--light-slate); + .count { - color: ${colors.slate}; - font-family: ${fonts.SFMono}; - font-size: ${fontSizes.md}; + color: var(--slate); + font-family: var(--font-mono); + font-size: var(--fz-md); } } } @@ -35,14 +34,11 @@ const StyledTagsContainer = styled(Main)` const TagsPage = ({ data: { allMarkdownRemark: { group }, - site: { - siteMetadata: { title }, - }, }, location, }) => ( - + @@ -54,7 +50,7 @@ const TagsPage = ({
      {group.map(tag => (
    • - + {tag.fieldValue} ({tag.totalCount})
      • @@ -87,11 +83,6 @@ export default TagsPage; export const pageQuery = graphql` query { - site { - siteMetadata { - title - } - } allMarkdownRemark(limit: 2000, filter: { frontmatter: { draft: { ne: true } } }) { group(field: frontmatter___tags) { fieldValue @@ -99,4 +90,4 @@ export const pageQuery = graphql` } } } -`; +`; \ No newline at end of file