Initial setup

2022-09-07 17:32:02 +02:00
parent 44a588ae92
commit d5f90fab75
15 changed files with 9859 additions and 0 deletions
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -0,0 +1,76 @@
+---
+export interface Props {
+	title: string;
+	body: string;
+	href: string;
+}
+
+const { href, title, body } = Astro.props;
+---
+
+<li class="link-card">
+	<a href={href}>
+		<h2>
+			{title}
+			<span>&rarr;</span>
+		</h2>
+		<p>
+			{body}
+		</p>
+	</a>
+</li>
+<style>
+	:root {
+		--link-gradient: linear-gradient(45deg, #4f39fa, #da62c4 30%, var(--color-border) 60%);
+	}
+
+	.link-card {
+		list-style: none;
+		display: flex;
+		padding: 0.15rem;
+		background-image: var(--link-gradient);
+		background-size: 400%;
+		border-radius: 0.5rem;
+		background-position: 100%;
+		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	.link-card > a {
+		width: 100%;
+		text-decoration: none;
+		line-height: 1.4;
+		padding: 1em 1.3em;
+		border-radius: 0.35rem;
+		color: var(--text-color);
+		background-color: white;
+		opacity: 0.8;
+	}
+
+	h2 {
+		margin: 0;
+		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	p {
+		margin-top: 0.75rem;
+		margin-bottom: 0;
+	}
+
+	h2 span {
+		display: inline-block;
+		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	.link-card:is(:hover, :focus-within) {
+		background-position: 0;
+	}
+
+	.link-card:is(:hover, :focus-within) h2 {
+		color: #4f39fa;
+	}
+
+	.link-card:is(:hover, :focus-within) h2 span {
+		will-change: transform;
+		transform: translateX(2px);
+	}
+</style>
--- a/src/components/Cta.astro
+++ b/src/components/Cta.astro
@@ -0,0 +1,9 @@
+---
+export interface Props {
+    to?: String
+}
+---
+
+<button class="text-primary bg-none uppercase font-bold py-4 px-8 border-primary border hover:bg-primary hover:text-white transition-colors ease-in-out duration-300">
+    <slot />
+</button>
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="astro/client" />
--- a/src/layouts/Main.astro
+++ b/src/layouts/Main.astro
@@ -0,0 +1,23 @@
+---
+export interface Props {
+    title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <meta name="generator" content={ Astro.generator } />
+        <title>{ title }</title>
+    </head>
+    <body class="bg-slate-900 text-white">
+        <div class="container mx-auto">
+            <slot />
+        </div>
+    </body>
+</html>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -0,0 +1,12 @@
+---
+import Main from '../layouts/Main.astro';
+import Cta from '../components/Cta.astro';
+---
+
+<Main title="Welcome to Astro.">
+    <main>
+        <Cta to="./test">
+            Show more
+        </Cta>
+    </main>
+</Main>