troy/troylusty.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

remove top margin on article collections

Browse source
This commit is contained in:
Troy 2025-01-27 11:44:27 +00:00
parent c52e42a57f
commit 125f904b15
Signed by: troy
GPG key ID: DFC06C02ED3B4711
5 changed files with 15 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/ShowcaseProject.astro
View file

@ -27,12 +27,12 @@ const { collection } = Astro.props;
href={`/${collection.collection}/${collection.slug}`} href={`/${collection.collection}/${collection.slug}`}
aria-label={collection.data.title}></a> aria-label={collection.data.title}></a>
<h3 <h3
class="text-primary dark:text-secondary z-10 w-fit text-xl font-semibold opacity-0 transition-opacity duration-300 group-hover:opacity-100" class="text-white z-10 w-fit text-xl font-semibold opacity-0 transition-opacity duration-300 group-hover:opacity-100"
> >
{collection.data.title} {collection.data.title}
</h3> </h3>
<div <div
class="text-accent z-10 w-fit gap-y-1 overflow-hidden text-sm leading-6 opacity-0 transition-opacity duration-500 group-hover:opacity-100" class="text-neutral-400 z-10 w-fit gap-y-1 overflow-hidden text-sm leading-6 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
> >
{ {
collection.data.collection ? ( collection.data.collection ? (

4
src/pages/index.astro
View file

@ -25,7 +25,7 @@ const projects = allProjects
<Layout title={HOME.TITLE} description={HOME.DESCRIPTION}> <Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
<Hero /> <Hero />
<section aria-labelledby="featured-projects"> <section aria-labelledby="featured-projects">
<div class="group flex w-fit flex-row items-center justify-between gap-6"> <div class="group flex w-fit flex-row items-center">
<a href="/projects"> <a href="/projects">
<h2 <h2
class="animate-reveal group-hover:text-tertiary text-2xl font-semibold break-words capitalize opacity-0 transition-colors duration-500" class="animate-reveal group-hover:text-tertiary text-2xl font-semibold break-words capitalize opacity-0 transition-colors duration-500"
@ -49,7 +49,7 @@ const projects = allProjects
} }
</section> </section>
<section aria-labelledby="recent-posts"> <section aria-labelledby="recent-posts">
<div class="group flex w-fit flex-row items-center justify-between gap-6"> <div class="group flex w-fit flex-row items-center">
<a href="/posts"> <a href="/posts">
<h2 <h2
class="animate-reveal group-hover:text-tertiary text-2xl font-semibold break-words capitalize opacity-0 transition-colors duration-500 [animation-delay:0.2s]" class="animate-reveal group-hover:text-tertiary text-2xl font-semibold break-words capitalize opacity-0 transition-colors duration-500 [animation-delay:0.2s]"

2
src/pages/posts/index.astro
View file

@ -14,7 +14,7 @@ const posts = (await getCollection("posts"))
{POSTS.TITLE} {POSTS.TITLE}
</h1> </h1>
<ol <ol
class="animate-reveal mt-16 grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]" class="animate-reveal grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
> >
{posts.map((article: any) => <ShowcasePost collection={article} />)} {posts.map((article: any) => <ShowcasePost collection={article} />)}
</ol> </ol>

2
src/pages/projects/index.astro
View file

@ -14,7 +14,7 @@ const projects = (await getCollection("projects"))
{PROJECTS.TITLE} {PROJECTS.TITLE}
</h1> </h1>
<ol <ol
class="animate-reveal mt-16 grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2" class="animate-reveal grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
> >
{projects.map((article: any) => <ShowcaseProject collection={article} />)} {projects.map((article: any) => <ShowcaseProject collection={article} />)}
</ol> </ol>

17
src/styles/global.css
View file

@ -21,6 +21,7 @@
--animate-gradient-x: gradient-x 6s ease infinite; --animate-gradient-x: gradient-x 6s ease infinite;
--animate-gradient-y: gradient-y 6s ease infinite; --animate-gradient-y: gradient-y 6s ease infinite;
--animate-gradient-xy: gradient-xy 6s ease infinite; --animate-gradient-xy: gradient-xy 6s ease infinite;
@keyframes reveal { @keyframes reveal {
0% { 0% {
opacity: 0; opacity: 0;
@ -79,18 +80,18 @@
} }
:root { :root {
--primary: oklch(99% 0 0); --primary: var(--color-neutral-50);
--secondary: oklch(15% 0 0); --secondary: var(--color-neutral-950);
--tertiary: oklch(40% 0 0); --tertiary: var(--color-neutral-500);
--accent: oklch(25% 0 0); --accent: var(--color-neutral-700);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--primary: oklch(0% 0 0); --primary: var(--color-black);
--secondary: oklch(95% 0 0); --secondary: var(--color-neutral-50);
--tertiary: oklch(60% 0 0); --tertiary: var(--color-neutral-500);
--accent: oklch(75% 0 0); --accent: var(--color-neutral-300);
} }
.astro-code, .astro-code,