add CI/CD deploy workflow, remove migrated DESIGN.md
All checks were successful
Deploy Website / build-and-deploy (push) Successful in 12s
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:
parent
1d7c25c4cf
commit
c53fbfa70a
32
.gitea/workflows/deploy.yml
Normal file
32
.gitea/workflows/deploy.yml
Normal 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
|
||||||
@ -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.
|
|
||||||
Loading…
x
Reference in New Issue
Block a user