feat: only show hero and carousel on index
This commit is contained in:
parent
0edd672a70
commit
81538a6fdf
GPG key ID:
DFC06C02ED3B4711
18 changed files with 104 additions and 225 deletions
|
|
@ -79,9 +79,7 @@ const listFormatter = new Intl.ListFormat("en-GB", {
|
|||
}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="animate-reveal mx-auto opacity-0 [animation-delay:0.2s]"
|
||||
>
|
||||
<div class="animate-reveal mx-auto opacity-0 [animation-delay:0.2s]">
|
||||
<Prose>
|
||||
<Content />
|
||||
</Prose>
|
||||
|
|
|
|||
|
|
@ -2,18 +2,15 @@
|
|||
type Props = {
|
||||
href: String;
|
||||
link: String;
|
||||
class?: string;
|
||||
};
|
||||
|
||||
const { href, link, class: additionalClasses } = Astro.props;
|
||||
|
||||
const baseClasses =
|
||||
"bg-tertiary text-primary hover:bg-accent flex w-fit flex-row items-center gap-1 justify-self-center rounded-sm px-2 py-1 text-center text-sm font-medium text-nowrap capitalize";
|
||||
const combinedClasses = `${baseClasses} ${additionalClasses || ""}`;
|
||||
const { href, link } = Astro.props;
|
||||
---
|
||||
|
||||
<a href={`${href}`}>
|
||||
<div class={combinedClasses}>
|
||||
<div
|
||||
class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full px-3 py-1.5 text-center text-sm font-medium text-nowrap capitalize transition-colors duration-300"
|
||||
>
|
||||
{link}
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -4,22 +4,22 @@ import Link from "@components/Link.astro";
|
|||
import { Icon } from "astro-icon/components";
|
||||
---
|
||||
|
||||
<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"
|
||||
<footer class="mx-auto mt-auto mb-6 w-full max-w-[65ch] pt-24">
|
||||
<div class="flex flex-col items-center justify-between gap-2 md:gap-4">
|
||||
<span class="text-tertiary text-center text-sm"
|
||||
>© {new Date().getFullYear()}
|
||||
<a href="/" class="hover:text-secondary transition-colors duration-300"
|
||||
>{SITE.TITLE}</a
|
||||
>. All rights reserved.
|
||||
</span>
|
||||
<div class="mt-4 flex gap-3 sm:mt-0 sm:justify-center">
|
||||
<div class="flex gap-3 sm:justify-center">
|
||||
{
|
||||
SITE.LINKS.map((i) => (
|
||||
<Link href={i.href}>
|
||||
<Icon
|
||||
name={i.icon}
|
||||
title={i.name}
|
||||
class="text-tertiary hover:text-secondary h-5 w-auto transition-colors duration-300"
|
||||
class="text-tertiary hover:text-secondary h-4 w-auto transition-colors duration-300"
|
||||
/>
|
||||
</Link>
|
||||
))
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ if (typeof tags !== "undefined") {
|
|||
|
||||
import outfit from "@fontsource-variable/outfit/files/outfit-latin-wght-normal.woff2?url";
|
||||
import redhatmono from "@fontsource-variable/red-hat-mono/files/red-hat-mono-latin-wght-normal.woff2?url";
|
||||
import instrument from "@fontsource/instrument-serif/files/instrument-serif-latin-400-normal.woff2?url";
|
||||
---
|
||||
|
||||
<head>
|
||||
|
|
@ -110,4 +111,11 @@ import redhatmono from "@fontsource-variable/red-hat-mono/files/red-hat-mono-lat
|
|||
href={redhatmono}
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
as="font"
|
||||
type="font/woff2"
|
||||
href={instrument}
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,86 +1,68 @@
|
|||
---
|
||||
import { SITE } from "@consts";
|
||||
import { Icon } from "astro-icon/components";
|
||||
|
||||
const pathname = new URL(Astro.request.url).pathname;
|
||||
const currentPath = pathname.replace(/\/$/, "");
|
||||
---
|
||||
|
||||
<header class="mx-auto mb-8 w-full max-w-[65ch] space-y-6 pt-4">
|
||||
<header class="mx-auto mb-8 w-full max-w-[65ch] space-y-6 md:pt-4">
|
||||
<nav
|
||||
x-data="{ mobileMenuIsOpen: false }"
|
||||
x-on:click.away="mobileMenuIsOpen = false"
|
||||
class="flex h-12 items-center justify-between"
|
||||
class="md:flex-no-wrap flex w-full flex-wrap justify-between"
|
||||
x-data="{ open: false }"
|
||||
>
|
||||
<a href="/" title={SITE.TITLE}>
|
||||
<Icon
|
||||
name="icon"
|
||||
title={SITE.TITLE}
|
||||
class="hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
|
||||
/>
|
||||
</a>
|
||||
<ul class="hidden items-center gap-4 sm:flex">
|
||||
{
|
||||
SITE.NAVLINKS.map((i) => (
|
||||
<li>
|
||||
<a
|
||||
data-navlink
|
||||
href={i.href}
|
||||
class="text-tertiary hover:text-secondary focus:text-secondary font-medium capitalize transition-colors duration-300 focus:outline-hidden"
|
||||
aria-current="page"
|
||||
>
|
||||
{i.name}
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
<button
|
||||
x-on:click="mobileMenuIsOpen = !mobileMenuIsOpen"
|
||||
x-bind:aria-expanded="mobileMenuIsOpen"
|
||||
x-bind:class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-99' : null"
|
||||
type="button"
|
||||
class="text-secondary flex sm:hidden"
|
||||
aria-label="mobile menu"
|
||||
aria-controls="mobileMenu"
|
||||
>
|
||||
<Icon
|
||||
name="mdi:menu"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
x-cloak
|
||||
x-show="!mobileMenuIsOpen"
|
||||
/>
|
||||
<Icon
|
||||
name="mdi:window-close"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
x-cloak
|
||||
x-show="mobileMenuIsOpen"
|
||||
/>
|
||||
</button>
|
||||
<div class="flex w-full items-center justify-between md:w-fit">
|
||||
<a href="/" title={SITE.TITLE}>
|
||||
<Icon
|
||||
name="icon"
|
||||
title={SITE.TITLE}
|
||||
class="hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
|
||||
/>
|
||||
</a>
|
||||
<button
|
||||
x-on:click="open = !open"
|
||||
x-bind:aria-expanded="open"
|
||||
type="button"
|
||||
class="text-secondary flex md:hidden"
|
||||
aria-label="mobile menu"
|
||||
aria-controls="mobileMenu"
|
||||
>
|
||||
<Icon
|
||||
name="mdi:menu"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
x-cloak
|
||||
x-show="!open"
|
||||
/>
|
||||
<Icon
|
||||
name="mdi:window-close"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
x-cloak
|
||||
x-show="open"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<ul
|
||||
class="w-full items-center gap-4 text-right md:flex md:w-fit md:text-left"
|
||||
x-bind:class="{ 'hidden': !open }"
|
||||
x-cloak
|
||||
x-show="mobileMenuIsOpen"
|
||||
x-transition:enter="transition motion-reduce:transition-none ease-out duration-300"
|
||||
x-transition:enter-start="-translate-y-full"
|
||||
x-transition:enter-end="translate-y-0"
|
||||
x-transition:leave="transition motion-reduce:transition-none ease-out duration-300"
|
||||
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 px-6 pt-6 pb-6 sm:hidden"
|
||||
>
|
||||
{
|
||||
SITE.NAVLINKS.map((i) => (
|
||||
<li class="py-4">
|
||||
<a
|
||||
data-navlink
|
||||
href={i.href}
|
||||
class="text-secondary w-full text-lg font-medium capitalize focus:underline"
|
||||
aria-current="page"
|
||||
>
|
||||
{i.name}
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
SITE.NAVLINKS.map((link) => {
|
||||
let linkHref = link.href.replace(/\/$/, "");
|
||||
const isActive = currentPath.startsWith(linkHref);
|
||||
return (
|
||||
<li class="text-tertiary hover:text-secondary focus:text-secondary font-medium capitalize transition-colors duration-300 focus:outline-hidden">
|
||||
<a
|
||||
href={link.href}
|
||||
class:list={[isActive ? "text-secondary" : ""]}
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,8 @@
|
|||
---
|
||||
import instrument from "@fontsource/instrument-serif/files/instrument-serif-latin-400-normal.woff2?url";
|
||||
import { Icon } from "astro-icon/components";
|
||||
import { Image } from "astro:assets";
|
||||
import icon from "public/assets/icon.png";
|
||||
---
|
||||
|
||||
<link
|
||||
rel="preload"
|
||||
as="font"
|
||||
type="font/woff2"
|
||||
href={instrument}
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
|
||||
<section class="animate-reveal opacity-0">
|
||||
<div class="mx-auto flex h-full self-center px-8 py-32">
|
||||
<div
|
||||
|
|
@ -32,15 +22,6 @@ import icon from "public/assets/icon.png";
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div
|
||||
class="prose prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-blockquote:border-secondary prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-medium prose-code:text-secondary prose-code:before:content-none prose-code:after:content-none prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded max-w-full"
|
||||
class="prose prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-medium prose-code:text-secondary prose-code:before:content-none prose-code:after:content-none prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded max-w-full"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,14 +13,14 @@ const { collection } = Astro.props;
|
|||
class="group hover:bg-tertiary/30 bg-none"
|
||||
href={`/${collection.collection}/${collection.slug}`}
|
||||
>
|
||||
<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"
|
||||
>{collection.data.description}</span
|
||||
>
|
||||
<article class="flex flex-row items-center justify-between">
|
||||
<h3 class="text-secondary mb-1 font-semibold text-nowrap">
|
||||
{collection.data.title}
|
||||
</h3>
|
||||
<time class="text-accent block text-sm"
|
||||
<hr
|
||||
class="text-tertiary group-hover:text-secondary mx-6 w-full border-dotted transition-colors duration-300"
|
||||
/>
|
||||
<time class="text-accent block text-nowrap"
|
||||
><FormattedDate date={collection.data.date} /></time
|
||||
>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ const { collection } = Astro.props;
|
|||
alt={collection.data.image.alt}
|
||||
title={collection.data.title}
|
||||
loading="eager"
|
||||
class="aspect-square object-cover transition-transform duration-300 ease-in-out group-hover:scale-102"
|
||||
class="aspect-[2/1] object-cover transition-all duration-300 ease-in-out group-hover:brightness-50"
|
||||
fit="cover"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue