styleguide: Add WIP message

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)
 }

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');
+  }
 }

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));
 }

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"}
+{"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"}

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 {
+main > div.generator {
-  > div {
+  display: flex;
-    display: flex;
+  flex-direction: column;
-    flex-direction: column;
+  gap: 1em;
-    gap: 1em;
+  align-items: center;
-    align-items: center;
+
-  }
 
   img {
     width: 400px;

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>
 

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>
 

styleguide/generator/index.html

@@ -35,8 +35,17 @@
                         data-icon="light" class="glow"></i></a></li>
             </ul>
         </nav>
-        <main class="generator">
+        <main>
-            <div>
+            <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/*">

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>

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>