266 lines
11 KiB
HTML
266 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<script>
|
|
const setTheme = (theme) => {
|
|
theme ??= localStorage.theme || "system";
|
|
document.getElementById("themeLight").checked = theme === "light";
|
|
document.getElementById("themeDark").checked = theme === "dark";
|
|
localStorage.theme = theme;
|
|
};
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
setTheme();
|
|
});
|
|
</script>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<link
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
href="../assets/style/styleguide.css"
|
|
/>
|
|
<title>Glow</title>
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<a href="/" id="backToWiki">
|
|
<img
|
|
src="../assets/image/logo_eventname_glow.svg"
|
|
class="header-image dark-only"
|
|
alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
|
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
|
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
|
|
/>
|
|
<img
|
|
src="../assets/image/logo_eventname_glow_off.svg"
|
|
class="header-image light-only"
|
|
alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
|
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
|
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."
|
|
/>
|
|
</a>
|
|
</header>
|
|
<div>
|
|
<nav>
|
|
<button aria-label="Open Navigation">
|
|
<i data-icon="menu-small"></i>
|
|
</button>
|
|
<ul>
|
|
<li class="link-back">
|
|
<a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
|
|
</li>
|
|
<li>
|
|
<a href="../"><i data-icon="home"></i>Overview</a>
|
|
</li>
|
|
<li>
|
|
<a href="../colors"><i data-icon="info"></i>Colors</a>
|
|
</li>
|
|
<li>
|
|
<a href="../typography"><i data-icon="info"></i>Typography</a>
|
|
</li>
|
|
<li>
|
|
<a href="../iconography"><i data-icon="info"></i>Iconography</a>
|
|
</li>
|
|
<li>
|
|
<a href="../logo"><i data-icon="info"></i>Logo</a>
|
|
</li>
|
|
<li class="active">
|
|
<a href=""><i data-icon="info"></i>Glow</a>
|
|
</li>
|
|
<li>
|
|
<a href="../demopage"><i data-icon="info"></i>Demopage</a>
|
|
</li>
|
|
<li>
|
|
<a href="../generator"><i data-icon="info"></i>Image Generator</a>
|
|
</li>
|
|
<li id="themeToggleDark" class="themeToggle">
|
|
<input
|
|
id="themeDark"
|
|
type="checkbox"
|
|
aria-label="Switch between dark and light mode"
|
|
/>
|
|
<label for="themeDark">
|
|
<i data-icon="light"></i>
|
|
</label>
|
|
</li>
|
|
<li id="themeToggleLight" class="themeToggle">
|
|
<input
|
|
id="themeLight"
|
|
type="checkbox"
|
|
aria-label="Switch between dark and light mode"
|
|
/>
|
|
<label for="themeLight">
|
|
<i data-icon="light"></i>
|
|
</label>
|
|
</li>
|
|
</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>Glow</h1>
|
|
<p><b>Very rough draft!</b></p>
|
|
<h2>Darkmode</h2>
|
|
<p>
|
|
To add the glow to something of a given height (or fontsize), here
|
|
<b>1em</b>, one needs to calculate four values:
|
|
</p>
|
|
<ul>
|
|
<li>An eighth; here 0.125em</li>
|
|
<li>A sixteenth; here 0.0625</li>
|
|
<li>A thirtysecond; here 0.03125</li>
|
|
<li>A sixtyfourth; here 0.015625</li>
|
|
</ul>
|
|
<p>
|
|
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
|
|
<code>url("filter.svg#filter-id")</code>) 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
|
|
<code>--color-primary</code> with <code>--color-secondary</code> to
|
|
use the secondary color.
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
For CSS filters one can simply use the following set of three
|
|
shadows layered atop each other:
|
|
<pre>
|
|
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));</pre
|
|
>
|
|
</li>
|
|
<li>
|
|
For SVG filters instead use the following two filters:
|
|
<pre>
|
|
<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></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>Lightmode</h2>
|
|
<p>
|
|
To add the dim glow to something of a given height (or fontsize), here
|
|
<b>1em</b>, one needs to calculate one value: a thirtysecond; here
|
|
0.03125.
|
|
</p>
|
|
<p>
|
|
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
|
|
<code>url("filter.svg#filter-id")</code>) 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.
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
For CSS filters one can simply use the following properties:
|
|
<pre>
|
|
filter: drop-shadow(0 0 0.03125em var(--color-argon-950));
|
|
color: var(--color-argon-800);</pre
|
|
>
|
|
</li>
|
|
<li>
|
|
For SVG filters instead use the following two filters:
|
|
<pre>
|
|
<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></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>
|
|
</main>
|
|
</div>
|
|
<script
|
|
src="../assets/script/styleguide.js"
|
|
type="text/javascript"
|
|
></script>
|
|
</body>
|
|
</html>
|