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

fix text on glow page; format html files
All checks were successful
/ build (push) Successful in 13s
Details

Browse source
This commit is contained in:
kritzl 2025-04-08 12:20:00 +02:00
commit 507f9efb60
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
3 changed files with 131 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

62
logo/svg2png_converter/index.html
View file

@ -1,29 +1,47 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body style="height: 100vh">
<div
style="
display: flex;
flex-direction: column;
gap: 1em;
align-items: center;
"
>
<div>
<input
id="file_input"
type="file"
name="image"
accept="image/svg+xml"
/>
</div>
<body style="height: 100vh;">
<img
src=""
style="
width: 400px;
height: 300px;
border: solid 4px darkblue;
object-fit: contain;
"
id="preview"
/>
<div style="display: flex; flex-direction: column; gap: 1em; align-items: center">
<div>
<input id="file_input" type="file" name="image" accept="image/svg+xml" />
<button id="download" disabled>Download Result</button>
</div>
<img src="" style="width: 400px; height: 300px; border: solid 4px darkblue; object-fit: contain" id="preview" />
<button id="download" disabled>
Download Result
</button>
</div>
<script src="converter.js" type="text/javascript"></script>
</body>
</html>
<script src="converter.js" type="text/javascript"></script>
</body>
</html>

125
styleguide/doodles/index.html
View file

File diff suppressed because one or more lines are too long

49
styleguide/glow/index.html
View file

@ -121,16 +121,16 @@
<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 two 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
CSS filters, which is why it requires the use of an SVG filter
(further information: see <a href="#notes">Notes</a>).
</p>
<p>
Below you'll find implementation examples using the primary color CSS
variable for the glow color as specified in our (S)CSS stylesheets. In
the CSS example simply replace
<code>--color-primary</code> with <code>--color-secondary</code> to
use the secondary color.
use the secondary color. In the SVG example, we don't use CSS
variables, because not every software understands them.
</p>
<ul>
<li>
@ -205,17 +205,17 @@
</p>
<p>
The value is needed for both drop shadows and inset shadows. 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.
the latter is currently not possible using plain CSS filters, which is
why it requires the use of an SVG filter (further information: see
<a href="#notes">Notes</a>).
</p>
<p>
Below you'll find implementation examples using the primary color CSS
variable for the glow color as specified in our (S)CSS stylesheets. In
the CSS example simply replace each occurrence of "primary" with
"secondary" and "argon" with "krypton" to get a glow of the secondary
color. In the SVG example, we don't use CSS variables, because not
every software understands them.
</p>
<ul>
<li>
@ -264,7 +264,14 @@
</li>
</ul>
<h2>Notes</h2>
<h2 id="notes">Notes</h2>
<p>
Because support for external SVG filters (using
<code>url("filter.svg#filter-id")</code>) is still flaky, we instead
opted to have two 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).
</p>
<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