From 0214631b368caf4a0326e8c2b2ad419bfdd0878b Mon Sep 17 00:00:00 2001
From: kritzl <kritzl@kritzl.dev>
Date: Mon, 17 Feb 2025 01:14:41 +0100
Subject: [PATCH] styleguide: Add WIP message

---
 styleguide/assets/script/styleguide.js     |  2 +-
 styleguide/assets/style/icons.scss         |  4 ++
 styleguide/assets/style/styleguide.css     | 41 ++++++++++++++++--
 styleguide/assets/style/styleguide.css.map |  2 +-
 styleguide/assets/style/styleguide.scss    | 49 ++++++++++++++++++----
 styleguide/colors/index.html               |  9 ++++
 styleguide/demopage/index.html             |  9 ++++
 styleguide/generator/index.html            | 13 +++++-
 styleguide/index.html                      | 10 +++++
 styleguide/typography/index.html           | 12 +++++-
 10 files changed, 136 insertions(+), 15 deletions(-)

diff --git a/styleguide/assets/script/styleguide.js b/styleguide/assets/script/styleguide.js
index 02e3018..08be063 100644
--- a/styleguide/assets/script/styleguide.js
+++ b/styleguide/assets/script/styleguide.js
@@ -4,7 +4,7 @@ document.querySelector('nav > button').addEventListener('click', (e) => {
 
 function applyTheme(theme){
     const html = document.querySelector('html')
-    document.cookie = `theme=${theme}; expires=; SameSite=Strict; Secure`
+    document.cookie = `theme=${theme}; path=/; expires=; SameSite=Strict; Secure`
     html.classList.remove('dark', 'light')
     html.classList.add(theme)
 }
diff --git a/styleguide/assets/style/icons.scss b/styleguide/assets/style/icons.scss
index f8e931b..2ca3c92 100644
--- a/styleguide/assets/style/icons.scss
+++ b/styleguide/assets/style/icons.scss
@@ -49,4 +49,8 @@ i[data-icon] {
   &[data-icon='light']::before {
     mask-image: url('../icon/lightbulb.svg');
   }
+
+  &[data-icon='warning']::before {
+    mask-image: url('../icon/warning.svg');
+  }
 }
\ No newline at end of file
diff --git a/styleguide/assets/style/styleguide.css b/styleguide/assets/style/styleguide.css
index acc5794..d90c254 100644
--- a/styleguide/assets/style/styleguide.css
+++ b/styleguide/assets/style/styleguide.css
@@ -541,6 +541,9 @@ i[data-icon][data-icon=menu-small]::before {
 i[data-icon][data-icon=light]::before {
   mask-image: url("../icon/lightbulb.svg");
 }
+i[data-icon][data-icon=warning]::before {
+  mask-image: url("../icon/warning.svg");
+}
 
 * {
   box-sizing: border-box;
@@ -740,6 +743,38 @@ a.a-visited, a.a-visited:hover, a.a-visited:active, a.a-visited:focus {
   text-decoration: underline;
 }
 
+.alert {
+  background-color: var(--color-shade-1);
+  padding: 1rem 1.5rem;
+  border-radius: 1rem;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  gap: 1.5rem;
+  margin: 2rem 0;
+}
+.alert i[data-icon] {
+  padding-top: 0.5rem;
+  font-size: var(--text-5xl);
+  filter: var(--filter-glow-primary);
+  color: var(--color-glow-primary);
+}
+.alert strong {
+  font-size: var(--text-xl);
+  display: block;
+}
+.alert p {
+  margin: 0;
+}
+.alert::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 1rem;
+  border: solid 0.125rem var(--color-glow-primary);
+  filter: var(--filter-glow-primary);
+}
+
 pre,
 .code {
   max-width: 100%;
@@ -779,19 +814,19 @@ pre,
   }
 }
 
-main.generator > div {
+main > div.generator {
   display: flex;
   flex-direction: column;
   gap: 1em;
   align-items: center;
 }
-main.generator img {
+main > div.generator img {
   width: 400px;
   height: 300px;
   object-fit: contain;
   filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
 }
-main.generator i {
+main > div.generator i {
   font-size: 3em;
   filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
 }
diff --git a/styleguide/assets/style/styleguide.css.map b/styleguide/assets/style/styleguide.css.map
index 711f48a..e7d32ab 100644
--- a/styleguide/assets/style/styleguide.css.map
+++ b/styleguide/assets/style/styleguide.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["base.scss","icons.scss","styleguide.scss"],"names":[],"mappings":"AASA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAiEF;EA7DE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;;AAGA;EACE;;AAGF;EACE;;;AAuCJ;EAlCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;;AAGA;EACE;;AAGF;EACE;;;AAYJ;AAAA;EAtCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;;AAGA;AAAA;EACE;;AAGF;AAAA;EACE;;;AAiBJ;EA1EE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;;AAGA;EACE;;AAGF;EACE;;;AAoDJ;EACE;IA/EA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;;EAGA;IACE;;EAGF;IACE;;;AA4DJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;EACA;EACA;;;AAIA;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAGA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,KA3ZuB;EA4ZvB;;AAEA;EALF;IAMI;;;AAGF;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AC9eJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AC9CJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI,YFhBqB;;;AEmBvB;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QFxDqB;EEyDrB;;AAEA;EAdF;IAeI;IACA;IACA;IACA;IACA;;EAEA;IACE;;;AAIJ;EA1BF;IA2BI;;EAGE;IACE;;EAIJ;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAKA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EAIE;;AAIJ;EAEE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EAIE;;AAIJ;EACE;EACA;;AAEA;EAIE;;AAON;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;;AAMR;EACE;EACA;EACA;;AAEA;EALF;IAMI;IACA;;;;AAQN;EAKE;EACA;;AAGF;EAEE;EACA;;AAGF;EAIE;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;;EAEA;IACE;;;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;IACA;;EAEA;IACE;;;;AAOJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"styleguide.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["base.scss","icons.scss","styleguide.scss"],"names":[],"mappings":"AASA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAiEF;EA7DE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;;AAGA;EACE;;AAGF;EACE;;;AAuCJ;EAlCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;;AAGA;EACE;;AAGF;EACE;;;AAYJ;AAAA;EAtCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;;AAGA;AAAA;EACE;;AAGF;AAAA;EACE;;;AAiBJ;EA1EE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;;AAGA;EACE;;AAGF;EACE;;;AAoDJ;EACE;IA/EA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;;EAGA;IACE;;EAGF;IACE;;;AA4DJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;EACA;EACA;;;AAIA;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAGA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,KA3ZuB;EA4ZvB;;AAEA;EALF;IAMI;;;AAGF;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AC9eJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AClDJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI,YFhBqB;;;AEmBvB;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QFxDqB;EEyDrB;;AAEA;EAdF;IAeI;IACA;IACA;IACA;IACA;;EAEA;IACE;;;AAIJ;EA1BF;IA2BI;;EAGE;IACE;;EAIJ;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAKA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EAIE;;AAIJ;EAEE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EAIE;;AAIJ;EACE;EACA;;AAEA;EAIE;;AAON;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;;AAMR;EACE;EACA;EACA;;AAEA;EALF;IAMI;IACA;;;;AAQN;EAKE;EACA;;AAGF;EAEE;EACA;;AAGF;EAIE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;;EAEA;IACE;;;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;IACA;;EAEA;IACE;;;;AAMN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"styleguide.css"}
\ No newline at end of file
diff --git a/styleguide/assets/style/styleguide.scss b/styleguide/assets/style/styleguide.scss
index 1e2c3c0..218d05b 100644
--- a/styleguide/assets/style/styleguide.scss
+++ b/styleguide/assets/style/styleguide.scss
@@ -252,6 +252,42 @@ a {
   }
 }
 
+.alert {
+  background-color: var(--color-shade-1);
+  padding: 1rem 1.5rem;
+  border-radius: 1rem;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  gap: 1.5rem;
+  margin: 2rem 0;
+
+  i[data-icon] {
+    padding-top: 0.5rem;
+    font-size: var(--text-5xl);
+    filter: var(--filter-glow-primary);
+    color: var(--color-glow-primary);
+  }
+
+  strong {
+    font-size: var(--text-xl);
+    display: block;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 1rem;
+    border: solid 0.125rem var(--color-glow-primary);
+    filter: var(--filter-glow-primary);
+  }
+}
+
 pre,
 .code {
   max-width: 100%;
@@ -294,13 +330,12 @@ pre,
 }
 
 
-main.generator {
-  > div {
-    display: flex;
-    flex-direction: column;
-    gap: 1em;
-    align-items: center;
-  }
+main > div.generator {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  align-items: center;
+
 
   img {
     width: 400px;
diff --git a/styleguide/colors/index.html b/styleguide/colors/index.html
index 254f09d..720bb95 100644
--- a/styleguide/colors/index.html
+++ b/styleguide/colors/index.html
@@ -36,6 +36,15 @@
             </ul>
         </nav>
         <main>
+            <div class="alert">
+                <i data-icon="warning"></i>
+                <p>
+                    <strong>Work in progress</strong>
+                    This style guide is still under development.<br>
+                    Not all resources may be available yet, explanations and examples may be missing and things may
+                    change without notice.
+                </p>
+            </div>
             <h1>Color Guide</h1>
             <p>
 
diff --git a/styleguide/demopage/index.html b/styleguide/demopage/index.html
index 702b58e..8c65cb7 100644
--- a/styleguide/demopage/index.html
+++ b/styleguide/demopage/index.html
@@ -36,6 +36,15 @@
             </ul>
         </nav>
         <main>
+            <div class="alert">
+                <i data-icon="warning"></i>
+                <p>
+                    <strong>Work in progress</strong>
+                    This style guide is still under development.<br>
+                    Not all resources may be available yet, explanations and examples may be missing and things may
+                    change without notice.
+                </p>
+            </div>
             <h1>Testdocument</h1>
             <p>Tests for Fonts and Colorpalettes</p>
 
diff --git a/styleguide/generator/index.html b/styleguide/generator/index.html
index 19ac626..994f74a 100644
--- a/styleguide/generator/index.html
+++ b/styleguide/generator/index.html
@@ -35,8 +35,17 @@
                         data-icon="light" class="glow"></i></a></li>
             </ul>
         </nav>
-        <main class="generator">
-            <div>
+        <main>
+            <div class="alert">
+                <i data-icon="warning"></i>
+                <p>
+                    <strong>Work in progress</strong>
+                    This style guide is still under development.<br>
+                    Not all resources may be available yet, explanations and examples may be missing and things may
+                    change without notice.
+                </p>
+            </div>
+            <div class="generator">
 
                 <div>
                     <input id="file_input" type="file" name="image" accept="image/*">
diff --git a/styleguide/index.html b/styleguide/index.html
index 6e915a4..f010200 100644
--- a/styleguide/index.html
+++ b/styleguide/index.html
@@ -38,6 +38,16 @@
         <main>
             <h1>Styleguide Easterhegg 2025</h1>
 
+            <div class="alert">
+                <i data-icon="warning"></i>
+                <p>
+                    <strong>Work in progress</strong>
+                    This style guide is still under development.<br>
+                    Not all resources may be available yet, explanations and examples may be missing and things may
+                    change without notice.
+                </p>
+            </div>
+
         </main>
         <script src="assets/script/styleguide.js" type="text/javascript"></script>
     </div>
diff --git a/styleguide/typography/index.html b/styleguide/typography/index.html
index 2f7f2a4..5a00b6d 100644
--- a/styleguide/typography/index.html
+++ b/styleguide/typography/index.html
@@ -36,8 +36,18 @@
             </ul>
         </nav>
         <main>
-            <h1>Typography</h1>
 
+            <div class="alert">
+                <i data-icon="warning"></i>
+                <p>
+                    <strong>Work in progress</strong>
+                    This style guide is still under development.<br>
+                    Not all resources may be available yet, explanations and examples may be missing and things may
+                    change without notice.
+                </p>
+            </div>
+
+            <h1>Typography</h1>
             <div class="layout-column">
                 <table class="row-hover">
                     <thead>