update footer
All checks were successful
continuous-integration/drone/push Build is passing

improve landing bg
This commit is contained in:
Enrico Bühler 2023-06-26 01:14:35 +02:00
parent d78fe7b020
commit b228f3cd8d
3 changed files with 50 additions and 14 deletions

View File

@ -1,13 +1,25 @@
---
import Section from "../Section.astro";
type NavigationItem = {
enum NavigationItemType {
Link,
Text,
}
type NavigationItem =
| {
path: string;
label: string;
};
type: NavigationItemType.Link;
}
| {
type: NavigationItemType.Text;
content: string;
};
type NavigationGroup = {
title: string;
class?: string;
items: Array<NavigationItem>;
};
@ -17,36 +29,60 @@ const tree: Array<NavigationGroup> = [
items: [
{
path: "/",
type: NavigationItemType.Link,
label: "Landing",
},
{
path: "https://github.com/tempblade/creator",
type: NavigationItemType.Link,
label: "GitHub",
},
{
path: "https://tempblade.com",
type: NavigationItemType.Link,
label: "tempblade",
},
],
},
{
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">
<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) => (
<div>
<h3 class="mb-2">{group.title}</h3>
<div class={group.class}>
{group.title && <h3 class="mb-2">{group.title}</h3>}
<div class="flex flex-col">
{group.items.map((item) => (
<a href={item.path}>{item.label}</a>
))}
{group.items.map((item) => {
switch (item.type) {
case NavigationItemType.Link:
return <a href={item.path}>{item.label}</a>;
case NavigationItemType.Text:
return <p>{item.content}</p>;
}
})}
</div>
</div>
))

View File

@ -4,7 +4,7 @@ import Button from "@/components/Button.astro";
<div class="h-[80vh] relative w-full overflow-x-hidden">
<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"
id="landing-bg-container"
>

View File

@ -10,7 +10,7 @@ const canvas = document.getElementById("landing-bg") as HTMLCanvasElement;
const initialPoints: Array<Point> = [{
x: 500,
y: 400,
color: "#8AFFAD",
color: "purple",
radius: Math.random() * 200
},
{
@ -95,7 +95,7 @@ export class GradientBackground {
const y = offsetY + point.y;
// 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(1, "rgba(0,0,0,0)");