feat: rebuild website with full learning funnel
Website rebuilt from scratch based on analysis of 11 beloved language websites (Elm, Zig, Gleam, Swift, Kotlin, Haskell, OCaml, Crystal, Roc, Rust, Go). New website structure: - Homepage with hero, playground, three pillars, install guide - Language Tour with interactive lessons (hello world, types, effects) - Examples cookbook with categorized sidebar - API documentation index - Installation guide (Nix and source) - Sleek/noble design (black/gold, serif typography) Also includes: - New stdlib/json.lux module for JSON serialization - Enhanced stdlib/http.lux with middleware and routing - New string functions (charAt, indexOf, lastIndexOf, repeat) - LSP improvements (rename, signature help, formatting) - Package manager transitive dependency resolution - Updated documentation for effects and stdlib - New showcase example (task_manager.lux) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
295
website/static/tour.css
Normal file
295
website/static/tour.css
Normal file
@@ -0,0 +1,295 @@
|
||||
/* Tour of Lux - Additional Styles */
|
||||
|
||||
.tour-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
.tour-title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1rem;
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.tour-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.lesson-select {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem 1rem;
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lesson-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--gold);
|
||||
}
|
||||
|
||||
.tour-progress {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.tour-container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-xl) var(--space-lg);
|
||||
}
|
||||
|
||||
.tour-content h1 {
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.tour-content h2 {
|
||||
text-align: left;
|
||||
margin-top: var(--space-xl);
|
||||
margin-bottom: var(--space-md);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.tour-content h3 {
|
||||
color: var(--gold);
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.tour-content p {
|
||||
margin-bottom: var(--space-md);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.tour-content ul {
|
||||
margin-bottom: var(--space-md);
|
||||
padding-left: var(--space-lg);
|
||||
}
|
||||
|
||||
.tour-content li {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.tour-overview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-lg);
|
||||
margin: var(--space-lg) 0;
|
||||
}
|
||||
|
||||
.tour-section {
|
||||
background: var(--bg-glass);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 8px;
|
||||
padding: var(--space-lg);
|
||||
}
|
||||
|
||||
.tour-section ul {
|
||||
padding-left: var(--space-md);
|
||||
}
|
||||
|
||||
.tour-section a {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.tour-section a:hover {
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.tour-start {
|
||||
margin-top: var(--space-xl);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Lesson Page Layout */
|
||||
.lesson-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-lg);
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-lg);
|
||||
min-height: calc(100vh - 80px);
|
||||
}
|
||||
|
||||
.lesson-content {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.lesson-content h1 {
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.lesson-content p {
|
||||
margin-bottom: var(--space-md);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.key-points {
|
||||
background: var(--bg-glass);
|
||||
border: 1px solid var(--border-gold);
|
||||
border-radius: 8px;
|
||||
padding: var(--space-md);
|
||||
margin: var(--space-lg) 0;
|
||||
}
|
||||
|
||||
.key-points h3 {
|
||||
font-size: 1rem;
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.key-points ul {
|
||||
padding-left: var(--space-md);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.key-points li {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.key-points code {
|
||||
background: var(--code-bg);
|
||||
padding: 0.1em 0.3em;
|
||||
border-radius: 3px;
|
||||
font-size: 0.9em;
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.lesson-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: var(--space-xl);
|
||||
padding-top: var(--space-md);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.lesson-nav a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
color: var(--text-secondary);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.lesson-nav a:hover {
|
||||
color: var(--gold);
|
||||
border-color: var(--border-gold);
|
||||
}
|
||||
|
||||
.lesson-nav .next {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Lesson Editor */
|
||||
.lesson-editor {
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.editor-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.editor-title {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.editor-textarea {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
padding: var(--space-md);
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-code);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
resize: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.editor-output {
|
||||
background: var(--bg-primary);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.output-header {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.output-content {
|
||||
padding: var(--space-md);
|
||||
font-family: var(--font-code);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
color: var(--success);
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.output-content.error {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.editor-toolbar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
background: var(--bg-secondary);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 900px) {
|
||||
.tour-overview {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.lesson-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.lesson-editor {
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.tour-nav {
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.tour-controls {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.lesson-select {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user