add CI/CD deploy workflow, remove migrated DESIGN.md
All checks were successful
Deploy Website / build-and-deploy (push) Successful in 12s

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
WangDL 2026-05-15 16:20:47 +08:00
parent 1d7c25c4cf
commit c53fbfa70a
2 changed files with 32 additions and 137 deletions

View File

@ -0,0 +1,32 @@
name: Deploy Website
on:
push:
branches: [main]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout latest code
run: |
if [ -d /tmp/web-projects ]; then
cd /tmp/web-projects && git pull
else
git clone http://localhost:3000/suche-Hermes/web-projects.git /tmp/web-projects
fi
- name: Build Astro site
run: |
docker run --rm \
-v /tmp/web-projects:/app \
-w /app \
node:22-alpine sh -c "npm install && npm run build"
- name: Deploy to web root
run: |
rm -rf /var/www/longde.cloud/*
cp -r /tmp/web-projects/dist/* /var/www/longde.cloud/
- name: Reload Nginx
run: nginx -s reload

View File

@ -1,137 +0,0 @@
---
name: Luminous Clarity
colors:
surface: '#faf9ff'
surface-dim: '#d2daf1'
surface-bright: '#faf9ff'
surface-container-lowest: '#ffffff'
surface-container-low: '#f1f3ff'
surface-container: '#e9edff'
surface-container-high: '#e1e8ff'
surface-container-highest: '#dbe2fa'
on-surface: '#131b2c'
on-surface-variant: '#434654'
inverse-surface: '#283042'
inverse-on-surface: '#edf0ff'
outline: '#737686'
outline-variant: '#c3c5d7'
surface-tint: '#1a53d6'
primary: '#1550d3'
on-primary: '#ffffff'
primary-container: '#3c6bed'
on-primary-container: '#fffbff'
inverse-primary: '#b5c4ff'
secondary: '#583dde'
on-secondary: '#ffffff'
secondary-container: '#715af8'
on-secondary-container: '#fffbff'
tertiary: '#595c60'
on-tertiary: '#ffffff'
tertiary-container: '#727578'
on-tertiary-container: '#fcfcff'
error: '#ba1a1a'
on-error: '#ffffff'
error-container: '#ffdad6'
on-error-container: '#93000a'
primary-fixed: '#dce1ff'
primary-fixed-dim: '#b5c4ff'
on-primary-fixed: '#00164d'
on-primary-fixed-variant: '#003cad'
secondary-fixed: '#e5deff'
secondary-fixed-dim: '#c8bfff'
on-secondary-fixed: '#190064'
on-secondary-fixed-variant: '#421dc9'
tertiary-fixed: '#e0e3e6'
tertiary-fixed-dim: '#c4c7ca'
on-tertiary-fixed: '#181c1f'
on-tertiary-fixed-variant: '#44474a'
background: '#faf9ff'
on-background: '#131b2c'
surface-variant: '#dbe2fa'
typography:
display-xl:
fontFamily: Manrope
fontSize: 64px
fontWeight: '800'
lineHeight: '1.1'
letterSpacing: -0.02em
headline-lg:
fontFamily: Manrope
fontSize: 40px
fontWeight: '700'
lineHeight: '1.2'
letterSpacing: -0.01em
headline-md:
fontFamily: Manrope
fontSize: 28px
fontWeight: '600'
lineHeight: '1.3'
body-lg:
fontFamily: Manrope
fontSize: 18px
fontWeight: '400'
lineHeight: '1.6'
body-base:
fontFamily: Manrope
fontSize: 16px
fontWeight: '400'
lineHeight: '1.6'
label-sm:
fontFamily: Inter
fontSize: 13px
fontWeight: '600'
lineHeight: '1'
letterSpacing: 0.05em
rounded:
sm: 0.25rem
DEFAULT: 0.5rem
md: 0.75rem
lg: 1rem
xl: 1.5rem
full: 9999px
spacing:
unit: 8px
container-max: 1200px
gutter: 24px
section-padding: 120px
card-padding: 32px
---
## Brand & Style
The design system is anchored in the concept of "Intellectual Serenity." It aims to evoke the feeling of a focused, high-end study environment—quiet, organized, and filled with natural light. The target audience consists of lifelong learners and professionals who value structured knowledge over chaotic information.
The visual style is a fusion of **Apple-inspired Minimalism** and **Glassmorphism**. It prioritizes extreme legibility and breathability, using negative space not just as a gap, but as a structural element that reduces cognitive load. The aesthetic avoids the "aggressive" tropes of AI (heavy glows and dark modes) in favor of a "Calm Tech" approach that feels like a premium productivity tool rather than a futuristic novelty.
## Colors
The color palette uses a "High-Key" approach. The primary **Calm Technology Blue** serves as the anchor for interactive elements, while the **Subtle Blue-Purple** accent is reserved for AI-assisted features and high-value highlights.
Backgrounds transition between pure white and a soft blue-white to define different content zones without needing heavy borders. Text utilizes a Deep Navy rather than pure black to maintain a softer, more premium contrast ratio that is easier on the eyes during long learning sessions.
## Typography
This design system employs **Manrope** for its geometric yet warm characteristics, echoing the polished look of high-end consumer tech landing pages. For Chinese typesetting, pair this with a high-quality, weighted Sans-Serif (like PingFang SC) using optical kerning.
The hierarchy is dramatic; large display headings create an editorial feel, while body text maintains generous line-heights to ensure the "structured learning" content remains approachable and digestible.
## Layout & Spacing
The layout follows a **Fixed Grid** philosophy for desktop (12 columns) to maintain the "launch page" precision, transitioning to a fluid model for mobile.
Spacing is intentionally oversized. Sections should be separated by significant vertical gaps (120px+) to allow the user's mind to reset between concepts. Within components, use a consistent 8px base grid. Content should be centered with wide margins, creating a "gallery" feel where every piece of information feels curated and important.
## Elevation & Depth
Depth is created through **Glassmorphism** and **Ambient Shadows** rather than traditional layers.
- **Surface Level 0:** The soft blue-white canvas (#F6F8FC).
- **Surface Level 1 (Floating Cards):** Pure white background with a very soft, high-blur shadow (0px 20px 40px rgba(18, 26, 43, 0.04)).
- **Surface Level 2 (Glass Overlays):** Semi-transparent white (rgba(255, 255, 255, 0.7)) with a 20px backdrop-blur and a subtle 1px white border.
Incorporate a subtle geometric dot-grid pattern in the background of Level 0 to provide a "blueprint" or "structured" feel to the learning environment.
## Shapes
The shape language is strictly "iOS-style" squircle-adjacent. Use a base radius of 16px (1rem) for standard components and 24px-32px for large containers. This high level of roundedness removes "visual sharpness," reinforcing the calm and friendly nature of the AI assistant. Interactive elements like buttons should feel tactile and "pill-like" when small, or softly rectangular when large.
## Components
- **Primary Buttons:** Use the accent gradient with white text. Apply a subtle lift effect (shadow increases) on hover.
- **Glass Cards:** Used for "Learning Modules." Feature a 1px white inner stroke to catch the light, mimicking physical glass.
- **AI Input Field:** A floating, pill-shaped bar with a soft inner shadow and a subtle blue-purple glow when focused, signaling "AI Activity."
- **Progress Indicators:** Use thin, elegant lines with rounded caps. The "filled" state should use the primary blue.
- **Micro-interactions:** Elements should fade and slide upward 10px when appearing, mimicking the smooth motion of a premium OS.
- **Chips/Tags:** Small, semi-transparent blue fills with Deep Navy text, used for categorizing learning topics.