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

feat: lock page width back to 65ch

Browse source
This commit is contained in:
Troy 2025-02-13 00:25:26 +00:00
parent 3d6da4d63b
commit 73c269a59c
Signed by: troy
GPG key ID: DFC06C02ED3B4711
8 changed files with 56 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/pages/cv.astro
View file

@ -12,10 +12,10 @@ import icon from "public/assets/icon.png";
<html lang="en" class="scroll-smooth antialiased" transition:animate="none">
<Head title={CV.TITLE} description={CV.DESCRIPTION} />
<body class="w-full font-sans antialiased">
<div class="container mx-auto max-w-screen-xl">
<main class="flex flex-col rounded-md shadow-2xl sm:m-12">
<div class="mx-auto max-w-screen-xl">
<main class="flex flex-col sm:m-12">
<div
class="flex flex-col items-center justify-between p-12 sm:flex-row-reverse"
class="flex flex-col items-center justify-between p-4 sm:flex-row-reverse sm:items-start sm:p-8"
>
<div>
<Image
@ -27,7 +27,9 @@ import icon from "public/assets/icon.png";
</div>
<div>
<h1 class="mb-2 text-5xl font-bold">{SITE.AUTHOR}</h1>
<h2 class="mb-2 text-xl italic">Digital Designer</h2>
<h2 class="mb-2 text-center text-xl italic sm:text-left">
Digital Designer
</h2>
<div
class="social-links grid grid-cols-1 gap-1 py-4 font-medium md:grid-cols-2"
>
@ -53,7 +55,7 @@ import icon from "public/assets/icon.png";
</div>
</div>
<div class="flex flex-col sm:flex-row-reverse">
<div class="w-full rounded-r-md p-8 sm:max-w-sm">
<div class="w-full p-4 sm:max-w-sm sm:p-8">
<div class="mb-12 px-2 text-lg font-light">
<div class="mb-4 flex items-center">
<Icon name="mdi:cogs" class="mr-2" />
@ -129,7 +131,7 @@ import icon from "public/assets/icon.png";
<p>Native</p>
</div>
</div>
<div class="content w-full p-12">
<div class="content w-full p-4 sm:p-8">
<div class="prose">
<h2>Summary</h2>
<p>

36
src/pages/index.astro
View file

@ -27,12 +27,12 @@ const projectsJSON = JSON.stringify(projects);
<Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
<Hero />
<section aria-labelledby="featured-projects" class="container">
<section aria-labelledby="featured-projects">
<div
class="mx-auto flex flex-col items-start justify-between sm:flex-row sm:items-center"
>
<h2
class="animate-reveal text-2xl font-semibold break-words capitalize opacity-0"
class=" animate-reveal text-2xl font-semibold break-words capitalize opacity-0"
id="featured-projects"
>
Featured projects
@ -42,12 +42,12 @@ const projectsJSON = JSON.stringify(projects);
<div class="group">
<a
href="/projects"
class="group text-tertiary flex items-center justify-center gap-1 transition-colors duration-300 group-hover:text-sky-500"
class="group text-tertiary group-hover:text-secondary flex items-center justify-center gap-1 transition-colors duration-300"
>
View all
<Icon
name="mdi:chevron-right"
class="transition-all duration-300 group-hover:translate-x-2 group-hover:text-sky-500"
class="group-hover:text-secondary transition-all duration-300 group-hover:translate-x-2"
/>
</a>
</div>
@ -57,16 +57,13 @@ const projectsJSON = JSON.stringify(projects);
<Carousel data={projectsJSON} />
</section>
<section aria-labelledby="recent-posts" class="container max-w-[65ch]">
<section aria-labelledby="recent-posts" class="mt-24">
<div class="group flex w-fit flex-row items-center">
<a href="/posts">
<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]"
id="featured-projects"
>
Recent posts
</h2>
</a>
<h2
class="animate-reveal text-2xl font-semibold break-words capitalize opacity-0"
>
Recent posts
</h2>
</div>
<ol
class="animate-reveal mt-8 grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.3s]"
@ -75,8 +72,17 @@ const projectsJSON = JSON.stringify(projects);
</ol>
{
allPosts.length > HOME.HOMESETTINGS!.NUM_POSTS_ON_HOMEPAGE ? (
<div class="flex justify-center">
<Button href="/posts" link="View all" />
<div class="group">
<a
href="/posts"
class="group text-tertiary group-hover:text-secondary flex items-center justify-center gap-1 transition-colors duration-300"
>
View all
<Icon
name="mdi:chevron-right"
class="group-hover:text-secondary transition-all duration-300 group-hover:translate-x-2"
/>
</a>
</div>
) : null
}