styling improvements
update join page
This commit is contained in:
parent
1fd4d1cbbe
commit
9876261789
@ -23,7 +23,7 @@ export const button = cva(
|
||||
"border border-input hover:bg-accent hover:text-accent-foreground",
|
||||
secondary: "bg-main/10 text-main hocus:bg-main/20",
|
||||
ghost: "hocus:bg-accent hocus:text-accent-foreground",
|
||||
link: "underline-offset-4 hocus:underline text-primary",
|
||||
link: "underline-offset-4 hocus:underline text-main",
|
||||
},
|
||||
size: {
|
||||
default: "text-base py-2 px-4",
|
||||
|
||||
@ -8,7 +8,8 @@ const heading = cva(
|
||||
{
|
||||
variants: {
|
||||
main: {
|
||||
true: "font-bold animated-heading",
|
||||
true: "font-bold text-transparent animated-heading \
|
||||
bg-gradient-to-t from-transparent to-primary bg-clip-text",
|
||||
false: "font-semibold",
|
||||
},
|
||||
animated: {
|
||||
|
||||
@ -4,13 +4,12 @@ import { Menu } from "lucide-astro";
|
||||
import Logo from "../Logo/Logo.astro";
|
||||
---
|
||||
|
||||
<header id="nav-container" class="fixed top-0 w-full h-header z-50">
|
||||
<header id="nav-container" class="fixed -top-1 w-full h-header z-50 hidden">
|
||||
<div
|
||||
class="w-full h-full absolute -z-20 backdrop-blur-lg"
|
||||
style="
|
||||
background-image:
|
||||
linear-gradient(to bottom, transparent, hsl(var(--color-neutral)) 100%),
|
||||
repeating-linear-gradient(60deg, transparent, hsl(var(--color-neutral-accent) / 0.7) 2px, hsl(var(--color-neutral-accent) / 1) 4px );"
|
||||
style="background-image:
|
||||
linear-gradient(to bottom, transparent, hsl(var(--color-neutral) / 0.8) 100%),
|
||||
repeating-linear-gradient(60deg, transparent, hsl(var(--color-neutral-accent) / 0.2) 0.5rem, hsl(var(--color-neutral-accent) / 1) 0.5rem );"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
@ -25,7 +24,7 @@ import Logo from "../Logo/Logo.astro";
|
||||
<Logo withText={false} />
|
||||
</div>
|
||||
<h2
|
||||
class="text-2xl text-primary lg:text-3xl transition-all font-extrabold"
|
||||
class="text-2xl text-main lg:text-3xl transition-all font-extrabold"
|
||||
>
|
||||
vspace.one
|
||||
</h2>
|
||||
@ -59,12 +58,12 @@ import Logo from "../Logo/Logo.astro";
|
||||
>
|
||||
</div>
|
||||
<div class="flex flex-row gap-2 items-center max-lg:hidden">
|
||||
<a class={button({ variant: "secondary", size: "lg" })} href="/#location"
|
||||
<a class={button({ variant: "link", size: "lg" })} href="/#location"
|
||||
>Standort</a
|
||||
>
|
||||
<a
|
||||
class={button({
|
||||
variant: "secondary",
|
||||
variant: "link",
|
||||
size: "lg",
|
||||
class: "max-md:hidden",
|
||||
})}
|
||||
@ -83,12 +82,17 @@ import Logo from "../Logo/Logo.astro";
|
||||
|
||||
const navContainer = document.getElementById("nav-container")!;
|
||||
|
||||
navContainer.classList.remove("hidden");
|
||||
|
||||
animate(navContainer, { y: [-100, 0] }, { ...ease.quint!(0.8).out });
|
||||
|
||||
const init = () => {
|
||||
const button = document.getElementById("nav-button")!;
|
||||
const navMobile = document.getElementById("nav-mobile")!;
|
||||
const navButtons = navMobile.children;
|
||||
const navContainer = document.getElementById("nav-container")!;
|
||||
|
||||
navContainer.classList.remove("hidden");
|
||||
|
||||
button.addEventListener("click", () => {
|
||||
if (navMobile.classList.contains("hidden")) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { animate, spring, stagger } from "motion";
|
||||
|
||||
export default function animateHeading(e: Element, delay?: number) {
|
||||
export default function animateHeading(e: Element, options?: { delay?: number, once?: boolean }) {
|
||||
const id = Math.floor(Math.random() * 100).toString();
|
||||
|
||||
e.id = id;
|
||||
@ -8,7 +8,8 @@ export default function animateHeading(e: Element, delay?: number) {
|
||||
if (e.textContent) {
|
||||
e.innerHTML = e.textContent.replace(
|
||||
/\S/g,
|
||||
"<span class='letter'>$&</span>",
|
||||
`<span class='letter
|
||||
bg-gradient-to-t from-primary/40 to-primary bg-clip-text bg-contain p-0'>$&</span>`,
|
||||
);
|
||||
|
||||
const updatedElement = document.getElementById(id)!;
|
||||
@ -17,17 +18,26 @@ export default function animateHeading(e: Element, delay?: number) {
|
||||
|
||||
const letters = updatedElement.querySelectorAll(`:scope > .letter`);
|
||||
|
||||
|
||||
let didAppear = false;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
() => {
|
||||
console.log("inview");
|
||||
|
||||
if (options?.once && didAppear) {
|
||||
return;
|
||||
}
|
||||
|
||||
animate(
|
||||
letters,
|
||||
{ y: [100, 0] },
|
||||
{ y: [50, 0] },
|
||||
{
|
||||
easing: spring({ stiffness: 200, damping: 20 }),
|
||||
delay: stagger(0.02, { start: delay !== undefined ? delay : 0 }),
|
||||
easing: spring({ stiffness: 100, damping: 40 }),
|
||||
delay: stagger(0.02, { start: options?.delay !== undefined ? didAppear ? 0 : options.delay : 0 }),
|
||||
},
|
||||
);
|
||||
didAppear = true;
|
||||
},
|
||||
{ threshold: 0.01 },
|
||||
);
|
||||
|
||||
@ -11,6 +11,15 @@ import RootLayout from "@/layouts/RootLayout.astro";
|
||||
<Heading main>Werde Mitglied!</Heading>
|
||||
</Section>
|
||||
<Section>
|
||||
<p>
|
||||
Du findest toll was wir machen und möchtest unseren Verein unterstützen?
|
||||
Dann werde Mitglied! Mitglieder profitieren auch von einigen Vorteilen.
|
||||
</p>
|
||||
</Section>
|
||||
<Section>
|
||||
<h3 class="mb-2">
|
||||
Du bist überzeugt und fragst dich wie du beitreten kannst?
|
||||
</h3>
|
||||
<p>
|
||||
Lade dir unter Downloads die Beitrittserklärung herunter, bring sie mit
|
||||
in den Space und drücke sie einem der Vorstände in die Hände. Dafür
|
||||
|
||||
@ -11,9 +11,12 @@ import Heading from "@/components/Heading.astro";
|
||||
>
|
||||
<div
|
||||
id="landing-heading-container"
|
||||
style="opacity: 0;"
|
||||
class="flex flex-col justify-center items-center gap-2 backdrop-blur-2xl p-card rounded-card ring ring-primary/20
|
||||
class="flex flex-col justify-center items-center gap-2 backdrop-blur-2xl
|
||||
p-card rounded-card ring ring-primary/20
|
||||
max-md:w-[90vw]"
|
||||
style="background-image:
|
||||
linear-gradient(to bottom, transparent, hsl(var(--color-primary) / 0.1) 100%),
|
||||
repeating-linear-gradient(60deg, transparent, hsl(var(--color-neutral-accent) / 0.2) 0.5rem, hsl(var(--color-neutral-accent) / 1) 0.5rem );"
|
||||
>
|
||||
<!--h1>vspace.one</h1-->
|
||||
<Heading
|
||||
@ -22,7 +25,7 @@ import Heading from "@/components/Heading.astro";
|
||||
id="heading-makerspace"
|
||||
class="text-4xl text-center"
|
||||
>
|
||||
Ein Makerspace und Hackerspace
|
||||
Ein Space für Maker und Hacker!
|
||||
</Heading>
|
||||
<p>
|
||||
<a class="text-xl" href="/tour">Hier gehts zur virtuellen Space-Tour!</a
|
||||
@ -70,19 +73,6 @@ import Heading from "@/components/Heading.astro";
|
||||
"#landing-heading-container",
|
||||
)!;
|
||||
|
||||
viewer.on("load", () => {
|
||||
console.log("loaded");
|
||||
|
||||
animateHeading(headingMakerspace, 0.5);
|
||||
|
||||
animate(
|
||||
panoBg,
|
||||
{ scale: [0.9, 1], opacity: [0, 1] },
|
||||
{
|
||||
...ease.quint!(1.5).out,
|
||||
},
|
||||
);
|
||||
|
||||
animate(
|
||||
landingHeadingContainer,
|
||||
{ scale: [0.4, 1], opacity: [0, 1] },
|
||||
@ -91,6 +81,17 @@ import Heading from "@/components/Heading.astro";
|
||||
},
|
||||
);
|
||||
|
||||
animateHeading(headingMakerspace, { delay: 0.5, once: true });
|
||||
|
||||
viewer.on("load", () => {
|
||||
animate(
|
||||
panoBg,
|
||||
{ scale: [0.9, 1], opacity: [0, 1] },
|
||||
{
|
||||
...ease.quint!(1.5).out,
|
||||
},
|
||||
);
|
||||
|
||||
animate(
|
||||
(progress) => {
|
||||
viewer.setPitch(progress * 10, false);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user