feat: added blackminimal design

AGENTS.md

@@ -1,22 +0,0 @@
-## Development
-
-When starting the dev server, use background mode:
-
-```
-astro dev --background
-```
-
-Manage the background server with `astro dev stop`, `astro dev status`, and `astro dev logs`.
-
-## Documentation
-
-Full documentation: https://docs.astro.build
-
-Consult these guides before working on related tasks:
-
-- [Adding pages, dynamic routes, or middleware](https://docs.astro.build/en/guides/routing/)
-- [Working with Astro components](https://docs.astro.build/en/basics/astro-components/)
-- [Using React, Vue, Svelte, or other framework components](https://docs.astro.build/en/guides/framework-components/)
-- [Adding or managing content](https://docs.astro.build/en/guides/content-collections/)
-- [Adding styles or using Tailwind](https://docs.astro.build/en/guides/styling/)
-- [Supporting multiple languages](https://docs.astro.build/en/guides/internationalization/)

CLAUDE.md

@@ -1 +0,0 @@
-AGENTS.md

README.md

@@ -1,43 +1,5 @@
-# Astro Starter Kit: Minimal
+# Astro Designs
 
-```sh
+In this project, I want to get better at web design.
-pnpm create astro@latest -- --template minimal
+For this I create a page for each design attempt.
-```
+Using the navigation, you can switch between the designs.
-
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
-
-## 🚀 Project Structure
-
-Inside of your Astro project, you'll see the following folders and files:
-
-```text
-/
-├── public/
-├── src/
-│   └── pages/
-│       └── index.astro
-└── package.json
-```
-
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
-
-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
-
-Any static assets, like images, can be placed in the `public/` directory.
-
-## 🧞 Commands
-
-All commands are run from the root of the project, from a terminal:
-
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `pnpm install`             | Installs dependencies                            |
-| `pnpm dev`             | Starts local dev server at `localhost:4321`      |
-| `pnpm build`           | Build your production site to `./dist/`          |
-| `pnpm preview`         | Preview your build locally, before deploying     |
-| `pnpm astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `pnpm astro -- --help` | Get help using the Astro CLI                     |
-
-## 👀 Want to learn more?
-
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

astro.config.mjs

@@ -1,5 +1,10 @@
 // @ts-check
+import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'astro/config';
 
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+    vite: {
+        plugins: [tailwindcss()]
+    }
+});

package.json

@@ -12,6 +12,12 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^7.2.2"
+    "@lucide/astro": "^1.31.0",
+    "@tailwindcss/vite": "^4.3.3",
+    "astro": "^7.2.2",
+    "tailwindcss": "^4.3.3"
+  },
+  "devDependencies": {
+    "sass-embedded": "^1.102.0"
   }
 }

src/data/navigation.ts

@@ -0,0 +1,72 @@
+export interface Link {
+  label: string;
+  href: string;
+}
+
+export interface Post {
+  title: string;
+  published: Date;
+  content: string;
+}
+
+export const navLinks: Link[] = [
+  { label: "blackminimal", href: "/blackminimal" },
+  { label: "Test", href: "/" },
+  { label: "Test", href: "/" },
+  { label: "Test", href: "/" },
+];
+
+export const posts: Post[] = [
+  {
+    title: "Example post",
+    published: new Date(),
+    content:
+      "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam " +
+      "nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, " +
+      "sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. " +
+      "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. " +
+      "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, " +
+      "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, " +
+      "sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. " +
+      "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
+  },
+  {
+    title: "Another example",
+    published: new Date(),
+    content:
+      "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam " +
+      "nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, " +
+      "sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. " +
+      "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. " +
+      "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, " +
+      "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, " +
+      "sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. " +
+      "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
+  },
+  {
+    title: "Hello world",
+    published: new Date(),
+    content:
+      "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam " +
+      "nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, " +
+      "sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. " +
+      "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. " +
+      "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, " +
+      "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, " +
+      "sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. " +
+      "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
+  },
+  {
+    title: "Bye world",
+    published: new Date(),
+    content:
+      "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam " +
+      "nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, " +
+      "sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. " +
+      "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. " +
+      "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, " +
+      "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, " +
+      "sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. " +
+      "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
+  },
+];

src/layouts/layout.astro

@@ -0,0 +1,17 @@
+---
+import "../styles/global.css";
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>Astro Designs</title>
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>

src/pages/blackminimal.astro

@@ -0,0 +1,71 @@
+---
+import { HouseIcon } from "@lucide/astro";
+import { navLinks, posts } from "../data/navigation";
+import Layout from "../layouts/layout.astro";
+import "../styles/blackminimal.scss";
+import "../styles/global.css";
+---
+
+<Layout>
+  <div class="App">
+    <div class="Header">
+      <div>
+        <a href="#">blackminimal</a>
+      </div>
+      <div>
+        <a href="#">About me</a>
+        <a href="#">Contact</a>
+      </div>
+    </div>
+
+    <div class="Nav">
+      <ul>
+        {
+          navLinks.map((link) => (
+            <li class={link.label === "blackminimal" ? "selected" : undefined}>
+              <a href={link.href}>
+                <HouseIcon />
+                <span>{link.label}</span>
+              </a>
+            </li>
+          ))
+        }
+      </ul>
+    </div>
+
+    <div class="Content">
+      {
+        posts.map((post) => (
+          <div class="Post">
+            <div>{post.title}</div>
+            <div>Published: {post.published.toISOString()}</div>
+            <div>{post.content}</div>
+          </div>
+        ))
+      }
+    </div>
+
+    <div class="Side">
+      <div class="Trending">
+        <div>Trending topics</div>
+        <div>
+          <span>#frontend</span>
+          <span>#backend</span>
+          <span>#rust</span>
+          <span>#vue</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</Layout>
+
+<style>
+  :root {
+    --bg: var(--color-zinc-950);
+    --bg-fade: var(--color-amber-950);
+    --bg-hover: var(--color-zinc-800);
+    --fg: var(--color-zinc-50);
+    --border: var(--color-zinc-800);
+    --accent: var(--color-amber-500);
+  }
+</style>

src/pages/index.astro

@@ -1,17 +1,21 @@
 ---
+import { navLinks } from "../data/navigation";
+import Layout from "../layouts/layout.astro";
+import "../styles/global.css";
+---
 
----
+<Layout>
+  <div class="container p-4 mx-auto flex flex-col gap-4">
+    <h1 class="text-2xl font-bold">Astro Designs</h1>
 
-<html lang="en">
+    <ul class="list-disc ml-8">
-	<head>
+      {
-		<meta charset="utf-8" />
+        navLinks.map((link) => (
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+          <li class="underline">
-		<link rel="icon" href="/favicon.ico" />
+            <a href={link.href}>{link.label}</a>
-		<meta name="viewport" content="width=device-width" />
+          </li>
-		<meta name="generator" content={Astro.generator} />
+        ))
-		<title>Astro</title>
+      }
-	</head>
+    </ul>
-	<body>
+  </div>
-		<h1>Astro</h1>
+</Layout>
-	</body>
-</html>

src/styles/blackminimal.scss

@@ -0,0 +1,154 @@
+@font-face {
+  font-family: AdwaitaMono;
+  src: url(/fonts/AdwaitaMonoNerdFont-Regular.ttf);
+}
+
+@font-face {
+  font-family: AdwaitaMono;
+  font-weight: bold;
+  src: url(/fonts/AdwaitaMonoNerdFont-Bold.ttf);
+}
+
+body {
+  background-color: var(--bg);
+  color: var(--fg);
+  font-family: "AdwaitaMono", monospace;
+}
+
+.App {
+  height: 100dvh;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas: "header header header" "nav content side";
+  gap: 1rem;
+}
+
+.Header {
+  grid-area: header;
+  height: 50px;
+  padding: 0 1rem;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: 1px solid var(--border);
+
+  > :nth-child(1) {
+    font-weight: bold;
+  }
+
+  > :nth-child(2) {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+
+    a {
+      opacity: 0.6;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.Nav {
+  grid-area: nav;
+
+  li a {
+    display: block;
+    padding: 0.5rem 2rem;
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+    align-items: center;
+
+    svg {
+      height: 1.25rem;
+      width: 1.25rem;
+    }
+
+    &:hover {
+      background-color: var(--bg-hover);
+    }
+  }
+
+  li.selected {
+    color: var(--accent);
+  }
+}
+
+.Content {
+  grid-area: content;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  overflow-y: auto;
+  scrollbar-width: none;
+  /* IE und Edge */
+  -ms-overflow-style: none;
+}
+
+.Side {
+  grid-area: side;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  overflow-y: auto;
+  scrollbar-width: none;
+  /* IE und Edge */
+  -ms-overflow-style: none;
+}
+
+.Post {
+  border: 1px solid var(--border);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: border-color 200ms ease;
+
+  &:hover {
+    border-color: var(--fg);
+  }
+
+  > :nth-child(1) {
+    font-size: 1.25rem;
+    font-weight: bold;
+  }
+
+  > :nth-child(2) {
+    opacity: 0.6;
+  }
+
+  > :nth-child(3) {
+    margin-top: 1.5rem;
+  }
+}
+
+.Trending {
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  max-width: 20dvw;
+
+  > :nth-child(1) {
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+  }
+
+  > :nth-child(2) {
+    display: flex;
+    flex-direction: row;
+    gap: 0.25rem;
+    flex-wrap: wrap;
+
+    span {
+      font-size: 0.9rem;
+      background-color: var(--border);
+      padding: 0.125rem 0.5rem;
+      border-radius: 0.25rem;
+      cursor: pointer;
+    }
+  }
+}

src/styles/global.css

@@ -0,0 +1 @@
+@import "tailwindcss";