shared-web-assets

Central asset hub for all 21no.de web properties. Served from assets.21no.de.

Structure

├── css/
│ ├── tokens.css # Design tokens (CSS variables)
│ ├── base.css # Reset, typography, layout, effects, animations
│ ├── nav.css # Sticky navigation
│ ├── hero.css # Hero section + stats
│ ├── buttons.css # .btn, .btn-primary, .btn-secondary
│ ├── cards.css # .card, .project-card, .feature-grid
│ ├── footer.css # Site footer
│ └── blog-carousel.css # Blog carousel + skeleton
├── fonts/
│ ├── fonts.css # @font-face declarations
│ ├── SpaceGrotesk-Variable.ttf # Space Grotesk (variable, 300–700)
│ └── JetBrainsMono-*.ttf # JetBrains Mono (400–600)
└── README.md

Usage

<!-- Fonts --><linkrel="stylesheet" href="https://assets.21no.de/fonts/fonts.css" /><!-- Design system --><linkrel="stylesheet" href="https://assets.21no.de/css/tokens.css" /><linkrel="stylesheet" href="https://assets.21no.de/css/base.css" /><linkrel="stylesheet" href="https://assets.21no.de/css/nav.css" /><!-- Components as needed --><linkrel="stylesheet" href="https://assets.21no.de/css/buttons.css" /><linkrel="stylesheet" href="https://assets.21no.de/css/cards.css" /><linkrel="stylesheet" href="https://assets.21no.de/css/hero.css" /><linkrel="stylesheet" href="https://assets.21no.de/css/footer.css" />

Page-specific styles stay inline in the project's own HTML.

Adding a New Site

1. Point your site's HTML to https://assets.21no.de/css/*.css
2. Add any page-specific CSS inline
3. Done — no font or design system duplication