improve landing bg
This commit is contained in:
parent
d78fe7b020
commit
b228f3cd8d
@ -1,13 +1,25 @@
|
|||||||
---
|
---
|
||||||
import Section from "../Section.astro";
|
import Section from "../Section.astro";
|
||||||
|
|
||||||
type NavigationItem = {
|
enum NavigationItemType {
|
||||||
path: string;
|
Link,
|
||||||
label: string;
|
Text,
|
||||||
};
|
}
|
||||||
|
|
||||||
|
type NavigationItem =
|
||||||
|
| {
|
||||||
|
path: string;
|
||||||
|
label: string;
|
||||||
|
type: NavigationItemType.Link;
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
type: NavigationItemType.Text;
|
||||||
|
content: string;
|
||||||
|
};
|
||||||
|
|
||||||
type NavigationGroup = {
|
type NavigationGroup = {
|
||||||
title: string;
|
title: string;
|
||||||
|
class?: string;
|
||||||
items: Array<NavigationItem>;
|
items: Array<NavigationItem>;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -17,36 +29,60 @@ const tree: Array<NavigationGroup> = [
|
|||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
path: "/",
|
path: "/",
|
||||||
|
type: NavigationItemType.Link,
|
||||||
label: "Landing",
|
label: "Landing",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "https://github.com/tempblade/creator",
|
path: "https://github.com/tempblade/creator",
|
||||||
|
type: NavigationItemType.Link,
|
||||||
label: "GitHub",
|
label: "GitHub",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "https://tempblade.com",
|
path: "https://tempblade.com",
|
||||||
|
type: NavigationItemType.Link,
|
||||||
label: "tempblade",
|
label: "tempblade",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Legal",
|
title: "Legal",
|
||||||
items: [{ path: "/legal/imprint", label: "Imprint" }],
|
items: [
|
||||||
|
{
|
||||||
|
path: "/legal/imprint",
|
||||||
|
label: "Imprint",
|
||||||
|
type: NavigationItemType.Link,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "",
|
||||||
|
class: "ml-auto mr-0 self-end",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
type: NavigationItemType.Text,
|
||||||
|
content: "Made with ❤️ in Rottweil",
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
---
|
---
|
||||||
|
|
||||||
<footer class="bg-neutral-accent">
|
<footer class="bg-neutral-accent">
|
||||||
<Section>
|
<Section>
|
||||||
<div class="flex flex-row flex-wrap gap-12">
|
<div class="flex flex-row flex-wrap gap-12 w-full pb-8">
|
||||||
{
|
{
|
||||||
tree.map((group) => (
|
tree.map((group) => (
|
||||||
<div>
|
<div class={group.class}>
|
||||||
<h3 class="mb-2">{group.title}</h3>
|
{group.title && <h3 class="mb-2">{group.title}</h3>}
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
{group.items.map((item) => (
|
{group.items.map((item) => {
|
||||||
<a href={item.path}>{item.label}</a>
|
switch (item.type) {
|
||||||
))}
|
case NavigationItemType.Link:
|
||||||
|
return <a href={item.path}>{item.label}</a>;
|
||||||
|
case NavigationItemType.Text:
|
||||||
|
return <p>{item.content}</p>;
|
||||||
|
}
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))
|
))
|
||||||
|
@ -4,7 +4,7 @@ import Button from "@/components/Button.astro";
|
|||||||
|
|
||||||
<div class="h-[80vh] relative w-full overflow-x-hidden">
|
<div class="h-[80vh] relative w-full overflow-x-hidden">
|
||||||
<aside
|
<aside
|
||||||
style="filter:blur(50px);"
|
style="filter:blur(70px);"
|
||||||
class="z-0 absolute top-0 flex items-center w-full h-full justify-center object-center object-contain"
|
class="z-0 absolute top-0 flex items-center w-full h-full justify-center object-center object-contain"
|
||||||
id="landing-bg-container"
|
id="landing-bg-container"
|
||||||
>
|
>
|
||||||
|
@ -10,7 +10,7 @@ const canvas = document.getElementById("landing-bg") as HTMLCanvasElement;
|
|||||||
const initialPoints: Array<Point> = [{
|
const initialPoints: Array<Point> = [{
|
||||||
x: 500,
|
x: 500,
|
||||||
y: 400,
|
y: 400,
|
||||||
color: "#8AFFAD",
|
color: "purple",
|
||||||
radius: Math.random() * 200
|
radius: Math.random() * 200
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -95,7 +95,7 @@ export class GradientBackground {
|
|||||||
const y = offsetY + point.y;
|
const y = offsetY + point.y;
|
||||||
|
|
||||||
// Create the gradient
|
// Create the gradient
|
||||||
const gradient = this.context.createRadialGradient(x, y, 0, x, y, 700);
|
const gradient = this.context.createRadialGradient(x, y, 0, x, y, 500);
|
||||||
|
|
||||||
gradient.addColorStop(0, color);
|
gradient.addColorStop(0, color);
|
||||||
gradient.addColorStop(1, "rgba(0,0,0,0)");
|
gradient.addColorStop(1, "rgba(0,0,0,0)");
|
||||||
|
Loading…
x
Reference in New Issue
Block a user