remove heading animation temporarly
improve styling use ubuntu font for headings
This commit is contained in:
parent
f44fa8bf7c
commit
49c340ee1d
@ -3,6 +3,8 @@ import tailwind from "@astrojs/tailwind";
|
||||
|
||||
import mdx from "@astrojs/mdx";
|
||||
|
||||
import icon from "astro-icon";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
site: "https://www.vspace.one",
|
||||
@ -16,5 +18,6 @@ export default defineConfig({
|
||||
applyBaseStyles: false,
|
||||
}),
|
||||
mdx(),
|
||||
icon(),
|
||||
],
|
||||
});
|
||||
|
||||
BIN
web/bun.lockb
BIN
web/bun.lockb
Binary file not shown.
@ -15,11 +15,14 @@
|
||||
"@astrojs/mdx": "^3.1.6",
|
||||
"@astrojs/tailwind": "^5.1.0",
|
||||
"@astrojs/ts-plugin": "^1.10.2",
|
||||
"@iconify-icons/akar-icons": "^1.2.19",
|
||||
"@iconify-json/akar-icons": "^1.2.1",
|
||||
"@photo-sphere-viewer/core": "^5.10.0",
|
||||
"@photo-sphere-viewer/markers-plugin": "^5.10.0",
|
||||
"@photo-sphere-viewer/virtual-tour-plugin": "^5.10.0",
|
||||
"@unom/style": "git+https://git.unom.io/unom/style.git",
|
||||
"astro": "^4.15.6",
|
||||
"astro-icon": "^1.1.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
|
||||
BIN
web/public/pic/vspaceone_Illustrationen_Rakete_1.webp
Normal file
BIN
web/public/pic/vspaceone_Illustrationen_Rakete_1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 247 KiB |
@ -13,11 +13,11 @@ const { event } = Astro.props;
|
||||
<div class="bg-primary rounded-t-card p-card">
|
||||
<h3 class="text-neutral">
|
||||
<span class="block font-medium">
|
||||
{event.start.toLocaleDateString("de-DE", { year: "numeric" })}
|
||||
{event.start?.toLocaleDateString("de-DE", { year: "numeric" })}
|
||||
</span>
|
||||
<span class="block font-bold text-4xl">
|
||||
{
|
||||
event.start.toLocaleDateString("de-DE", {
|
||||
event.start?.toLocaleDateString("de-DE", {
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
})
|
||||
|
||||
21
web/src/components/Cards/CardParticipate.astro
Normal file
21
web/src/components/Cards/CardParticipate.astro
Normal file
@ -0,0 +1,21 @@
|
||||
---
|
||||
import Card from "@/components/Card.astro";
|
||||
|
||||
export type Props = {
|
||||
title: string;
|
||||
};
|
||||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
|
||||
<Card padding={false}>
|
||||
<div class="flex flex-col bg-primary rounded-t-card p-card">
|
||||
<div class="size-12 mb-2 text-neutral">
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
<h3 class="text-neutral">{title}</h3>
|
||||
</div>
|
||||
<div class="p-card">
|
||||
<slot name="content" />
|
||||
</div>
|
||||
</Card>
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
import type { z } from "astro:content";
|
||||
import { Sponsor } from "@/content/config";
|
||||
import type { Sponsor } from "@/content/config";
|
||||
import Card from "../Card.astro";
|
||||
|
||||
type Props = {
|
||||
|
||||
@ -4,12 +4,13 @@ import type { HTMLAttributes } from "astro/types";
|
||||
import { type VariantProps, cva } from "class-variance-authority";
|
||||
|
||||
const heading = cva(
|
||||
"max-w-3xl m-[var(--section-heading-margin)] overflow-hidden",
|
||||
"max-w-3xl m-[var(--section-heading-margin)] overflow-hidden font-display",
|
||||
{
|
||||
variants: {
|
||||
main: {
|
||||
true: "font-bold text-transparent animated-heading \
|
||||
bg-gradient-to-t from-transparent to-primary bg-clip-text",
|
||||
bg-gradient-to-t from-transparent to-primary bg-clip-text \
|
||||
",
|
||||
false: "font-semibold",
|
||||
},
|
||||
animated: {
|
||||
@ -20,6 +21,10 @@ const heading = cva(
|
||||
true: "py-4",
|
||||
false: "p-0",
|
||||
},
|
||||
hasIcon: {
|
||||
true: "",
|
||||
false: "",
|
||||
},
|
||||
},
|
||||
},
|
||||
);
|
||||
@ -33,6 +38,7 @@ export interface Props
|
||||
const {
|
||||
main = false,
|
||||
padding = true,
|
||||
hasIcon = false,
|
||||
subtitle,
|
||||
id,
|
||||
class: propsClass,
|
||||
@ -45,6 +51,13 @@ const titleClass = cn(
|
||||
---
|
||||
|
||||
<div class="z-0 relative">
|
||||
{
|
||||
hasIcon && (
|
||||
<div class="w-16 h-16 text-primary mb-4">
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
main ? (
|
||||
<h1 id={id} class={titleClass}>
|
||||
|
||||
@ -11,27 +11,29 @@ const {
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<div class="keen-slider__slide">
|
||||
<div
|
||||
class="flex flex-col lg:flex-row max-w-section m-auto p-main lg:h-[600px]"
|
||||
>
|
||||
<>
|
||||
<div class="keen-slider__slide">
|
||||
<div
|
||||
class="max-lg:rounded-t-card lg:rounded-l-card overflow-hidden
|
||||
class="flex flex-col lg:flex-row max-w-section m-auto p-main py-0 lg:h-[600px]"
|
||||
>
|
||||
<div
|
||||
class="max-lg:rounded-t-card lg:rounded-l-card overflow-hidden
|
||||
lg:h-full lg:w-[60%] max-lg:max-h-[500px]"
|
||||
>
|
||||
<Image
|
||||
densities={[1.5, 2]}
|
||||
format="avif"
|
||||
class="w-full h-full object-cover object-center"
|
||||
src={image}
|
||||
alt={imageAlt}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="p-card bg-neutral-accent lg:rounded-r-card max-lg:rounded-b-card w-[40%] max-lg:w-full"
|
||||
>
|
||||
<h4 class="text-2xl font-semibold mb-2">{title}</h4>
|
||||
<p>{text}</p>
|
||||
>
|
||||
<Image
|
||||
densities={[1.5, 2]}
|
||||
format="avif"
|
||||
class="w-full h-full object-cover object-center"
|
||||
src={image}
|
||||
alt={imageAlt}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="p-card bg-neutral-accent lg:rounded-r-card max-lg:rounded-b-card w-[40%] max-lg:w-full"
|
||||
>
|
||||
<h4 class="text-2xl font-semibold mb-2">{title}</h4>
|
||||
<p>{text}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -24,7 +24,7 @@ import Logo from "../Logo/Logo.astro";
|
||||
<Logo withText={false} />
|
||||
</div>
|
||||
<h2
|
||||
class="text-2xl text-main lg:text-3xl transition-all font-extrabold"
|
||||
class="text-2xl text-main lg:text-3xl transition-all font-extrabold font-display"
|
||||
>
|
||||
vspace.one
|
||||
</h2>
|
||||
@ -43,8 +43,8 @@ import Logo from "../Logo/Logo.astro";
|
||||
class="animate-in slide-in-from-top-10 ease-out-quart duration-1000 absolute top-header w-full
|
||||
bg-neutral p-main left-0 lg:hidden hidden flex flex-col gap-3 -z-30"
|
||||
>
|
||||
<a class={button({ variant: "secondary", size: "lg" })} href="/#location"
|
||||
>Standort</a
|
||||
<a class={button({ variant: "secondary", size: "lg" })} href="/support"
|
||||
>Unterstütze uns</a
|
||||
>
|
||||
<a
|
||||
class={button({
|
||||
@ -53,13 +53,13 @@ import Logo from "../Logo/Logo.astro";
|
||||
})}
|
||||
href="/faq">FAQ</a
|
||||
>
|
||||
<a class={button({ variant: "primary", size: "lg" })} href="/support"
|
||||
>Unterstütze uns!</a
|
||||
<a class={button({ variant: "primary", size: "lg" })} href="/#location"
|
||||
>Besuche uns!</a
|
||||
>
|
||||
</div>
|
||||
<div class="flex flex-row gap-2 items-center max-lg:hidden">
|
||||
<a class={button({ variant: "link", size: "lg" })} href="/#location"
|
||||
>Standort</a
|
||||
<a class={button({ variant: "link", size: "lg" })} href="/support"
|
||||
>Unterstütze uns</a
|
||||
>
|
||||
<a
|
||||
class={button({
|
||||
@ -69,8 +69,8 @@ import Logo from "../Logo/Logo.astro";
|
||||
})}
|
||||
href="/faq">FAQ</a
|
||||
>
|
||||
<a class={button({ variant: "primary", size: "lg" })} href="/support"
|
||||
>Unterstütze uns!</a
|
||||
<a class={button({ variant: "primary", size: "lg" })} href="/#location"
|
||||
>Besuche uns!</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,47 +1,60 @@
|
||||
import { animate, spring, stagger } from "motion";
|
||||
//import { animate, spring, stagger } from "motion";
|
||||
|
||||
export default function animateHeading(e: Element, options?: { delay?: number, once?: boolean }) {
|
||||
const id = Math.floor(Math.random() * 100).toString();
|
||||
export default function animateHeading(
|
||||
_e: Element,
|
||||
_options?: { delay?: number; once?: boolean },
|
||||
) {
|
||||
return;
|
||||
|
||||
e.id = id;
|
||||
// Currently disabled since theres no handling of line breaks yet
|
||||
/*
|
||||
const id = Math.floor(Math.random() * 100).toString();
|
||||
|
||||
if (e.textContent) {
|
||||
e.innerHTML = e.textContent.replace(
|
||||
/\S/g,
|
||||
`<span class='letter
|
||||
e.id = id;
|
||||
|
||||
if (e.textContent) {
|
||||
e.innerHTML = e.textContent.replace(
|
||||
/\S/g,
|
||||
`<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)!;
|
||||
const updatedElement = document.getElementById(id)!;
|
||||
|
||||
console.log("updated", updatedElement);
|
||||
console.log("updated", updatedElement);
|
||||
|
||||
const letters = updatedElement.querySelectorAll(`:scope > .letter`);
|
||||
const letters = updatedElement.querySelectorAll(`:scope > .letter`);
|
||||
|
||||
let didAppear = false;
|
||||
|
||||
let didAppear = false;
|
||||
const observer = new IntersectionObserver(
|
||||
() => {
|
||||
console.log("inview");
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
() => {
|
||||
console.log("inview");
|
||||
if (options?.once && didAppear) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (options?.once && didAppear) {
|
||||
return;
|
||||
}
|
||||
animate(
|
||||
letters,
|
||||
{ y: [50, 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 },
|
||||
);
|
||||
|
||||
animate(
|
||||
letters,
|
||||
{ y: [50, 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 },
|
||||
);
|
||||
|
||||
observer.observe(e);
|
||||
}
|
||||
}
|
||||
observer.observe(e);
|
||||
} */
|
||||
}
|
||||
|
||||
@ -24,13 +24,13 @@ import RootLayout from "@/layouts/RootLayout.astro";
|
||||
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
|
||||
eignet sich beispielsweise das regelmäßig stattfindende Treffen am
|
||||
Dienstagabend. <br />
|
||||
Dienstagabend. <br /><br />
|
||||
|
||||
Alternativ schicke sie an folgende Adresse:<br />
|
||||
|
||||
vspace.one e.V <br />
|
||||
Am Krebsgraben 15 <br />
|
||||
78048 Villingen <br />
|
||||
78048 Villingen <br /><br />
|
||||
|
||||
Oder an folgende E-Mail Adresse: <br />
|
||||
|
||||
|
||||
@ -1,8 +1,13 @@
|
||||
---
|
||||
import InfoSlide from "@/components/InfoSlide.astro";
|
||||
import { infoSlides } from "@/content/info-slides";
|
||||
import Heading from "@/components/Heading.astro";
|
||||
---
|
||||
|
||||
<div class="p-main m-auto max-w-section py-0">
|
||||
<Heading>Einblicke</Heading>
|
||||
</div>
|
||||
|
||||
<div class="m-auto">
|
||||
<div class="keen-slider" id="info-slideshow">
|
||||
{infoSlides.map((e) => <InfoSlide infoSlide={e} />)}
|
||||
|
||||
@ -1,23 +1,35 @@
|
||||
---
|
||||
import Heading from "@/components/Heading.astro";
|
||||
import vspaceOneRakete from "../../public/pic/vspaceone_Illustrationen_Rakete_1.webp";
|
||||
import { Image } from "astro:assets";
|
||||
---
|
||||
|
||||
<div>
|
||||
<Heading>Was wir machen</Heading>
|
||||
|
||||
<p>
|
||||
Unser Ziel ist der Wissensaustausch sowie die Bildung aller interessierten
|
||||
in den Bereichen neuartiger computergestützter Technologien (wie zum
|
||||
Beispiel aber nicht ausschließlich 3D-Druck, CNC, Internet der Dinge und
|
||||
Robotik), der Elektrotechnik und Elektronik sowie auch auf Gebieten der
|
||||
Reparatur und Wartung.
|
||||
<br />
|
||||
Natürlich aber auch ganz im Sinne aller anderen Hacker- und Makerspaces das bieten
|
||||
einer Plattform, um seinen Interessen in diesen Gebieten nachzugehen von Programmieren
|
||||
bis Holz- und Metallwerken ist fast alles dabei.
|
||||
<br />
|
||||
Dazu haben wir eine immer größer werdende offene Werkstatt, die für jeden zugänglich
|
||||
sein soll!
|
||||
</p>
|
||||
<a href="/faq">Mehr Fragen zu uns und was wir machen beantworten wir hier!</a>
|
||||
<div class="flex flex-col-reverse lg:flex-row lg:items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<Heading>Was wir machen</Heading>
|
||||
<p>
|
||||
Unser Ziel ist der Wissensaustausch sowie die Bildung aller interessierten
|
||||
in den Bereichen neuartiger computergestützter Technologien (wie zum
|
||||
Beispiel aber nicht ausschließlich 3D-Druck, CNC, Internet der Dinge und
|
||||
Robotik), der Elektrotechnik und Elektronik sowie auch auf Gebieten der
|
||||
Reparatur und Wartung.
|
||||
<br />
|
||||
Natürlich aber auch ganz im Sinne aller anderen Hacker- und Makerspaces das
|
||||
bieten einer Plattform, um seinen Interessen in diesen Gebieten nachzugehen
|
||||
von Programmieren bis Holz- und Metallwerken ist fast alles dabei.
|
||||
<br />
|
||||
Dazu haben wir eine immer größer werdende offene Werkstatt, die für jeden zugänglich
|
||||
sein soll!
|
||||
</p>
|
||||
<a href="/faq"
|
||||
>Mehr Fragen zu uns und was wir machen beantworten wir hier!</a
|
||||
>
|
||||
</div>
|
||||
<div class="flex w-full h-full max-lg:max-w-[300px] lg:min-w-[300px]">
|
||||
<Image
|
||||
class="object-fit w-full h-full"
|
||||
src={vspaceOneRakete}
|
||||
alt="Ein 3D Rendering einer Rakete"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,32 +1,36 @@
|
||||
---
|
||||
import Card from "@/components/Card.astro";
|
||||
import CardParticipate from "@/components/Cards/CardParticipate.astro";
|
||||
import Heading from "@/components/Heading.astro";
|
||||
import { Icon } from "astro-icon/components";
|
||||
import { HeartHandshake, Binoculars, UsersRound } from "lucide-astro";
|
||||
---
|
||||
|
||||
<div id="Mitmachen">
|
||||
<Heading>Mitmachen</Heading>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-4 gap-main">
|
||||
<Card>
|
||||
<h3>Vorbeischauen</h3>
|
||||
<p>
|
||||
<CardParticipate title="Vorbeischauen">
|
||||
<Binoculars slot="icon" class="w-full h-full" />
|
||||
<p slot="content">
|
||||
Du möchtest uns und unsere Räumlichkeiten gerne persönlich kennenlernen?
|
||||
Schau doch Dienstags ab 19:00 bei uns in der Am Krebsgraben 15 in
|
||||
Villingen vorbei. Dienstags findet bei uns jede Woche der Chaostreff
|
||||
statt.
|
||||
</p>
|
||||
</Card>
|
||||
<Card>
|
||||
<h3>Mitglied werden</h3>
|
||||
<p>
|
||||
</CardParticipate>
|
||||
|
||||
<CardParticipate title="Mitglied werden">
|
||||
<UsersRound slot="icon" class="w-full h-full" />
|
||||
<p slot="content">
|
||||
Bei uns kann Jeder und Jede mitmachen. Interessierte Schüler, Studenten
|
||||
und Erwachsene, die sich für kreativen Umgang mit Technik begeistern
|
||||
sind willkommen. Wenn euch gefällt was wir tun und ihr uns unterstützen
|
||||
wollt findet ihr unser Beitrittsformular <a href="/join">hier</a>.
|
||||
</p>
|
||||
</Card>
|
||||
<Card>
|
||||
<h3>Telegram</h3>
|
||||
<p>
|
||||
</CardParticipate>
|
||||
<CardParticipate title="Telegram">
|
||||
<Icon slot="icon" class="w-full h-full" name="akar-icons:telegram-fill" />
|
||||
|
||||
<p slot="content">
|
||||
Für die regelmäßige Kommunikation verwenden wir <a
|
||||
href="https://t.me/joinchat/DmNdswpnKgox_zzqENYXiA">Telegramgruppe</a
|
||||
> und <a href="https://matrix.to/#/#vspaceone-general:matrix.org"
|
||||
@ -36,15 +40,16 @@ import Heading from "@/components/Heading.astro";
|
||||
interessierst und wissen willst, was bei uns los ist, trete ihr bei oder
|
||||
schreibe uns eine Email an info[at]vspace.one.
|
||||
</p>
|
||||
</Card>
|
||||
<Card>
|
||||
<h3>Spenden</h3>
|
||||
<p>
|
||||
</CardParticipate>
|
||||
|
||||
<CardParticipate title="Spenden">
|
||||
<HeartHandshake class="w-full h-full" slot="icon" />
|
||||
<p slot="content">
|
||||
Dir gefällt was wir machen, hast aber keine Möglichkeit oder Lust
|
||||
Mitglied zu werden? Gerne nehmen wir wie <a href="/donate"
|
||||
>hier beschrieben</a
|
||||
> deine Spende als Überweisung an.
|
||||
</p>
|
||||
</Card>
|
||||
</CardParticipate>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -17,7 +17,7 @@ const spaceData = await getSpaceData();
|
||||
)}
|
||||
>
|
||||
</div>
|
||||
<p class="text-main font-extrabold text-3xl">
|
||||
<p class="text-main font-extrabold text-3xl font-display">
|
||||
{spaceData.state.open ? "Offen" : "Geschlossen"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -5,6 +5,9 @@ module.exports = {
|
||||
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
display: ["Ubuntu"],
|
||||
},
|
||||
screens: { "2xl": "1400px", "3xl": "1850px" },
|
||||
borderRadius: {
|
||||
card: "0.5rem",
|
||||
@ -65,7 +68,7 @@ module.exports = {
|
||||
},
|
||||
plugins: [
|
||||
require("tailwindcss-animate"),
|
||||
plugin(function ({ addVariant }) {
|
||||
plugin(({ addVariant }) => {
|
||||
addVariant("hocus", ["&:hover", "&:focus"]);
|
||||
}),
|
||||
],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user