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"; import Section from "../Section.astro";
type NavigationItem = { enum NavigationItemType {
Link,
Text,
}
type NavigationItem =
| {
path: string; path: string;
label: 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>
)) ))

View File

@ -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"
> >

View File

@ -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)");