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>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
<script
|
||||||
|
src="../assets/script/styleguide.js"
|
||||||
|
type="text/javascript"
|
||||||
|
></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -108,7 +108,154 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1>Glow</h1>
|
<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>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
<script
|
<script
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
<link rel="stylesheet" type="text/css" href="assets/style/styleguide.css" />
|
<link rel="stylesheet" type="text/css" href="assets/style/styleguide.css" />
|
||||||
<title>Color Guide</title>
|
<title>Styleguide</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -93,8 +93,6 @@
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<main>
|
<main>
|
||||||
<h1>Styleguide Easterhegg 2025</h1>
|
|
||||||
|
|
||||||
<div class="alert">
|
<div class="alert">
|
||||||
<i data-icon="warning"></i>
|
<i data-icon="warning"></i>
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -104,6 +102,62 @@
|
||||||
may be missing and things may change without notice.
|
may be missing and things may change without notice.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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>
|
</main>
|
||||||
<script src="assets/script/styleguide.js" type="text/javascript"></script>
|
<script src="assets/script/styleguide.js" type="text/javascript"></script>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue