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

52
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">
<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>
<body style="height: 100vh;">
<div style="display: flex; flex-direction: column; gap: 1em; align-items: center">
<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" />
<input
id="file_input"
type="file"
name="image"
accept="image/svg+xml"
/>
</div>
<img src="" style="width: 400px; height: 300px; border: solid 4px darkblue; object-fit: contain" id="preview" />
<img
src=""
style="
width: 400px;
height: 300px;
border: solid 4px darkblue;
object-fit: contain;
"
id="preview"
/>
<button id="download" disabled>
Download Result
</button>
<button id="download" disabled>Download Result</button>
</div>
<script src="converter.js" type="text/javascript"></script>
</body>
</body>
</html>

5
styleguide/doodles/index.html
View file

@ -112,8 +112,9 @@
background, we designed a few doodles which can be used to fill some
space. These consist of an icon (preferably of something that can
move) and a dashed line behind it, which shows the path travelled. The
line has rounded ends and a line-to-space ratio of 1:3 (the lines will appear longer due to the line caps), where 1 is the
line thickness. Here are some examples:
line has rounded ends and a line-to-space ratio of 1:3 (the lines will
appear longer due to the line caps), where 1 is the line thickness.
Here are some examples:
</p>
<div style="color: var(--color-text-4)">
<svg

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