feat: added blackminimal design
This commit is contained in:
@@ -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.",
|
||||
},
|
||||
];
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
+18
-14
@@ -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">
|
||||
<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</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Astro</h1>
|
||||
</body>
|
||||
</html>
|
||||
<ul class="list-disc ml-8">
|
||||
{
|
||||
navLinks.map((link) => (
|
||||
<li class="underline">
|
||||
<a href={link.href}>{link.label}</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@import "tailwindcss";
|
||||
Reference in New Issue
Block a user