first commit
This commit is contained in:
Timothy Rogers
commit
6d30a41b7d
28 changed files with 4851 additions and 0 deletions
61
src/components/Card.astro
Normal file
61
src/components/Card.astro
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
body: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const { href, title, body } = Astro.props;
|
||||
---
|
||||
|
||||
<li class="link-card">
|
||||
<a href={href}>
|
||||
<h2>
|
||||
{title}
|
||||
<span>→</span>
|
||||
</h2>
|
||||
<p>
|
||||
{body}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<style>
|
||||
.link-card {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding: 1px;
|
||||
background-color: #23262d;
|
||||
background-image: none;
|
||||
background-size: 400%;
|
||||
border-radius: 7px;
|
||||
background-position: 100%;
|
||||
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.link-card > a {
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
line-height: 1.4;
|
||||
padding: calc(1.5rem - 1px);
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
background-color: #23262d;
|
||||
opacity: 0.8;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) {
|
||||
background-position: 0;
|
||||
background-image: var(--accent-gradient);
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) h2 {
|
||||
color: rgb(var(--accent-light));
|
||||
}
|
||||
</style>
|
||||
1
src/env.d.ts
vendored
Normal file
1
src/env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/// <reference path="../.astro/types.d.ts" />
|
||||
101
src/layouts/Layout.astro
Normal file
101
src/layouts/Layout.astro
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content="Astro description" />
|
||||
<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>
|
||||
<div
|
||||
class="w-full h-screen bg-repeatbg-repeat bg-pink-300"
|
||||
style="background-image: url('images/bg-img.webp');"
|
||||
>
|
||||
<div class="container mx-auto p-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="bg-pink-200 border-purple-400 border-4 rounded-md">
|
||||
<img src="images/header.webp" class="p-2 rounded-xl" />
|
||||
<!-- add pink hr -->
|
||||
<hr class="border-purple-400 border-2" />
|
||||
<div
|
||||
class="grid grid-flow-col auto-cols-max gap-2 px-4 pb-2 pt-2 text-pink-500 justify-center font-bold"
|
||||
>
|
||||
<div><a href="#">Home</a></div>
|
||||
<div><a href="">Shrines</a></div>
|
||||
<div><a href="#">Ramblings</a></div>
|
||||
<div><a href="#">Hobbies</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-pink-200 border-purple-400 border-4 rounded-md p-4">
|
||||
<slot />
|
||||
</div>
|
||||
<div
|
||||
class="bg-pink-200 border-purple-400 border-4 rounded-md p-2 text-center"
|
||||
>
|
||||
<tt>Friends Sites</tt>
|
||||
<div
|
||||
class="grid grid-flow-col auto-cols-max gap-2 p-2 justify-center"
|
||||
>
|
||||
<div>
|
||||
<a href="https://arch.dog/" target="_blank"
|
||||
><img src="images/buttons/arch-dog.png" /></a
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://brodokk.space/" target="_blank"
|
||||
><img src="images/buttons/brodokk-space.webp" /></a
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://david.garden/" target="_blank"
|
||||
><img src="images/buttons/david-garden.webp" /></a
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://steffo.dev/" target="_blank"
|
||||
><img src="images/buttons/steffo.webp" /></a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<tt>Some Buttons I Like</tt>
|
||||
<div
|
||||
class="grid grid-flow-col auto-cols-max gap-2 p-2 justify-center"
|
||||
>
|
||||
<div><img src="images/buttons/anybrowser.webp" /></div>
|
||||
<div>
|
||||
<a href="https://archlinux.org/" target="_blank"
|
||||
><img src="images/buttons/Arch.png" /></a
|
||||
>
|
||||
</div>
|
||||
<div><img src="images/buttons/dothack.png" /></div>
|
||||
<div><img src="images/buttons/dragons.jpg" /></div>
|
||||
<div>
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Non-binary_gender"
|
||||
target="_blank"><img src="images/buttons/enby.png" /></a
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://jointhefediverse.net/?lang=en-us"
|
||||
target="_blank"><img src="images/buttons/fediverse.gif" /></a
|
||||
>
|
||||
</div>
|
||||
<div><img src="images/buttons/gnu-linux.gif" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
10
src/pages/index.astro
Normal file
10
src/pages/index.astro
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Card from "../components/Card.astro";
|
||||
---
|
||||
|
||||
<Layout title="Welcome to Astro.">
|
||||
<p>I am page content</p>
|
||||
<p>What is my purpose? Why am I here?</p>
|
||||
<p>What on earth is this place? what happened to me? where am I?</p>
|
||||
</Layout>
|
||||
Loading…
Add table
Add a link
Reference in a new issue