Merge branch 'main' of git.hamburg.ccc.de:EH22/design
All checks were successful
/ build (push) Successful in 12s
All checks were successful
/ build (push) Successful in 12s
This commit is contained in:
commit
09e4237e3c
SSH key fingerprint:
SHA256:7kmBUkMCVUCN9z9MyGuBan8hifDCBaiG1RonGxdCB3A
3 changed files with 209 additions and 4 deletions
|
|
@ -646,5 +646,9 @@
|
|||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script
|
||||
src="../assets/script/styleguide.js"
|
||||
type="text/javascript"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -108,7 +108,154 @@
|
|||
</div>
|
||||
|
||||
<h1>Glow</h1>
|
||||
<!-- TODO -->
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<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>Color Guide</title>
|
||||
<title>Styleguide</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -93,8 +93,6 @@
|
|||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<h1>Styleguide Easterhegg 2025</h1>
|
||||
|
||||
<div class="alert">
|
||||
<i data-icon="warning"></i>
|
||||
<p>
|
||||
|
|
@ -104,6 +102,62 @@
|
|||
may be missing and things may change without notice.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h1>Styleguide Easterhegg 2025</h1>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<h2>Design Idea</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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
|
||||
<a href="demopage/"
|
||||
>the demopage containing a preview of most things</a
|
||||
>. Most pages also include more detailed explanations for our design
|
||||
decisions.
|
||||
</p>
|
||||
|
||||
<h2>Credit and Disclaimer</h2>
|
||||
<p>
|
||||
We (<a href="https://https://kzl.sh/">kritz</a>,
|
||||
<a href="https://lyx.sh/">traumweh</a> &
|
||||
<a href="https://chaos.social/@schrottkatze">Schrottkatze</a>) 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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</main>
|
||||
<script src="assets/script/styleguide.js" type="text/javascript"></script>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue