blu/lux
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

feat: create Lux website with sleek/noble aesthetic

Browse Source 
Website design:
- Translucent black (#0a0a0a) with gold (#d4af37) accents
- Strong serif typography (Playfair Display, Source Serif Pro)
- Glass-morphism cards with gold borders
- Responsive layout with elegant animations

Content:
- Landing page with hero, code demo, value props, benchmarks
- Effects-focused messaging ("No surprises. No hidden side effects.")
- Performance benchmarks showing Lux matches C
- Quick start guide

Technical:
- Added HTML rendering functions to stdlib/html.lux
- Created Lux-based site generator (blocked by module import issues)
- Documented Lux weaknesses discovered during development:
  - Module import system not working
  - FileSystem effect incomplete
  - No template string support

The landing page HTML/CSS is complete and viewable.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Brandon Lucas
2026-02-16 06:41:49 -05:00
parent 49ab70829a
commit 552e7a4972
10 changed files with 3046 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
website/lux-site/LUX_WEAKNESSES.md Normal file
View File

@@ -0,0 +1,153 @@
# Lux Weaknesses Discovered During Website Development
This document tracks issues and limitations discovered while building the Lux website in Lux.
## Critical Issues
### 1. Module Import System Not Working
**Description:** The `import` statement doesn't appear to work for importing standard library modules.
**Example:**
```lux
import html // Doesn't make html functions available
```
**Workaround:** Functions must be defined in the same file or copied.
**Status:** Needs investigation
---
### 2. Parse Error in html.lux (Line 196-197)
**Description:** When trying to load files that import the html module, there's a parse error.
**Error Message:**
```
Module error: Module error in '<main>': Parse error: Parse error at 196-197: Unexpected token: \n
```
**Status:** Needs investigation
---
## Minor Issues
### 3. String.replace May Not Exist
**Description:** The `escapeHtml` function in html.lux uses `String.replace`, but this function may not be implemented.
**Workaround:** Implement character-by-character escaping.
**Status:** Needs verification
---
### 4. FileSystem Effect Not Fully Implemented
**Description:** For static site generation, we need `FileSystem.mkdir`, `FileSystem.write`, `FileSystem.copy` operations. These may not be fully implemented.
**Workaround:** Use Bash commands via scripts.
**Status:** Needs verification
---
### 5. List.concat May Have Issues
**Description:** The `List.concat` function used in html.lux document generation may not handle nested lists correctly.
**Status:** Needs verification
---
## Feature Gaps
### 6. No Built-in Static Site Generation
**Description:** There's no built-in way to generate static HTML files from Lux. A static site generator effect or module would be helpful.
**Recommendation:** Add a `FileSystem` effect with:
- `mkdir(path: String): Unit`
- `write(path: String, content: String): Unit`
- `copy(src: String, dst: String): Unit`
- `readDir(path: String): List<String>`
---
### 7. No Template String Support
**Description:** Multi-line strings and template literals (like JavaScript's backticks) would make HTML generation much easier.
**Current Approach:**
```lux
let html = "<div class=\"" + className + "\">" + content + "</div>"
```
**Better Approach (not available):**
```lux
let html = `<div class="${className}">${content}</div>`
```
**Status:** Feature request
---
### 8. No Markdown Parser
**Description:** A built-in Markdown parser would be valuable for documentation sites.
**Status:** Feature request
---
## Working Features
These features work correctly and can be used for website generation:
1. **String concatenation** - Works with `+` operator
2. **Conditional expressions** - `if/then/else` works
3. **Console output** - `Console.print()` works
4. **Basic types** - `String`, `Int`, `Bool` work
5. **Let bindings** - Variable assignment works
6. **Functions** - Function definitions work
---
## Recommendations
### For Website MVP
Since the module system isn't working, the website should be:
1. **Hand-written HTML** (already done in `dist/index.html`)
2. **CSS separate file** (already done in `static/style.css`)
3. **Lux code examples** embedded as text in HTML
### For Future
Once these issues are fixed, the website can be:
1. **Generated from Lux** using the components and pages modules
2. **Markdown-based documentation** parsed and rendered by Lux
3. **Live playground** using WASM compilation
---
## Test Results
| Feature | Status | Notes |
|---------|--------|-------|
| String concatenation | ✅ Works | `"<" + tag + ">"` |
| Conditionals | ✅ Works | `if x then y else z` |
| Console.print | ✅ Works | Basic output |
| Module imports | ❌ Broken | Parse errors |
| Html module | ❌ Blocked | Depends on imports |
| FileSystem | ❓ Unknown | Not tested |
---
## Date Log
| Date | Finding |
|------|---------|
| 2026-02-16 | Module import system not working, parse error at line 196-197 in html.lux |

224
website/lux-site/dist/index.html vendored Normal file
View File

@@ -0,0 +1,224 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lux - Functional Programming with First-Class Effects</title>
<meta name="description" content="Lux is a functional programming language with first-class effects. Effects are explicit. Types are powerful. Performance is native.">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>✨</text></svg>">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Source+Serif+Pro:wght@400;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="static/style.css">
</head>
<body>
<!-- Navigation -->
<nav class="nav">
<a href="/" class="nav-logo">LUX</a>
<div class="nav-links">
<a href="/learn/" class="nav-link">Learn</a>
<a href="/docs/" class="nav-link">Docs</a>
<a href="/playground/" class="nav-link">Playground</a>
<a href="/community/" class="nav-link">Community</a>
</div>
<a href="https://github.com/luxlang/lux" class="nav-github">GitHub</a>
</nav>
<main>
<!-- Hero Section -->
<section class="hero">
<div class="hero-logo">
<pre class="logo-ascii">╦ ╦ ╦╦ ╦
║ ║ ║╔╣
╩═╝╚═╝╩ ╩</pre>
</div>
<h1 class="hero-title">
Functional Programming<br>
with First-Class Effects
</h1>
<p class="hero-tagline">
Effects are explicit. Types are powerful. Performance is native.
</p>
<div class="hero-cta">
<a href="/learn/getting-started/" class="btn btn-primary">Get Started</a>
<a href="/playground/" class="btn btn-secondary">Playground</a>
</div>
</section>
<!-- Code Demo Section -->
<section class="code-demo">
<div class="container">
<div class="code-demo-grid">
<div class="code-block">
<pre class="code"><code><span class="hljs-keyword">fn</span> <span class="hljs-function">processOrder</span>(
order: <span class="hljs-type">Order</span>
): <span class="hljs-type">Receipt</span>
<span class="hljs-keyword">with</span> {<span class="hljs-effect">Database</span>, <span class="hljs-effect">Email</span>} =
{
<span class="hljs-keyword">let</span> saved = <span class="hljs-effect">Database</span>.save(order)
<span class="hljs-effect">Email</span>.send(
order.customer,
<span class="hljs-string">"Order confirmed!"</span>
)
Receipt(saved.id)
}</code></pre>
</div>
<div class="code-explanation">
<h3>The type signature tells you everything</h3>
<ul>
<li>Queries the database</li>
<li>Sends an email</li>
<li>Returns a Receipt</li>
</ul>
<p class="highlight">No surprises. No hidden side effects.</p>
</div>
</div>
</div>
</section>
<!-- Value Props Section -->
<section class="value-props">
<div class="container">
<div class="value-props-grid">
<div class="value-prop card">
<h3 class="value-prop-title">EFFECTS</h3>
<p class="value-prop-desc">Side effects are tracked in the type signature. Know exactly what every function does.</p>
</div>
<div class="value-prop card">
<h3 class="value-prop-title">TYPES</h3>
<p class="value-prop-desc">Full type inference with algebraic data types. Catch bugs at compile time.</p>
</div>
<div class="value-prop card">
<h3 class="value-prop-title">PERFORMANCE</h3>
<p class="value-prop-desc">Compiles to native C via gcc. Matches C performance, beats Rust and Zig.</p>
</div>
</div>
</div>
</section>
<!-- Benchmarks Section -->
<section class="benchmarks">
<div class="container">
<h2>Performance</h2>
<p class="section-subtitle">fib(35) benchmark — verified with hyperfine</p>
<div class="benchmarks-chart">
<div class="benchmark-row">
<span class="benchmark-lang">Lux</span>
<div class="benchmark-bar-container">
<div class="benchmark-bar" style="width: 100%"></div>
</div>
<span class="benchmark-time">28.1ms</span>
</div>
<div class="benchmark-row">
<span class="benchmark-lang">C</span>
<div class="benchmark-bar-container">
<div class="benchmark-bar" style="width: 97%"></div>
</div>
<span class="benchmark-time">29.0ms</span>
</div>
<div class="benchmark-row">
<span class="benchmark-lang">Rust</span>
<div class="benchmark-bar-container">
<div class="benchmark-bar" style="width: 68%"></div>
</div>
<span class="benchmark-time">41.2ms</span>
</div>
<div class="benchmark-row">
<span class="benchmark-lang">Zig</span>
<div class="benchmark-bar-container">
<div class="benchmark-bar" style="width: 60%"></div>
</div>
<span class="benchmark-time">47.0ms</span>
</div>
</div>
<p class="benchmarks-note">
<a href="/benchmarks/">See full methodology →</a>
</p>
</div>
</section>
<!-- Testing Section -->
<section class="testing">
<div class="container">
<h2>Testing Without Mocks</h2>
<p class="section-subtitle">Swap effect handlers at test time. Same code, different behavior.</p>
<div class="code-demo-grid">
<div class="code-block">
<pre class="code"><code><span class="hljs-comment">// Production</span>
<span class="hljs-keyword">run</span> processOrder(order) <span class="hljs-keyword">with</span> {
<span class="hljs-effect">Database</span> -> postgresDb,
<span class="hljs-effect">Email</span> -> smtpServer
}</code></pre>
</div>
<div class="code-block">
<pre class="code"><code><span class="hljs-comment">// Testing</span>
<span class="hljs-keyword">run</span> processOrder(order) <span class="hljs-keyword">with</span> {
<span class="hljs-effect">Database</span> -> inMemoryDb,
<span class="hljs-effect">Email</span> -> collectEmails
}</code></pre>
</div>
</div>
</div>
</section>
<!-- Quick Start Section -->
<section class="quick-start">
<div class="container">
<h2>Get Started</h2>
<div class="code-block">
<pre class="code"><code><span class="hljs-comment"># Install via Nix</span>
nix run github:luxlang/lux
<span class="hljs-comment"># Or build from source</span>
git clone https://github.com/luxlang/lux
cd lux && nix develop
cargo build --release
<span class="hljs-comment"># Start the REPL</span>
./target/release/lux</code></pre>
</div>
<a href="/learn/getting-started/" class="btn btn-primary">Full Installation Guide →</a>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<span class="footer-logo">LUX</span>
<p>Functional programming with first-class effects.</p>
</div>
<div class="footer-column">
<h4>LEARN</h4>
<ul>
<li><a href="/learn/getting-started/">Getting Started</a></li>
<li><a href="/learn/tutorial/">Tutorial</a></li>
<li><a href="/learn/examples/">Examples</a></li>
<li><a href="/docs/">Reference</a></li>
</ul>
</div>
<div class="footer-column">
<h4>COMMUNITY</h4>
<ul>
<li><a href="https://discord.gg/lux">Discord</a></li>
<li><a href="https://github.com/luxlang/lux">GitHub</a></li>
<li><a href="/community/contributing/">Contributing</a></li>
<li><a href="/community/code-of-conduct/">Code of Conduct</a></li>
</ul>
</div>
<div class="footer-column">
<h4>ABOUT</h4>
<ul>
<li><a href="/benchmarks/">Benchmarks</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="https://github.com/luxlang/lux/blob/main/LICENSE">License</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 Lux Language</p>
</div>
</div>
</footer>
</body>
</html>

707
website/lux-site/dist/static/style.css vendored Normal file
View File

@@ -0,0 +1,707 @@
/* ============================================================================
Lux Website - Sleek and Noble
Translucent black, white, and gold with strong serif typography
============================================================================ */
/* CSS Variables */
:root {
/* Backgrounds */
--bg-primary: #0a0a0a;
--bg-secondary: #111111;
--bg-glass: rgba(255, 255, 255, 0.03);
--bg-glass-hover: rgba(255, 255, 255, 0.06);
--bg-code: rgba(212, 175, 55, 0.05);
/* Text */
--text-primary: #ffffff;
--text-secondary: rgba(255, 255, 255, 0.7);
--text-muted: rgba(255, 255, 255, 0.5);
/* Gold accents */
--gold: #d4af37;
--gold-light: #f4d03f;
--gold-dark: #b8860b;
--gold-glow: rgba(212, 175, 55, 0.3);
/* Borders */
--border-subtle: rgba(255, 255, 255, 0.1);
--border-gold: rgba(212, 175, 55, 0.3);
/* Typography */
--font-heading: "Playfair Display", Georgia, serif;
--font-body: "Source Serif Pro", Georgia, serif;
--font-code: "JetBrains Mono", "Fira Code", monospace;
/* Spacing */
--container-width: 1200px;
--section-padding: 6rem 2rem;
}
/* Reset */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
background: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 18px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 600;
color: var(--gold-light);
letter-spacing: -0.02em;
line-height: 1.2;
}
h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: 1.25rem; }
p {
margin-bottom: 1rem;
color: var(--text-secondary);
}
a {
color: var(--gold);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: var(--gold-light);
}
/* Container */
.container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 2rem;
}
/* ============================================================================
Navigation
============================================================================ */
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2rem;
max-width: var(--container-width);
margin: 0 auto;
position: sticky;
top: 0;
z-index: 100;
background: rgba(10, 10, 10, 0.9);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-subtle);
}
.nav-logo {
font-family: var(--font-heading);
font-size: 1.75rem;
font-weight: 700;
color: var(--gold);
letter-spacing: 0.1em;
}
.nav-links {
display: flex;
gap: 2.5rem;
}
.nav-link {
font-family: var(--font-body);
font-size: 1rem;
color: var(--text-secondary);
transition: color 0.3s ease;
}
.nav-link:hover {
color: var(--gold);
}
.nav-github {
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--text-muted);
padding: 0.5rem 1rem;
border: 1px solid var(--border-subtle);
border-radius: 4px;
transition: all 0.3s ease;
}
.nav-github:hover {
color: var(--gold);
border-color: var(--gold);
}
/* ============================================================================
Hero Section
============================================================================ */
.hero {
min-height: 90vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 4rem 2rem;
background:
radial-gradient(ellipse at top, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
var(--bg-primary);
}
.hero-logo {
margin-bottom: 2rem;
}
.logo-ascii {
font-family: var(--font-code);
font-size: 2rem;
color: var(--gold);
line-height: 1.2;
text-shadow: 0 0 30px var(--gold-glow);
}
.hero-title {
margin-bottom: 1.5rem;
}
.hero-tagline {
font-size: 1.35rem;
color: var(--text-secondary);
max-width: 600px;
margin-bottom: 3rem;
}
.hero-cta {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
justify-content: center;
}
/* ============================================================================
Buttons
============================================================================ */
.btn {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 600;
padding: 1rem 2.5rem;
border-radius: 4px;
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
cursor: pointer;
border: none;
}
.btn-primary {
background: linear-gradient(135deg, var(--gold-dark), var(--gold));
color: #0a0a0a;
}
.btn-primary:hover {
background: linear-gradient(135deg, var(--gold), var(--gold-light));
color: #0a0a0a;
transform: translateY(-2px);
box-shadow: 0 4px 20px var(--gold-glow);
}
.btn-secondary {
background: transparent;
color: var(--gold);
border: 1px solid var(--gold);
}
.btn-secondary:hover {
background: rgba(212, 175, 55, 0.1);
color: var(--gold-light);
}
/* ============================================================================
Code Demo Section
============================================================================ */
.code-demo {
padding: var(--section-padding);
background: var(--bg-secondary);
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
}
.code-demo-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.code-block {
background: var(--bg-code);
border: 1px solid var(--border-gold);
border-radius: 8px;
overflow: hidden;
}
.code {
padding: 1.5rem;
margin: 0;
overflow-x: auto;
}
.code code {
font-family: var(--font-code);
font-size: 0.95rem;
color: var(--text-primary);
line-height: 1.6;
}
.code-explanation h3 {
margin-bottom: 1.5rem;
}
.code-explanation ul {
list-style: none;
margin-bottom: 1.5rem;
}
.code-explanation li {
padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative;
color: var(--text-secondary);
}
.code-explanation li::before {
content: "•";
position: absolute;
left: 0;
color: var(--gold);
}
.code-explanation .highlight {
font-size: 1.1rem;
color: var(--gold-light);
font-style: italic;
}
/* ============================================================================
Value Props Section
============================================================================ */
.value-props {
padding: var(--section-padding);
}
.value-props-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.value-prop {
text-align: center;
padding: 2.5rem 2rem;
}
.value-prop-title {
font-size: 0.9rem;
letter-spacing: 0.15em;
margin-bottom: 1rem;
color: var(--gold);
}
.value-prop-desc {
font-size: 1.1rem;
color: var(--text-secondary);
}
/* ============================================================================
Cards
============================================================================ */
.card {
background: var(--bg-glass);
border: 1px solid rgba(212, 175, 55, 0.15);
border-radius: 8px;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.card:hover {
background: var(--bg-glass-hover);
border-color: rgba(212, 175, 55, 0.3);
}
/* ============================================================================
Benchmarks Section
============================================================================ */
.benchmarks {
padding: var(--section-padding);
background: var(--bg-secondary);
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
}
.benchmarks h2 {
text-align: center;
margin-bottom: 0.5rem;
}
.section-subtitle {
text-align: center;
color: var(--text-muted);
margin-bottom: 3rem;
}
.benchmarks-chart {
max-width: 600px;
margin: 0 auto;
}
.benchmark-row {
display: grid;
grid-template-columns: 60px 1fr 80px;
gap: 1rem;
align-items: center;
margin-bottom: 1rem;
}
.benchmark-lang {
font-family: var(--font-code);
font-size: 0.9rem;
color: var(--text-secondary);
}
.benchmark-bar-container {
height: 24px;
background: var(--bg-glass);
border-radius: 4px;
overflow: hidden;
}
.benchmark-bar {
height: 100%;
background: linear-gradient(90deg, var(--gold-dark), var(--gold));
border-radius: 4px;
transition: width 1s ease;
}
.benchmark-time {
font-family: var(--font-code);
font-size: 0.9rem;
color: var(--gold-light);
text-align: right;
}
.benchmarks-note {
text-align: center;
margin-top: 2rem;
}
.benchmarks-note a {
font-size: 0.95rem;
color: var(--text-muted);
}
.benchmarks-note a:hover {
color: var(--gold);
}
/* ============================================================================
Testing Section
============================================================================ */
.testing {
padding: var(--section-padding);
}
.testing h2 {
text-align: center;
margin-bottom: 0.5rem;
}
.testing .code-demo-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-top: 2rem;
}
@media (max-width: 768px) {
.testing .code-demo-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================================
Quick Start Section
============================================================================ */
.quick-start {
padding: var(--section-padding);
text-align: center;
}
.quick-start h2 {
margin-bottom: 2rem;
}
.quick-start .code-block {
max-width: 600px;
margin: 0 auto 2rem;
text-align: left;
}
/* ============================================================================
Footer
============================================================================ */
.footer {
padding: 4rem 2rem 2rem;
background: var(--bg-secondary);
border-top: 1px solid var(--border-subtle);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
margin-bottom: 3rem;
}
.footer-brand {
max-width: 300px;
}
.footer-logo {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 700;
color: var(--gold);
letter-spacing: 0.1em;
display: block;
margin-bottom: 1rem;
}
.footer-brand p {
font-size: 0.95rem;
color: var(--text-muted);
}
.footer-column h4 {
font-size: 0.8rem;
letter-spacing: 0.1em;
color: var(--text-muted);
margin-bottom: 1rem;
}
.footer-column ul {
list-style: none;
}
.footer-column li {
margin-bottom: 0.5rem;
}
.footer-column a {
font-size: 0.95rem;
color: var(--text-secondary);
}
.footer-column a:hover {
color: var(--gold);
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid var(--border-subtle);
}
.footer-bottom p {
font-size: 0.9rem;
color: var(--text-muted);
}
/* ============================================================================
Documentation Layout
============================================================================ */
.doc-layout {
display: grid;
grid-template-columns: 250px 1fr;
min-height: calc(100vh - 80px);
}
.doc-sidebar {
position: sticky;
top: 80px;
height: calc(100vh - 80px);
overflow-y: auto;
padding: 2rem;
background: var(--bg-secondary);
border-right: 1px solid var(--border-subtle);
}
.doc-sidebar-section {
margin-bottom: 2rem;
}
.doc-sidebar-section h4 {
font-size: 0.75rem;
letter-spacing: 0.15em;
color: var(--text-muted);
margin-bottom: 0.75rem;
}
.doc-sidebar-section ul {
list-style: none;
}
.doc-nav-link {
display: block;
padding: 0.4rem 0;
font-size: 0.95rem;
color: var(--text-secondary);
transition: color 0.2s ease;
}
.doc-nav-link:hover {
color: var(--gold);
}
.doc-nav-link.active {
color: var(--gold-light);
font-weight: 600;
}
.doc-content {
padding: 3rem;
max-width: 800px;
}
.doc-content h1 {
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-gold);
}
/* ============================================================================
Responsive Design
============================================================================ */
@media (max-width: 1024px) {
.code-demo-grid {
grid-template-columns: 1fr;
}
.value-props-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.doc-layout {
grid-template-columns: 1fr;
}
.doc-sidebar {
position: static;
height: auto;
}
}
@media (max-width: 768px) {
.nav {
flex-direction: column;
gap: 1rem;
}
.nav-links {
gap: 1.5rem;
}
.hero {
min-height: 80vh;
padding: 3rem 1.5rem;
}
.logo-ascii {
font-size: 1.5rem;
}
.hero-cta {
flex-direction: column;
width: 100%;
max-width: 300px;
}
.btn {
width: 100%;
text-align: center;
}
.footer-grid {
grid-template-columns: 1fr;
text-align: center;
}
.footer-brand {
max-width: none;
}
}
/* ============================================================================
Syntax Highlighting
============================================================================ */
.hljs-keyword { color: var(--gold); }
.hljs-type { color: #82aaff; }
.hljs-string { color: #c3e88d; }
.hljs-number { color: #f78c6c; }
.hljs-comment { color: var(--text-muted); font-style: italic; }
.hljs-function { color: var(--gold-light); }
.hljs-effect { color: var(--gold-light); font-weight: 600; }
/* ============================================================================
Animations
============================================================================ */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hero > * {
animation: fadeIn 0.8s ease forwards;
}
.hero > *:nth-child(1) { animation-delay: 0.1s; }
.hero > *:nth-child(2) { animation-delay: 0.2s; }
.hero > *:nth-child(3) { animation-delay: 0.3s; }
.hero > *:nth-child(4) { animation-delay: 0.4s; }

227
website/lux-site/src/components.lux Normal file
View File

@@ -0,0 +1,227 @@
// Website Components
// Reusable UI components for the Lux website
// ============================================================================
// Navigation
// ============================================================================
fn navLink(label: String, url: String): Html<Msg> =
a([class("nav-link"), href(url)], [text(label)])
fn navigation(): Html<Msg> =
nav([class("nav")], [
a([class("nav-logo"), href("/")], [text("LUX")]),
div([class("nav-links")], [
navLink("Learn", "/learn/"),
navLink("Docs", "/docs/"),
navLink("Playground", "/playground/"),
navLink("Community", "/community/")
]),
a([class("nav-github"), href("https://github.com/luxlang/lux")], [
text("GitHub")
])
])
// ============================================================================
// Hero Section
// ============================================================================
fn hero(): Html<Msg> =
section([class("hero")], [
div([class("hero-logo")], [
pre([class("logo-ascii")], [text("╦ ╦ ╦╦ ╦\n║ ║ ║╔╣\n╩═╝╚═╝╩ ╩")])
]),
h1([class("hero-title")], [
text("Functional Programming"),
br(),
text("with First-Class Effects")
]),
p([class("hero-tagline")], [
text("Effects are explicit. Types are powerful. Performance is native.")
]),
div([class("hero-cta")], [
a([class("btn btn-primary"), href("/learn/getting-started/")], [
text("Get Started")
]),
a([class("btn btn-secondary"), href("/playground/")], [
text("Playground")
])
])
])
// ============================================================================
// Code Demo Section
// ============================================================================
fn codeDemo(): Html<Msg> =
section([class("code-demo")], [
div([class("container")], [
div([class("code-demo-grid")], [
div([class("code-block")], [
pre([class("code")], [
code([], [text(
"fn processOrder(
order: Order
): Receipt
with {Database, Email} =
{
let saved = Database.save(order)
Email.send(
order.customer,
\"Order confirmed!\"
)
Receipt(saved.id)
}"
)])
])
]),
div([class("code-explanation")], [
h3([], [text("The type signature tells you everything")]),
ul([], [
li([], [text("Queries the database")]),
li([], [text("Sends an email")]),
li([], [text("Returns a Receipt")])
]),
p([class("highlight")], [
text("No surprises. No hidden side effects.")
])
])
])
])
])
// ============================================================================
// Value Props Section
// ============================================================================
fn valueProp(title: String, description: String): Html<Msg> =
div([class("value-prop card")], [
h3([class("value-prop-title")], [text(title)]),
p([class("value-prop-desc")], [text(description)])
])
fn valueProps(): Html<Msg> =
section([class("value-props")], [
div([class("container")], [
div([class("value-props-grid")], [
valueProp(
"EFFECTS",
"Side effects are tracked in the type signature. Know exactly what every function does."
),
valueProp(
"TYPES",
"Full type inference with algebraic data types. Catch bugs at compile time."
),
valueProp(
"PERFORMANCE",
"Compiles to native C via gcc. Matches C performance, beats Rust and Zig."
)
])
])
])
// ============================================================================
// Benchmarks Section
// ============================================================================
fn benchmarkBar(lang: String, time: String, width: Int): Html<Msg> =
div([class("benchmark-row")], [
span([class("benchmark-lang")], [text(lang)]),
div([class("benchmark-bar-container")], [
div([class("benchmark-bar"), style("width", toString(width) + "%")], [])
]),
span([class("benchmark-time")], [text(time)])
])
fn benchmarks(): Html<Msg> =
section([class("benchmarks")], [
div([class("container")], [
h2([], [text("Performance")]),
p([class("section-subtitle")], [
text("fib(35) benchmark — verified with hyperfine")
]),
div([class("benchmarks-chart")], [
benchmarkBar("Lux", "28.1ms", 100),
benchmarkBar("C", "29.0ms", 97),
benchmarkBar("Rust", "41.2ms", 68),
benchmarkBar("Zig", "47.0ms", 60)
]),
p([class("benchmarks-note")], [
a([href("/benchmarks/")], [text("See full methodology →")])
])
])
])
// ============================================================================
// Quick Start Section
// ============================================================================
fn quickStart(): Html<Msg> =
section([class("quick-start")], [
div([class("container")], [
h2([], [text("Get Started")]),
div([class("code-block")], [
pre([class("code")], [
code([], [text(
"# Install via Nix
nix run github:luxlang/lux
# Or build from source
git clone https://github.com/luxlang/lux
cd lux && nix develop
cargo build --release
# Start the REPL
./target/release/lux"
)])
])
]),
a([class("btn btn-primary"), href("/learn/getting-started/")], [
text("Full Installation Guide →")
])
])
])
// ============================================================================
// Footer
// ============================================================================
fn footerColumn(title: String, links: List<(String, String)>): Html<Msg> =
div([class("footer-column")], [
h4([], [text(title)]),
ul([], List.map(links, fn((label, url)) =>
li([], [a([href(url)], [text(label)])])
))
])
fn footer(): Html<Msg> =
footer([class("footer")], [
div([class("container")], [
div([class("footer-grid")], [
div([class("footer-brand")], [
span([class("footer-logo")], [text("LUX")]),
p([], [text("Functional programming with first-class effects.")])
]),
footerColumn("Learn", [
("Getting Started", "/learn/getting-started/"),
("Tutorial", "/learn/tutorial/"),
("Examples", "/learn/examples/"),
("Reference", "/docs/")
]),
footerColumn("Community", [
("Discord", "https://discord.gg/lux"),
("GitHub", "https://github.com/luxlang/lux"),
("Contributing", "/community/contributing/"),
("Code of Conduct", "/community/code-of-conduct/")
]),
footerColumn("About", [
("Benchmarks", "/benchmarks/"),
("Blog", "/blog/"),
("License", "https://github.com/luxlang/lux/blob/main/LICENSE")
])
]),
div([class("footer-bottom")], [
p([], [text("© 2026 Lux Language")])
])
])
])

239
website/lux-site/src/generate.lux Normal file
View File

@@ -0,0 +1,239 @@
// Static Site Generator for Lux Website
//
// This module generates the static HTML files for the Lux website.
// Run with: lux website/lux-site/src/generate.lux
import html
import components
import pages
// ============================================================================
// Site Generation
// ============================================================================
fn generateSite(): Unit with {FileSystem, Console} = {
Console.print("Generating Lux website...")
Console.print("")
// Create output directories
FileSystem.mkdir("website/lux-site/dist")
FileSystem.mkdir("website/lux-site/dist/learn")
FileSystem.mkdir("website/lux-site/dist/docs")
FileSystem.mkdir("website/lux-site/dist/static")
// Generate landing page
Console.print(" Generating index.html...")
let index = pages.landingPage()
let indexHtml = html.document(
"Lux - Functional Programming with First-Class Effects",
pages.pageHead("Lux"),
[index]
)
FileSystem.write("website/lux-site/dist/index.html", indexHtml)
// Generate documentation pages
Console.print(" Generating documentation...")
List.forEach(docPages(), fn(page) = {
let pageHtml = html.document(
page.title + " - Lux Documentation",
pages.pageHead(page.title),
[pages.docPageLayout(page)]
)
FileSystem.write("website/lux-site/dist/docs/" + page.slug + ".html", pageHtml)
})
// Copy static assets
Console.print(" Copying static assets...")
FileSystem.copy("website/lux-site/static/style.css", "website/lux-site/dist/static/style.css")
Console.print("")
Console.print("Site generated: website/lux-site/dist/")
}
// Documentation pages to generate
fn docPages(): List<DocPage> = [
{
title: "Effects",
slug: "effects",
content: effectsDoc()
},
{
title: "Types",
slug: "types",
content: typesDoc()
},
{
title: "Syntax",
slug: "syntax",
content: syntaxDoc()
}
]
// ============================================================================
// Documentation Content
// ============================================================================
fn effectsDoc(): Html<Msg> =
div([], [
p([], [text(
"Effects are Lux's defining feature. They make side effects explicit in function signatures, so you always know exactly what a function does."
)]),
h2([], [text("Declaring Effects")]),
pre([class("code")], [
code([], [text(
"fn greet(name: String): String with {Console} = {
Console.print(\"Hello, \" + name)
\"greeted \" + name
}"
)])
]),
p([], [text(
"The `with {Console}` clause tells the compiler this function performs console I/O. Anyone calling this function will see this requirement in the type signature."
)]),
h2([], [text("Multiple Effects")]),
pre([class("code")], [
code([], [text(
"fn processOrder(order: Order): Receipt
with {Database, Email, Logger} = {
Logger.info(\"Processing order: \" + order.id)
let saved = Database.save(order)
Email.send(order.customer, \"Order confirmed!\")
Receipt(saved.id)
}"
)])
]),
p([], [text(
"Functions can declare multiple effects. The caller must provide handlers for all of them."
)]),
h2([], [text("Handling Effects")]),
pre([class("code")], [
code([], [text(
"// Production - real implementations
run processOrder(order) with {
Database -> postgresDb,
Email -> smtpServer,
Logger -> fileLogger
}
// Testing - mock implementations
run processOrder(order) with {
Database -> inMemoryDb,
Email -> collectEmails,
Logger -> noopLogger
}"
)])
]),
p([], [text(
"The same code runs with different effect handlers. This makes testing trivial - no mocking frameworks required."
)])
])
fn typesDoc(): Html<Msg> =
div([], [
p([], [text(
"Lux has a powerful type system with full type inference. You rarely need to write type annotations, but they're there when you want them."
)]),
h2([], [text("Basic Types")]),
pre([class("code")], [
code([], [text(
"let x: Int = 42
let name: String = \"Lux\"
let active: Bool = true
let ratio: Float = 3.14"
)])
]),
h2([], [text("Algebraic Data Types")]),
pre([class("code")], [
code([], [text(
"type Option<T> =
| Some(T)
| None
type Result<T, E> =
| Ok(T)
| Err(E)
type Shape =
| Circle(Float)
| Rectangle(Float, Float)
| Triangle(Float, Float, Float)"
)])
]),
h2([], [text("Pattern Matching")]),
pre([class("code")], [
code([], [text(
"fn area(shape: Shape): Float =
match shape {
Circle(r) => 3.14159 * r * r,
Rectangle(w, h) => w * h,
Triangle(a, b, c) => {
let s = (a + b + c) / 2.0
sqrt(s * (s - a) * (s - b) * (s - c))
}
}"
)])
])
])
fn syntaxDoc(): Html<Msg> =
div([], [
p([], [text(
"Lux syntax is clean and expression-oriented. Everything is an expression that returns a value."
)]),
h2([], [text("Functions")]),
pre([class("code")], [
code([], [text(
"// Named function
fn add(a: Int, b: Int): Int = a + b
// Anonymous function (lambda)
let double = fn(x) => x * 2
// Function with block body
fn greet(name: String): String = {
let greeting = \"Hello, \"
greeting + name + \"!\"
}"
)])
]),
h2([], [text("Let Bindings")]),
pre([class("code")], [
code([], [text(
"let x = 42
let name = \"world\"
let result = add(1, 2)"
)])
]),
h2([], [text("Conditionals")]),
pre([class("code")], [
code([], [text(
"let result = if x > 0 then \"positive\" else \"non-positive\"
// Multi-branch
let grade =
if score >= 90 then \"A\"
else if score >= 80 then \"B\"
else if score >= 70 then \"C\"
else \"F\""
)])
])
])
// ============================================================================
// Main
// ============================================================================
fn main(): Unit with {FileSystem, Console} = {
generateSite()
}
let result = run main() with {}

117
website/lux-site/src/pages.lux Normal file
View File

@@ -0,0 +1,117 @@
// Page Templates
// Full page layouts for the Lux website
import html
import components
// ============================================================================
// Landing Page
// ============================================================================
fn landingPage(): Html<Msg> =
div([class("page")], [
components.navigation(),
main([], [
components.hero(),
components.codeDemo(),
components.valueProps(),
components.benchmarks(),
components.quickStart()
]),
components.footer()
])
// ============================================================================
// Documentation Page Layout
// ============================================================================
type DocPage = {
title: String,
slug: String,
content: Html<Msg>
}
fn docSidebar(currentSlug: String): Html<Msg> =
aside([class("doc-sidebar")], [
div([class("doc-sidebar-section")], [
h4([], [text("LANGUAGE")]),
ul([], [
docNavItem("Syntax", "syntax", currentSlug),
docNavItem("Types", "types", currentSlug),
docNavItem("Effects", "effects", currentSlug),
docNavItem("Pattern Matching", "patterns", currentSlug),
docNavItem("Modules", "modules", currentSlug)
])
]),
div([class("doc-sidebar-section")], [
h4([], [text("STANDARD LIBRARY")]),
ul([], [
docNavItem("List", "list", currentSlug),
docNavItem("String", "string", currentSlug),
docNavItem("Option", "option", currentSlug),
docNavItem("Result", "result", currentSlug)
])
]),
div([class("doc-sidebar-section")], [
h4([], [text("EFFECTS")]),
ul([], [
docNavItem("Console", "console", currentSlug),
docNavItem("Http", "http", currentSlug),
docNavItem("FileSystem", "filesystem", currentSlug)
])
]),
div([class("doc-sidebar-section")], [
h4([], [text("TOOLING")]),
ul([], [
docNavItem("CLI", "cli", currentSlug),
docNavItem("LSP", "lsp", currentSlug),
docNavItem("Editors", "editors", currentSlug)
])
])
])
fn docNavItem(label: String, slug: String, currentSlug: String): Html<Msg> = {
let activeClass = if slug == currentSlug then "active" else ""
li([], [
a([class("doc-nav-link " + activeClass), href("/docs/" + slug + "/")], [
text(label)
])
])
}
fn docPageLayout(page: DocPage): Html<Msg> =
div([class("page doc-page")], [
components.navigation(),
div([class("doc-layout")], [
docSidebar(page.slug),
main([class("doc-content")], [
h1([], [text(page.title)]),
page.content
])
]),
components.footer()
])
// ============================================================================
// Learn Page Layout
// ============================================================================
fn learnPageLayout(title: String, content: Html<Msg>): Html<Msg> =
div([class("page learn-page")], [
components.navigation(),
main([class("learn-content container")], [
h1([], [text(title)]),
content
]),
components.footer()
])
// ============================================================================
// Page Head Elements
// ============================================================================
fn pageHead(title: String): List<Html<Msg>> = [
Element("meta", [Name("description"), Value("Lux - Functional programming with first-class effects")], []),
Element("link", [Href("/static/style.css"), DataAttr("rel", "stylesheet")], []),
Element("link", [Href("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Source+Serif+Pro:wght@400;600&family=JetBrains+Mono:wght@400;500&display=swap"), DataAttr("rel", "stylesheet")], [])
]

707
website/lux-site/static/style.css Normal file
View File

@@ -0,0 +1,707 @@
/* ============================================================================
Lux Website - Sleek and Noble
Translucent black, white, and gold with strong serif typography
============================================================================ */
/* CSS Variables */
:root {
/* Backgrounds */
--bg-primary: #0a0a0a;
--bg-secondary: #111111;
--bg-glass: rgba(255, 255, 255, 0.03);
--bg-glass-hover: rgba(255, 255, 255, 0.06);
--bg-code: rgba(212, 175, 55, 0.05);
/* Text */
--text-primary: #ffffff;
--text-secondary: rgba(255, 255, 255, 0.7);
--text-muted: rgba(255, 255, 255, 0.5);
/* Gold accents */
--gold: #d4af37;
--gold-light: #f4d03f;
--gold-dark: #b8860b;
--gold-glow: rgba(212, 175, 55, 0.3);
/* Borders */
--border-subtle: rgba(255, 255, 255, 0.1);
--border-gold: rgba(212, 175, 55, 0.3);
/* Typography */
--font-heading: "Playfair Display", Georgia, serif;
--font-body: "Source Serif Pro", Georgia, serif;
--font-code: "JetBrains Mono", "Fira Code", monospace;
/* Spacing */
--container-width: 1200px;
--section-padding: 6rem 2rem;
}
/* Reset */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
background: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 18px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 600;
color: var(--gold-light);
letter-spacing: -0.02em;
line-height: 1.2;
}
h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: 1.25rem; }
p {
margin-bottom: 1rem;
color: var(--text-secondary);
}
a {
color: var(--gold);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: var(--gold-light);
}
/* Container */
.container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 2rem;
}
/* ============================================================================
Navigation
============================================================================ */
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2rem;
max-width: var(--container-width);
margin: 0 auto;
position: sticky;
top: 0;
z-index: 100;
background: rgba(10, 10, 10, 0.9);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-subtle);
}
.nav-logo {
font-family: var(--font-heading);
font-size: 1.75rem;
font-weight: 700;
color: var(--gold);
letter-spacing: 0.1em;
}
.nav-links {
display: flex;
gap: 2.5rem;
}
.nav-link {
font-family: var(--font-body);
font-size: 1rem;
color: var(--text-secondary);
transition: color 0.3s ease;
}
.nav-link:hover {
color: var(--gold);
}
.nav-github {
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--text-muted);
padding: 0.5rem 1rem;
border: 1px solid var(--border-subtle);
border-radius: 4px;
transition: all 0.3s ease;
}
.nav-github:hover {
color: var(--gold);
border-color: var(--gold);
}
/* ============================================================================
Hero Section
============================================================================ */
.hero {
min-height: 90vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 4rem 2rem;
background:
radial-gradient(ellipse at top, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
var(--bg-primary);
}
.hero-logo {
margin-bottom: 2rem;
}
.logo-ascii {
font-family: var(--font-code);
font-size: 2rem;
color: var(--gold);
line-height: 1.2;
text-shadow: 0 0 30px var(--gold-glow);
}
.hero-title {
margin-bottom: 1.5rem;
}
.hero-tagline {
font-size: 1.35rem;
color: var(--text-secondary);
max-width: 600px;
margin-bottom: 3rem;
}
.hero-cta {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
justify-content: center;
}
/* ============================================================================
Buttons
============================================================================ */
.btn {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 600;
padding: 1rem 2.5rem;
border-radius: 4px;
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
cursor: pointer;
border: none;
}
.btn-primary {
background: linear-gradient(135deg, var(--gold-dark), var(--gold));
color: #0a0a0a;
}
.btn-primary:hover {
background: linear-gradient(135deg, var(--gold), var(--gold-light));
color: #0a0a0a;
transform: translateY(-2px);
box-shadow: 0 4px 20px var(--gold-glow);
}
.btn-secondary {
background: transparent;
color: var(--gold);
border: 1px solid var(--gold);
}
.btn-secondary:hover {
background: rgba(212, 175, 55, 0.1);
color: var(--gold-light);
}
/* ============================================================================
Code Demo Section
============================================================================ */
.code-demo {
padding: var(--section-padding);
background: var(--bg-secondary);
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
}
.code-demo-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.code-block {
background: var(--bg-code);
border: 1px solid var(--border-gold);
border-radius: 8px;
overflow: hidden;
}
.code {
padding: 1.5rem;
margin: 0;
overflow-x: auto;
}
.code code {
font-family: var(--font-code);
font-size: 0.95rem;
color: var(--text-primary);
line-height: 1.6;
}
.code-explanation h3 {
margin-bottom: 1.5rem;
}
.code-explanation ul {
list-style: none;
margin-bottom: 1.5rem;
}
.code-explanation li {
padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative;
color: var(--text-secondary);
}
.code-explanation li::before {
content: "•";
position: absolute;
left: 0;
color: var(--gold);
}
.code-explanation .highlight {
font-size: 1.1rem;
color: var(--gold-light);
font-style: italic;
}
/* ============================================================================
Value Props Section
============================================================================ */
.value-props {
padding: var(--section-padding);
}
.value-props-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.value-prop {
text-align: center;
padding: 2.5rem 2rem;
}
.value-prop-title {
font-size: 0.9rem;
letter-spacing: 0.15em;
margin-bottom: 1rem;
color: var(--gold);
}
.value-prop-desc {
font-size: 1.1rem;
color: var(--text-secondary);
}
/* ============================================================================
Cards
============================================================================ */
.card {
background: var(--bg-glass);
border: 1px solid rgba(212, 175, 55, 0.15);
border-radius: 8px;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.card:hover {
background: var(--bg-glass-hover);
border-color: rgba(212, 175, 55, 0.3);
}
/* ============================================================================
Benchmarks Section
============================================================================ */
.benchmarks {
padding: var(--section-padding);
background: var(--bg-secondary);
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
}
.benchmarks h2 {
text-align: center;
margin-bottom: 0.5rem;
}
.section-subtitle {
text-align: center;
color: var(--text-muted);
margin-bottom: 3rem;
}
.benchmarks-chart {
max-width: 600px;
margin: 0 auto;
}
.benchmark-row {
display: grid;
grid-template-columns: 60px 1fr 80px;
gap: 1rem;
align-items: center;
margin-bottom: 1rem;
}
.benchmark-lang {
font-family: var(--font-code);
font-size: 0.9rem;
color: var(--text-secondary);
}
.benchmark-bar-container {
height: 24px;
background: var(--bg-glass);
border-radius: 4px;
overflow: hidden;
}
.benchmark-bar {
height: 100%;
background: linear-gradient(90deg, var(--gold-dark), var(--gold));
border-radius: 4px;
transition: width 1s ease;
}
.benchmark-time {
font-family: var(--font-code);
font-size: 0.9rem;
color: var(--gold-light);
text-align: right;
}
.benchmarks-note {
text-align: center;
margin-top: 2rem;
}
.benchmarks-note a {
font-size: 0.95rem;
color: var(--text-muted);
}
.benchmarks-note a:hover {
color: var(--gold);
}
/* ============================================================================
Testing Section
============================================================================ */
.testing {
padding: var(--section-padding);
}
.testing h2 {
text-align: center;
margin-bottom: 0.5rem;
}
.testing .code-demo-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-top: 2rem;
}
@media (max-width: 768px) {
.testing .code-demo-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================================
Quick Start Section
============================================================================ */
.quick-start {
padding: var(--section-padding);
text-align: center;
}
.quick-start h2 {
margin-bottom: 2rem;
}
.quick-start .code-block {
max-width: 600px;
margin: 0 auto 2rem;
text-align: left;
}
/* ============================================================================
Footer
============================================================================ */
.footer {
padding: 4rem 2rem 2rem;
background: var(--bg-secondary);
border-top: 1px solid var(--border-subtle);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
margin-bottom: 3rem;
}
.footer-brand {
max-width: 300px;
}
.footer-logo {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 700;
color: var(--gold);
letter-spacing: 0.1em;
display: block;
margin-bottom: 1rem;
}
.footer-brand p {
font-size: 0.95rem;
color: var(--text-muted);
}
.footer-column h4 {
font-size: 0.8rem;
letter-spacing: 0.1em;
color: var(--text-muted);
margin-bottom: 1rem;
}
.footer-column ul {
list-style: none;
}
.footer-column li {
margin-bottom: 0.5rem;
}
.footer-column a {
font-size: 0.95rem;
color: var(--text-secondary);
}
.footer-column a:hover {
color: var(--gold);
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid var(--border-subtle);
}
.footer-bottom p {
font-size: 0.9rem;
color: var(--text-muted);
}
/* ============================================================================
Documentation Layout
============================================================================ */
.doc-layout {
display: grid;
grid-template-columns: 250px 1fr;
min-height: calc(100vh - 80px);
}
.doc-sidebar {
position: sticky;
top: 80px;
height: calc(100vh - 80px);
overflow-y: auto;
padding: 2rem;
background: var(--bg-secondary);
border-right: 1px solid var(--border-subtle);
}
.doc-sidebar-section {
margin-bottom: 2rem;
}
.doc-sidebar-section h4 {
font-size: 0.75rem;
letter-spacing: 0.15em;
color: var(--text-muted);
margin-bottom: 0.75rem;
}
.doc-sidebar-section ul {
list-style: none;
}
.doc-nav-link {
display: block;
padding: 0.4rem 0;
font-size: 0.95rem;
color: var(--text-secondary);
transition: color 0.2s ease;
}
.doc-nav-link:hover {
color: var(--gold);
}
.doc-nav-link.active {
color: var(--gold-light);
font-weight: 600;
}
.doc-content {
padding: 3rem;
max-width: 800px;
}
.doc-content h1 {
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-gold);
}
/* ============================================================================
Responsive Design
============================================================================ */
@media (max-width: 1024px) {
.code-demo-grid {
grid-template-columns: 1fr;
}
.value-props-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.doc-layout {
grid-template-columns: 1fr;
}
.doc-sidebar {
position: static;
height: auto;
}
}
@media (max-width: 768px) {
.nav {
flex-direction: column;
gap: 1rem;
}
.nav-links {
gap: 1.5rem;
}
.hero {
min-height: 80vh;
padding: 3rem 1.5rem;
}
.logo-ascii {
font-size: 1.5rem;
}
.hero-cta {
flex-direction: column;
width: 100%;
max-width: 300px;
}
.btn {
width: 100%;
text-align: center;
}
.footer-grid {
grid-template-columns: 1fr;
text-align: center;
}
.footer-brand {
max-width: none;
}
}
/* ============================================================================
Syntax Highlighting
============================================================================ */
.hljs-keyword { color: var(--gold); }
.hljs-type { color: #82aaff; }
.hljs-string { color: #c3e88d; }
.hljs-number { color: #f78c6c; }
.hljs-comment { color: var(--text-muted); font-style: italic; }
.hljs-function { color: var(--gold-light); }
.hljs-effect { color: var(--gold-light); font-weight: 600; }
/* ============================================================================
Animations
============================================================================ */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hero > * {
animation: fadeIn 0.8s ease forwards;
}
.hero > *:nth-child(1) { animation-delay: 0.1s; }
.hero > *:nth-child(2) { animation-delay: 0.2s; }
.hero > *:nth-child(3) { animation-delay: 0.3s; }
.hero > *:nth-child(4) { animation-delay: 0.4s; }

25
website/lux-site/test_html.lux Normal file
View File

@@ -0,0 +1,25 @@
// Test the HTML module rendering capabilities
// Import from stdlib
// Note: Documenting Lux weakness - no proper module import system visible to user
// Simple HTML test without relying on complex module imports
fn main(): Unit with {Console} = {
Console.print("Testing basic Lux functionality for website generation")
Console.print("")
// Test string concatenation
let tag = "div"
let content = "Hello, World!"
let html = "<" + tag + ">" + content + "</" + tag + ">"
Console.print("Generated HTML: " + html)
Console.print("")
// Test conditional
let isActive = true
let className = if isActive then "active" else "inactive"
Console.print("Class name: " + className)
}
let result = run main() with {}