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

7
src/components/Carousel.astro
View file

@ -71,17 +71,18 @@ const { data } = Astro.props;
</div>
</template>
</div>
<div>
<div class="relative min-h-16">
<template x-for="(slide, index) in slides">
<div
x-show="currentSlideIndex == index + 1"
class="text-secondary flex justify-end pt-1 text-right font-serif text-lg"
class="text-secondary absolute top-0 left-0 flex w-full justify-end pt-1 text-right font-serif text-lg"
x-transition.opacity.duration.1000ms.delay.100ms
>
<div class="flex w-full flex-col items-end">
<h3
x-text="slide.data.title"
x-bind:aria-describedby="'slide' + (index + 1) + 'Description'"
class="border-tertiary/30 w-fit border-t italic"
class="italic"
>
</h3>
<p

2
src/components/Footer.astro
View file

@ -4,7 +4,7 @@ import Link from "@components/Link.astro";
import { Icon } from "astro-icon/components";
---
<footer class="mx-auto mt-auto mb-6 w-full max-w-prose pt-12">
<footer class="mx-auto mt-auto mb-6 w-full max-w-[65ch] pt-12">
<div class="flex flex-col items-center justify-between md:flex-row">
<span class="text-tertiary text-center text-sm font-medium"
>&copy; {new Date().getFullYear()}

33
src/components/Header.astro
View file

@ -1,35 +1,29 @@
---
import { SITE } from "@consts";
import { Icon } from "astro-icon/components";
import Button from "@components/Button.astro";
---
<header class="mx-auto mb-8 w-full max-w-6xl space-y-6 px-4 pt-4">
<header class="mx-auto mb-8 w-full max-w-[65ch] space-y-6 pt-4">
<nav
x-data="{ mobileMenuIsOpen: false }"
x-on:click.away="mobileMenuIsOpen = false"
class="flex h-12 items-center justify-between"
>
<a class="group inline-flex items-center" href="/" title={SITE.TITLE}>
<a href="/" title={SITE.TITLE}>
<Icon
name="icon"
title={SITE.TITLE}
class="group-hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
class="hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
/>
<div
class="group-hover:text-tertiary ml-2 hidden flex-none text-sm font-bold capitalize transition-colors duration-500 md:visible lg:block"
>
Troy Lusty
</div>
</a>
<ul class="hidden items-center gap-4 sm:flex">
{
SITE.NAVLINKS.map((i) => (
<li class="mb-1 last:mb-0">
<li>
<a
data-navlink
href={i.href}
class="text-secondary hover:text-secondary decoration-tertiary font-medium capitalize decoration-wavy underline-offset-2 focus:underline focus:outline-hidden"
class="text-tertiary hover:text-secondary focus:text-secondary font-medium capitalize transition-colors duration-300 focus:outline-hidden"
aria-current="page"
>
{i.name}
@ -37,14 +31,6 @@ import Button from "@components/Button.astro";
</li>
))
}
<li>
<a href={`mailto:${SITE.EMAIL}`}>
<span
class="rounded-full bg-blue-500/10 px-3 py-2 text-sm leading-6 font-medium text-blue-400 ring-1 ring-blue-500/20 ring-inset"
>Hire me</span
>
</a>
</li>
</ul>
<button
x-on:click="mobileMenuIsOpen = !mobileMenuIsOpen"
@ -80,7 +66,7 @@ import Button from "@components/Button.astro";
x-transition:leave-start="translate-y-0"
x-transition:leave-end="-translate-y-full"
id="mobileMenu"
class="bg-primary fixed inset-x-0 top-0 z-98 flex max-h-svh flex-col overflow-y-auto rounded-b-md px-6 pt-20 pb-6 sm:hidden"
class="bg-primary fixed inset-x-0 top-0 z-98 flex max-h-svh flex-col overflow-y-auto px-6 pt-6 pb-6 sm:hidden"
>
{
SITE.NAVLINKS.map((i) => (
@ -96,13 +82,6 @@ import Button from "@components/Button.astro";
</li>
))
}
<li class="mt-4 w-full border-none">
<Button
href={`mailto:${SITE.EMAIL}`}
link="Hire me"
class="block w-full justify-center"
/>
</li>
</ul>
</nav>
</header>

16
src/components/Hero.astro
View file

@ -1,5 +1,6 @@
---
import instrument from "@fontsource/instrument-serif/files/instrument-serif-latin-400-normal.woff2?url";
import { Icon } from "astro-icon/components";
---
<link
@ -10,10 +11,10 @@ import instrument from "@fontsource/instrument-serif/files/instrument-serif-lati
crossorigin="anonymous"
/>
<section>
<div class="mx-auto px-8 py-32">
<section class="animate-reveal opacity-0">
<div class="mx-auto flex h-full self-center px-8 py-32">
<div
class="animate-reveal mx-auto max-w-xl text-center text-4xl tracking-tight text-balance text-white md:text-6xl"
class="mx-auto my-auto max-w-xl text-center text-4xl tracking-tight text-balance text-white md:text-6xl"
>
<div
class="text-secondary flex items-center justify-center gap-3 font-semibold"
@ -28,6 +29,15 @@ import instrument from "@fontsource/instrument-serif/files/instrument-serif-lati
<div class="text-tertiary font-serif font-light tracking-wide italic">
digital designer.
</div>
<div class="group absolute right-0 left-0 mx-auto mt-8 w-fit">
<a href="#featured-projects">
<Icon
name="mdi:chevron-up"
class="text-tertiary group-hover:text-secondary h-8 w-auto rotate-180 animate-bounce transition-all duration-300 ease-in-out"
title="Move down"
/>
</a>
</div>
</div>
</div>
</section>

4
src/components/ShowcasePost.astro
View file

@ -8,12 +8,12 @@ type Props = {
const { collection } = Astro.props;
---
<li class="border-tertiary/30 border-l">
<li>
<a
class="group hover:bg-tertiary/30 bg-none"
href={`/${collection.collection}/${collection.slug}`}
>
<article class="ml-2 flex flex-col">
<article class="flex flex-col">
<h3 class="mb-1 font-semibold text-balance">
<span class="text-secondary">{collection.data.title}</span><span
class="text-tertiary group-hover:text-accent ml-2 transition-colors"