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

46
logo/svg2png_converter/index.html
View file

@ -1,29 +1,47 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" <meta
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> name="viewport"
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 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> <title>Document</title>
</head> </head>
<body style="height: 100vh;"> <body style="height: 100vh">
<div
<div style="display: flex; flex-direction: column; gap: 1em; align-items: center"> style="
display: flex;
flex-direction: column;
gap: 1em;
align-items: center;
"
>
<div> <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> </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> <button id="download" disabled>Download Result</button>
Download Result
</button>
</div> </div>
<script src="converter.js" type="text/javascript"></script> <script src="converter.js" type="text/javascript"></script>
</body> </body>
</html> </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 background, we designed a few doodles which can be used to fill some
space. These consist of an icon (preferably of something that can space. These consist of an icon (preferably of something that can
move) and a dashed line behind it, which shows the path travelled. The 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 has rounded ends and a line-to-space ratio of 1:3 (the lines will
line thickness. Here are some examples: appear longer due to the line caps), where 1 is the line thickness.
Here are some examples:
</p> </p>
<div style="color: var(--color-text-4)"> <div style="color: var(--color-text-4)">
<svg <svg

49
styleguide/glow/index.html
View file

@ -121,16 +121,16 @@
<p> <p>
The first three values are used for drop-shadows, the last for an The first three values are used for drop-shadows, the last for an
inset shadow. Sadly, the latter is currently not possible using plain 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 CSS filters, which is why it requires the use of an SVG filter
support for external SVG filters (using (further information: see <a href="#notes">Notes</a>).
<code>url("filter.svg#filter-id")</code>) is still flaky, we instead </p>
opted to have two versions of each glow. One using SVG filters for <p>
use-cases which support it (like the logo), and one using CSS filters Below you'll find implementation examples using the primary color CSS
(as for this page's headings). Below you'll find implementation variable for the glow color as specified in our (S)CSS stylesheets. In
examples using the primary color CSS variable for the glow color as the CSS example simply replace
specified in our (S)CSS stylesheets. Simply replace
<code>--color-primary</code> with <code>--color-secondary</code> to <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> </p>
<ul> <ul>
<li> <li>
@ -205,17 +205,17 @@
</p> </p>
<p> <p>
The value is needed for both drop shadows and inset shadows. Sadly, The value is needed for both drop shadows and inset shadows. Sadly,
the latter is currently not possible using plain CSS filters. Which is 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 why it requires the use of an SVG filter (further information: see
filters (using <a href="#notes">Notes</a>).
<code>url("filter.svg#filter-id")</code>) is still flaky, we instead </p>
opted to have to versions of each glow. One using SVG filters for <p>
use-cases which support it (like the logo), and one using CSS filters Below you'll find implementation examples using the primary color CSS
(as for this page's headings). Below you'll find implementation variable for the glow color as specified in our (S)CSS stylesheets. In
examples. They specify tones of the primary color using their the CSS example simply replace each occurrence of "primary" with
respective CSS variable in our stylesheet. You can simply replace each "secondary" and "argon" with "krypton" to get a glow of the secondary
occurence of "primary" with "secondary" and "argon" with "krypton" to color. In the SVG example, we don't use CSS variables, because not
get a glow of the secondary color. every software understands them.
</p> </p>
<ul> <ul>
<li> <li>
@ -264,7 +264,14 @@
</li> </li>
</ul> </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> <p>
In the SVG files we use two separate filters, because when combining 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 shadows with the primary and the secondary color as can be seen in the