From ad46862f4caca7eda34f70e10aa8d56449afa0e8 Mon Sep 17 00:00:00 2001 From: lilith Date: Tue, 4 Mar 2025 11:29:16 +0100 Subject: [PATCH 1/4] Fix burger menu (missing script) --- styleguide/colors/index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/styleguide/colors/index.html b/styleguide/colors/index.html index e7ba2fc..765fcba 100644 --- a/styleguide/colors/index.html +++ b/styleguide/colors/index.html @@ -646,5 +646,9 @@ + From 1bcd5cd9f601ed89c54f43462e29dc7c034da5d6 Mon Sep 17 00:00:00 2001 From: lilith Date: Tue, 4 Mar 2025 14:30:23 +0100 Subject: [PATCH 2/4] Fix copy-paste mistake --- styleguide/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styleguide/index.html b/styleguide/index.html index 431e402..5a7781a 100644 --- a/styleguide/index.html +++ b/styleguide/index.html @@ -15,7 +15,7 @@ - Color Guide + Styleguide From 939e3b58b4a65a67736ddb2f64c49ac8e6c489b2 Mon Sep 17 00:00:00 2001 From: lilith Date: Tue, 4 Mar 2025 15:09:10 +0100 Subject: [PATCH 3/4] Overview: First draft --- styleguide/index.html | 58 +++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 56 insertions(+), 2 deletions(-) diff --git a/styleguide/index.html b/styleguide/index.html index 5a7781a..b1887f6 100644 --- a/styleguide/index.html +++ b/styleguide/index.html @@ -93,8 +93,6 @@
-

Styleguide Easterhegg 2025

-

@@ -104,6 +102,62 @@ may be missing and things may change without notice.

+ +

Styleguide Easterhegg 2025

+

+ This page and subpages are meant to guide you through our design. + While we do propose some rules, we generally don't want to restrict + you to much in creating something. So for most design properties, if + one doesn't work for your use-case, then try and adapt that property + to make it work for you. This style guide is supposed to help you and + not prevent you from being creative. +

+ +

Design Idea

+

+ The design aims to imitate the style of 80s' retro and neon signs. + During the design process, we interenally used keywords like "Tokyo + Nightcity", "Neon", "Glitchy" and "Tron" to describe our ideas, and we + hope this carries over. +

+

+ We primarily focused on the dark theme as the primary design + characteristics are the neon-glow and neon-sign-font which you can see + in the headings, title image and navigation elements. But we did also + create a light mode to make content more accesible and available for + more people. But because the neon-effect doesn't really work on a + bright background out of the box, we tried to instead convey the look + of turned off neon signs or neon signs under daylight. +

+

+ We recommend reading through all sections linked to in the site's + navigation, but if you just want a quick overview of design elements, + you can focus on + the demopage containing a preview of most things. Most pages also include more detailed explanations for our design + decisions. +

+ +

Credit and Disclaimer

+

+ We (kritz, + traumweh & + Schrottkatze) created + this design and guide through many months of hard work. And + considering the current hype reguarding "AI" (LLMs & GenAI), we want + to make it clear, that we didn't use any such tooling at any point in + the design process. All work was done by living beings. +

+

+ This is also why we would kindly ask you to consider not to use LLMs + or GenAI yourself when creating something for this event. These tools + are built on theft and actively harm all creative industries. Not to + mention how devastating they are for our planet. Instead, maybe take + this as motivation for you to learn how to achieve the desired thing + yourself, or connect with the community. There are many artists who'd + be happy to help you create something incredible. +

From 7c5aad7e21a120a056ddd3b685f016d7f03a5aaa Mon Sep 17 00:00:00 2001 From: lilith Date: Tue, 4 Mar 2025 16:47:52 +0100 Subject: [PATCH 4/4] Rough draft: glows --- styleguide/glow/index.html | 149 ++++++++++++++++++++++++++++++++++++- 1 file changed, 148 insertions(+), 1 deletion(-) diff --git a/styleguide/glow/index.html b/styleguide/glow/index.html index e987a3a..652c52e 100644 --- a/styleguide/glow/index.html +++ b/styleguide/glow/index.html @@ -108,7 +108,154 @@

Glow

- +

Very rough draft!

+

Darkmode

+

+ To add the glow to something of a given height (or fontsize), here + 1em, one needs to calculate four values: +

+
    +
  • An eighth; here 0.125em
    • +
  • A sixteenth; here 0.0625
    • +
  • A thirtysecond; here 0.03125
    • +
  • A sixtyfourth; here 0.015625
    • +
+

+ The first three values are used for drop-shadows, the last for an + inset shadow. Sadly, the latter is currently not possible using plain + CSS filters. Which is why it requires the use of an SVG filter. But + support for external SVG filters (using + url("filter.svg#filter-id")) is still flaky, we instead + opted to have to versions of each glow. One using SVG filters for + use-cases which support it (like the logo), and one using CSS filters + (as for this page's headings). Below you'll find implementation + examples using the primary color CSS variable for the glow color as + specified in our (S)CSS stylesheets. Simply replace + --color-primary with --color-secondary to + use the secondary color. +

+
    +
  • + For CSS filters one can simply use the following set of three + shadows layered atop each other: + 
    +filter:
+  drop-shadow(0 0 0.03125em var(--color-white))
+  drop-shadow(0 0 0.0625em var(--color-primary))
+  drop-shadow(0 0 0.125em var(--color-primary));
    +
    • +
  • + For SVG filters instead use the following two filters: + 
    +<filter x="-150%" y="-150%" width="400%" height="400%"
+   style="color-interpolation-filters:sRGB;" id="textBlurPrimary">
+  <feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="16.25"
+     style="flood-color: var(--color-white);" result="drop_shadow_0" />
+  <feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="32.5"
+     style="flood-color: var(--color-primary);" result="drop_shadow_1" />
+  <feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="65"
+     style="flood-color: var(--color-primary);" result="drop_shadow_2" />
+</filter>
+
+<filter x="-150%" y="-150%" width="400%" height="400%"
+   style="color-interpolation-filters:sRGB;" id="textInsetPrimary">
+  <feFlood style="flood-color: var(--color-white);" result="flood-white"
+     />
+  <feFlood style="flood-color: var(--color-primary);"
+     result="flood-glow-color" />
+
+  <feComposite in="flood-glow-color" in2="SourceAlpha" operator="in"
+     result="flooded" />
+  <feGaussianBlur in="SourceAlpha" stdDeviation="8.125"
+     result="inset_drop_shadow" />
+  <feComposite in="flood-white" in2="inset_drop_shadow" operator="in"
+     result="inset_drop_shadow_white" />
+  <feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in"
+     result="inset_shadow" />
+  <feMerge result="final">
+    <feMergeNode in="flooded" />
+    <feMergeNode in="inset_shadow" />
+  </feMerge>
+</filter>
    + We use two separate filters here, because when combining shadows + with the primary and the secondary color as can be seen in the logo, + it is necessary to first add all drop-shadows to all paths using + style="mix-blend-mode: screen;" and then layer all + inset-shadow filters ontop of that. Otherwise one path's drop-shadow + could layer over another path's inset-shadow. Have a look at the + logo's source for an example. +
    • +
+ +

Lightmode

+

+ To add the dim glow to something of a given height (or fontsize), here + 1em, one needs to calculate one value: a thirtysecond; here + 0.03125. +

+

+ The value is needed for botha drop shadow as well as an inset shadow. + Sadly, the latter is currently not possible using plain CSS filters. + Which is why it requires the use of an SVG filter. But support for + external SVG filters (using + url("filter.svg#filter-id")) is still flaky, we instead + opted to have to versions of each glow. One using SVG filters for + use-cases which support it (like the logo), and one using CSS filters + (as for this page's headings). Below you'll find implementation + examples. They specify tones of the primary color using their + respective CSS variable in our stylesheet. You can simply replace each + occurence of "primary" with "secondary" and "argon" with "krypton" to + get a glow of the secondary color. +

+
    +
  • + For CSS filters one can simply use the following properties: + 
    +filter: drop-shadow(0 0 0.03125em var(--color-argon-950));
+color: var(--color-argon-800);
    +
    • +
  • + For SVG filters instead use the following two filters: + 
    +<filter x="-25%" y="-150%" width="150%" height="400%"
+   style="color-interpolation-filters:sRGB;" id="textBlurPrimary">
+  <feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="16.25"
+     style="flood-color: var(--color-argon-950);" result="drop_shadow_0" />
+</filter>
+
+<filter x="-25%" y="-150%" width="150%" height="400%"
+   style="color-interpolation-filters:sRGB;" id="textInsetPrimary">
+  <feFlood style="flood-color: var(--color-primary);" result="flood_brighter"
+     />
+  <feFlood style="flood-color: var(--color-argon-800);"
+     result="flood_darker" />
+
+  <feComposite in="flood_darker" in2="SourceAlpha" operator="in"
+     result="flooded" />
+  <feGaussianBlur in="SourceAlpha" stdDeviation="8.125"
+     result="inset_drop_shadow" />
+  <feComposite in="flood_brighter" in2="inset_drop_shadow" operator="in"
+     result="inset_drop_shadow_brighter" />
+  <feComposite in="inset_drop_shadow_brighter" in2="SourceAlpha" operator="in"
+     result="inset_shadow" />
+  <feMerge result="final">
+    <feMergeNode in="flooded" />
+    <feMergeNode in="inset_shadow" />
+  </feMerge>
+</filter>
    + We use two separate filters here, because when combining shadows + with the primary and the secondary color as can be seen in the logo, + it is necessary to first add all drop-shadows to all paths using + style="mix-blend-mode: screen;" and then layer all + inset-shadow filters ontop of that. Otherwise one path's drop-shadow + could layer over another path's inset-shadow. Have a look at the + logo's source for an example. +
    • +