EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Styleguide Update 1
All checks were successful
/ build (push) Successful in 12s
Details

Browse source
This commit is contained in:
kritzl 2025-04-05 23:50:54 +02:00
commit 9e177678ac
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
28 changed files with 699 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

127
styleguide/glow/index.html
View file

@ -69,6 +69,9 @@
<li class="active">
<a href=""><i data-icon="lightbulb"></i>Glow</a>
</li>
<li>
<a href="../doodles"><i data-icon="looping"></i>Doodles</a>
</li>
<li>
<a href="../demopage"><i data-icon="code"></i>Demopage</a>
</li>
@ -77,6 +80,9 @@
><i data-icon="settings"></i>Image Generator</a
>
</li>
<li>
<a href="../changelog"><i data-icon="history"></i>Changelog</a>
</li>
<li id="themeToggleDark" class="themeToggle">
<input
id="themeDark"
@ -101,15 +107,6 @@
</nav>
<main>
<h1>Glow</h1>
<div class="alert">
<i data-icon="warning"></i>
<p>
<strong>Work in progress</strong>
This page 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>
<h2>Darkmode</h2>
<p>
To add the glow to something of a given height (or fontsize), here
@ -147,22 +144,42 @@
<li>
For SVG filters instead use the following two filters:
<pre><code>
<span class="comment">&lt;!-- this code assumes a font-size of 520 --&gt;</span>
<span class="neutral">&lt;filter</span> <span class="identifier">x</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">y</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">width</span><span class="neutral">=</span><span class="string">"400%"</span> <span class="identifier">height</span><span class="neutral">=</span><span class="string">"400%"</span>
<span class="identifier">style</span><span class="neutral">=</span><span class="string">"color-interpolation-filters:sRGB;"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textBlurPrimary"</span><span class="neutral">&gt;</span>
<span class="neutral">&lt;feDropShadow</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceGraphic"</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"16.25"</span>
<span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-white);"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feDropShadow</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"32.5"</span>
<span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-primary);"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_1"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feDropShadow</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"drop_shadow_1"</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"65"</span>
<span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-primary);"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_2"</span> <span class="neutral">/&gt;</span>
<span class="identifier">color-interpolation-filters</span><span class="neutral">=</span><span class="string">"sRGB"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textBlurPrimary"</span><span class="neutral"> &gt;</span>
<span class="neutral">&lt;feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceGraphic"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"16.25"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feOffset</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#ffffff"</span> <span class="identifier">flood-opacity</span><span class="neutral">=</span><span class="string">"1"</span> <span class="neutral">/&gt;</span> <span class="comment">&lt;!-- color-white --&gt;</span>
<span class="neutral">&lt;feComposite</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feMerge</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="neutral">&gt;</span>
<span class="neutral">&lt;feMergeNode/&gt;</span>
<span class="neutral">&lt;feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceGraphic"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;/feMerge&gt;</span>
<span class="neutral">&lt;feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"32.5"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feOffset</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#c6257d"</span> <span class="identifier">flood-opacity</span><span class="neutral">=</span><span class="string">"1"</span> <span class="neutral">/&gt;</span> <span class="comment">&lt;!-- color-primary --&gt;</span>
<span class="neutral">&lt;feComposite</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feMerge</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_1"</span> <span class="neutral">&gt;</span>
<span class="neutral">&lt;feMergeNode/&gt;</span>
<span class="neutral">&lt;feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;/feMerge&gt;</span>
<span class="neutral">&lt;feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"drop_shadow_1"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"65"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feOffset</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#c6257d"</span> <span class="identifier">flood-opacity</span><span class="neutral">=</span><span class="string">"1"</span> <span class="neutral">/&gt;</span> <span class="comment">&lt;!-- color-primary --&gt;</span>
<span class="neutral">&lt;feComposite</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feMerge</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_2"</span> <span class="neutral">&gt;</span>
<span class="neutral">&lt;feMergeNode/&gt;</span>
<span class="neutral">&lt;feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"drop_shadow_1"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;/feMerge&gt;</span>
<span class="neutral">&lt;/filter&gt;</span>
<span class="neutral">&lt;filter</span> <span class="identifier">x</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">y</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">width</span><span class="neutral">=</span><span class="string">"400%"</span> <span class="identifier">height</span><span class="neutral">=</span><span class="string">"400%"</span>
<span class="identifier">style</span><span class="neutral">=</span><span class="string">"color-interpolation-filters:sRGB;"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textInsetPrimary"</span><span class="neutral">&gt;</span>
<span class="neutral">&lt;feFlood</span> <span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-white);"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood-white"</span>
<span class="neutral">/&gt;</span>
<span class="neutral">&lt;feFlood</span> <span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-primary);"</span>
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood-glow-color"</span> <span class="neutral">/&gt;</span>
<span class="identifier">color-interpolation-filters</span><span class="neutral">=</span><span class="string">"sRGB"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textInsetPrimary"</span><span class="neutral"> &gt;</span>
<span class="neutral">&lt;feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#ffffff"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood-white"</span> <span class="neutral">/&gt;</span> <span class="comment">&lt;!-- color-white --&gt;</span>
<span class="neutral">&lt;feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#c6257d"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood-glow-color"</span> <span class="neutral">/&gt;</span> <span class="comment">&lt;!-- color-primary --&gt;</span>
<span class="neutral">&lt;feComposite</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"flood-glow-color"</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span>
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"flooded"</span> <span class="neutral">/&gt;</span>
@ -177,13 +194,6 @@
<span class="neutral">&lt;feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"inset_shadow"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;/feMerge&gt;</span>
<span class="neutral">&lt;/filter&gt;</span></code></pre>
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
<code>style="mix-blend-mode: screen;"</code> 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.
</li>
</ul>
@ -216,22 +226,31 @@
<li>
For SVG filters instead use the following two filters:
<pre><code>
<span class="comment">&lt;!-- this code assumes a font-size of 520 --&gt;</span>
<span class="neutral">&lt;filter</span> <span class="identifier">x</span><span class="neutral">=</span><span class="string">"-25%"</span> <span class="identifier">y</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">width</span><span class="neutral">=</span><span class="string">"150%"</span> <span class="identifier">height</span><span class="neutral">=</span><span class="string">"400%"</span>
<span class="identifier">style</span><span class="neutral">=</span><span class="string">"color-interpolation-filters:sRGB;"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textBlurPrimary"</span><span class="neutral">&gt;</span>
<span class="neutral">&lt;feDropShadow</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceGraphic"</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"16.25"</span>
<span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-argon-950);"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="neutral">/&gt;</span>
<span class="identifier">color-interpolation-filters</span><span class="neutral">=</span><span class="string">"sRGB"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textBlurPrimary"</span><span class="neutral"> &gt;</span>
<span class="neutral">&lt;feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceGraphic"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"16.25"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feOffset</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#3f012d"</span> <span class="identifier">flood-opacity</span><span class="neutral">=</span><span class="string">"1"</span> <span class="neutral">/&gt;</span> <span class="comment">&lt;!-- color-argon-950 --&gt;</span>
<span class="neutral">&lt;feComposite</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feMerge</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="neutral">&gt;</span>
<span class="neutral">&lt;feMergeNode/&gt;</span>
<span class="neutral">&lt;feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceGraphic"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;/feMerge&gt;</span>
<span class="neutral">&lt;/filter&gt;</span>
<span class="neutral">&lt;filter</span> <span class="identifier">x</span><span class="neutral">=</span><span class="string">"-25%"</span> <span class="identifier">y</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">width</span><span class="neutral">=</span><span class="string">"150%"</span> <span class="identifier">height</span><span class="neutral">=</span><span class="string">"400%"</span>
<span class="identifier">style</span><span class="neutral">=</span><span class="string">"color-interpolation-filters:sRGB;"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textInsetPrimary"</span><span class="neutral">&gt;</span>
<span class="neutral">&lt;feFlood</span> <span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-primary);"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood_brighter"</span>
<span class="neutral">/&gt;</span>
<span class="neutral">&lt;feFlood</span> <span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-argon-800);"</span>
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood_darker"</span> <span class="neutral">/&gt;</span>
<span class="identifier">color-interpolation-filters</span><span class="neutral">=</span><span class="string">"sRGB"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textInsetPrimary"</span><span class="neutral"> &gt;</span>
<span class="neutral">&lt;feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#c6257d"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood_brighter"</span> <span class="neutral">/&gt;</span> <span class="comment">&lt;!-- color-primary --&gt;</span>
<span class="neutral">&lt;feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#3f012d"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood_darker"</span> <span class="neutral">/&gt;</span> <span class="comment">&lt;!-- color-argon-950 --&gt;</span>
<span class="neutral">&lt;feComposite</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"flood_darker"</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span>
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"flooded"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"8.125"</span>
<span class="neutral">&lt;feComponentTransfer</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"reduced_alpha"</span> <span class="neutral">&gt;</span>
<span class="neutral">&lt;feFuncA</span> <span class="identifier">type</span><span class="neutral">=</span><span class="string">"table"</span> <span class="identifier">tableValues</span><span class="neutral">=</span><span class="string">"0 0.5"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;/feComponentTransfer&gt;</span>
<span class="neutral">&lt;feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"reduced_alpha"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"16.25"</span>
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_drop_shadow"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feComposite</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"flood_brighter"</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"inset_drop_shadow"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span>
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_drop_shadow_brighter"</span> <span class="neutral">/&gt;</span>
@ -242,15 +261,35 @@
<span class="neutral">&lt;feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"inset_shadow"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;/feMerge&gt;</span>
<span class="neutral">&lt;/filter&gt;</span></code></pre>
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
<code>style="mix-blend-mode: screen;"</code> 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.
</li>
</ul>
<h2>Notes</h2>
<p>
In the SVG files we use two separate filters, 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
<code>style="mix-blend-mode: screen;"</code> and put them in an
isolated group, so that the blend mode does not interfere with the
background:<br />
<code>&lt;g style="isolation: isolate;"&gt;</code><br />
Then layer all inset-shadow filters on top of that - otherwise, one
path's drop shadow might overlay another path's inset-shadow. Have a
look at the
<a
href="https://git.hamburg.ccc.de/EH22/design-public/src/commit/c7eaf8b3bc7e9c6b462aada7685ed83bf36b8978/logo/logo_eventname_glow.svg?display=source#L167"
>logo's source</a
>
for an example.
</p>
<p>
Since inkscape, for example, cannot handle the ‘feDropShadow’ filter
yet, we use it in its long form as a combination of 5 other filters,
as described in the
<a href="https://www.w3.org/TR/filter-effects-1/#feDropShadowElement"
>SVG Filter Effects Module Level 1 (Working Draft)</a
>.
</p>
</main>
</div>
<script