Sven/alina-schillinger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update as-styleguide/index.html

Browse Source 
Update as-styleguide/styles.css
Update koru.ai
This commit is contained in:
Sven Steinert
2026-02-25 23:16:06 +01:00
parent 98a1d43cc6
commit e873fcad03
10 changed files with 2418 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
as-styleguide/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AS Styleguide – Coaching & Beratung</title>
<meta name="description" content="Styleguide (HTML/CSS/JS) für Coaching & Beratung – Typografie, Komponenten, Layout-Grids." />
<link rel="preload" href="assets/fonts/have-heart-one.otf" as="font" type="font/otf" crossorigin>
<link rel="preload" href="assets/fonts/gilroy/Gilroy-SemiBoldItalic.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="assets/fonts/gilroy/Gilroy-Regular.ttf" as="font" type="font/ttf" crossorigin>
<link rel="stylesheet" href="styles.css" />
</head>
@@ -16,7 +16,7 @@
<header class="site-header" data-header>
<div class="container header-inner">
<a class="brand" href="#top" aria-label="Start">
<img class="brand-logo" src="assets/img/logo.png" alt="AS – Coaching und Beratung" />
<img class="brand-logo" src="assets/img/logo.svg" alt="AS – Coaching und Beratung" />
</a>
<button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" data-nav-toggle>
@@ -66,21 +66,26 @@
<a class="btn btn--secondary btn--lg" href="#produkte">Workbook & Minikurse</a>
</div>
<ul class="hero-proof" role="list">
<li><span class="icon-dot" aria-hidden="true"></span> CV-Check & Profil-Optimierung</li>
<li><span class="icon-dot" aria-hidden="true"></span> Interview-Training (realistische Simulation)</li>
<li><span class="icon-dot" aria-hidden="true"></span> Storytelling & Argumentationslinien</li>
</ul>
</div>
<div class="hero-card">
<div class="hero-side">
<figure class="hero-visual" aria-label="Atmosphärisches Hero-Bild">
<img src="assets/img/person-an-tafel.webp" alt="Coach vor einer Tafel im Workshop-Kontext" />
</figure>
</div>
</div>
</section>
<section class="quickstart-segment" aria-labelledby="quickstart-title">
<div class="container">
<div class="hero-card quickstart-card-wrap">
<div class="hero-card-top">
<div class="pill">Styleguide</div>
<div class="badge">WP-ready</div>
</div>
<div class="card card--elevated">
<h2 class="h3">Schnellstart-Komponenten</h2>
<div class="card card--elevated quickstart-card">
<h2 class="h3" id="quickstart-title">Schnellstart-Komponenten</h2>
<p class="muted">Buttons, Cards, Formulare, Grids, Sektionen – bereits so aufgebaut, dass du daraus ein WP-Template werden kann.</p>
<div class="stack-sm">
@@ -93,14 +98,13 @@
<dl class="kv">
<div><dt>Primärfarbe</dt><dd><code>#EB825E</code></dd></div>
<div><dt>Text</dt><dd><code>#353535</code></dd></div>
<div><dt>Background</dt><dd><code>#FAF7F2</code></dd></div>
<div><dt>Fonts</dt><dd><code>HaveHeartOne</code> + <code>Gilroy</code></dd></div>
<div><dt>Background</dt><dd><code>#FFFFFF</code></dd></div>
<div><dt>Fonts</dt><dd><code>Gilroy</code> (<code>SemiBold Italic</code> f&uuml;r Headlines)</dd></div>
</dl>
</div>
</div>
</div>
</section>
<section class="section" id="farben">
<div class="container">
<div class="section-head">
@@ -119,9 +123,19 @@
<div class="swatch-meta"><div class="swatch-title">Ink</div><code>#353535</code></div>
</div>
<div class="swatch">
<div class="swatch-color" style="background:#FFFFFF"></div>
<div class="swatch-meta"><div class="swatch-title">Canvas</div><code>#FFFFFF</code></div>
</div>
<div class="swatch">
<div class="swatch-color" style="background:#FAF7F2"></div>
<div class="swatch-meta"><div class="swatch-title">Canvas</div><code>#FAF7F2</code></div>
<div class="swatch-meta"><div class="swatch-title">Surface / Card</div><code>#FAF7F2</code></div>
</div>
<div class="swatch">
<div class="swatch-color swatch-color--verlauf"></div>
<div class="swatch-meta"><div class="swatch-title">Verlauf / Hero Tile</div><code>#25201E (82% - 72%)</code></div>
</div>
</div>
@@ -135,14 +149,14 @@
<div class="container">
<div class="section-head">
<h2 class="h2">Typografie</h2>
<p class="muted">HaveHeartOne nur für große, prägnante Statements. Gilroy für Struktur, UI und Fließtext.</p>
<p class="muted">Nur Gilroy: SemiBold Italic für Hero-/Display-Statements, reguläre Schnitte für Struktur, UI und Fließtext.</p>
</div>
<div class="grid grid-2">
<div class="card">
<p class="label">Display / Hero (HaveHeartOne)</p>
<p class="label">Display / Hero (Gilroy SemiBold Italic)</p>
<p class="type-sample display-sample">Souverän auftreten. Wirkung erzielen.</p>
<p class="muted small">Regel: HaveHeartOne nur H1 + evtl. emotionales H2. Keine Navigation, keine Forms, keine Tabellen.</p>
<p class="muted small">Regel: Gilroy SemiBold Italic nur für Hero/Display-Statements. UI, Navigation, Forms und Tabellen in regulären Gilroy-Schnitten.</p>
</div>
<div class="card">