me
/
ethanreece.com
Archived
1
0
Fork 0

Add article page and credits

main
Ethan Reece 2023-06-09 15:11:28 -05:00
parent 51df9d1cf2
commit 33b2a01c9d
Signed by: me
GPG Key ID: D3993665FF92E1C3
6 changed files with 83 additions and 12 deletions

View File

@ -1,11 +1,29 @@
--- ---
const paddingX = 'px-[.75rem]' const paddingX = 'px-[.75rem]'
const paddingY = 'py-[.5rem]' const paddingY = 'py-[.5rem]'
interface NavItem {
text: string
link: string
}
const links: NavItem[] = [{ text: 'site credits', link: '/credits' }]
--- ---
<footer class={`flex ${paddingX} ${paddingY}`}> <section>
<span class="mr-auto">Copyright Ethan Reece</span> <footer class={`flex ${paddingX} ${paddingY}`}>
<nav> <span class="mr-auto">Copyright Ethan Reece</span>
<a>site credits</a> <nav>
</nav> {
</footer> links.map((link) => (
<a
href={link.link}
class="hover:underline focus-visible:underline focus-visible:outline-none"
>
{link.text}
</a>
))
}
</nav>
</footer>
</section>

View File

@ -23,7 +23,7 @@ const mainButtonPaddingX = 'px-[.75rem]'
const mainButtonPaddingY = 'py-[.5rem]' const mainButtonPaddingY = 'py-[.5rem]'
--- ---
<div class="fixed z-navbar w-full backdrop-blur-sm"> <section class="fixed z-navbar w-full backdrop-blur-sm">
<div <div
class={`max-h-navbar-h bg-background-light ${paddingX} ${paddingY} opacity-80`} class={`max-h-navbar-h bg-background-light ${paddingX} ${paddingY} opacity-80`}
> >
@ -45,4 +45,4 @@ const mainButtonPaddingY = 'py-[.5rem]'
} }
</nav> </nav>
</div> </div>
</div> </section>

View File

@ -11,14 +11,13 @@ const { title, slug, background } = Astro.props.frontmatter
const fontSize = 'text-[1rem]' const fontSize = 'text-[1rem]'
const fontSizeH2 = 'text-[1.5rem]' const fontSizeH2 = 'text-[1.5rem]'
const paddingX = 'px-[1rem]'
const paddingT = 'pt-[1.5rem]' const paddingT = 'pt-[1.5rem]'
const paddingB = 'pb-[2.5rem]' const paddingB = 'pb-[2.5rem]'
const anchorDistance = 'mt-[-5rem] pt-[5rem]' const anchorDistance = 'mt-[-5rem] pt-[5rem]'
--- ---
<section <section
class={`${paddingX} ${paddingT} ${paddingB} ${fontSize} ${ class={`px-screen-x ${paddingT} ${paddingB} ${fontSize} ${
background ? 'bg-background-dark' : '' background ? 'bg-background-dark' : ''
}`} }`}
> >

View File

@ -0,0 +1,28 @@
---
import type { MDXLayoutProps } from 'astro'
import Base from './Base.astro'
type Props = MDXLayoutProps<{
title: string
description: string
}>
const { title, description } = Astro.props.frontmatter
---
<Base title={`${title} - Ethan Reece`} description={description}>
<article class="px-screen-x">
<div class="mx-auto max-w-page-w">
<section>
<header>
<h1 class="pb-[1.5rem] pt-[.75rem] text-[2rem] font-bold">
{title}
</h1>
</header>
</section>
<section class="space-y-paragraph">
<slot />
</section>
</div>
</article>
</Base>

View File

@ -0,0 +1,26 @@
---
layout: '../layouts/Article.astro'
title: 'Site Credits'
---
Framework: Astro with TypeScript and MDX
Runtime: Node.js
Package management: pnpm
CSS: Tailwind (with Astro extension)
Font: JetBrains Mono (using Fontsource)
Circuitboard Pattern: Hero Patterns
Icons: Hero Icons (using Astro Icon)
IDE: VSCodium
Code formatting: Prettier, ESLint, Astro MDX
Optimization: Astro Prefetch, Astro Sitemap, Astro Imagetools (using Sharp), Astro Robots.txt, Astro SEO, Autoprefixer, CSSNano
Source code: On Forgejo

View File

@ -28,8 +28,8 @@ module.exports = {
circuitboard: '40rem', circuitboard: '40rem',
}, },
spacing: { spacing: {
'screen-x': '2rem', 'screen-x': '1rem',
'screen-y': '1rem', 'screen-y': '1.5rem',
'navbar-h': '4rem', 'navbar-h': '4rem',
paragraph: '1rem', paragraph: '1rem',
}, },