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

60
logo/svg2png_converter/index.html
View file

@ -1,29 +1,47 @@
<!doctype html> <!doctype html>
<html lang="en"> <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> <body style="height: 100vh">
<meta charset="UTF-8"> <div
<meta name="viewport" style="
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> display: flex;
<meta http-equiv="X-UA-Compatible" content="ie=edge"> flex-direction: column;
<title>Document</title> gap: 1em;
</head> 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"> <button id="download" disabled>Download Result</button>
<div>
<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" /> <script src="converter.js" type="text/javascript"></script>
</body>
<button id="download" disabled>
Download Result
</button>
</div>
<script src="converter.js" type="text/javascript"></script>
</body>
</html> </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> <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