r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2024-11-11 18:45:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Changed layout of writing page

Browse Source
This commit is contained in:
r-freeman 2023-01-05 20:03:09 +00:00
parent 46be576d86
commit 596e364aca
3 changed files with 81 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Card.jsx
View File

@ -14,10 +14,10 @@ function ChevronRightIcon(props) {
)
}
export function Card({ as: Component = 'div', className, children }) {
export function Card({as: Component = 'div', className, small, children}) {
return (
<Component
className={clsx(className, 'group relative flex flex-col items-start')}
className={clsx(className, 'group relative flex flex-col items-start', small && 'md:flex-row justify-between')}
>
{children}
</Component>
@ -27,7 +27,8 @@ export function Card({ as: Component = 'div', className, children }) {
Card.Link = function CardLink({children, ...props}) {
return (
<>
<div className="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
<div
className="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl"/>
<Link {...props}>
<span className="absolute -inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl"/>
<span className="relative z-10">{children}</span>

2
src/pages/index.jsx
View File

@ -245,7 +245,7 @@ export async function getStaticProps() {
return {
props: {
articles: (await getAllArticles())
.slice(0, 2)
.slice(0, 1)
.map(({component, ...meta}) => meta),
},
}

19
src/pages/writing/index.jsx
View File

@ -7,29 +7,20 @@ import {formatDate} from '@/lib/formatDate'
function Article({article}) {
return (
<article className="md:grid md:grid-cols-4 md:items-baseline">
<Card className="md:col-span-3">
<article>
<Card small={true}>
<Card.Title href={`/writing/${article.slug}`}>
{article.title}
</Card.Title>
<Card.Eyebrow
as="time"
dateTime={article.date}
className="md:hidden"
decorate={false}
className="flex-shrink-0 order-last md:ml-4"
>
{formatDate(article.date)}
</Card.Eyebrow>
<Card.Description>{article.description}</Card.Description>
<Card.Cta>Read article</Card.Cta>
</Card>
<Card.Eyebrow
as="time"
dateTime={article.date}
className="mt-1 hidden md:block"
>
{formatDate(article.date)}
</Card.Eyebrow>
</article>
)
}
@ -57,8 +48,8 @@ export default function ArticlesIndex({articles}) {
intro="All of my long-form thoughts on software engineering, and more, displayed in chronological order."
gradient="bg-gradient-to-r from-pink-500 to-violet-500"
>
<div className="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40">
<div className="flex max-w-3xl flex-col space-y-16">
<div>
<div className="max-w-3xl space-y-16">
{articles.map((article) => (
<Article key={article.slug} article={article}/>
))}