ZaguanAI/zblade.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(ui): remove uppercase text and refine typography

Browse Source 
Remove text-transform: uppercase from headings, buttons, labels, and navigation. Reduce letter-spacing throughout for a cleaner look. Replace text-stroke outline effects with solid colors. Remove decorative hero background blocks and scanline animation. Simplify hover effects on logo and buttons.
This commit is contained in:
Stig-Ørjan Smelror
2026-05-19 21:56:11 +02:00
parent 4f1aa99570
commit 674f4e1cd4
3 changed files with 80 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/docs.astro
+24 -27
View File
@@ -10,7 +10,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<div class="hero-content">
<div class="hero-label">User Guide</div>
<h1 class="hero-title">
<span class="title-line-1">DOCUMENTATION</span>
<span class="title-line-1">Documentation</span>
<span class="title-accent">Get Started</span>
</h1>
<p class="hero-description">
@@ -24,11 +24,11 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<!-- The Concept Section -->
<section id="concept" class="docs-section">
<div class="container">
<div class="section-label">01 // The Concept</div>
<div class="section-label">The Concept</div>
<div class="concept-card">
<div class="concept-header">
<h2>AI-Native Editor</h2>
<div class="concept-tag">CORE_PRINCIPLE</div>
<div class="concept-tag">Core Principle</div>
</div>
<p class="concept-lead">
Zaguán Blade is not just a text editor with a chat sidebar. It is designed from the ground up to allow an AI agent to "live" inside your editor.
@@ -60,7 +60,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<!-- Getting Started Section -->
<section id="getting-started" class="docs-section section-alt">
<div class="container">
<div class="section-label">02 // Getting Started</div>
<div class="section-label">Getting Started</div>
<h2 class="section-title">Quick Start Guide</h2>
<div class="steps-grid">
@@ -98,7 +98,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<!-- Interface Section -->
<section id="interface" class="docs-section">
<div class="container">
<div class="section-label">03 // The Interface</div>
<div class="section-label">The Interface</div>
<h2 class="section-title">Interface Overview</h2>
<div class="interface-grid">
@@ -119,7 +119,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<div class="interface-header">
<span class="interface-icon">💻</span>
<h3>Center Stage</h3>
<span class="interface-tag">EDITOR</span>
<span class="interface-tag">Editor</span>
</div>
<p class="interface-desc">High-performance CodeMirror 6 editor with syntax highlighting. <strong>Diff Blocks</strong> appear inline when the AI proposes changes.</p>
</div>
@@ -128,7 +128,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<div class="interface-header">
<span class="interface-icon">🤖</span>
<h3>Right Panel</h3>
<span class="interface-tag">AI_ASSISTANT</span>
<span class="interface-tag">AI Assistant</span>
</div>
<ul class="interface-list">
<li><strong>Chat</strong> - Main communication channel</li>
@@ -141,7 +141,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<div class="interface-header">
<span class="interface-icon">⌨️</span>
<h3>Bottom Panel</h3>
<span class="interface-tag">TERMINAL</span>
<span class="interface-tag">Terminal</span>
</div>
<p class="interface-desc">Integrated terminal for running commands. The AI can see and interact with this terminal when executing commands.</p>
</div>
@@ -152,7 +152,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<!-- Keyboard Shortcuts Section -->
<section id="shortcuts" class="docs-section section-alt">
<div class="container">
<div class="section-label">04 // Keyboard Shortcuts</div>
<div class="section-label">Keyboard Shortcuts</div>
<h2 class="section-title">Keyboard Shortcuts</h2>
<div class="shortcuts-layout">
@@ -206,7 +206,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<!-- At Commands Section -->
<section id="commands" class="docs-section">
<div class="container">
<div class="section-label">05 // @ Commands</div>
<div class="section-label">Commands</div>
<h2 class="section-title">Special Commands</h2>
<p class="section-desc">Type <code class="inline-code">@</code> in the chat input to access these special commands:</p>
@@ -226,7 +226,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<!-- Working with AI Section -->
<section id="ai" class="docs-section section-alt">
<div class="container">
<div class="section-label">06 // Working with AI</div>
<div class="section-label">Working with AI</div>
<h2 class="section-title">AI Collaboration</h2>
<div class="ai-content">
@@ -260,7 +260,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<!-- Chat Modes Section -->
<section id="chat-modes" class="docs-section section-alt">
<div class="container">
<div class="section-label">07 // Chat Modes</div>
<div class="section-label">Chat Modes</div>
<h2 class="section-title">Chat Modes</h2>
<p class="section-desc">Zaguán Blade supports two chat modes accessible from the <strong>Command Center</strong>:</p>
@@ -284,7 +284,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<!-- Settings Section -->
<section id="settings" class="docs-section">
<div class="container">
<div class="section-label">08 // Settings</div>
<div class="section-label">Settings</div>
<h2 class="section-title">Configuration</h2>
<div class="settings-grid">
@@ -342,7 +342,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<div class="setting-header">
<span class="setting-icon">🧠</span>
<h3>Context Tab</h3>
<span class="setting-tag">PER-PROJECT</span>
<span class="setting-tag">Per-project</span>
</div>
<ul>
<li><strong>Max Context Tokens</strong> - Control context sent to AI (2K-32K)</li>
@@ -370,7 +370,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<!-- Project Instructions Section -->
<section id="project-instructions" class="docs-section section-alt">
<div class="container">
<div class="section-label">09 // Project Instructions</div>
<div class="section-label">Project Instructions</div>
<h2 class="section-title">Teach the AI About Your Project</h2>
<div class="instructions-content">
@@ -403,7 +403,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<!-- Editor Features Section -->
<section id="features" class="docs-section">
<div class="container">
<div class="section-label">10 // Editor Features</div>
<div class="section-label">Editor Features</div>
<h2 class="section-title">Additional Features</h2>
<div class="features-list">
@@ -440,7 +440,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<!-- Screenshot Capture Section -->
<section id="screenshot" class="docs-section section-alt">
<div class="container">
<div class="section-label">11 // Screenshot Capture</div>
<div class="section-label">Screenshot Capture</div>
<h2 class="section-title">Screenshot Capture</h2>
<p class="section-desc">Attach screenshots to your chat messages to give the AI visual context. Access capture options from the <strong>Feature Menu</strong> (grid icon) in the Command Center.</p>
@@ -478,7 +478,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<!-- Privacy Section -->
<section id="privacy" class="docs-section">
<div class="container">
<div class="section-label">12 // Privacy & Data</div>
<div class="section-label">Privacy & Data</div>
<h2 class="section-title">Privacy</h2>
<div class="privacy-grid">
@@ -509,7 +509,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<!-- Local AI System Prompts Section -->
<section id="local-ai-prompts" class="docs-section">
<div class="container">
<div class="section-label">13 // Local AI System Prompts</div>
<div class="section-label">Local AI System Prompts</div>
<h2 class="section-title">Custom System Prompts</h2>
<div class="instructions-content">
@@ -586,7 +586,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<!-- Tool Calls Reference Section -->
<section id="tool-calls" class="docs-section section-alt">
<div class="container">
<div class="section-label">14 // Tool Calls Reference</div>
<div class="section-label">Tool Calls Reference</div>
<h2 class="section-title">Tool Calls Reference</h2>
<div class="instructions-content">
@@ -611,7 +611,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<!-- Known Bugs Section -->
<section id="known-bugs" class="docs-section section-alt">
<div class="container">
<div class="section-label">15 // Known Bugs</div>
<div class="section-label">Known Bugs</div>
<h2 class="section-title">Known Issues</h2>
<p class="section-desc">As an alpha release, there are some known limitations and bugs we're actively working on:</p>
@@ -650,11 +650,11 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<!-- Support Section -->
<section id="support" class="docs-section">
<div class="container">
<div class="section-label">16 // Support & Feedback</div>
<div class="section-label">Support & Feedback</div>
<div class="support-card">
<div class="support-header">
<h2>Alpha Release</h2>
<span class="status-badge">FEATURE_INCOMPLETE</span>
<span class="status-badge">Alpha</span>
</div>
<p class="support-lead">
We define "Alpha" as "Feature incomplete, but good enough to be useful."
@@ -740,7 +740,6 @@ import BaseLayout from '../layouts/BaseLayout.astro';
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 900;
line-height: 1.1;
text-transform: uppercase;
letter-spacing: -0.02em;
margin-bottom: var(--space-xl);
}
@@ -867,9 +866,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
font-family: var(--font-mono);
font-size: 3rem;
font-weight: 900;
color: transparent;
-webkit-text-stroke: 1px var(--color-accent);
text-stroke: 1px var(--color-accent);
color: var(--color-accent);
line-height: 1;
margin-bottom: var(--space-md);
}