aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/Card.astro76
-rw-r--r--src/layouts/Layout.astro56
-rw-r--r--src/pages/board/[board].astro2
-rw-r--r--src/pages/boards.astro27
-rw-r--r--src/pages/index.astro120
5 files changed, 24 insertions, 257 deletions
diff --git a/src/components/Card.astro b/src/components/Card.astro
deleted file mode 100644
index aea28c8..0000000
--- a/src/components/Card.astro
+++ /dev/null
@@ -1,76 +0,0 @@
----
-export interface Props {
- title: string;
- body: string;
- href: string;
-}
-
-const { href, title, body } = Astro.props as 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>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
deleted file mode 100644
index 0e3e837..0000000
--- a/src/layouts/Layout.astro
+++ /dev/null
@@ -1,56 +0,0 @@
----
-export interface Props {
- title: string;
-}
-
-const { title } = Astro.props as 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>
- <slot />
- </body>
-</html>
-<style>
- :root {
- --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
- --font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
- --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
-
- --color-text: hsl(12, 5%, 4%);
- --color-bg: hsl(10, 21%, 95%);
- --color-border: hsl(17, 24%, 90%);
- }
-
- html {
- font-family: system-ui, sans-serif;
- font-size: var(--font-size-base);
- color: var(--color-text);
- background-color: var(--color-bg);
- }
-
- body {
- margin: 0;
- }
-
- :global(h1) {
- font-size: var(--font-size-xl);
- }
-
- :global(h2) {
- font-size: var(--font-size-lg);
- }
-
- :global(code) {
- font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
- Bitstream Vera Sans Mono, Courier New, monospace;
- }
-</style>
diff --git a/src/pages/board/[board].astro b/src/pages/board/[board].astro
index de76964..69959aa 100644
--- a/src/pages/board/[board].astro
+++ b/src/pages/board/[board].astro
@@ -19,7 +19,7 @@ const threads: Thread[] = await data.json();
<ThreadLayout>
<h1 style="text-align:center">
- <a href=`/boards`>{board}</a>
+ <a href=`/`>{board}</a>
</h1>
<div class="blackbox">
diff --git a/src/pages/boards.astro b/src/pages/boards.astro
deleted file mode 100644
index 8120bd2..0000000
--- a/src/pages/boards.astro
+++ /dev/null
@@ -1,27 +0,0 @@
----
-import '../styles/blackbox.css'
-import Default from '../layouts/Default.astro';
-import { api } from '../lib/api.ts';
-
-const data = await api('get', 'boards');
-const boards: string[] = await data.json();
----
-
-<Default title="Boards">
- <h1>Boards</h1>
-
- <div class="blackbox">
- <ul>
- {boards.map((board) => (
- <li><a href=`/board/${board}`>{board}</a></li>
- ))}
- </ul>
- </div>
-</Default>
-
-<style is:inline>
- :root {
- --wdt: 300px;
- --ml: 0px;
- }
-</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4dfffe3..8120bd2 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,101 +1,27 @@
---
-import Layout from '../layouts/Layout.astro';
-import Card from '../components/Card.astro';
----
-
-<Layout title="Welcome to Astro.">
- <main>
- <h1>Welcome to <span class="text-gradient">Astro</span></h1>
- <p class="instructions">
- Check out the <code>src/pages</code> directory to get started.<br />
- <strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
- </p>
- <ul role="list" class="link-card-grid">
- <Card
- href="https://docs.astro.build/"
- title="Documentation"
- body="Learn how Astro works and explore the official API docs."
- />
- <Card
- href="https://astro.build/integrations/"
- title="Integrations"
- body="Supercharge your project with new frameworks and libraries."
- />
- <Card
- href="https://astro.build/themes/"
- title="Themes"
- body="Explore a galaxy of community-built starter themes."
- />
- <Card
- href="https://astro.build/chat/"
- title="Chat"
- body="Come say hi to our amazing Discord community. ❤️"
- />
- <Card
- href="boards"
- title="Boards page"
- body="Fuck you"
- />
- </ul>
- </main>
-</Layout>
-
-<style>
- :root {
- --astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
- }
-
- h1 {
- margin: 2rem 0;
- }
-
- main {
- margin: auto;
- padding: 1em;
- max-width: 60ch;
- }
+import '../styles/blackbox.css'
+import Default from '../layouts/Default.astro';
+import { api } from '../lib/api.ts';
- .text-gradient {
- font-weight: 900;
- background-image: var(--astro-gradient);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-size: 100% 200%;
- background-position-y: 100%;
- border-radius: 0.4rem;
- animation: pulse 4s ease-in-out infinite;
- }
-
- @keyframes pulse {
- 0%,
- 100% {
- background-position-y: 0%;
- }
- 50% {
- background-position-y: 80%;
- }
- }
-
- .instructions {
- line-height: 1.6;
- margin: 1rem 0;
- background: #4f39fa;
- padding: 1rem;
- border-radius: 0.4rem;
- color: var(--color-bg);
- }
-
- .instructions code {
- font-size: 0.875em;
- border: 0.1em solid var(--color-border);
- border-radius: 4px;
- padding: 0.15em 0.25em;
- }
+const data = await api('get', 'boards');
+const boards: string[] = await data.json();
+---
- .link-card-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
- gap: 1rem;
- padding: 0;
- }
+<Default title="Boards">
+ <h1>Boards</h1>
+
+ <div class="blackbox">
+ <ul>
+ {boards.map((board) => (
+ <li><a href=`/board/${board}`>{board}</a></li>
+ ))}
+ </ul>
+ </div>
+</Default>
+
+<style is:inline>
+ :root {
+ --wdt: 300px;
+ --ml: 0px;
+ }
</style>
generated by cgit v1.2.3 (git 2.25.1) at 2025-10-31 07:50:42 +0000