Add 'Now' page and update navigation; refine styles and metadata
This commit is contained in:
@@ -5,6 +5,7 @@ const links = [
|
||||
{ href: "/", label: "home" },
|
||||
{ href: "/about", label: "about" },
|
||||
{ href: "/projects", label: "projects" },
|
||||
{ href: "/now", label: "now" },
|
||||
{ href: "/blog", label: "blog" },
|
||||
];
|
||||
|
||||
@@ -39,7 +40,7 @@ function isActive(href: string, current: string): boolean {
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
background: rgba(30, 30, 46, 0.85);
|
||||
background: var(--color-glass-nav);
|
||||
backdrop-filter: blur(8px);
|
||||
border-bottom: 1px solid var(--color-surface);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
title: "Welcome to the Den"
|
||||
date: 2026-03-04
|
||||
date: 2026-03-01
|
||||
description: "First proper post. Why I built this site, what it runs on, and what to expect."
|
||||
draft: true
|
||||
draft: false
|
||||
---
|
||||
|
||||
So I finally got around to setting up a proper blog. Welcome.
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
Living snapshot of what I am building, learning, and focusing on right now.
|
||||
|
||||
Last updated: 2026-03-06
|
||||
|
||||
## Current Projects
|
||||
|
||||
- **GuardDen** - tightening moderation and security workflows for community spaces.
|
||||
- **loyal_companion** - active work-in-progress with feature and stability passes.
|
||||
- **Cozy Den** - improving structure and adding pages that are easier to maintain over time.
|
||||
|
||||
## Learning Right Now
|
||||
|
||||
- Better Astro content organization for small personal sites.
|
||||
- Cleaner Docker + nginx deployment routines for self-hosted services.
|
||||
- Practical writing habits for short, regular project updates.
|
||||
|
||||
## Focus Areas
|
||||
|
||||
- Privacy-first self-hosting with minimal external dependencies.
|
||||
- Building lightweight tools that stay understandable and maintainable.
|
||||
- Sustainable progress: consistent small steps instead of burnout sprints.
|
||||
|
||||
## Next Check-In
|
||||
|
||||
I try to refresh this page every few weeks so it stays useful and current.
|
||||
@@ -54,8 +54,18 @@ const fullOgImage = new URL(ogImage, Astro.site).href;
|
||||
name="keywords"
|
||||
content="self-hosted, privacy, open-source, furry, developer, cozy, hidden den"
|
||||
/>
|
||||
<meta name="theme-color" content="#cba6f7" />
|
||||
<meta name="color-scheme" content="dark" />
|
||||
<meta name="theme-color" content="#1e1e2e" />
|
||||
<meta
|
||||
name="theme-color"
|
||||
media="(prefers-color-scheme: dark)"
|
||||
content="#1e1e2e"
|
||||
/>
|
||||
<meta
|
||||
name="theme-color"
|
||||
media="(prefers-color-scheme: light)"
|
||||
content="#f6efe6"
|
||||
/>
|
||||
<meta name="color-scheme" content="dark light" />
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
@@ -101,6 +111,9 @@ const fullOgImage = new URL(ogImage, Astro.site).href;
|
||||
--color-blue: #89b4fa;
|
||||
--color-green: #a6e3a1;
|
||||
--color-peach: #fab387;
|
||||
--color-glass: rgba(30, 30, 46, 0.8);
|
||||
--color-glass-nav: rgba(30, 30, 46, 0.85);
|
||||
color-scheme: dark;
|
||||
|
||||
/* Spacing */
|
||||
--space-xs: 0.5rem;
|
||||
@@ -113,6 +126,25 @@ const fullOgImage = new URL(ogImage, Astro.site).href;
|
||||
--font-body: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--color-bg: #f6efe6;
|
||||
--color-bg-light: #efe1cf;
|
||||
--color-surface: #d8c2a8;
|
||||
--color-text: #35251a;
|
||||
--color-text-dim: #6b5442;
|
||||
--color-accent: #8b5e3c;
|
||||
--color-accent-bright: #a16c45;
|
||||
--color-warm: #b6794f;
|
||||
--color-blue: #326b8f;
|
||||
--color-green: #3f7c47;
|
||||
--color-peach: #b5693e;
|
||||
--color-glass: rgba(246, 239, 230, 0.82);
|
||||
--color-glass-nav: rgba(246, 239, 230, 0.88);
|
||||
color-scheme: light;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
+1
-1
@@ -66,7 +66,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
.container {
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
background: rgba(30, 30, 46, 0.8);
|
||||
background: var(--color-glass);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--color-surface);
|
||||
border-radius: 8px;
|
||||
|
||||
@@ -105,7 +105,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
.container {
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
background: rgba(30, 30, 46, 0.8);
|
||||
background: var(--color-glass);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--color-surface);
|
||||
border-radius: 8px;
|
||||
|
||||
@@ -76,7 +76,7 @@ function formatDate(date: Date) {
|
||||
.container {
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
background: rgba(30, 30, 46, 0.8);
|
||||
background: var(--color-glass);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--color-surface);
|
||||
border-radius: 8px;
|
||||
|
||||
@@ -83,7 +83,7 @@ function formatDate(date: Date) {
|
||||
.container {
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
background: rgba(30, 30, 46, 0.8);
|
||||
background: var(--color-glass);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--color-surface);
|
||||
border-radius: 8px;
|
||||
|
||||
@@ -210,7 +210,7 @@ if (now < new Date(now.getFullYear(), 6, 8)) age--;
|
||||
.container {
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
background: rgba(30, 30, 46, 0.8);
|
||||
background: var(--color-glass);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--color-surface);
|
||||
border-radius: 8px;
|
||||
|
||||
@@ -0,0 +1,152 @@
|
||||
---
|
||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
import NowContent from "../data/now.md";
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="Now - Hidden Den Cafe"
|
||||
description="A living snapshot of what Latte is building, learning, and focusing on right now."
|
||||
>
|
||||
<div class="matrix-bg" aria-hidden="true"></div>
|
||||
|
||||
<main class="main">
|
||||
<article class="now-card fade-in">
|
||||
<header class="header">
|
||||
<h1 class="title">Now</h1>
|
||||
<div class="divider">══════════════════════════════</div>
|
||||
</header>
|
||||
<NowContent />
|
||||
</article>
|
||||
</main>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.matrix-bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
opacity: 0.03;
|
||||
background:
|
||||
linear-gradient(var(--color-accent) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--color-accent) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
animation: grid-move 20s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes grid-move {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(50px, 50px); }
|
||||
}
|
||||
|
||||
.main {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: var(--space-lg) var(--space-md);
|
||||
padding-top: calc(var(--space-lg) + 3rem);
|
||||
}
|
||||
|
||||
.now-card {
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
background: var(--color-glass);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--color-surface);
|
||||
border-radius: 8px;
|
||||
padding: var(--space-xl);
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.divider {
|
||||
color: var(--color-surface);
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
margin: var(--space-md) 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.now-card :global(h2) {
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin-top: var(--space-lg);
|
||||
margin-bottom: var(--space-sm);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.now-card :global(p),
|
||||
.now-card :global(li) {
|
||||
color: var(--color-text-dim);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.now-card :global(p) {
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.now-card :global(ul) {
|
||||
margin-left: 1.2rem;
|
||||
display: grid;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.now-card :global(strong) {
|
||||
color: var(--color-accent-bright);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.6s ease-out forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.now-card {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.divider {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.matrix-bg {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -126,7 +126,7 @@ function getPrimaryLink(project: Project): string | undefined {
|
||||
.container {
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
background: rgba(30, 30, 46, 0.8);
|
||||
background: var(--color-glass);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--color-surface);
|
||||
border-radius: 8px;
|
||||
|
||||
Reference in New Issue
Block a user